Tasarımda Beyaz Alan: Mikro, Makro ve Kaydırma Bedeli

Beyaz alan, tasarımdaki ögelerin arasında kalan boşluğun adı. Rengi beyaz olmak zorunda değil, arka plan koyu da olabilir; boşluk olarak davranması yeterli. Bu boşluğu doğru ayarlamak metni okunur kılar ve gözü istediğiniz yere çeker. Bir yerden sonra da okuyucuya fazladan kaydırma yükü bindirir, ki bu kısmı genelde konuşulmaz.

Mikro boşluk: satır, harf, kenar

Mikro boşluk, küçük ölçekli olanların tamamı: satır aralığı, harf aralığı, paragraf kenarları, menüdeki bağlantıların arasındaki mesafe. Okuma eylemini doğrudan bu ayarlar taşır.

En görünür örneği satır aralığı. 16 piksellik gövde metninde satır aralığını 1.2'de bırakırsanız göz bir satırın sonundan bir sonrakinin başına dönerken zaman zaman yanlış satıra iner, okuyucu da nerede kaldığını arar. 1.5 civarı bu hatayı büyük ölçüde keser. Satır uzunluğu arttıkça da aralık ihtiyacı artar, çünkü gözün dönmesi gereken yatay mesafe uzar.

Makro boşluk: bloklar ve sayfa kenarı

Makro boşluk, ana bölümlerin arası ve sayfanın kenarlarında bırakılan geniş alan. İşi okunabilirlik değil, hiyerarşi kurmak: neyin nereye ait olduğunu, hangi başlığın hangi paragrafları topladığını çizgi çekmeden anlatır.

Google anasayfası bunun eski ve hâlâ geçerli örneği. Sayfada arama kutusundan başka neredeyse hiçbir şey yok, dolayısıyla kullanıcıya "şimdi ne yapmalıyım" sorusu hiç sorulmuyor. Aynı sadeliği bir e-ticaret kategori sayfasına taşımaya çalışmak ise ters teper, orada kullanıcının işi karşılaştırma yapmak ve karşılaştırma yoğunluk ister.

Aktif ve pasif boşluk

İkinci bir ayrım, boşluğun bilerek mi bırakıldığı üzerinden. Aktif boşluk kasıtlıdır: bir eylem butonunun etrafını genişçe boşaltırsınız, göz oraya gider. Pasif boşluk ise ögelerin doğal yan ürünü, satır sonları ve harf aralıkları gibi.

Bu ayrımın pratik faydası şu: yer sıkıştığında hangisini kısacağınızı söyler. Pasif boşluğu kısarsanız metin okunmaz hale gelir, geri dönüşü yoktur. Aktif boşluğu kısarsanız yalnızca vurgu zayıflar, sayfa çalışmaya devam eder. Sıkıştıysanız ikincisinden feragat edin.

Boşluk bedava değil

Boşluk arttıkça sayfa uzar, bu da mobilde bedeli olan bir şey. Somut bakalım: 375 piksel genişliğinde bir telefonda gövde metni satır başına kabaca 40 karakter alır. 900 kelimelik bir yazı yaklaşık 5.400 karakter, yani 135 satır. Satır aralığı 1.4 iken her satır 22,4 piksel, toplam 3.024 piksel. 1.7'ye çıkarsanız satır 27,2 piksele, toplam 3.672 piksele gider. Fark 650 piksel, küçük bir telefonda neredeyse tam bir ekran boyu fazladan kaydırma.

"Yoğun içerikli sitelerde mikro boşluğu artırın" tavsiyesi bu yüzden tek başına eksik. Uzun bir yazıda satır aralığını cömertleştirmek okumayı kolaylaştırır ama yazıyı da uzatır, uzayan sayfa terk oranını yukarı çeker. Çözüm satır aralığını geri kısmak değil; kısaltılacak yer paragraf araları, bölüm araları ve en çok da metnin kendisi. Okunabilirlik ile kısalık çatıştığında kısalık kazanır, çünkü okunmayan paragrafın satır aralığı önemsizdir.

Kodda karşılığı olmayan boşluk tutmaz

Tasarım kararı olarak "burada biraz daha boşluk olsun" demek kolay, uygulamada bunun karşılığı bir sayı olmak zorunda. Tek tek piksel vermek yerine 4 ya da 8'in katlarından oluşan bir boşluk ölçeği kurmak işi ciddi biçimde kolaylaştırır: seçenek sayısı azalır, aynı ilişki her ekranda aynı görünür (göz kararı verilmiş 13 piksellik boşluklar sonradan her kırılma noktasında ayrı bir düzeltme olarak geri geliyor).

Ölçme tarafında bir uyarı: boşluk oranını tek başına A/B testine sokmak çoğu sitede işe yaramaz, fark ölçüm gürültüsünün altında kalır. Anlamlı sonuç almak istiyorsanız satır aralığını, punto ve satır uzunluğunu birlikte değiştiren iki tipografi ölçeğini karşılaştırın. Boşluk zaten yalnız çalışan bir değişken değil, punto ve satır uzunluğuyla birlikte anlam kazanıyor.