Bir Arayüz Neden Düzgün Görünür: Ölçek, Grid ve Tutarlılık

Bir arayüzün göze hoş gelmesi yetenekten çok kısıttan çıkıyor. Düzgün görünen ekranlarda az sayıda değer vardır ve bu değerler her yerde tekrar eder: aynı font ailesi, aynı boşluk basamakları, aynı hizalama çizgileri. Güzellik diye tarif ettiğimiz izlenimin büyük bölümü, sayfadan çıkarılmış gürültünün adı.

Beğeni ile düzen aynı şey değil

"İyi tasarım güzel görünür" cümlesi ters yönden okunduğunda yanıltıyor. Beğenilen bir ekran her zaman düzenli değildir, düzenli bir ekran da her zaman beğenilmez. Kurumsal bir muhasebe panelini kimse duvarına asmaz, ama iyi kurulmuşsa göz onda takılmaz. Takılma yokluğu ölçülebilir bir şey: aynı hizaya oturmayan kenar, üç farklı satır aralığı, birbirine yakın ama eşit olmayan iki boşluk. Bunlar tek tek fark edilmez, toplamı "bir tuhaflık var" hissi olarak geri döner.

Tipografide varyasyon sayısını kısmak

Tek bir aile ve o ailenin ağırlık varyasyonları çoğu arayüz için fazlasıyla yeter. Sorun genelde font seçiminde değil, boyut sayısında: dört basamaklı bir ölçekle çözülebilecek yerde on farklı punto dolaşan tasarımlar yaygın. Ölçek kısa olduğunda hiyerarşi kendiliğinden okunur hale gelir, çünkü iki boyut arasındaki fark belirginleşir.

Satır aralığı ayrı bir mesele ve doğrudan erişilebilirliğe bağlanıyor. WCAG'nin metin aralığı ölçütü, kullanıcı satır aralığını yazı boyutunun 1,5 katına çıkardığında içeriğin kırpılmadan çalışmaya devam etmesini istiyor. Yani gövde metnini sabit yükseklikli kutulara sıkıştıran bir yerleşim yalnızca sıkışık görünmüyor, ölçütü de karşılamıyor.

24 ile 16 neden birlikte çalışıyor

Boşluk tavsiyelerinde sık verilen "başlık ile paragraf arası 24, görsel ile paragraf arası 16 piksel" örneği doğru, ama gerekçesi genelde söylenmiyor. İkisi de sekizin katı. Sekiz piksel tabanlı bir basamak sistemi kurulduğunda 8, 16, 24, 32 değerleri düzenli bir ritim üretir ve farklı bileşenler yan yana geldiğinde kenarları tutar.

Aynı yere 22 ve 15 koyulduğunda ekran tek başına bozuk görünmez. O iki bileşen bir listede alt alta geldiğinde ise bir pikselden birkaç piksele kadar sapan boşluklar birikir ve düzensizlik toplamda ortaya çıkar. Grid'in asıl işi de burada: öğeleri tek tek güzelleştirmek değil, bir araya geldiklerinde birbirlerini bozmalarını engellemek. Sol hizalamanın taramayı hızlandırması da aynı sebeple, göz her satırda başlangıç noktasını yeniden aramıyor.

Hiyerarşi kontrastla kuruluyor

Bir öğeyi öne çıkarmanın en ucuz yolu büyütmek sanılıyor. Pratikte kontrast daha çok iş görüyor: etrafındaki her şey nötrken kullanılan tek bir doygun renk, boyutu hiç değiştirmeden birincil eylemi işaretler. Palet dar tutulduğunda bu mümkün, çünkü vurgu rengi başka hiçbir yerde harcanmamıştır.

Rengin tek başına taşıyıcı olmaması gerektiği de burada devreye giriyor. WCAG'nin AA seviyesi normal boyutlu metin için 4,5:1, büyük metin ve arayüz bileşenleri için 3:1 kontrast oranı istiyor. Yalnızca ton farkıyla ayrılan bir buton, renk körlüğü olan kullanıcıda ve gün ışığında telefon ekranında kayboluyor; parlaklık farkı olan buton ikisinde de duruyor. Uyumlu palet denemek için Adobe Color işe yarar, oran kontrolü ise ayrı bir adım.

Tutarlılık ucuz değil

Spotify gibi geniş uygulamalarda ekrandan ekrana geçerken yön kaybetmemenin sebebi, kart yerleşimlerinin, kenar boşluklarının ve başlık hizalarının her yerde aynı olması. Yakınlık kuralı da aynı sistemin parçası: ilişkili öğeler arasındaki boşluk az, farklı gruplar arasındaki boşluk fazla. Kullanıcı gruplamayı çizgiden değil boşluktan okuyor.

Bu tutarlılığın uygulamada bir maliyeti var ve tasarım tarafında genelde hafife alınıyor. Boşluk ve renk değerleri kodda tek bir yerde değişken olarak tanımlanmadıysa sistem ilk üç ekranda tutar, dördüncüde çözülür. "Aynı değerleri kullanın" tavsiyesi, değerleri elle tekrar yazmayı zorlaştıran bir yapı kurulmadıkça uygulanabilir değil.

Görselde iddia ile kodun karşılığı

Görsel optimizasyonu anlatan metinlerde kaliteyi korumak için bilinear interpolasyon önerisi sık geçiyor, oysa küçültme yönünde bu yanlış araç. Bilinear örnekleme, çıktı pikseli başına dört kaynak pikseline bakar. Bir görseli iki kattan fazla küçülttüğünüzde aradaki piksellerin çoğu hesaba hiç girmez; ince desenli yüzeylerde tırtıklanma ve moire çıkar. Küçültmede alan ortalaması ya da Lanczos gibi yöntemler kullanılır, bilinear büyütme yönünde makul bir tercihtir.

Lisans tarafı da teknik bir kontrol. CC0 etiketiyle dolaşan görsellerin bir kısmı ikinci elden yeniden yüklenmiş oluyor ve kaynağı takip edilmediğinde etiket bir şey garanti etmiyor. Görseli projeye almadan önce lisansı ilk yayıncıda doğrulamak, sonradan kaldırma işinden ucuz.