Mobil Listelerde Thumbnail: Yerleşim, Boyut ve Gereklilik Kararı
Mobil bir listede her satıra küçük resim koymak listeyi zenginleştirmez, çoğu zaman sadece uzatır. Thumbnail'ın tek işi var: kullanıcının iki seçenek arasındaki farkı metni okumadan görmesini sağlamak. Bu işi yapmıyorsa yer kaplar, sayfayı ağırlaştırır, gözü asıl bilgiden uzaklaştırır.
Görsel ayırt etmiyorsa listede işi yok
Ölçüt basit: görselleri kapattığınızda liste aynı hızda kullanılabiliyorsa o görseller dekordur. Çay çeşitlerini düşünün. Yedi kutunun minik fotoğrafı birbirinin aynısı çıkar, kullanıcı hiçbirini diğerinden ayırt edemez. Orada thumbnail'ın yerine demleme süresi ya da kafein oranı yazmak listeyi gerçekten kullanılır hale getirir.
Tersi de net: moda, otel, mekân, fotoğraf ve video galerilerinde görsel içeriğin kendisidir. Bir elbiseyi metinle tarif etmeye çalışmak kullanıcıyı yavaşlatır. Bu kategorilerde thumbnail'ı küçültmek değil, büyütmek gerekir.
Sol yerleşim, görselin listeyi yönettiği yerde
Seçimi görsel belirliyorsa sola alın, metin sağda aksın. Göz satır başında zaten durduğu için tarama görselden görsele atlar, okuma hiç devreye girmez.
Metin belirleyiciyse yerleşim ters çevrilir. Asıl fayda göz akışında değil, hizalamada: listedeki bazı öğelerde görsel varsa bazılarında yoksa, sol yerleşimde başlıkların başlangıç noktası satır satır kayar ve liste bozuk görünür. Görseli sağa aldığınızda bütün başlıklar aynı noktadan başlar, görseli olmayan satır da sorun çıkarmaz. Boş kutu yerine placeholder koymak bu problemi çözmez, sadece gri dikdörtgenlerden bir kolon üretir.
Boyut, kırpma ve format
Liste thumbnail'ı pratikte 40 ile 64 piksel arasında bir kareye sıkışır. O ölçekte bir ürün fotoğrafının tamamını göstermeye çalışmak anlamsızdır, kalan tek şey bulanık bir leke olur. Görseli küçültmek yerine konuya kırpın: ayakkabıysa ayakkabı, otel odasıysa yatak kadraja tam otursun.
Kaynaklarda sık geçen "SVG kullanın, hem net hem hızlı" tavsiyesi burada yanlış adrese düşüyor. SVG ikon, logo ve çizgi grafikler için doğru format; vektör kaynağı olan işlere yarar. Ürün fotoğrafının vektör karşılığı yoktur, bir JPEG'i SVG'ye çevirmek onu vektöre dönüştürmez, sadece aynı rasteri XML içine sarar. Fotoğraflar için WebP ya da AVIF, ikonlar için SVG. Karar formatın modasına göre değil, görselin kaynağına göre verilir.
Listeye koyacağım görseli orijinal boyutuyla gönderip CSS ile küçültmem. 1600 pikselli bir fotoğrafı 48 piksele sığdırmak tarayıcıya bedavaya gelmiyor, indirilen bayt da aynı kalıyor. Sunucu tarafında listeye özel bir boyut üretilir, ekran yoğunluğu için iki katı yeterlidir.
İki teknik ayrıntı listeyi görünür biçimde düzeltir. Görsel etiketlerine genişlik ve yükseklik yazın, yoksa görseller yüklendikçe satırlar aşağı kayar ve kullanıcı yanlış öğeye dokunur. Tembel yüklemeyi de her satıra uygulamayın: ilk ekranda görünen üç dört öğeye loading="lazy" koyduğunuzda o görseller kasten geciktirilir, kullanıcı boş listeyle karşılaşır. Tembel yükleme katlamanın altında işe yarar.
Katkısını ölçmek
Thumbnail'ın işe yarayıp yaramadığını memnuniyet sorusuyla anlayamazsınız. "Görselli hali daha güzel mi?" diye sorduğunuzda herkes evet der, çünkü görsel her zaman daha güzel görünür. Ölçülecek şey başka: kullanıcı aradığı öğeyi kaç saniyede buluyor ve doğru olanı ilk denemede seçiyor mu.
Bunun için büyük bir düzeneğe gerek yok. Beş altı kişiye iki basit prototip gösterip aynı görevi verin, süreyi ve yanlış dokunmaları sayın. Fark yoksa görseller kalmasın; fark varsa hangi kategoride çıktığına bakın, çünkü sonuç genelde tüm liste için değil belli bir içerik tipi için geçerli olur.