Buton, Tipografi, Renk ve Düzen: UI Tasarımının Dört Kararı

UI ipucu listelerinin çoğu doğru şeyi söyler, nedenini söylemez. İlk zorlu kararda da elinizde kalır. Buton, tipografi, renk ve yerleşim arayüzün büyük bölümünü belirleyen dört karar; hangisinin göz kararına, hangisinin ölçülebilir bir eşiğe dayandığını ayırmak işin yarısı.

Estetik sorunu gizler, çözmez

Güzel görünen arayüzün kullanıcıyı daha sabırlı yaptığı doğru. Buradan "o hâlde küçük kullanılabilirlik sorunlarını affettirir" sonucunu çıkarmak fazla iyimser. Estetik ve kullanılabilirlik etkisinin pratikteki sonucu şu: kullanıcı arayüzü olduğundan kullanışlı sanır ve testte sorunu size söylemez. Sorun yerinde durur, kapanan şey geri bildirim kanalıdır.

Bunun ölçümde karşılığı var. Görsel cila memnuniyet puanını yukarı çeker, görev tamamlama süresini ve hata sayısını çekmez. İkisini aynı raporda ayrı satırlarda tutun; birleştirdiğiniz anda güzel tasarım kötü akışı örtmeye başlar.

Butonda etiket kadar hedef alanı

Etiket tavsiyesi basit: buton, basıldığında ne olacağını yazsın. "İleri" değil "Siparişi tamamla". "Gönder" değil "Randevuyu oluştur". Kullanıcı sayfanın geri kalanını okumadan, yalnızca butona bakarak ne olacağını bilebilmeli.

Gölge, köşe yarıçapı, iç boşluk; bunlar butonu buton gibi gösterir. Tıklanma oranını asıl belirleyen ise dokunma alanının boyutu, ve bu göz kararına bırakılacak bir şey değil. WCAG 2.2 sayıyı vermiş: hedef alanı en az 24×24 CSS pikseli (2.5.8, AA), rahat kullanım için 44×44 (2.5.5, AAA). "Her kenarda W harfi genişliğinde boşluk bırakın" tarzı kulaktan dolma ölçüler yerine piksel cinsinden bir alt sınırla çalışın; ikincisi tasarım gözden geçirmesinde tartışılmadan kontrol edilir.

Tipografide sorun font sayısı değil, ölçek

"En fazla iki font kullanın" tavsiyesi zararsız ama meselenin küçük kısmı. İki fontla da okunmaz bir sayfa yapılır. Dağınıklık genellikle font ailesinden değil, kimsenin sahiplenmediği boyut ve satır yüksekliği değerlerinden gelir: bir yerde 15px, başka yerde 16, bir bileşende 1.4 satır yüksekliği, diğerinde 1.15.

• Gövde metni için tek bir boyut belirleyin, başlıkları o boyutun katlarından türetin.
• İki ağırlık yeterli; ara ağırlıklar ekranda çoğu zaman birbirinden ayırt edilmez.
• İnce (300 ve altı) ağırlıkları açık zeminde kullanmayın, kontrast eşiğini sessizce düşürürler.

Dekoratif ve el yazısı fontlardan uzak durma önerisi de doğru, ama gerekçesi "amatörce durur" değil. Bu fontların harf formları birbirine benzer ve tarama hızını düşürür; bir kelimeyi okumak yerine çözersiniz.

Üç renk fikri nerede kırılıyor

Arka plan, metin, vurgu. İlk ekranda çalışır. Sonra hover gelir, disabled gelir, hata mesajı, uyarı, başarı bildirimi, seçili satır, odak halkası. Bir projede üç renkle başlayan palet ilk sprint bitmeden on bir tokene çıkmıştı, üstelik kimse fazladan renk eklemeye karar vermemişti.

Doğru kural renk sayısını üçle sınırlamak değil, üç rolü sınırlamak: bir taban, bir metin, bir vurgu ailesi. Geri kalanı bu ailelerin tonlarıdır artı durum renkleri. 60-30-10 ise bir dağılım önerisi, erişilebilirlik ölçütü değil; oranı tutturup okunmaz bir sayfa çıkarmak mümkün. Ölçüt kontrast oranıdır: normal metinde 4.5:1, büyük metinde 3:1, buton kenarı ve ikon gibi arayüz bileşenlerinde yine 3:1. Bunlar hesaplanabilir sayılar; tarayıcının denetleyicisiyle birkaç dakikada bakılır. Palet onayını göz kararına bırakmanın bir gerekçesi kalmıyor.

Grid hizalar, karar vermez

Grid ve tutarlı boşluk skalası (4 veya 8 pikselin katları) yerleşimi düzenler, tekrar eden kararları ortadan kaldırır, ekip içinde ortak dil kurar. Yapmadığı şey neyin önemli olduğunu söylemek. Hiyerarşi bir içerik kararıdır: hangi bilgi kullanıcının o ekranda cevaplamak istediği soruya karşılık geliyor, hangisi sadece orada duruyor. Bu soruyu cevaplamadan kurulan grid, dağınıklığı düzenli bir dağınıklığa çevirir.

Blok çizerek başlama yöntemi burada işe yarıyor. Renk ve tipografi yokken sayfaya bakıp "gözüm nereye gidiyor" diye sormak, aynı soruyu bitmiş tasarımda sormaktan çok daha dürüst bir cevap veriyor.

Dört kararın ikisi ölçülebilir, ikisi değil. Kontrast ve hedef alanı sayıya bağlanır, gözden geçirmede tartışma konusu olmaktan çıkar; hiyerarşi ve etiket dili ise her ekranda yeniden verilen yargı kararlarıdır. Ölçülebilir olanları otomatiğe bağlamanın asıl kazancı, kalan zamanı ikinci gruba ayırabilmek.