Vaka Çalışması Görselleri: Süreci Göstermek, Sayfayı Şişirmemek
Vaka çalışmasının görsel tarafı çoğu portfolyoda en son düşünülen şey oluyor. Metin bitiyor, araya birkaç ekran görüntüsü serpiliyor, iş tamam sayılıyor. Oysa karşıdaki kişiyi ikna eden şey nihai ekran değil, o ekrana nasıl varıldığı; görsellerin asıl işi de o yolu göstermek.
Süreci gösteren görsel, sonucu gösterenden daha çok iş yapar
Bitmiş arayüzün parlak bir render'ı güzel durur ama neredeyse hiçbir şey söylemez. Aynı ekranın üç farklı wireframe denemesi, aralarından hangisinin neden seçildiğini anlatan iki cümleyle birlikte, çok daha fazlasını anlatır. Erken aşama skeçleri, akış diyagramları, kullanıcı testi oturumundan bir kare, anket sonuçlarının basit bir grafiği: bunların hepsi "karar verdim" demek yerine "şöyle karar verdim" demenin yolu.
Peki bir Post-it duvarının fotoğrafı ne anlatır? Tek başına, dürüst olmak gerekirse pek bir şey anlatmaz. Uzaktan çekilmiş renkli bir kalabalık görünür, yazılar okunmaz. O fotoğrafı işe yarar hale getiren şey, altındaki cümlenin duvarın çıktısını söylemesi: kaç fikir çıktı, hangi üç tanesi elendi, neden. Görsel kanıt değil, kanıtın vitrini; kanıtı yazı taşıyor.
Bu yüzden her görselin bir sorusu olmalı. "Bu görsel hangi soruya cevap veriyor?" sorusuna tek cümlelik bir karşılık yazamıyorsanız, o görsel sayfada yer kaplamaktan başka bir şey yapmıyor demektir.
"%60 metin, %40 görsel" oranı neyi ölçüyor?
Portfolyo rehberlerinde sık sık böyle oranlar geçer. Sorun şu ki bu oran ölçülebilir bir şey değil. Neyin yüzdesi: kelime sayısının mı, dikey piksel yüksekliğinin mi, ekranda geçirilen sürenin mi? Tam sayfa genişliğinde tek bir prototip görseli, üç paragraf metinden fazla dikey alan kaplar ama okuma süresinin çok azını alır.
Oranı hedef olarak almak yerine şunu yapın: her bölümde önce metni yazın, sonra o metnin anlattığı şeyi kanıtlayan görseli koyun. Kanıtlayacak bir şey yoksa görseli de koymayın. Böyle bakınca oran kendiliğinden makul bir yere oturuyor, üstelik hangi görselin çıkacağına karar vermek de kolaylaşıyor.
100KB kuralı dosya başına, sayfa ise toplamı yükler
Yaygın tavsiye görselleri 100KB altında tutmak. Makul bir üst sınır, ama vaka çalışmasında tek başına yetmiyor. Yukarıdaki gibi bir sayfada kolayca 15-20 görsel birikir; hepsi kurala uysa bile toplam 1,5-2MB eder. Kural dosya başına kurulduğu için sayfa şişerken uyarı vermez.
İşe sayfa toplamından başlamak daha doğru. Önce bütüne bir bütçe koyun, sonra görsel sayısına bölüp dosya başına düşen payı bulun. On beş görsele 1MB bütçe verdiğinizde ortalama 65KB kalıyor, bu da bazı görselleri küçültmeniz veya bazılarını tamamen çıkarmanız gerektiği anlamına geliyor. İkincisi genelde daha iyi sonuç verir.
Pratikte üç şey işi bitiriyor: JPEG için ImageOptim veya TinyPNG'den geçirmek, uygun olan her yerde WebP'ye çevirmek, ilk ekranın altında kalan görsellere loading="lazy" vermek. Sonuncusu toplam boyutu düşürmez ama ilk yüklemeyi belirgin şekilde hafifletir. Ölçerken tek tek dosya boyutlarına bakmak yerine sayfayı açıp tarayıcının ağ sekmesindeki toplam transfer değerine bakmayı tercih ederim; dosya listesi iyi görünürken toplamın iki katına çıktığı çok oluyor.
Okunmayan görsel, olmayan görseldir
Yoğun bir wireframe'i tam sayfa koyup geçmek masaüstünde sorun olmuyor. Telefonda aynı görsel 380 piksel genişliğe sıkışıyor ve içindeki hiçbir etiket okunmuyor. Karşıdaki kişi portfolyonuza büyük ihtimalle telefondan bakacak.
Çözüm görseli küçültmek değil, kırpmak. Ekranın tamamı yerine tartıştığınız bölümü büyütüp verin, gerekiyorsa tam halini ayrı bir bağlantıya koyun. Alt metinlerde de aynı mantık geçerli: "wireframe-v3.png" hiçbir şey söylemez, "ödeme adımının üç alana indirilmiş hali" ekran okuyucu kullanan birine de, görsel yüklenmediğinde herkese de bir şey söyler.
Kaynaklar