Büyük Görseller ve İşlev Dengesi: Hero Tasarımının Gerçek Maliyeti

Büyük bir hero görseli siteyi tek başına iyi yapmaz, yalnızca ilk saniyeyi belirler. Asıl mesele görselin boyutu değil, onun altında kalan işlevin ne olduğu. Portfolyo sitesinde kaybedilecek pek bir şey yoktur; bilet aramaya gelen kullanıcının karşısına aynı ekranı koyduğunuzda kayıp ölçülebilir hale gelir.

Görsel dikkat çeker, yönlendirmez

Görsellerin duygusal etkisi üzerine söylenenlerin çoğu doğru. Don Norman'ın duygusal tasarım çerçevesi de büyük ölçüde bunun üstüne kurulu: insan beğendiği arayüzü daha hoşgörülü kullanır. Ama buradan "büyük görsel kullanıcı deneyimini iyileştirir" sonucu çıkmaz. Çerçeve görselin ilgi uyandırdığını söyler, kullanıcıyı gitmek istediği yere götürdüğünü değil.

Bir hava yolu firmasının yenilenen ana sayfası bunun tipik örneği. Eski tasarım promosyon kutularıyla doluydu, yenisi sade bir arka plan görseli ve birkaç ikonla açılıyordu. Görsel olarak kıyas kabul etmeyecek kadar iyi. Ama uçuş arama kutusu görselin ritmini bozmasın diye aşağı itilince, siteye tek bir iş için gelen kullanıcı o işi yapamadı. Estetik kazandı, dönüşüm kaybetti.

Hangi sitede işe yarar

Ayrım "beğeni mi, bilgi mi" ekseninde kuruluyor. Portfolyo, sanat, seyahat, ürün lansmanı: kullanıcı zaten bakmaya gelmiştir, büyük görsel sayfanın kendisidir. Bankacılık, kamu hizmeti, e-devlet türü arayüzlerde durum tam tersi. Oraya kimse gezinmeye gelmez, bir iş bitirmeye gelir ve o işi geciktiren her piksel maliyettir.

Apple ana sayfası sık örnek verilir, ama çoğunlukla yanlış yerinden. Oradaki asıl mesele görselin büyüklüğü değil, üst navigasyonun her koşulda sabit ve erişilebilir kalması. Görsel ekranın tamamını kaplayabilir, yeter ki kullanıcının çıkış yolu görselin altında kalmasın.

Faturayı nerede ödüyorsunuz

Büyük görselin maliyeti "sayfa ağırlaşır" kadar genel bir şey değil. Ekranın üstündeki hero görseli çoğu sayfada Largest Contentful Paint'i belirleyen öğedir; yani ölçülen açılış hızı doğrudan o tek dosyanın ne zaman geldiğine bağlanır. Hero görselini loading="lazy" ile yüklemem. O öznitelik tarayıcıya "bunun acelesi yok" demektir ve tam da acelesi olan tek görsele söylenmiş olur.

Pratikte üç ayar işi bitiriyor:

• srcset ve sizes tanımlayıp mobil cihaza 2560 piksel genişliğinde dosya göndermemek.
• Hero'ya fetchpriority="high", ekranın altında kalan görsellere loading="lazy".
• Hero'yu CSS'te background-image yerine <img> ile vermek. Tarayıcı HTML'i tararken onu erken keşfeder, CSS kuralını ise ancak stil dosyası inip işlendikten sonra görür.

Alt metin bir SEO alanı değil

Görsel odaklı tasarım tavsiyelerinde en sık tekrarlanan hata şu: "her görsele anahtar kelime içeren alt metin yazın." Dekoratif bir arka plan görselinin alt metni boş olmalıdır, yani alt="". Ekran okuyucu böyle bir görseli atlar ve doğru davranış budur. İçine anahtar kelime doldurduğunuzda, ekranı görmeyen kullanıcıya her sayfanın başında işe yaramaz bir cümle okutmuş olursunuz.

Kaldı ki görseli CSS'te arka plan olarak verdiyseniz alt metin yazılacak bir yer de yok; o görsel erişilebilirlik ağacında hiç bulunmuyor. Alt metin, görselin kendisi bilgi taşıyorsa yazılır. Ürün fotoğrafı bilgi taşır, tam ekran gradyanlı bir manzara taşımaz.