Görsel Tasarım İlkelerinin Arayüzde Somut Karşılığı
Bir arayüze bakan kişi önce okumaz, tarar. Gözün ilk yarım saniyede nereye gittiğini belirleyen şey içeriğin kalitesi değil; elemanların boyutu, rengi ve aralarındaki boşluktur. Görsel tasarımın işi tam burada başlar, yani hangi bilginin önce görüleceğine karar vermekte. Peki bu karar nasıl verilir, daha zoru, verildikten sonra doğru verildiği nasıl kontrol edilir?
Hiyerarşi, sayfanın okuma sırasıdır
Görsel hiyerarşi süsleme değil, sıralama işidir. Bir sayfada neyin önce, neyin sonra görüleceğini başlık boyutları, yazı ağırlıkları ve yerleşim belirler. Kullanıcı aradığını saniyeler içinde buluyorsa hiyerarşi çalışıyordur.
Peki ya sayfada iki şey birden öne çıkıyorsa? O zaman hiyerarşi yoktur, gürültü vardır. E-ticarette sık görülen hali şudur: fiyat da büyük ve renkli, sepete ekle butonu da büyük ve renkli. İkisi birbiriyle yarışır, göz ikisi arasında gidip gelir ve karar bir saniye gecikir. Bir sayfada aynı anda kaç tane birinci derece vurgu olabilir sorusunun pratikteki cevabı bir tanedir.
Kontrast göz kararıyla ölçülmez
Kontrastın iyi olup olmadığını bakarak anlamaya çalışmak yanıltıcıdır, çünkü tasarımcının ekranı parlaklığı açık, kalibre edilmiş, kapalı bir odadadır. Aynı gri metni telefonla güneş altında okuyan kullanıcı aynı şeyi görmez.
Neyse ki burada tahmine gerek yok. WCAG normal boyutlu metin için metin ve arka plan arasında en az 4.5:1, büyük metin için (yaklaşık 24px ya da kalın 19px üstü) 3:1 oran ister. Kontrast oranını göz kararıyla belirleme; tarayıcının geliştirici araçlarında bir metni seçtiğinde oran zaten hesaplanmış halde karşına gelir, ayrı bir eklenti kurmana gerek yok. Açık gri üzerine biraz daha açık gri yazan arayüzlerin çoğu bu kontrolü hiç yapmamıştır.
Boşluk sayfayı yavaşlatmaz, asıl yük başka yerde
Negatif alan, içerik blokları arasındaki nefes payıdır. İşlevi estetik değil, gruplamadır: birbirine yakın duran öğeler aynı gruba ait sayılır, uzak duranlar ayrı. Form alanlarını etiketlerinden uzaklaştırıp yan yana gelen iki alanı birbirine yaklaştırdığınızda, kullanıcı hangi etiketin hangi alana ait olduğunu bir an duraksayarak çözer.
Burada sık tekrarlanan bir iddiaya itiraz etmek gerekiyor: minimalizmin sayfayı hızlandırdığı söylenir. Boşluk bir CSS kenar boşluğudur, tek bayt indirilmez. Ferah görünen bir sayfa pekâlâ kalabalık bir sayfadan ağır olabilir; ekranı kaplayan arka plan videosu, üç ikon için yüklenen koca ikon kütüphanesi, sayfada üçü kullanılırken hepsi indirilen altı font ağırlığı, bunların hiçbiri tasarımın sadeliğinden görünmez. Sadelik bir görünüm tercihidir, performans ise ağ sekmesinde ölçülen ayrı bir şey. İkisi bazen aynı yöne gider, otomatik olarak değil.
Tipografide asıl karar font seçimi değil
Hangi yazı tipinin seçildiği markanın tonunu belirler, okunabilirliği ise büyük ölçüde başka parametreler belirler: satır yüksekliği, satır uzunluğu ve punto. Uzun metinlerde satır yüksekliğini font boyutunun 1.5 katı civarında tutmak, satır uzunluğunu da 45-75 karakter aralığında sınırlamak tipografinin eski ve hâlâ geçerli kurallarındandır. Geniş ekranda metin bloğunu sayfa genişliğine yaymak, gözün satır sonundan bir sonraki satırın başına dönme işini zorlaştırır. Interaction Design Foundation'ın tipografi derlemesi bu parametrelerin neden bu aralıklarda toplandığını ayrıntılı anlatıyor.
Mobilde ayrıca teknik bir eşik var: iOS Safari, font boyutu 16px'in altında olan bir form alanına dokunulduğunda sayfayı otomatik yakınlaştırır. Tasarımda zarif görünen 14px'lik bir input, telefonda her dokunuşta ekranın zıplaması demek. Form alanlarında 16px'in altına inmemek bu yüzden estetik değil davranışsal bir karar.
Renk tek başına bilgi taşıyamaz
Bir hata mesajını yalnızca kırmızıya boyayıp bırakmak, o bilgiyi renk ayrımı sınırlı olan kullanıcılar için yok etmek anlamına gelir. Aynı mesaj ikonla ve metinle de desteklenmeliyse, bunu test etmenin en hızlı yolu ekranı gri tonlamaya çevirip bakmaktır: bilgi hâlâ ayırt edilebiliyor mu?
Alternatif metinler için de benzer bir yanlış anlama dolaşıyor. Alt metin öncelikle ekran okuyucu kullanan kişi içindir; arama motoruna katkısı bunun yan ürünü. "gorsel-1" yazan bir alt metin ikisine de hizmet etmez, sadece alanı doldurmuş olur. Görsel bilgi taşıyorsa ne anlattığını yazın, sadece dekoratifse alt metni boş bırakmak doğru olanıdır.
Yayına almadan önce
Bir sayfayı canlıya çıkarmadan önce geriye dönüp bakılacak birkaç nokta var:
- Sayfada göz ilk nereye gidiyor? Gitmesini istediğiniz yer mi?
- Metin ve buton kontrastları ölçüldü mü, yoksa sadece bakıldı mı?
- Ekranı gri tonlamaya çevirdiğinizde hangi bilgi kayboluyor?
- Sayfanın ağırlığı nereden geliyor, ağ sekmesinde en büyük üç dosya ne?