Dijital Metaverse için Fare İşaretçisi Tasarlama
Fare işaretçisi, modern arayüzün temel bir parçası olma konusunda uzun bir geçmişe sahiptir. Windows ve Mac sistem işaretçileri son birkaç on yılda neredeyse hiç değişmedi. Öte yandan, video oyunlarının işaretçiyi yeniden hayal etme geçmişi vardır. Modern masaüstü video oyunlarının büyük bir kısmı, deneyimleri için markalanmış özel işaretçiler kullanır. Ancak, Roblox gibi işletim sistemi benzeri bir arayüzde de çalışan bir video oyunu işaretçisi tasarlamak için ne gerekir? Roblox, kullanıcıların sürükleyici sanal deneyimler oluşturup keşfedebilecekleri bir platformdur. Roblox uygulaması, oyunlar ve deneyimler arasında kusursuz bir metaverse işlevi gördüğü için üzerinde çalışmaktan heyecan duyduğum benzersiz bir UX mücadelesi sundu.
“İmleç” ve “işaretçi” terimlerinin birbirinin yerine kullanıldığını gördüm. Giriş alanlarında ve komut arayüzlerinde kullanılan metin imleçlerinden ayırt etmek için çoğunlukla “işaretçi”yi seçeceğim.
Sorun
Yeni Roblox masaüstü istemcisi yoldaydı, ancak uygulamada çok önemli bir UX öğesi eksikti – fare durumu değişiklikleri. Çoğu masaüstü oyunu için göz atma ve oynamanın ayrı deneyimlerden farklı olarak, yeni Roblox masaüstü istemcisi, kullanıcıların tek bir pencerede sorunsuz bir şekilde gezinmesine ve oynamasına olanak tanır. Ancak, fare işaretçisi deneyiminin çalışması gerekiyordu. “Link Select” veya “Hover” durumunun görsel açıdan uygunluğu zayıftı. Ve bir kullanıcı bir metin giriş alanının üzerine geldiğinde görünen “Metin Seçimi” durumu tamamen eksikti. Bu, fare işaretçisi üçlüsünü yeniden tasarlamak ve geliştirmek için bir fırsattı: Varsayılan, Bağlantı(Vurgulu) ve Metin.
Farklı kullanım durumları nedeniyle hem işletim sistemi hem de video oyunu için bir işaretçi tasarlamak zordur. Bir işletim sistemi imlecinin nötr renkli, görünürlük için yeterince yüksek kontrastlı, günlük kullanım için yeterince pratik ve göz yorgunluğuna neden olmayacak kadar parlak olmaması gerekir. Bir video oyunu imleci, sürükleyici bir deneyim sunmak için genellikle markanın görünümüne ve hissine karşılık geldiğinden, bu kuralların çoğunu görmezden gelebilir. Ancak bu özelliklerin her ikisini de birleştirmenin başarılı bir yolu var mı?
Roblox’un 2012 işaretçisine bir göz atın. Nötr gri tonlamalı renkler kullanarak doğru yöne gitti. Bununla birlikte, fareyle üzerine gelme durumu, bir Mac bilgisayarda yeni kullanıcıların kafasını karıştıran siyah bir işaretçi kullandı. Bir diğer hata da ok omuzlarının ok yüzü ekseni yerine dikey eksen kullanılarak çizilmiş olmasıdır. Bu, okun yaklaşık %6,8 oranında asimetrik olduğu anlamına gelir.
Bak ve hisset
İşte eğlenceli kısım geliyor. Masaüstü için video oyunu işaretçilerinin mevcut eğilimleri nelerdir? En popüler oyun göstergelerinden bazılarını derledim ve bunları grafiksellik ve pratiklik açısından sıraladım. Çoğu oyun işaretçisi, markalı grafiksellik yönünde tercih yapar. Roblox işaretçisinin, pratikliği en üst düzeye çıkarırken, ortak işletim sistemi işaretçisinden biraz daha grafiksel olması gerekir.
Roblox işaretçisinin yalnızca tüm deneyim türlerinde yeterli görünmesi değil, aynı zamanda tasarım sistemimiz uiBlox’u tamamlaması gerekir. uiBlox tasarım sistemi şu anda varsayılan bir karanlık temada #FFFFFF simgelerini kullanıyor. Tarzımız, her simgede 2 piksel yarıçaplı eğriler ve kabaca 3:1 yuvarlak-kare köşe oranı kullanır. İşaret eden el imleci için, harika tasarımcılarımızdan birinin resmettiği yeni emote resmimizden ilham aldım. Amy Liu.
Hepsini bir araya koy
Diğer tasarımcılardan geri bildirim aldıktan sonra Roblox için son işaretçi setini geliştirdik. Yeni varsayılan işaretçi artık simetriktir ve görünürlük için bir ok kuyruğu ekler. Alt gölge, 3B ortamda modernlik ve derinlik sağlar. Yeni vurgulu işaretçi, şekli varsayılan işaretçiden farklı hale getirerek erişilebilirliği artırır. Son olarak, metin işaretçisi, karanlık temamızda kontrast sağlamak için #FFFFFF 1px imleç olarak yeniden şekillendirilir. Karanlık vuruş, açık renkli temamızda ve açık renkli arka planlara sahip diğer Roblox deneyimlerinde görünürlük sağlar.
Yeniden tasarım, yalnızca kullanıcı geri bildirimi kadar etkilidir. Bu yeni imleçler hakkında söyleyecekleri konusunda 215 Roblox geliştiricisine anket yaptık. Önemli bir çoğunluk, imleçlerin hem estetik hem de kullanılabilirlik açısından bir gelişme olduğu konusunda hemfikirdi. En heyecan verici istatistik, geliştiricilerimizin Metin işaretçisine verdiği yanıttır. Bunun genel bir gelişme olduğu konusunda hemfikir olan büyük bir yüzde 89’un %74’ü bu ifadeye kesinlikle katılıyor. Kullanıcılarımızın bu UX iyileştirmelerine olumlu tepki verdiğini bilmek, deneyimdeki diğer UI öğelerinin yanı sıra işaretçi setimizin geri kalanını geliştirirken bize yardımcı olacaktır.
Roblox, oyunun ötesinde bir iletişim, sosyal ve hatta işlem platformuna genişledikçe, ürünün bu yönü, kullanıcıyı uygulama ve deneyimleri arasında gezinirken yönlendirmeye yardımcı olacaktır. Umudumuz, bunun bundan sonra dijital meta veri kaynakları için geçerli bir standart olarak hizmet etmesidir!
Roblox Tasarım ekibine katılmak ve bunun gibi sorunları çözmek ister misiniz? Bizi kontrol edin corp.roblox.com/careers/ en son fırsatlar için.
Derek Wong, Roblox’ta Görsel Tasarımcıdır. Roblox web sitesinin ve masaüstü uygulamasının kullanıcı arayüzünü şekillendiren Roblox’un tasarım sistemi üzerinde çalışıyor. Ne Roblox Corporation ne de bu blog herhangi bir şirketi veya hizmeti onaylamaz veya desteklemez. Ayrıca, bu blogda yer alan bilgilerin doğruluğu, güvenilirliği veya eksiksizliği ile ilgili herhangi bir garanti veya taahhütte bulunulmamaktadır.
©2020 Roblox Şirketi. Roblox, Roblox logosu ve Powering Imagination, ABD ve diğer ülkelerdeki tescilli ve tescilsiz ticari markalarımız arasındadır.
Kaynak : https://blog.roblox.com/2022/02/designing-mouse-pointer-digital-metaverse/