UX'te Görsel Tasarım: Ölçülebilen Kararlar

Görsel tasarım tartışması çabuk zevk meselesine dönüşür. Oysa arayüzde alınan görsel kararların büyük kısmı ölçülebilir: kontrastın bir sayısı, hiyerarşinin bir okuma sırası, tasarım sisteminin de düzenli ödenen bir bakım faturası vardır. Bu ölçülebilir taraf masadan kalkınca geriye kimin gözüne daha hoş geldiği kalır, o tartışma da hiçbir zaman bitmez.

Hiyerarşi, ekrandaki okuma sırasıdır

Kullanıcı ekranı satır satır okumaz, tarar. Tarama sırasında gözün nereye önce gideceğine siz karar verirsiniz; bu kararı vermezseniz tarayıcının varsayılan akışı verir. Hiyerarşiyi kuran araçlar sınırlıdır ve hepsi görecelidir: boyut farkı, ağırlık farkı, renk farkı, çevresindeki boşluk. Bir öğe büyük olduğu için değil, komşusundan büyük olduğu için öne çıkar.

Buradan çıkan pratik kural şu: aynı ekranda üç eşit derecede vurgulu çağrı butonu varsa hiçbiri vurgulu değildir. Bir ekranda birincil eylem tektir. İkincil eylemler ton olarak geri çekilir, üçüncül olanlar bağlantıya dönüşür. Izgara sistemi de bu işin devamıdır; hizalama kendi başına bir güzellik ölçütü değil, gözün bir sonraki öğeyi nerede arayacağını öğrenmesini sağlayan tekrardır.

"Yüksek kontrast" ölçülebilir bir şey değildir, kontrast oranı ölçülebilir

Tasarım metinlerinin çoğu yüksek kontrast önerip orada durur. Oysa kontrastın sayısı vardır ve WCAG bu sayıyı tanımlar: normal boyuttaki metin için en az 4.5:1, büyük metin için 3:1, buton kenarı ve form alanı gibi metin olmayan arayüz bileşenleri için yine 3:1. Bunlar tartışmaya açık estetik tercihler değil, kontrol edilebilir eşiklerdir. Tarayıcı geliştirici araçları da, tasarım araçlarındaki eklentiler de oranı doğrudan söyler.

Ölçüm en çok iki yerde atlanır. Birincisi devre dışı ve seçili olmayan durumlar; palet ana renkleriyle eşiği geçen bir tasarım, gri tonlara inince sessizce altına düşer. İkincisi koyu tema, çünkü koyu zeminde aynı renk çifti farklı bir oran üretir ve iki temayı ayrı ayrı ölçmek gerekir.

Saf siyah metni saf beyaz zemine koymak da otomatik olarak doğru cevap değil. 21:1 oranı eşiği fazlasıyla geçer ama uzun metinlerde göz yorar; koyu gri ile kırık beyaz çoğu durumda hem eşiği geçer hem okumayı rahatlatır.

İkon bilgi taşımaz, yer taşır

Kaynaklarda sık geçen iki tavsiye yan yana konduğunda çelişir: ikonlar bilgiye hızlı erişim sağlar, ve her ikonun yanında açıklayıcı bir etiket bulunmalıdır. İkinci cümle doğruysa birincisi yanlıştır, çünkü anlamı taşıyan şey etikettir. İkonun asıl işi anlatmak değil, daha önce öğrenilmiş bir öğeyi kalabalık bir ekranda yeniden bulunabilir kılmaktır.

Bu ayrım pratikte işe yarar. Çöp kutusu, büyüteç, hamburger menü gibi bir avuç simge kültürel olarak yerleşmiştir ve etiketsiz durabilir. Geri kalan her şey, özellikle sizin ürününüze özgü kavramlar, etiketle gelir. Bir yönetim panelinde ikonları etiketsiz yayınlamıştık; ilk haftanın destek sorularının büyük bölümü, en çok kullanılan iki ikonun ne yaptığı üzerineydi.

Tasarım sisteminin faturası bileşen sayısıyla değil, durum sayısıyla büyür

Tasarım sistemi kurma tavsiyesi genelde renk paleti ve bileşen kitaplığı seviyesinde kalır. Asıl maliyet bir alt katmanda: her bileşen tek bir görünüm değil, bir durum kümesidir. Dokuz buton varyantı tanımladıysanız ve her varyantın normal, üzerine gelme, odak, basılı ve devre dışı hali varsa ortada 45 ayrı görünüm vardır. Koyu tema eklendiğinde bu sayı 90 olur. Tasarım dosyasında çizilmemiş her durum, geliştiricinin o an uydurduğu bir durum olarak koda girer.

Bu yüzden varyant sayısını kısmak, sisteme yeni bileşen eklemekten daha değerlidir. Üç buton varyantıyla aynı arayüzü kurabiliyorsanız bakım yükünüz üçte birine iner. Bir tasarım kararının uygulamadaki karşılığını görmek için basit bir kontrol yeter: paletteki renk kodunun kodda bir değişken karşılığı yoksa o renk sistemin parçası değil, birinin o gün seçtiği bir değerdir.

Testte önce neyi ölçeceğinizi yazın

Görsel bir değişikliğin işe yarayıp yaramadığı, değişiklikten önce tanımlanmış bir ölçüte bakılarak anlaşılır. Buton rengini değiştiriyorsanız beklentiniz tıklama oranı mı, formu tamamlama süresi mi, yoksa yanlış butona basma sayısı mı? Sonrasında bakılan her sayı, istediğiniz sonucu destekleyeni seçme riskini taşır.

Küçük trafikli ürünlerde A/B testi bu iş için uygun değildir. Renk gibi küçük etkilerin istatistiksel olarak ayırt edilebilmesi için gereken örneklem, günlük birkaç yüz ziyaretçili bir sayfada aylar sürer ve o süre boyunca ürünün başka şeyleri de değişir. Böyle durumlarda beş kişilik moderatörlü bir oturum, aynı soruya çok daha hızlı ve daha az yanıltıcı bir cevap verir. A/B testini, farkı görecek kadar trafiğiniz olduğunda tercih edin.