Isı haritası (heatmap) nedir, nasıl okunur?

Kısaca

Isı haritası, binlerce ziyaretin tek bir ekran görüntüsü üzerine yığılmış halidir. Tek tek kullanıcıları değil, toplamı görürsünüz. Hızlı bir ilk bakış için bu yüzden çok işe yarar.

Ama renk bir yorum değildir. Kırmızı bir alan, insanların orada başarılı olduğunu da gösterebilir, takılıp kaldığını da. Bu sayfada ikisini ayırmanın yollarını anlatıyorum.

Isı haritası türleri

NN/g'nin görsel analitik eğitimi dört tür sayar: tıklama, kaydırma, hareket ve gelir haritaları. Aşağıda ilk üçünü anlatıyorum. Sonra laboratuvarda üretilen göz izleme haritasına geçiyorum.

Tıklama haritası

Ziyaretçilerin sayfada nereye tıkladığını ya da dokunduğunu gösterir. Microsoft Clarity'nin belgesi, tıklamaları farenin ekrandaki konumuna göre değil, tıklanan öğeye göre topladığını yazıyor. Belgeye göre bu yöntem farklı ekran boyutlarında ve duyarlı tasarımlarda da doğru sonuç verir.

Tıklama haritasının alt türleri de var. Clarity'nin belgesinde tüm tıklamalar, ölü tıklamalar, öfke tıklamaları, hata tıklamaları, ilk ve son tıklamalar ayrı ayrı listeleniyor.

Kaydırma haritası

Ziyaretçilerin sayfada ne kadar aşağı indiğini gösterir. Üst kısım sıcak, alt kısım soğuktur. Clarity burada bir de ortalama ekran sınırı (average fold) gösterir. Belgeye göre bu çizgi, kullanıcıların kaydırmaya başlamadan önce ortalama olarak gördüğü yeri gösterir.

Kaydırma haritası tek bir soruyu cevaplar: önemli içerik görülüyor mu? Görülmeyen bir butonun tıklanmaması, butonun kötü olduğunu göstermez.

Hareket haritası

Fare imlecinin sayfada nerede gezindiğini gösterir. Dokunmatik ekranda imleç olmadığı için bu harita bence en çok masaüstünde anlam taşır.

Ben hareket haritasını en zayıf kanıt sayarım. İmlecin durduğu yer, kişinin baktığı yer olmayabilir. Okurken imleci bir kenara bırakan çok insan var.

Göz izleme haritası

Bir de laboratuvarda çıkan ısı haritası var. NN/g'nin sözlüğü ısı haritasını, göz sabitlemelerinin sayısını ve süresini bir arayüz üzerinde toplayan nicel bir görsel diye tanımlar. Kate Moran'ın NN/g yazısındaki renk kodlamasında kırmızı alanlar en çok ve en uzun bakılan yerlerdir. Renksiz kalan yere hiçbir katılımcı bakmamıştır.

Göz izleme haritası özel bir cihaz ve bir test oturumu ister. Bu rehberin geri kalanı, canlı sitede toplanan tıklama ve kaydırma haritalarını anlatıyor.

Hangi soruya hangi harita?

Sorunuz	Açacağınız harita
Ana buton görülüyor mu?	Kaydırma haritası, cihaza göre ayrı
Ziyaretçiler tıklanmayan bir şeye tıklıyor mu?	Tıklama haritası, ölü tıklama filtresiyle
Menüde hangi bağlantı kullanılıyor?	Tıklama haritası, ilk tıklamalar
Uzun bir açıklama okunuyor mu?	Kaydırma haritası, sonra birkaç oturum kaydı
Kullanıcı neye bakıyor?	Hiçbiri tam cevap vermez. Göz izleme testi ya da kullanılabilirlik testi gerekir.

Bir ürün sayfasında deneyin

Aşağıda kurgusal bir kahve mağazasının ürün sayfası var. Üstteki butonlarla tıklama ve kaydırma katmanları arasında geçiş yapın. Sonra aynı haritayla ilgili üç soruyu cevaplayın.

Isı haritası katmanı

Demlik Sepet (0)%4

%100 gördü

%38

El değirmeni, seramik çark

1.450 TL

Sepete ekle%22

Ortalama ekran sınırı (fold)

%86 gördü Ücretsiz kargo, 2 iş gününde kapınızda%19

%52 gördü

Ürün açıklaması

Seramik çark 18 kademede ayarlanır. Türk kahvesinden filtre kahveye kadar öğütür.

%18 gördü Yorumlar (126)%2

AzÇok

Tıklama haritası açık. En sıcak alan ürün fotoğrafı, tıklamaların %38'i orada. Kargo satırı bir bağlantı değil ama tıklamaların %19'unu alıyor.

Kurgusal bir mağaza ve kurgusal veriler. Etiketlerdeki yüzdeler tıklamaların sayfa içindeki payıdır, kalan %15 başka yerlere dağılır. Kaydırma katmanındaki yüzdeler, o bölüme kadar inen ziyaretçilerin payıdır.

Bu tablo, audit'lerde sık karşılaştığım bir durum. Fotoğraf ve kargo satırı çok tıklanıyor ama ikisi de tıklanınca bir şey yapmıyor. Yorumlar ise iyi bir bağlantı olduğu halde neredeyse hiç görülmüyor.

Bu haritadan ne çıkarırsınız?

Ürün fotoğrafı en sıcak alan. Bundan ne çıkarırsınız?

A. Fotoğraf çok iyi çalışıyor, ona dokunmayın.B. Ziyaretçiler fotoğrafı büyütmek istiyor olabilir. Kayıtlarda tıklamadan sonra ne olduğuna bakarım.C. Fotoğrafı küçültüp butonu büyütürüm.

Benim cevabım: B. Yoğun renk ilgiyi gösterir, başarıyı göstermez. Fotoğraf tıklanınca büyümüyorsa bu tıklamalar karşılıksız kalıyor olabilir. Bunu bir oturum kaydında birkaç dakikada görürsünüz.

Yorumlar bağlantısı neredeyse hiç tıklanmıyor. Neden olabilir?

A. Ziyaretçiler yorumlarla ilgilenmiyor.B. Bağlantının rengi yeterince dikkat çekmiyor.C. Ziyaretçilerin yalnızca %18'i o bölüme iniyor.

Benim cevabım: C. Görülmeyen bir şey tıklanamaz. Tıklama haritasını kaydırma haritasıyla birlikte okuyun. Yorum sayısını ve puanı sayfanın üstüne, fiyatın yanına taşımak denenecek ilk iştir.

Bu harita masaüstü ve mobil oturumların toplamından çıktı. İlk ne yaparsınız?

A. Haritayı cihaza göre ayırır, ikisine ayrı bakarım.B. Daha fazla veri toplanana kadar beklerim.C. Olduğu gibi karar veririm, ortalama yeterli.

Benim cevabım: A. Masaüstünde iki sütun olan sayfa, mobilde tek sütuna iner. Aynı buton iki cihazda farklı yükseklikte durur. Karışık harita iki farklı sayfanın üst üste bindirilmiş halidir.

Sorular yukarıdaki kurgusal haritaya göre. Bir seçenek işaretleyince açıklama hemen altında belirir. Cevaplar benim okuma biçimim.

Ürün sayfasının hangi parçalarının üstte durması gerektiğini ürün detay sayfası kalıbında ayrıca anlattım.

Isı haritası nasıl okunur

Bir haritayı açmadan önce ne aradığınızı bir cümleyle yazın. "Sepete ekle butonu görülüyor mu?" iyi bir sorudur. "Bakalım ne var" ile açılan harita, size hep bir şey varmış gibi gösterir.

Ben bir haritayı şu sırayla okurum:

1. Cihazı seçin. Masaüstü ve mobil haritayı ayrı açın. Clarity'nin kaydırma haritasında bunun için bilgisayar, tablet ve mobil seçimi var.
2. Dönemi sabitleyin. Bir kampanya haftası ile sıradan bir haftayı aynı haritada toplamayın. Sayfa o arada değiştiyse, eski ve yeni tasarım birbirine karışır.
3. Sayıya bakın. Haritanın kaç sayfa görüntülemesinden çıktığını not edin. Az veriyle çizilen harita, birkaç kişinin davranışını olduğundan büyük gösterir.
4. Önce kaydırma, sonra tıklama. Bir öğenin az tıklanması, ancak görüldüyse bir anlam taşır.
5. Beklentiyle karşılaştırın. En sıcak alan sizin en önemli bulduğunuz alan mı? Değilse not alın.
6. Kayıtlara inin. Şaşırtan her alan için birkaç oturum kaydı izleyin. Haritanın gösterdiği "ne"nin yanına "neden"i koyun.

Sık yapılan yanlış okumalar

Renk yoğunluğu başarı değildir

Kırmızı alan "burası çalışıyor" demek değildir. Tıklanmayan bir yazıya tekrar tekrar tıklayan kullanıcı da o alanı kırmızıya boyar. Bir öğe tıklanabilir görünüyor ama değilse, harita bir işaretçi sorununu başarı gibi gösterebilir.

Tersi de geçerli. Ödeme sayfasında az tıklanan bir alan sorun olmayabilir. Kullanıcı formu hızla dolduruyorsa harita sakin görünür, bu da iyi bir şeydir.

Örneklem küçükse harita gürültüdür

Kate Moran'ın 2017 tarihli yazısına göre, göz izlemede güvenilir bir ısı haritası için yaklaşık 30 katılımcı gerekir. Bu konuyu kaç kullanıcıyla test etmeli rehberinde ayrıca ele aldım.

Analitik araçları ise alt sınır koymayabilir. Clarity'nin belgesine göre ısı haritası için en düşük trafik sınırı yok, yani 40 ziyaretlik bir harita da renkli görünür. Ben sayfa görüntülemesi birkaç yüzün altındaysa haritadan karar çıkarmam.

Cihazları karıştırmak

Aynı sayfa masaüstünde iki sütun, mobilde tek sütun olur. Mobildeki bir buton, masaüstündekinden çok daha aşağıda durabilir. İki cihazın verisini birleştiren harita, aslında var olmayan bir sayfayı gösterir.

Görevi unutmak

Kara Pernice'nin NN/g yazısına göre, kullanıcının görevi göz izleme haritalarının sonucunu kökten değiştirir. Gerçekçi olmayan bir görevle elde edilen haritanın yanıltıcı olacağını da açıkça yazar.

Canlı sitede görev yoktur ama niyet vardır. Kampanya e-postasından gelen biriyle aramadan gelen biri sayfaya farklı bakar. Mümkünse haritayı trafik kaynağına göre de ayırın.

Ekranın üstünü abartmak ya da küçümsemek

Therese Fessenden'in 2018 tarihli NN/g yazısında, kullanıcılar bakma sürelerinin yaklaşık %57'sini ilk ekranda geçirdi. İlk iki ekran ise sürenin %74'ünü aldı. Çalışma 120 katılımcıdan toplanan 130.000'den fazla göz sabitlemesine dayanıyor.

Yani alt kısım görülüyor ama çok daha az. Kaydırma haritanız benzer bir düşüş gösteriyorsa bu normaldir. Asıl soru, önemli bir şeyin o düşüşün altında kalıp kalmadığıdır.

Oturum kaydıyla birlikte kullanın

Oturum kaydı, Microsoft Clarity gibi bir aracın tek bir ziyaretçinin sayfadaki hareketlerini yeniden oynatmasıdır. Isı haritası size nereye bakacağınızı söyler, kayıt orada ne olduğunu gösterir. NN/g'nin eğitimi de ısı haritalarını oturum kayıtları, huniler ve form analitiğiyle birlikte okumayı önerir.

Benim yöntemim basit. Haritada şaşırtan bir alan bulurum, sonra yalnızca o alana tıklayan oturumları süzüp beş on tanesini izlerim. Çoğu zaman birkaç kayıt sonra neden ortaya çıkar.

Öfke tıklaması ve ölü tıklama

Bu iki sinyal kayıt izlemeyi çok hızlandırır. Clarity'nin tanımlarıyla:

• Öfke tıklaması (rage click): Kullanıcının aynı küçük alana çok kısa sürede art arda tıklamasıdır. Belgeye göre bu, kullanıcının etkileşimli bir öğe beklediği yerde hayal kırıklığı yaşadığını gösterebilir.
• Ölü tıklama (dead click): Bir öğeye tıklanır ama makul bir süre içinde hiçbir geri bildirim gelmez. Ekran değişmez, başka bir sayfaya da gidilmez. Bozuk bir öğeye, yavaş bir isteğe ya da yanıltıcı bir tasarıma işaret edebilir.

Clarity bir de aşırı kaydırmayı işaretler. Bir oturumdaki dikey kaydırma beklenen ortalamanın üstündeyse oturum bu etiketi alır. Belgeye göre bu, zorlayıcı bir deneyime, ilgisiz içeriğe ya da aranan şeyin bulunamamasına işaret edebilir.

Yukarıdaki demoda kargo satırı tipik bir ölü tıklama. Noktalı alt çizgisi olan yazı bağlantı gibi görünüyor, kullanıcı kargo ayrıntısını görmek için tıklıyor. Bu tür küçük engeller sepet terk nedenleri arasında da sık çıkar.

Kişisel verileri maskeleyin

Kayıt aracı, maskelenmeyen içeriği kaydeder. Clarity'nin belgesine göre araç hassas içeriği varsayılan olarak maskeliyor. Giriş kutularının ve açılır menülerin içeriği her modda maskeleniyor. Ama aynı belge, maskeleme değişikliklerinin geçmiş kayıtlara uygulanmadığını da yazıyor.

Benim görüşüm şu: kayıt başlamadan önce maskeleme ayarına bakın. Hesap, ödeme ve profil sayfalarını kendiniz açıp gözden geçirin. Ekranda düz metin olarak görünen kişisel veriyi de maskeleyin. KVKK açısından durumunuzu bir hukukçuya sorun; bu not hukuki danışmanlık değildir.

Benim notum

Audit'lerde en sık gördüğüm hata, ısı haritasının bir karar yerine geçmesi. Ekip kırmızı alanı görür ve oraya bir şey koyar. Oysa harita yalnızca bir soru üretir.

Ben haritayı bir hipotez kaynağı olarak kullanırım. "Kargo satırı tıklanıyor, demek ki kullanıcı teslimat süresini merak ediyor" bir hipotezdir. Onu sınamanın yolu bir değişiklik yapıp ölçmektir. Böyle bir testin kaç ziyaretçi gerektirdiğini A/B test hesaplayıcısıyla görebilirsiniz.

Ölçtüğünüz şey sonunda dönüşüm oranı olmalı, haritanın rengi değil. Daha sıcak bir buton daha çok satış demek değildir.

Şaşırtan alanları kullanıcılarla test etmek de iyi bir sonraki adımdır. Birkaç kişiyle yapılan bir kullanılabilirlik testi, binlerce tıklamanın açıklayamadığını bir öğleden sonrada gösterebilir.

Ürününüzün haritalarını ve kayıtlarını bir dış gözle okutmak isterseniz UX Audit tam olarak bunu yapar. Bulguları önem sırasına koyar, her birine bir düzeltme önerisi yazarım.