İyi Tasarımın Anatomisi: Ölçü, Izgara ve Renk Kararları

Bir arayüzün iyi görünmesi genelde yazı tipi seçimine bağlanır. Asıl belirleyici olan ölçü kararlarıdır: satır ne kadar uzun, sütun ne kadar geniş, boşluk nereye düşüyor. Tipografi, ızgara ve renk ayrı başlıklar altında anlatılsa da aynı kararın üç yüzüdür; biri değişince diğer ikisi de değişir.

Ölçü bir tipografi değil, ızgara kararıdır

Rahat okunan satır uzunluğu 45 ile 75 karakter arasındadır. 16 piksellik gövde metninde ortalama karakter genişliği kabaca 8 piksel olduğuna göre bu, 360 ile 600 piksel arasında bir metin sütunu demek. 1200 piksellik bir kapsayıcıda tek sütun gövde metni akıtıyorsanız hangi yazı tipini seçtiğinizin bir önemi kalmaz; satır zaten sınırın iki katı.

Bu yüzden “kısa satır kullanın” tavsiyesiyle “çok sütunlu ızgara kurun” tavsiyesi ayrı maddelere yazıldığında aradaki bağ kopar. Sütun sayısı ölçüyü belirleyen şeydir. Önce metin sütununun genişliğini seçin, ızgarayı ona göre kurun. Ters sırada çalışıldığında ölçü sonradan negatif kenar boşluklarıyla kurtarılmaya çalışılır ve o noktadan sonra düzen her yeni bileşende bir kez daha bozulur.

Tek aile, çok ağırlık

Bir arayüzün derli toplu görünmesini yazı tipi seçimine bağlamam; neredeyse her zaman satır aralığı ve ölçek tutarlılığı meselesidir. Tek bir yazı ailesi içinde boyut ve kalınlık değiştirerek kurulan hiyerarşi, iki ayrı aileyi eşleştirmeye çalışmaktan hem daha güvenli hem daha ucuza gelir: yüklenecek dosya sayısı düşer, ölçek tablosu tek yerde durur.

Gövde metninde satır aralığını 1.5 civarında tutmak, uzun metinlerde gözün satır atlamasını engeller. Başlıklarda bu oran düşmeli, çünkü satır kısa ve boşluk orada bağı zayıflatır. Aynı değeri her ikisine uygulamak en sık görülen ölçek hatası.

Renk hiyerarşi kurar, süslemez

Palet seçiminde ilk soru hangi tonların birbirine yakıştığı değil, hangi öğenin hangi seviyede olduğudur. Arka plan, birincil metin, ikincil metin ve etkileşimli öğe birbirinden ayırt edilebiliyorsa palet işini yapıyordur.

Ayırt etme işi yalnızca ton farkına bırakılırsa renk körlüğü olan ziyaretçide hiyerarşi tamamen kaybolur. Ton farkının yanında kontrast, konum ya da ikon da aynı bilgiyi taşımalı. Tekrar da bir araç: aynı vurgu rengi her birincil eylemde görünüyorsa kullanıcı üçüncü sayfada artık o rengi aramaya başlar.

Simetri ve asimetri arasında seçim

Simetrik yerleşim karşılaştırmayı hızlandırır. Fiyat tabloları ve özellik listeleri simetride daha iyi okunur, çünkü göz aynı hizada aynı türde bilgi bekler ve bu beklenti karşılandığında tarama süresi kısalır. Asimetri ise dikkati tek bir yere toplar; öne çıkacak tek bir şey varsa işe yarar, sıralı bilgi taşıyan sayfada ise dağıtır.

Seçimi belirleyen şey estetik değil, sayfanın işi. Kullanıcı karşılaştıracaksa simetri, tek bir şeye bakacaksa asimetri.

Uygulanmış hali neye benziyor

Dovetail'in editör arayüzü iyi bir örnek. Kenar çubuğundaki etiket bölümü ile ana içerik aynı ızgara hattına hizalanır, içerik türleri ayrı yazı stilleriyle ayrılır, okuma alanı dar tutulur. İkonlarda çizgi kalınlığı ve köşe yuvarlaklığı tek bir değerde sabitlenmiştir; bu detaylar tek tek fark edilmez, toplamda arayüzü bir arada tutar.

Metin odaklı uygulamalarda aynı sonuca renk neredeyse hiç kullanılmadan varılır. Ölçek farkı ve arka plan tonundaki küçük kaymalar hiyerarşiyi kurmaya yeter. Renk bir çözüm değil, seçeneklerden biri.

Tutarsızlığın çıktığı iki yer

Birincisi, gerekmediği halde ikinci bir yazı ailesi eklemek. İkincisi daha sinsi: boşluk değerlerini her bileşende yeniden uydurmak. Tasarım dosyasında göze çarpmaz, uygulamada her bileşen kendi kenar boşluğunu taşıdığı için arayüz büyüdükçe hizalar birbirinden kayar ve düzeltmesi tek tek elden geçmeyi gerektirir.

Boşluk ölçeğini dört beş değere sabitleyin ve o listenin dışına çıkmayın. Bir bileşen listeye uymuyorsa sorun listede değil, bileşenin ölçüsündedir.