[Ayro]

Basitçe Arayüz ve Kullanıcı Deneyimi

Bahse girerim pek çoğunuz kullanıcı arayüz terimini daha önce duymuşsunuzdur. Anno 1800'e giren oyuncuların karşılaşacağı ilk şey kullanıcı arayüzüdür. Butonlar, menü pencereleri ve bilgi panelleri gibi oyunun tüm arayüz öğelerini barındırır.

Aklınıza ilk gelen şey büyük ihtimal farklı renklerde kutular ve ikonlardır. Oynanış ekranınızın üstündeki görsel tabaka bir oyuncunun sonraki adım için ihtiyacı olacağı tüm bilgilere sahiptir ve oyunla etkileşime girebilmenizi sağlar. Kullanıcı arayüzünün oyun dilinin oyuncuya uygun hale çevirerek oyun ile oyuncu arasında iletişim kurulmasını sağladığını söyleyebiliriz.

Özellikle Anno gibi bir yönetim oyununda oyuncuya büyük miktarlarda bilgi aktarılması gerekir. Kullanıcı deneyimi, arayüzün kullanılabilir ve okunabilir olmasından emin olmamızı sağlar. Anno'nun inşa menüsünü düşünün, sadece bir kaç tıklama ile pek çok üretim binası ve materyal içeren karmaşık bir üretim hattı oluşturabiliyorsunuz. Bir binanın hangi üretime bağlı olduğunu öğrenmek gibi şeylere bakmak için bilgi pencerelerinde kaybolarak zamanınızı harcamak yerine, oynanışa odaklanmanızı istiyoruz. Kullanıcı deneyimi amacınıza ulaşana kadar gideceğiniz yolu çizen bir taslak gibidir, arayüz ise bu yolda size yoldaşlık eden görsel öğeleri içerir.

Neden Kullanıcı Deneyimi/Arayüzü Dizaynı Anno İçin Özel veya Önemli?

Anno 1800 gibi karmaşık bir strateji oyununda pürüzsüz oynanış deneyimi sağlamaya çalışırken kullanıcı deneyimi ve arayüzü kilit faktöre sahiptir. Örneğin aksiyon oyunlarında karakterinize ne yapması gerektiğini basit bir tuş basımı ile karaktere iletirsiniz ve istenen eylem hemen size gösterilir. Anno gibi strateji oyunlarında ise eylemleri gerçekleştirecek karakterinizi yönetmeniz için butonlar gibi arayüz elementleri vardır.

Ama zaten Anno'yu bu büyük ölçekteki yönetim ve inşa yönü yüzünden sevmiyor muyuz?


Eski arayüz çalışması -> yeni hali

Zorluklardan birisi karmaşık bilgileri anlamak için kolay bir çözüm bulmak. Örneğin ticaret yolları: yükleme, boşaltma, eşyaların listesi, adalar, gemiler... Uygun işleyiş olmadığında karmaşık bir strateji oyunu kontrol etmek oyuncuya eğlenceli oynanış sunmak yerine oyuncuyu boğmaya sebep olabilir.

Bu yüzden işin görsel güzellik kısmından önce işlevselliğine odaklanmamız gerekmekte.

Anno 1800 Kullanıcı Arayüz Tasarımı

Anno 1800 için az miktarda doku ve süsleme içeren temiz bir tasarımda karar kıldık. Tasarımımızda işlevselliği ön planda tutarak daha çağdaş saf bir görüntü ile şuan işlediğimiz "Sanayi Devrimi" çağını hissettirmeye çalışıyoruz. Oyuncuların gözünü yormayan, ihtiyaç olacak tüm bilgiye hızlı erişim sağlayan bir tasarım. Eğer tasarımın görsel gücünü arttırırsak arayüzü oyunun görselliği ile mücadeleye girebilir ve bu oyuncunun dikkatinin dağılmasına sebep olarak oyun akışına zarar verebilir. Aynı şekilde HUD için de daha karanlık renklerin gözler ve oyun akışı için daha uygun olduğunu düşündük.

Aniden beliren bilgi ve uyarı pencereleri oyuncunun dikkatini çekmesi gerektiği için ise daha parlak renkler kullandık.

Oluşturmaya Başlayalım

Buraya kadar güzeldi, peki nasıl kullanıcı deneyimi ve arayüzü tasarımı oluşturabiliriz? Her yeni arayüz öğesi oluşturmaya başladığımızda Oyun Tasarım departmanı bize oyuncuya ulaştırmamız gereken oynanış bilgisini ve oyun mantığını bize sunuyor. Hangi bilgilerin daha önemli olduğunu ve bu arayüz öğesinde hangi işlemlerin gerçekleştirileceğine karar veriyoruz. Ticaret yolları menüsü bunun için güzel bir örnek; gemileriniz, rotalarınız, mallarınız, adalar ve verebileceğiniz emirler hakkında tüm bilgileri bu ekranda görmeye ihtiyacınız var.

Sonraki adımda, bir kalem ve biraz da kağıt alarak bu tasarımları kaba taslak çizmek. Bu çizim menülerin akışı ve işlevi hakkında gerekli tüm detaylara sahip oluyor ve kullanıcı deneyimini test etmemiz için gereken etkileşimli prototipini yapmamıza olanak sağlıyor.


Tasarım -> Model

Tasarımımızın çalıştığından emin olduktan sonra gerçek görsel arayüz öğelerinde çalışmaya başlıyoruz. Bu çalışma tasarımları model haline getirip, şekilleri, yazı ve renk stillerini tanımlamamızı içeriyor. Sanat departmanımız da bu çalışmada bize eşlik etmekte. Ayrıca arayüz ekibinde tecrübeli ikon tasarımcıları da basit butonlardan tutun da son canlı yayında gösterdiğimiz turist vapuru zamanlayıcı gibi karmaşık olanlara kadar arayüz için ihtiyacımız olan ikonları oluşturmamızda bize yardım etmekte. Sıra modelleri gerçek öğelere çevirmeye geldiğinde Adobe Illustrator ile Photoshop, animasyonlar içinse After Effects gibi programları kullanmaktayız.

İçinde tüm kutuları ve görselliği barındıran çalışan bir tasarım elde ettiğimizde geriye bir tek uygulama kalıyor. Bunu için gerekli teknik gereksinimleri programlama ekibimizle tartışmamız ardından bizim için bir arayüz iskeleti oluşturuyorlar ve son adım olarak tasarımımızı bu iskelete uyguladığımızda arayüzümüz oyuna eklenmeye hazır hale geliyor.