UI ve UX tasarımı

Kullanıcı arayüzü (UI), menüler, mağaza düzenleri, baş üstü ekranlar (HUD'lar) ve oyuncuların etkileşimde bulunduğu diğer arayüzleri üretmek için sanatsal görsel tasarımı iletişim odaklı bilgi tasarımı ile birleştirir. Kullanıcı deneyimi (UX), oyuncuların oyunla nasıl etkileşimde bulunduğu, seçimlerini nasıl ilettiği ve bir seçimden diğerine nasıl geçiş yaptığı ile ilgilidir. UI ve UX genellikle işbirliği içinde çalışsa da, UX interaktivite ve oyuncunun deneyimi üzerine daha fazla odaklanır, UI’nin görsel ve bilgisel tasarımından ziyade.

UI

UI, oyuncuların kararlar vermesine ve oyunu gezinmesine olanak tanıyan canlanma puanları, görev hedefleri ve fiyatlar gibi hayati bilgileri paylaşır. Burası genellikle oyunların oyuncularla iletişim kurmasının ana yolu olduğundan, UI oyuncuların deneyimi için kritik öneme sahiptir. Kötü tasarlanmış bir UI, oyuncuları kafa karışıklığına ve hayal kırıklığına sürükleyebilir ve düşük tutma eğilimi yaratabilirken, ustalıkla tasarlanmış bir UI, katılım ve paraya dönüştürmeye katkıda bulunabilir. Etkili bir şekilde tasarlanmış bir UI aşağıdaki prensipleri uygulamalıdır:

• Önceliklendirme
• Dikkat
• Görsel Dil
• Gelenekler
• Tutarlılık

Önceliklendirme

En önemli bilgilerin ilk olarak paylaşılması, Bilgi Hiyerarşisi olarak bilinir. Bu, oyuncuların sık sık sınırlı bir bilgi setine dayanarak anlık kararlar aldığı oyunlarda özellikle önemlidir. UI'yi önceliklendirirken, oyuncunun deneyimi için neyin önemli veya en alakalı olduğunu belirleyin ve bunun erişilebilir ve kolayca bulunabilir olmasını sağlayın. Bu soruları göz önünde bulundurun:

• Oyuncu şu anda ne yapıyor?
• Onların bilmesi veya erişmesi gereken en önemli şey nedir?
• Hangi seçimleri yapmak zorundalar?
• Bu seçimleri yapabilmek için hangi bilgilere ihtiyaçları var?
• Bu seçimlere ne sıklıkla katılacaklar?

Önemli bilgiler ve özellikler, oyuncunun üstlendiği rol, 3D dünyasındaki konumu ve tuttukları eşyalar gibi faktörlere bağlı olarak değişir. UI, yalnızca bağlam açısından önemli olanı sunacak şekilde tasarlanabilir – her bağlamda neyin yararlı olduğuna bağlı olarak butonları ve bilgileri değiştirebilir. Bu, oyuncuların ihtiyaç duydukları her şeye sahip olmalarını sağlarken, ihtiyaç duymadıkları her şeyin karmaşasından kaçınmalarını sağlar.

Örnekler

Alakasız unsurlar kafa karışıklığına ve dikkat dağınıklığına neden olabilir. Spellbound RPG temiz, minimalist bir UI'ye sahiptir, bu da mobil arayüzler için özellikle kritik bir noktadır çünkü küçük ekranlar, fazla buton, ekran ve metinle kolayca aşırı yüklenebilir.

Super Striker League içinde, oyuncu etkileşimleri topa sahip olup olmamalarına göre değişir. Top yokken, oyuncular kontrolü yeniden kazanmak için Sprint ve Tackle yapabilirler. Topa sahip olduklarında, butonlar Deke ve Pass'a dönüşür, bu da oyuncuların rakiplerden kaçmalarını ve topu paslamalarını sağlar. Bu butonları değiştirmek, UI'nın bağlam açısından yararlı kalmasını sağlarken, gereksiz dikkat dağıtıcı unsurlardan kaçınır.

The Survival Game, içinde oyuncular sağlık ve açlık durumlarını bilmeli ve haritalarına, envanterlerine ve aletlerine hızlı bir şekilde erişebilmelidir. Bu bilgiler, hayatta kalmak için karar vermelerine ve eylemlerini önceliklendirmelerine olanak tanır. Eğer bu bilgiler veya araçlar zor bulunuyorsa veya eksikse, hayatta kalmak daha zor ve gereksiz yere sinir bozucu hale gelir.

Dikkat

Minimalist, öncelikli ve bağlamlandırılmış bir UI olmasına rağmen, oyuncuların ihtiyaç duydukları şeyleri bulmalarında hala yardıma ihtiyaç duyabilirler. UI tasarımcıları, oyuncuların dikkatini çekmek ve yönlendirmek için çeşitli görsel araçlar kullanabilirler, örneğin:

• Renk: Canlı renkler, soluk olanlardan daha fazla dikkat çeker. Önemli metin, butonlar ve diğer unsurlar için canlı tonlar kullanın ve daha az anlamlı olanlar için soluk tonlar kullanın. Bu kontrast, görünürlüğü artırır ve dikkat dağıtmayı azaltır.
• Boyut: Daha büyük unsurlar daha belirgin olup, daha küçük olanlara göre önemli olarak algılanır.
• Alan: Geniş negatif alan veya yastıklama ile çevrelenmiş unsurlar göz alıcıdır.
• Yakınlık: Gruplanmış unsurlar bir bağ olduğuna işaret eder. İlgili özellikleri ve eşyaları yan yana yerleştirerek, oyuncular bunların ilişkisini anlayabilir ve daha kolay bulabilirler.
• Hareket: Animasyonlu unsurlar dikkat çeker. Hafif bir hareket, bir unsuru statik olanların ortasında öne çıkarabilir. Parçacık efektleri, hareket eden butonlar ve yönlendirme için genellikle eğitimlerde kullanılır.

Bu araçların kullanımı konusunda denge önemlidir. Parlak, hareket eden unsurların aşırı kullanımı, oyuncuları rahatsız ve kafa karıştırıcı hale getirebilir.

Örnekler

Jailbreak'in sezon geçiş UI'sinde, sezon geçişine özel simgelerin altında altın sarısı bir şerit var, bu da premium ödüllerin dikkat çekmesini sağlıyor ve bunları ücretsiz olanlardan görsel olarak ayırıyor.

Dragon Adventures, içinde, en yüksek değerli madeni para paketine görsel öncelik verilmektedir; boyutu artırılarak ve daha fazla yastıklama ile ayrılarak, daha küçük paketlerden ayırt edilmiştir.

Tower Defense Simulator içinde, boyut ve yakınlık kullanılarak Günlük Kule Kılıfları, Günlük Kutu'lardan görsel olarak gruplanmış ve ayırt edilmiştir.

Görsel dil

Oyuncuların ekrandaki en önemli unsurlara dikkatini yönlendirmekle kalmayıp, aynı zamanda UI tasarımcıları, oyuncuların gördüklerini anlamalarına yardımcı olacak bir görsel dil geliştirmektedir. Görsel dil, bir unsurun amacı, durumu, ilişkileri ve alaka düzeyi hakkında bir bakışta bilgi sağlayan bir dizi bilinçli ve tutarlı tasarım seçeneğidir. Dil, şekil, renk ve stil gibi araçlardan oluşturulmaktadır. Görsel dilin bazı kullanımları şunlardır:

Simge

Simgeler, anlam ve ilişkiler iletmek için bir görsel kimlik kullanabilir. Örneğin, belirli istatistiklerle ilgili simgeler, bir renk paleti ve benzer şekiller paylaşarak, oyuncuların fonksiyonlarını tanımasını ve anlamasını kolaylaştırabilir.

Butonlar

Oyuncu girdisinin yaygın bir biçimi olarak butonların kolayca tanınabilir olması gerekir. Butonları, metni veya simgeleri çevreleyen bir renk gibi bir kap içerisinde yerleştirmek, onları arka plandan ayırarak etkileşimli görünmelerini sağlar. Vurgu veya gölgeler eklemek, 3D derinlik önererek dokunsal çekiciliği artırabilir.

Metin

Önemli yüksek düzeydeki bilgileri içeren başlıklar ve başlıklar, gövde metninden daha büyük ve daha kalın olmalıdır. Gösterim sırasında görüntülenecek arka plan rengi ile iyi bir kontrast oluşturan, yüksek derecede okunabilir renkler düşünülmelidir. Stil seçimleri gibi renk ve kalınlık, oyun içi eşyalar, istatistikler veya yetenekler gibi önemli bilgileri vurgulayabilir. Bir yazı tipi seçerken her zaman okunabilirliği önceliklendirin.

Görsel dil tasarlandıktan sonra, bunu Stil Kılavuzu içinde belgelendirebiliriz; bu, ekibin her üyesinin dilin oyunda tutarlı bir şekilde nasıl uygulanacağı konusunda anlamalarına yardımcı olacak kurallar ve örnekler setidir.

Gelenekler

Gelenekler, birçok farklı oyunda görülen yaygın tasarım seçimleridir. Bazı örnekler şunlardır:

• Üzerine tıklandığında diyaloğu kapatan bir butonda "X" sembolü
• Şu anda kullanılamayan butonlara uygulanan gri renk
• Oyuncunun henüz kazanmadığını veya açmadığını belirtmek için bir buton veya özelliğin üzerine yerleştirilen bir kilit simgesi

Bu tür gelenekler geniş bir şekilde kullanıldığından, oyuncular genellikle bunlarla aşina olurlar. Bu aşinalığı kullanmak, bir arayüzü daha sezgisel hale getirebilir ve oyun spesifik talimat ihtiyacını azaltabilir. Hedef türünüzdeki oyunları oynamak, oyuncuların tanıyabileceği gelenekleri belirlemeye yardımcı olabilir. Bir UI tasarımcısı, oyunununa daha iyi uyum sağlamak için benzersiz bir yaklaşım seçebilir; ancak bu gelenekleri bilmek, karar verme süreçlerine bilgi verir.

Tutarlılık

Bir UI tasarımcısının yaptığı her karar, oyunun her yerinde tutarlı bir şekilde uygulanmalıdır. Tutarlılık, oyuncuların oyunda gezinmeyi daha verimli öğrenmesine yardımcı olur ve kafa karışıklığını ve hayal kırıklığını önler.

Bir oyunda UI tutarlılığına bazı örnekler şunlardır:

• "Sağlık" istatistiği tüm metinlerde, ilgili simgelerde ve sağlık çubuğunda yeşil görünmektedir.
• NPC diyalogu, bir oyun içi eşyadan bahsettiğinde, daima kalın biçimde vurgulanır.
• Kapama butonları her zaman kare, kırmızı ve beyaz bir X içerir, sadece bir diyaloğun sağ üst köşesinde görünür.
• Bir oyuncu, mağazada bir eşyaya karşılayamayacak durumda olduğunda, fiyat kırmızı renkte görünür.

Bu tercihlerin hepsi düşünen, oyuncu kavraması ve gezintisini kolaylaştırmak için bilinçlidir. Bunları tutarlı bir şekilde uygulayarak, oyuncuların ilgili unsurları ilişkilendirmelerine, önemli eşyaları tanımalarına, kas hafızası oluşturmalarına, hızlı ve bilinçli kararlar vermelerine ve oyuna daha fazla zaman ayırmalarına imkan tanır.

UX

UX tasarımı, oyuncuların oyunla nasıl etkileşimde bulundukları, seçimlerini nasıl ilettikleri ve bir seçimden diğerine nasıl geçiş yaptıkları ile ilgilidir. UX genellikle kullanıcı arayüzü (UI) ile el ele çalışırken, interaktiviteye ve oyuncu deneyimine yönelik daha fazla odaklanır, UI'nin görsel ve bilgilendirme tasarımından ziyade.

Oyuncuları Anlamak

UX tasarımcısının birincil hedefi, oyuncular için sezgisel, dikkat çekmeyen ve kullanımı kolay etkileşimler ve akışlar oluşturmaktır. Bu süreç, oyuncuların kendilerini, oyun için hedeflenen kitleyi anlama ile başlar. Bir oyunun oyuncularını tanımlarken, aşağıdakileri göz önünde bulundurun:

• Demografik Veriler: Demografik veriler, bir oyuncu grubuna dair genelleştirilmiş bilgileri ortaya koyarak tasarım seçimlerine yardımcı olur. Örneğin, daha genç oyuncular genellikle mobil veya tablet cihazlarda kişisel bilgisayarlardan daha fazla oyun oynama eğilimindedir, bu yüzden bu kitleye yönelik oyunlar genellikle mobil kullanıcı deneyimini tasarlama ve geliştirmeye öncelik verir.

• Deneyim Seviyesi: Geliştiriciler, az oyun deneyimi olan oyuncular, önemli miktarda deneyimi olanlar veya bunların ortasında bir grup için tasarım yapmayı seçebilirler. Tecrübeli oyunculara tanıdık gelen etkileşimler, örneğin araç çubuğundaki bir eşyayı donatmak için bir numara tuşuna basmak, veya c tuşuna basarak eğilmek, deneyimsiz oyunculara açık olmayabilir ve ek mesajlaşma veya eğitim gerektirebilir.

• Tür Aşinalığı: Genel deneyim seviyesine benzer şekilde, tür aşinalığı oyuncuların belirli bir oyun türündeki deneyim düzeyini yansıtır. Roblox içindeki popüler türlere düşen oyunlar, rol yapma, hayatta kalma korkusu ve birinci şahıs nişancı gibi, daha önce benzer türde oyun oynamış pek çok potansiyel oyuncuya sahip olma olasılığı yüksektir. Diğer türlerde daha az deneyimli oyuncular olabilir, ancak deneyim açığı eğitimler ve kullanılabilirlik ile aşılabilir.

• Oynama Tarzı: Oyuncular genellikle rekabet ve başarı toplama ile keşif ve işbirliği gibi belirli türdeki oyunlara eğilim gösterirler. Bu tercihleri, oyuncuların tercih ettikleri oyun mekanikleri ile yansıtılır ve UX kararlarını da etkiler. Tasarımcılar hangi etkileşimlere öncelik vereceklerini, hangilerini parlatacaklarını ve hangilerini oyunculara sunacaklarını dikkate alır. Ayrıca, oyuncuların bu etkileşimleri katıldıklarında nasıl bir zihinsel duruma sahip olacaklarını ve bunlardan hangi duyguları uyandırmayı hedeflediklerini de göz önünde bulundururlar.

Bu faktörleri değerlendirdikten ve bir hedef oyuncu grubunu (veya gruplarını) seçtikten sonra, onları tanımak için onlarla buluşmak, birlikte oyun oynamak ve hedeflerini ve tercihlerinin neler olduğunu öğrenmek önemlidir; böylece tasarım seçimlerini daha iyi bilgilendirebiliriz.

Etkileşimleri Tasarlamak

Etkileşimler, oyuncuların oyun içinde deneyimleme ve seçimlerini iletmelerine imkan tanıyan özelliklerdir. UX tasarımcıları, bu etkileşimlerin sezgisel olmasını ve mümkün olduğunca az açıklama gerektirmesini ister. Bunu başarmak için şunları kullanırlar:

• Gelenekler
• Metaforlar
• Geri Bildirim

Gelenekler

Gelenekler, oyuncuların diğer oyunlardan aşina olabileceği UX tasarım ve prensipleridir.

Geleneklere örnekler şunlardır:

• Roblox geliştiricilerinin oyunculara bir eşyayı etkileşimde bulunulabilir olduğunu belirtmek için anlaması gereken bir nesneye yeterince yaklaşmaları durumunda beliren "E" yakınlık istemi.
• Oyuncunun avatarının, engellerin altından geçmesi veya dar alanlara sığması için eğilmesini sağlayan "C" tuşu.
• Numara tuşları, avatarın ellerinde kullanılmak üzere araç çubuğundaki eşyaları donatmasını sağlar.
• Yere yerleştirilmiş dairelere girerek bir maça sıra olmak.

Gelenekler, belirli bir uygulamanın veya tasarım seçeneğinin kolay kullanımı nedeniyle popülerlik kazandığında kurulmuştur. Örneğin, "C" tuşu eğilmek için hatırlaması kolaydır çünkü eğilmek kelimesinin ilk harfidir ve oyuncuların yönlendirmek için kullandığı WASD tuşları ile yan yanadır. Hızlı ve baskı altında hızlı bir şekilde gerçekleştirilmesi gereken kolay bir etkileşimdir; bu, eğilmenin yaygın bir kullanım alanıdır.

Metaforlar

Metaforlar, soyut bir konsepti daha aşina bir şeye bağlar ve anlama yolunda bir kısayol oluşturur. Bu örnekte Spellbound Wizard RPG oyununda, sihirli büyüler atma eylemi, bir destesinden kartlar çekilerek gerçekleştirilir. Desteye dayanan UI/UX, büyü atma gibi gerçek hayatta karşılığı olmayan soyut bir eylemi, oyuncuların daha kolay ve hızlı anlamasına olanak tanıyan bir şeyle temellendirir.

Geri Bildirim

Oyundan oyuncuya yapılan iletişim geri bildirim olarak bilinir. Geri bildirim, oyuncuların yaptıkları bir eylemi anlamalarına yardımcı olur. Oyun nasıl çalıştığını öğrenmeye katkıda bulunur ve bir özelliği daha memnun edici hale getiren ekstra bir cilalama katmanı ekler. Geri bildirim örnekleri şunlardır:

• Bir düşmanın oyuncunun silahından aldığı hasarı belirtmek için "vurulma" tepkisi animasyonunu oynaması
• Bir butonun üzerine geldiğinde, basılı tutulduğunda ve serbest bırakıldığında (seçilmiş) durumu göstermek için renginin değişmesi
• Oyuncunun bir satın alma işlemini tamamladığında bir kasada "çıtırt!" sesi çıkması
• Oyuncu görev hedeflerini tamamladıkça bir ilerleme çubuğunun dolması

Geri bildirim eksik veya yetersiz olduğunda, oyuncular neyi başardıklarını, etkilerin iyi mi kötü mü olduğunu anlamayabilirler veya kullandıkları özelliğin düzgün çalışıp çalışmadığı veya hatalar yaşayıp yaşamadıkları konusunda bir fikir sahibi olmayabilirler.

Akışları Tasarlamak

Bir oyuncunun bir amacı yerine getirebilmesi için genellikle birden fazla etkileşim gereklidir. UX tasarımcıları, oyuncuların bir eylemden, UI ekranından veya seçimden diğerine nasıl geçiş yaptıklarıyla ilgilenir ve bu yolların mantıksal ve pratik olmasını sağlarlar.

Örneğin, Berry Avenue RP içinde bir avatarın eşyasını donatmak için oyuncunun:

• Avatar butonunu bulup üzerine tıklaması
• Bir eşya kategorisi seçmesi (yüz, baş, boyun, vb.)
• İlgi çekici bir eşyayı bulmak için kaydırması
• Eşyaya tıklayarak onu avatarına donatması
• Avatar özelleştirmeden çıkmak için Tamam butonunu bulup tıklaması gerekir.

Bu adımlar, avatar özelleştirme akışını temsil eder. Bu akış, mümkün olan en az adımla eşya donatmak için basit ve doğrudandır. Oyuncular birçok eylem gerçekleştirmek zorunda kalmadıkları veya ne yapmaları gerektiğini çok fazla düşünmek zorunda kalmadıkları için, bu akış düşük sürtünme ile yapılmaktadır, bu da bir hedefe ulaşmak için gerekli olan çabayı ölçer.

Etkili, düşük sürtünmeli akışlar tasarlamak, kullanım durumlarını dikkatlice değerlendirmeyi gerektirir. Bu kullanım durumları, oyuncu hedefleri olarak ifade edilebilir, örneğin:

• Bir avatarı hızlı bir şekilde özelleştirebilme
• Özelleştirme sırasında eşyaları kolayca bulmak
• Seçimden önce eşyaları önizlemek
• Seçim sonrası eşyaların kolayca çıkarılması

Bu hedefler, o özelliğin UI ve UX tasarımına rehberlik eder:

• Oyuncular, HUD'da belirgin bir buton aracılığıyla avatar özelleştirme özelliğine erişebilir ve hemen avatarlarına eşyalar donatmaya başlayabilir.
• Sekmeler, eşyaları uygun kategorilere ayırır ve arama alanı oyuncuların eşyaları doğrudan aramalarına olanak tanır.
• Eşyalar, avatar üzerinde anında önizlenir.
• Oyuncular, eşyayı tekrar üzerine tıklayarak veya donatılmış eşyalar listesine tıklayarak çıkarabilirler.

Tasarımcılar, ardından UI'yi düzenlemeye ve oyuncuların avatarlarını özelleşme hedefini tamamlamak için atacakları adımları planlamaya başlayabilirler. Bu süreç, oyuncuların UI'deki etkileşimlerini gezindiği gibi, eylemleri görsel olarak temsil eden bir akış diyagramı kullanılarak desteklenebilir. Bu diyagramlar, gözden kaçırılan adımları, adımların belirsiz veya rahatsız olduğu noktaları ve aşırı sürtünmeyi tanımlamaya yardımcı olabilir.