Web Tasarımında Veri Hikayeleştirme: Grafikten Önce Anlatı

Sayfaya grafik koymak veriyi anlatmaz. Ziyaretçi grafiğe iki saniye bakar, ne demek istediğini o sürede çıkaramazsa aşağı kaydırır. Veri hikayeleştirme dediğimiz şey büyük ölçüde sıralama meselesi: önce hangi soruyu sorduğunu söylersin, sonra cevabı taşıyan rakamı gösterirsin.

Grafiğin başlığı iddiayı taşısın

En hızlı kazanç burada. Bir grafiğin üstüne "2024 Dönüşüm Oranları" yazmak, okuyucuya işi devretmektir: rakamlara bakıp sonucu kendisi çıkarsın diye. Çoğu insan çıkarmaz. Onun yerine grafiğin başlığına vardığın sonucu yaz: "Mobilde dönüşüm masaüstünün yarısı kadar." Grafik artık kanıt, soru değil.

Aynı mantık sayfa düzenine de uygulanır. Bölüm başlıkları konu adı değil, cümle olsun. "Sepet Terk Analizi" yerine "Sepeti terk edenlerin çoğu kargo ücretini ödeme adımında görüyor." Okuyucu başlıkları taradığında yazının tamamını almış olur, gövde de bu iddiaları destekler.

Tek başına duran sayı atılır

"Satışlar %40 arttı" bir bilgi değil, yarım bir cümle. Neye göre, hangi aralıkta, hangi taban üzerinde? Dörtten beşe çıkan bir sayı da %25 artıştır. Sayfaya koyduğun her sayının yanında karşılaştırma noktası yoksa o sayı yer kaplamaktan başka iş görmez.

Elemeyi şu üç soruyla yaparım: Bu sayı bir karşılaştırma taşıyor mu (öncesi, rakip, sektör ortalaması)? Okuyucunun beklentisini bozuyor mu? Ona göre bir davranış değiştirebilir mi? Üçüne de hayır çıkıyorsa sayı gitsin, cümle kalsın.

Kaynağı belirsiz istatistiklerden de uzak dur. "Araştırmalara göre insanlar hikayeleri rakamlardan yedi kat daha iyi hatırlıyor" tipindeki cümleler internette sayısız kez kopyalanmış, çoğunun ucu bir yere çıkmıyor. Kendi verinden bir örnek koymak, kaynağı olmayan çarpıcı bir orandan her zaman daha ikna edici.

Anlatı iskeleti sayfaya nasıl oturur

Klasik hikaye yapısı bir ürün ya da vaka sayfasında doğrudan karşılık bulur. Bölümleri baştan yerleştirmek, sonradan "buraya bir grafik daha koyalım" tartışmasını bitiriyor.

Bölüm	İşlevi	Sayfada karşılığı
Durum	Bağlamı kurar	Açılış paragrafı, tek cümlelik özet
Sorun	Neyin yolunda gitmediğini söyler	Mevcut halin ölçümü, kötü tablo
Gelişme	Kanıtı sırayla açar	İki, en fazla üç görselleştirme
Dönüm	Asıl bulguyu verir	Sayfadaki tek büyük rakam
Sonuç	Bundan sonrasını gösterir	Yöntem notu, iletişim ya da indirme

Dikkat edilecek yer "Dönüm" satırı. Sayfada büyük puntoyla duran birden fazla rakam varsa hiçbiri öne çıkmaz. Bir sayfa bir bulgu taşır; kalanlar destek olarak küçük kalır.

Etkileşimin faturasını önce hesapla

İnteraktif grafik, paralaks, kaydırmayla açılan animasyon: hepsi güzel görünür ve hepsinin bir bedeli var. Hazır bir grafik kütüphanesi sıkıştırılmış halde bile 60 KB üzerinde JavaScript getirir, üstüne veri dosyası ve çizim maliyeti biner. Aynı çizgi grafiği elle yazılmış bir <svg> ile birkaç kilobayta sığar ve JavaScript kapalıyken de görünür. Statik bir trend gösteriyorsan ikinciyi seç.

Etkileşimi yalnızca okuyucunun gerçekten soracağı bir soru varsa ekle: "benim şehrimde durum ne", "kendi rakamımı girsem ne çıkar". Süslemek için eklenen hareket, sayfanın en ağır öğesinin ekrana gelme süresini uzatır ve mobilde ilk izlenimi bozar. Hareketli her şeyde prefers-reduced-motion tercihine de uymak gerekir (bu kısmı atlayan hazır tema sayısı hâlâ şaşırtıcı).

Kişiselleştirme çoğu sitede zaten mümkün değil

"Genel istatistik yerine kullanıcıya özel veri gösterin" tavsiyesi kulağa iyi geliyor ama sessiz bir varsayımı var: kullanıcının verisine sahip olmak. Giriş yapmamış, ilk kez gelen bir ziyaretçi için elinde ülke bilgisi ve geldiği bağlantıdan öteye pek bir şey yok. Bu kadarına kişiselleştirme demek kendini kandırmak olur.

Çalışan yol, veriyi kullanıcıdan tek bir alanla istemek. Çalışan sayısını, aylık siparişini ya da metrekaresini girdiği küçük bir hesaplayıcı, elindeki genel istatistiği o kişinin sayısına çevirir. Üstelik girdiyi kullanıcı verdiği için izin sorunu da doğmaz. Bunu üç girdili bir formda tut; alan sayısı arttıkça tamamlama oranı düşer, sonuç ekranına ulaşan kimse kalmaz.

Nereden başlanır

Elindeki sayfayı aç, her grafiğin başlığını oku. Başlık bir sonuç söylemiyorsa yeniden yaz. Sonra karşılaştırma noktası olmayan sayıları sil. Bu iki adım, çoğu sayfada animasyon ya da tema değişikliğinden daha fazla fark yaratır ve yarım saat sürer. Kalan işi, gerçekten cevaplaması gereken bir soru kaldıysa ondan sonra düşün.