Arayüzde Görsel Seçimi: Tür, Boyut ve Alternatif Metin

Bir arayüzdeki her görsel üç maliyet üretir: bant genişliği, dikkat ve bakım. Bilgi taşımayan görsel bu maliyeti karşılıksız ödetir. O yüzden ilk soru hep aynı olmalı: bu görseli kaldırırsam sayfa ne kaybeder?

Tür seçimi kolay, kaynak seçimi zor

Fotoğraf, illüstrasyon, ikon ve veri grafiği farklı işler yapar. Fotoğraf gerçeklik iddiası taşır: ürünün kendisi, ekibin kendisi, mekânın kendisi. İllüstrasyon soyut bir süreci tek karede anlatabildiği için akış ve mimari şemalarında fotoğrafı yener. İkon ise ya metinle birlikte ya da kullanıcının zaten tanıdığı bir kalıpsa (çöp kutusu, büyüteç) iş görür; yeni icat edilmiş bir ikon sessiz bir bilmecedir.

Asıl sorun türde değil kaynakta. Toplantı masasında el sıkışan gülümseyen takım elbiseliler hiçbir şey anlatmaz, üstelik ziyaretçi o kareyi başka on sitede daha görmüştür. Telefonla çekilmiş, ışığı vasat ama gerçek bir ürün fotoğrafı, kusursuz ışıklı bir stok karesinden daha ikna edicidir.

Tutarlılık bir zevk değil, kural kümesidir

"Görseller birbiriyle uyumlu olsun" cümlesi tek başına hiçbir şeyi engellemez. Uyum, yazıya dökülmüş birkaç sayıya indiğinde korunur: ikonlarda çizgi kalınlığı, köşe yarıçapı, ızgara boyutu; fotoğraflarda kontrast aralığı, renk sıcaklığı, kadraj oranı. Bunlar tasarım sistemine birer değer olarak girmezse ilk üç ayda dört farklı ikon seti birikir. İkon hat kalınlığını gövde metninin yazı ağırlığına yaklaştırmak da işe yarar, aksi halde ikonlar yanındaki metinden daha gürültülü durur.

"Sayfa başına 1-2MB" yanlış soru

Toplam boyut hedefi, hangi ekranda ölçtüğünüzü söylemediği sürece boş bir sayıdır (tek bir megabayt hedefini kaba buluyorum, gene de hiç bütçe olmamasından iyidir). Doğru soru şu: aynı görselin kaç farklı sürümünü üretiyorsunuz ve tarayıcı hangisini indiriyor?

Pratikte bu srcset ve sizes ile çözülür, ve ikincisi sürekli atlanır. sizes yazmazsanız tarayıcı görselin viewport genişliğinin tamamını kaplayacağını varsayar, yani 100vw; 320 piksel genişliğinde görünecek bir küçük görsel için listedeki en büyük adayı indirir. Üç boyut üretip sizes'ı unutmak, hiç srcset yazmamakla neredeyse aynı kapıya çıkar.

İki ayar daha pahalıya patlar. Sayfanın en üstündeki büyük görsele loading="lazy" koymak LCP'yi doğrudan geciktirir, çünkü tarayıcıya "bunu sonra düşün" demiş olursunuz; oysa ölçülen şey tam olarak o görselin ne zaman geldiğidir. Tersine, o tek görsele fetchpriority="high" vermek ölçülebilir bir kazanç sağlar. Geri kalan her şey tembel yüklenebilir.

Format tarafında karar sıkıcı derecede basit: fotoğraf için AVIF ya da WebP, çizim ve ikon için SVG, arada kalan yok. PNG'yi yalnızca şeffaflık gereken ve vektöre çevrilemeyen karelerde tutun.

Bilgi taşıyan görsel önce gelir

Bir görsel ürünü gösteriyorsa, bir süreci anlatıyorsa ya da bir veriyi taşıyorsa sayfada yeri tartışılmaz. Dekoratif olan ise yer değil, artık alan kaplar: metin bitmiş, boşluk fazla gelmiş, araya bir şey konmuştur. Sayfayı yalnızca görselleriyle, metni silerek okuduğunuzda konunun ne olduğu anlaşılmıyorsa görsel seçimi işini yapmıyordur.

Yoğun metinli sayfalarda zengin görsel dengeyi kurar, sade sayfalarda aynı görsel gürültü olur. Bu yüzden görsel yoğunluğu sayfa şablonuna değil, o sayfadaki metnin yoğunluğuna bağlanmalı.

Grafikte mürekkep hesabı

Tufte'nin veri-mürekkep oranı fikri hâlâ en kullanışlı filtre: grafikteki her çizgi bir veriyi taşıyor mu, taşımıyorsa silin. Izgara çizgileri soluklaşır, çerçeve kalkar, gölge zaten gereksizdir. Üç boyutlu pasta grafiği ise estetik bir tercih değil, ölçüm hatasıdır: perspektif öne bakan dilimin alanını büyütür, arkadakini ezer, yani grafik gösterdiği yüzdeyi yalanlar. Pasta grafiğini iki boyutta ve en fazla üç dilimle kullanın, ötesinde çubuk grafik her zaman daha okunur.

Alternatif metin ve dosya adı

Kaynak metinlerde sık rastlanan iki tavsiye yan yana geldiğinde çelişir: "her görsele alternatif metin yazın" ve "dekoratif görselleri ayıklayın". Ayıklayamadığınız dekoratif görselin doğru alternatif metni bir açıklama değil, boş dizedir: alt="". Boş alt, ekran okuyucuya "burada anlam yok, atla" der. Süs amaçlı bir arka plan deseni için "mavi soyut desen" yazmak erişilebilirlik değil, gereksiz bir duraktır. Özniteliği hiç yazmamak ise bambaşka bir şey: o durumda okuyucu görseli bilinmeyen sayar ve bazı tarayıcılarda dosya adını okur.

Anlam taşıyan görsellerde alt metin görselin işlevini anlatmalı, içindeki her şeyi saymamalı. Bir butonun içindeki ikonun alt metni "büyüteç" değil "Ara"dır, çünkü kullanıcıyı ilgilendiren şey şekil değil eylem. Grafiklerde en iyisi, sonucu tek cümlede söyleyip ayrıntıyı grafiğin altındaki metne ya da tabloya bırakmak.

Dosya adı konusunda beklentiyi düşürün. Açıklayıcı dosya adı görsel aramada işe yarar, erişilebilirlikte neredeyse hiç: alt metin varsa ekran okuyucu dosya adına bakmaz bile. urun-detay-kirmizi-koltuk.webp yazmak iyidir, ama bunu erişilebilirlik hanesine yazmayın.

Ölçmeden emin olmayın

Görsel kararlarının çoğu tartışmayla değil ölçümle biter. Sayfayı yavaş bir bağlantı simülasyonuyla açın, LCP'yi hangi görselin belirlediğine bakın, ekran okuyucuyu açıp sayfayı baştan sona dinleyin. Bu üçü yarım saat sürer ve estetik tartışmalarının çoğunu gereksiz kılar.