Mobilde Okunabilirlik: Punto, Satır Uzunluğu ve Neyin İşe Yaradığı
Mobilde okunabilirlik tartışması genelde punto meselesine indirgenir. Küçük ekranda kaybedilen şey yazının boyutu değil, bağlam: okuyucu aynı anda üç paragraf görmek yerine bir buçuk paragraf görür, gerisini hafızasında tutmak zorunda kalır. Punto, satır düzeni, başlık hiyerarşisi ve görsel kullanımı bu yükü azaltmak için elinizdeki araçlar. Hangisinin ne kadar işe yaradığı ise birbirinden çok farklı.
Asıl kayıp bağlamda
Masaüstünde bir ekran dolusu metin okuyucuya kendi konumunu gösterir. Üç paragraf önce ne yazdığını hatırlamasa bile göz ucuyla geri bakar, bulur, devam eder. Mobilde o geri bakış kaydırmaya dönüşür; kaydırma maliyeti düşük görünen ama okuma akışını sıfırlayan bir hareket.
Bunun pratik sonucu şu: mobil için kısaltma yaparken atacağınız ilk şey süs cümleleri değil, okuyucunun bir önceki ekranı hatırlamasını gerektiren cümlelerdir. Kendinden önceki üç paragrafa yaslanan bir çıkarım cümlesi masaüstünde işler, telefonda havada kalır.
Satırlar uzun değil, fazla kısa
Tipografide klasik ölçü satır başına 45-75 karakter. 360 piksel genişliğinde bir telefonda iki yandan 16 piksel boşluk bıraktığınızda metne 328 piksel kalır. 16 piksellik bir gövde fontunda ortalama karakter genişliği kabaca yarım em, yani 8 piksel civarı; satır başına 40 karakter eder. Yani mobildeki sorun satırların uzunluğu değil, alt sınırın altına düşmüş olmaları.
Punto büyütmek bu tabloyu düzeltmez, kötüleştirir. 19 piksele çıktığınızda satır 35 karaktere iner, aynı paragraf iki katı satıra yayılır, sağ kenarda tırtıklı boşluklar ve kelime bölünmeleri artar. Gövde metni için 16 piksel ve 1,5 satır yüksekliği makul bir taban, üstüne çıkmanın getirisi hızla azalıyor. Gerçek kazanç paragrafı kısaltmaktan geliyor.
16 pikselin altına inmenin ayrı bir bedeli var: iOS Safari, font boyutu 16 pikselden küçük bir form alanına odaklanıldığında sayfayı kendiliğinden büyütür. Bir projede mobil formun her dokunuşta zıplamasının sebebini CSS içindeki 14 piksellik tek bir input kuralına kadar takip ettim.
Başlık çalışır, vurgu çoğu zaman çalışmaz
Uzun metni başlıklarla bölmek mobilde en yüksek getirili müdahale. Okuyucu kaydırırken başlıkları tarar, istediği yerde durur, aradığı bölümü bulamazsa sayfayı kapatma kararını da hızlı verir. Başlıkların bilgi taşıması şartıyla: Genel Bakış gibi bir başlık yer kaplar, yön göstermez.
Vurgu bambaşka bir hikaye. Kalın yazı, sayfadaki kalın oranı düşük kaldığı sürece çalışır. Bir paragrafta üç kelime kalınsa göz oraya gider; her paragrafta bir cümle kalınsa hiçbir yere gitmez. Mobil rehberlerinde dolaşan önemli bilgileri kalınla vurgulayın tavsiyesi uygulandıkça kendini iptal eden bir tavsiye. Bir ekranda en fazla bir vurgu, çoğu ekranda sıfır.
Görselle bölme tavsiyesinin ters tarafı
Aynı yazıda iki şeyin birlikte söylendiğini sık görüyorum: sayfa hızlı açılsın, metin görsellerle bölünsün. Bu ikisi aynı yöne çekmiyor. Eklediğiniz her görsel hem bayt hem dikey alan demek; altı görselli bir yazıda okuyucunun kaydırma mesafesi belirgin biçimde uzuyor, yani küçük ekranın asıl sorununu büyütmüş oluyorsunuz.
Ölçüt basit. Görsel metnin söylediğini tekrar ediyorsa çıkarın. Metnin söyleyemediğini gösteriyorsa, bir ekran görüntüsü, bir diyagram, bir öncesi-sonrası karşılaştırması, kalsın. Metni havalandırmak için konan stok fotoğraf mobilde net zarar.
Kalanlara genişlik ve yükseklik verin. Vermezseniz görsel yüklendiği anda altındaki metin aşağı kayar, okuyucu tam o cümlenin ortasındaysa yerini kaybeder. Bu, hız raporlarında düzeltmesi en kolay kalemlerden biri ve iki satır HTML ile çözülüyor.
Okunmayacağını bildiğiniz metinler
Sözleşme, gizlilik politikası, iade koşulları. Bu metinler mobilde okunmuyor, taranmıyor bile; kullanıcı aşağı kaydırıp onay kutusuna basıyor. Bunu kabul edip tasarımı ona göre kurmak, okunacakmış gibi davranmaktan daha dürüst.
Metni kısaltma yetkiniz çoğu zaman yoktur, ama yapısı sizin elinizde: her bölümün başına bir cümlelik sade özet, maddelere içerik taşıyan başlıklar, tek blok kaydırma yerine açılır bölümler. Tarayıcının kendi details ve summary elemanları bu iş için yeterli, üçüncü parti bir bileşene gerek yok. Hukuki sorumluluk aynı kalır, bulunabilirlik değişir.
Sıralama
Hepsini birden yapmak gerekmiyor. Etkisi büyükten küçüğe:
- Metnin kendi uzunluğunu kısaltmak ve bağlama yaslanan cümleleri temizlemek.
- Bilgi taşıyan başlıklarla bölümlendirmek.
- 16 piksel gövde, 1,5 satır yüksekliği, kısa paragraf.
- Vurguyu ve listeleri azaltmak.
- Görselleri gözden geçirmek, çoğunu çıkarmak.
İlk iki madde yazarın işi ve farkı en çok onlar yaratıyor. Geri kalanı tasarımcının işi ve hiçbiri kötü yazılmış bir metni mobilde okunur hale getirmiyor.