Beş Görsel Tasarım İlkesinin Ölçülebilir Karşılığı

Görsel tasarım ilkeleri çoğu yerde estetik tavsiye biçiminde anlatılır: dengeli olsun, kontrast olsun, hiyerarşi olsun. Bu haliyle hiçbiri denetlenemez, tartışma da zevk meselesine düşer. Oysa ölçek, hiyerarşi, denge, kontrast ve Gestalt'ın her birinin sayıya ya da yapıya bağlanan bir karşılığı var.

Ölçek: adımlar birbirinden yeterince uzak olmalı

Ölçeğin işe yaraması için boyut farkının fark edilmesi gerekir. 16 piksel gövde metninin yanındaki 18 piksellik satır başlık değildir, biraz iri gövde metnidir. Bir oran seçip adımları ona göre kurmak bu tartışmayı bitirir: 1,25 oranıyla 16'dan başlayınca 20, 25, 31 gelir ve her basamak gözle ayrılır.

Basamak sayısını üç ya da dört ile sınırlayın. Beş farklı başlık boyutu olan bir sayfada boyut artık bilgi taşımaz, çünkü karşılaştırma yapılacak sabit kalmamıştır.

Hiyerarşiyi boşluk kurar

Sayfadaki en ucuz hiyerarşi aracı boşluktur ve en çok ihmal edileni de odur. Kural tek cümleye sığar: bir grubun içindeki boşluk, gruplar arasındaki boşluktan belirgin biçimde küçük olacak.

Formlar bunu en çok bozan yer. Etiket ile alanı arasındaki mesafe, alan ile bir sonraki etiket arasındaki mesafeye eşitse, hangi etiketin hangi alana ait olduğu okuma sırasında çözülür. Bu, saniyelik bir tereddüt gibi görünür ama uzun formda tekrar tekrar ödenir. İç boşluğu dış boşluğun yaklaşık yarısında tutmak sorunu kapatır.

Kontrast göz kararına bırakılmaz

Kontrastın kesin eşikleri var. WCAG'ın AA düzeyi normal metin için 4,5:1, büyük metin için 3:1, düğme kenarı ve ikon gibi arayüz bileşenleri için 3:1 oran ister. Bunlar tercih değil, geçme notu.

Buradaki en yaygın yanılgı, canlı rengi yüksek kontrast sanmak. Saf kırmızı beyaz zemin üzerinde yaklaşık 4:1 verir. Yani hata mesajlarının ve uyarıların klasik rengi, beyaz üzerinde normal punto metin için sınıfta kalır; aynı kırmızı siyah zeminde 5,25:1'e çıkar ve geçer. Renk çarpıcı olduğu için okunaklı olmuyor, bağıl parlaklık farkı yettiği için okunaklı oluyor.

Kontrast kontrolünü tasarım dosyasında göz kararıyla değil, tema renklerini kontrol eden küçük bir testle çözmeyi tercih ederim; palette bir değişken değişince test kırılır ve hata arayüze ulaşmadan görünür.

Denge simetri demek değil

Simetrik düzen güven verir, asimetrik düzen moderndir türünden eşleştirmeler işe yaramaz. Denge, ekrandaki görsel ağırlığın dağılımıyla ilgilidir ve ağırlığı belirleyen şey içeriktir: büyük bir görselin ağırlığı, karşısındaki üç satır metinden fazladır.

Asimetrik düzen içerik doğal olarak eşit ağırlıkta olmadığı için seçilir, üslup gerekçesiyle değil. Merkezden dağılan düzenlerin arayüzde karşılığı ise çok dar; tek bir odak noktası gerçekten varsa iş görür, liste ya da form ekranında sadece hizalamayı bozar.

Gestalt, diğer dördünün sebebidir

Yakınlık, benzerlik, devamlılık ve kapanış ayrı teknikler değil, yukarıdaki kararların neden işe yaradığının açıklaması. Bu yüzden ilkeler çatıştığında kimin kazandığını bilmek gerekir: yakınlık, benzerliği ezer.

Tabloda görülür. Satırları dönüşümlü renklendirip aynı satırdaki hücreleri sütun boşluğuyla birbirinden uzaklaştırdığınızda, renk “bunlar aynı gruba ait” derken boşluk tersini söyler ve göz boşluğu dinler. Aynı şey kart yerleşimlerinde de geçerli: kartların arası içlerindeki boşluktan darsa, kartlar tek bir blok gibi okunur, kenarlığı ne kadar belirgin olursa olsun.

Grubu renkle kurtarmaya çalışmadan önce boşluğu düzeltin. Renk düzeltilmiş boşluğun üstüne bir katman ekler, bozuk boşluğun yerine geçmez.