Bir Heatmap Nasıl Okunmalı?

Bu yazıda ise bir ısı haritasını nasıl okuyabileceğimize değinerek süreci tamamlayacağım. İlerleyen süreçte ısı haritasını veri görselleştirme süreçlerinde çeşitli örnekler üzerinden anlatmaya devam edeceğim. Ayrıca, yine bu yazı içerisinde fikir vermesi açısından farklı yoğunluk haritası yaklaşımlarına da yer vereceğim. İleri okumalar bölümünde ise konuyla ilgili olarak çeşitli ek yazıları görebilirsiniz. O halde başlayalım; bir ısı haritasını (heatmap) nasıl incelenmeli ve yorumlamalıyız?

Isı Haritalarının (Heatmap) Kullanımı

Öncelikle, Hotjar, Yandex Metrica ve Google Analytics bağlamında değerlendirdiğimizde bir ısı haritası arayüz üzerindeki kullanıcı etkileşimlerini (tıklama, gezinme ve kaydırma gibi) ifade edecektir.

Isı Haritası Örnekleri

Aşağıda bu kapsamda ele alınabilecek bazı örnek ısı haritası örnekleri iletiyorum.

Diğer yandan, herhangi bir uygulama belirtilmemiş ise ısı haritasını çok daha genel okuyabiliriz. Aşağıdaki görselde soldan sağa beden ısısı, yüz okuma ve göz takibi işlemlerinin sonucu olarak elde edilen ısı haritası değerleri yer almakta.

Elbette bunlar sadece temel yaklaşımlar. Isı (veya yoğunluk) haritalarını zaman bağlamında da kullanabiliriz. GitHub tarafından profil sayfalarında sunulan zaman serileri temelli calendar heatmap güzel bir örnek olacaktır. Benzer yaklaşımlar için cal-heatmap¹ ve d3-heatmap² modüllerine göz atabilirsiniz. Peki, örnekler sadece bunlarla mı sınırlı? Elbette hayır.

Yukarıdaki örnekler yine temel yaklaşımlardan ikisini sunmakta. Koyudan açık veya zır renklerle soğuktan sıcağa doğru X ve Y eksenlerinde sayı ve puan yoğunluklarını göstermekteler.

Yine temel yaklaşımlardan olan bu iki örnekte zaman serileri örneklendirilmiş durumda.

Haritalar da yine ısı / yoğunluk haritalarında sıklıkla değerlendirilmekte. Örneğin, depremler gibi afetler, yağış yoğunlukları, nüfus ve benzeri veriler yine ısı haritası bağlamında kolaylıkla görselleştirilmekte. Hazır konumlardan bahsetmişken örnekleri biraz daha detaylandıralım ve yol/trafik/araç kullanımları gibi verilerin haritalar üzerinden nasıl sunulabileceğine bir göz atalım.

Görüldüğü üzere yoğunluklar noktasal ve çizgisel olarak haritalar üzerinden kolaylıkla ifade edilebilmekte.

Son örnek ise mekan içi bir yaklaşımı ifade etmekte. VR, AR ve kamera teknolojileri ile hareket alanları (eye tracking yaklaşımına benzer olarak) konum bilgileri üzerinden ısı haritası ile değerlendirilebilmekte ve bu sayede mekan içi etkinlikler kolay bir şekilde yorumlanabilmekte.

Elbette bu örnekleri ve yaklaşımları daha da çeşitlendirmek mümkün. Ancak, temel yaklaşım her durumda yoğunluklarına göre renk değerleri üzerinden ifade edilecektir. Kimi zaman grafik eleman noktasal veya çizgisel olarak değişiklik gösterebilir. Fakat, bu görselin sunduğu ifadede bir farklılık yaratmaz.

Isı Haritası İçin Kontrol Listesi

Isı haritası analizi ile yanıtlanabilecek pek çok soru mevcut. Ancak, özellikle öne çıkan 5 soruya kısaca değinebiliriz. Diğer sorulara ise durum senaryoları bağlamında açıklamalar getirebiliriz.

Ziyaretçiler içeriği ilgi çekici / önemli olarak görünüyor mu?
Ziyaretçiler anahtar sayfa öğelerini (bağlantılar, düğmeler ve diğer eylem çağırları) tıklıyorlar mı?
Ziyaretçiler tıklanabilir olmayan unsurlarla karıştırılıyor mu?
Ziyaretçilerin dikkatini dağıtabilecek unsurlar mevcut mu?
Ziyaretçiler cihaz uyumluluğu ile ilgili sorun yaşıyor mu?

Isı Haritasının Okunması

Isı haritaları, kullanıcıların web sitesi, poster, harita vb. elemanlarla nasıl etkileşime geçtiklerini, ne yaptıklarını, hareket yollarını, nerelere ilgi gösterdiklerini (sıcak) veya neleri görmezden geldiklerini (soğuk) anlamanın güçlü bir yoludur. Renkleri maviden kırmızıya veya açıktan koyuya doğru ölçeklendiren ısı haritaları, en fazla görüntü ve etkileşimi kırmızı alan, görmezden gelinen alanları ise mavi gibi soğuk bir renk alanı ile ifade eder; böylece, kullanıcıların ne tıkladığını, içinde gezindiğini veya neyi görmezden geldiğini hemen anlayabiliriz.

Isı haritaları çoğu zaman etkileşimlerin ortalama bir değerini gösterir. Hotjar gibi araçlar ısı haritalarını kaydırma haritası (scroll maps), tıklama haritası (click maps) ve hareket haritası (move maps) eylemleri üzerinden mobil ve desktop cihazlar için ayrı ayrı sunarlar³ ⁴.

Bağlantı Testi (Link Test)

Bir arayüz üzerinden değerlendirilecek olursak, ısı haritası ile takip edilecek sayfada bağlantılar, butonlar, eylem çağrıları ve benzeri tıklanabilir veya tıklanamaz pek çok eleman mevcut olacaktır. Isı taritası test sürecinde bağlantı olan ve olmayan alanların anlaşılır olduğundan emin olmak, boş tıklamaların önüne geçmek gerekmektedir.

Dikkat Dağınıklığı Testi (The Distraction Test)

Dağınıklığı aynı anda görülebilen (yan yana, alt alta vb.), kullanıcının tek seferde görebileceği elementlerin alakalı olmaması şeklinde ifade edebiliriz. Bu tür bir durumda, kullanıcının algısı rekabet halindeki diğer uyaranlar nedeniyle bölünecektir. Sayfanın genelindeki etkinlik dağılımı öne çıkan bir element olmadığı veya rekabet halinde çok fazla element olduğu anlamına gelebilir.

Bilgi Testi (The Information Test)

Kullanıcılar görüntüledikleri alandan herhangi bir etkileşim gerçekleştirmeden ayrılıyorlarsa aradıkları konuya dair bir bilgiye ulaşamadıkları düşünülebilir. Genellikle bir metin seçimi ve/veya tıklama kullanıcının sunulan bilgi ile ilişki kurduğunu gösterir. Ancak, web sayfası gibi bir alanda sadece scroll etkinliği gerçekleşiyor ise kullanıcının içerik ile ilişki kuramadığı düşünülebilir.

Etkileşim Testi (The Engagement Test)

Sayfa içerisinde öne çıkan (tasarım bağlamında) elementler beklenen etkileşimi alamıyor, kullanıcılar tasarımı farklı bir şekilde okuyor/değerlendiriyor olabilir. Bu tür durumlarda, kullanıcı etkileşimleri artırmaya yönelik hazırlanan a/b testleri ile alternatif tasarım yaklaşımları test edilebilir.

Derinlik Testi (The Depth Test)

Kullanıcılar özellikle mobil bir deneyimde sayfa derinliğini anlayamayabilirler. Lazy loading gibi yapılar bu süreci etkiliyor olabilir. Ek olarak, bir hata da içeriğin yüklenmesini ve/veya görüntülenmesini kısıtlıyor olabilir. Bu gibi durumlara karşı sitede bir derinlik olduğu ve scroll’un X ve/veya Y ekseninde hareket edebileceğinin ifade edilmesi gerekir. Eğer önemli alanlar ilk görüntülenen alan dışında kalıyorlar ise yeni bir tasarım düzenlemesi veya doğrudan ilgili alana erişim gibi seçenekler sunulabilir.

Cihaz Testi (Device Test)

Masaüstü bilgisayar, akıllı cep telefonu, tablet, projeksiyon cihazı, VR gözlük ve benzeri pek çok cihaz farklı teknik özellikler bağlamında (işletim sistemi, çözünürlük gibi) içerik erişiminde kullanılabilmekte. Test sürecinde bu cihazların içeriğe erişim ve içeriği sunuş biçimlerinin de ayrıca kontrol edilmesi gerekmektedir. Bir arayüzden bahsediyor isek, arayüz cihaz uyumlu (responsive) ve ilgili bilgiyi (bkz. bilgi test) dikkat dağınıklığına sebebiyet vermeyecek şekilde (bkz. dikkat dağınıklığı testi) işlemelidir.

Odak Yoğunluk Testi (Fold Test)

Fold test için tam bir karşılık bulamadım. Şimdilik, odak yoğunluğu gibi bir geçici ifade ile devam edelim. Odak yoğunluk ile kastedilen ise kullanıcıların web sitesini veya mobil uygulamayı görüntüledikleri ilk anda (landing), herhangi bir scroll etkinliği gerçekleştirilmeden gördükleri alandır. Bu alan görüntülenen içeriğe dair güvenin sağlanması ve sürdürülebilmesi için kritik bir göreve sahiptir.

Başlık Testi (Header Test)

Kullanıcılar bir web sitesine giriş yaptıklarında görecekleri ve etkileşime geçecekleri ilk alan header alanı olacaktır. Navigasyon, arama ve benzeri alanların yer bulduğu header alanı mümkün olduğu kadar yalın bir şekilde kullanıcılara sunulmalıdır.