Heatmap okumak renkleri değil desenleri anlamlandırmakla ilgili bir süreçtir. Kırmızı bir alan “burası iyi” demez; sadece “burada yoğunluk var” der. O yoğunluğun iyi mi kötü mü olduğu, beklentiyle karşılaştırılarak belirlenir. Analiz işinde en çok gördüğüm hata da burada başlıyor: harita açılıyor, renklere bakılıyor, bir hisle kapatılıyor. Aşağıda kendi okuma akışımı paylaşıyorum; hangi harita hangi soruyu yanıtlar, desenler ne anlatır ve heatmap hangi aşamada yanıltıcı olabilir.
Davranışsal analitiğin tamamına (session recording, scroll tracking, KVKK uyumu, araç seçimi) davranışsal analiz rehberinden ulaşabilirsin. Bu yazı o rehberin heatmap yorumlama bölümünü derinleştiriyor.
Önce Soru, Sonra Harita
Bir heatmap ancak net bir soruya yanıt ararken işe yarar. Soru olmadan harita, herkesin bir şeyler görmeyi umduğu renkli bir leke olarak kalır. Önce “ne öğrenmek istiyorum” sorusu netleşir, sonra harita açılır; tersi sıra kişiyi kendi önyargısını doğrulamaya götürür.
Üç temel harita türü vardır ve her biri farklı bir soruya yanıt verir.1
| Harita türü | Ne ölçer | Hangi soruyu yanıtlar |
|---|---|---|
| Click map (tıklama) | Tıklama/dokunma yoğunluğu | ”Kullanıcı neye eylem yapmak istiyor?” |
| Move map (hareket) | Fare hareketi yoğunluğu | ”İlgi nerede yoğunlaşıyor?” |
| Scroll map (kaydırma) | Sayfa derinliği yüzdesi | ”İçeriğin ne kadarı görülüyor?” |
Click map, eylem niyetini ölçer. Bir kullanıcı bir öğeye tıklıyorsa, onunla etkileşime girmeye karar vermiştir. Bu en güçlü sinyaldir çünkü pasif değil aktiftir.
Move map, fare hareketini izler. Bazı kullanıcılar okudukları yeri fareyle takip eder, bu yüzden hareket ilgiyle kabaca örtüşür. Ama dikkat: fare hareketi göz hareketinin tam karşılığı değildir. Çoğu kullanıcı okurken fareyi sabit bırakır. Move map’i bir yön göstergesi olarak oku, kanıt olarak değil.
Scroll map, sayfanın ne kadarının görüldüğünü katman katman gösterir. İçeriğinin kaçta kaçının gerçekten okunduğunu söyleyen tek harita budur. Detaylı kurulum için scroll depth tracking rehberime bakabilirsin.
Heatmap Okuma Çerçevesi
Bir heatmap’i şu beş kontrolle sırayla okurum; her kontrol bir harita türüne ve bir aksiyona bağlı.
1. Beklenti Kontrolü
Haritaya bakmadan önce, sayfada en çok hangi öğenin sıcak olmasını beklediğini yaz. Sonra haritaya bak. Beklediğin yerde sıcaklık varsa tasarım niyetini taşıyor demektir. Yoksa iki olasılık vardır: öğe görülmüyor (yanlış konum) ya da görülüyor ama ilgi çekmiyor (yanlış içerik). Bu ikisini ayırmak için scroll map’e geç; öğe fold altında kalıyorsa görünürlük sorunudur.
2. Sahte Tıklama Kontrolü
Click map’te tıklanan ama tıklanabilir olmayan alanlara bak. Kullanıcılar bir görsele, bir başlığa ya da kalın bir metne tıklıyorsa, onu buton sanıyorlar demektir. Bu beklentiyi ya o öğeyi gerçekten tıklanabilir yaparak ya da tıklanabilir görünümünü kaldırarak karşıla. Tersi de geçerli: gerçek butonların soğuk kalması, onların buton gibi görünmediğini gösterir.
3. Hata Sinyali Kontrolü
Rage click ve dead click en yüksek öncelikli kalemlerdir çünkü doğrudan kırık bir deneyime işaret ederler.
- Rage click: Kullanıcının kısa sürede aynı noktaya defalarca öfkeyle tıklaması. Genellikle çalışmayan bir öğe, donmuş arayüz ya da yavaş yüklenen bir aksiyon işaretidir.
- Dead click: Tıklanan ama hiçbir tepki üretmeyen alan. Tıklanabilir görünen ama olmayan bir öğe vardır.
Bu iki sinyal modern araçlarda otomatik etiketlenir.2 Çıktığında, kök neden için o oturumların session recording’ini izle. Heatmap sana nerede olduğunu söyler; kaydı izlemek neden olduğunu gösterir.
4. Okuma Deseni Kontrolü
Uzun metin sayfalarında move ve scroll haritaları sık sık F-pattern üretir: kullanıcılar üst satırları yatay, sol kenarı dikey tarar, sağ alt köşeyi ihmal eder. Nielsen Norman Group’un eyetracking araştırmasına göre F-pattern kötü bir tasarımın değil, taranabilir olmayan içeriğin sonucudur; güçlü bir görsel ipucu yokken göz en az çabanın yolunu seçer.3 Kritik bir mesajın sağ alt bölgede soğuk kalıyorsa, onu sol üst hizaya ya da F’in yatay çubuklarına taşı.
Ama F tek desen değil. NN/g eyetracking çalışmaları metin taramasında dört desen tanımlar; haritanda hangisini gördüğün, içeriğin ne kadar taranabilir olduğunu söyler.4
| Desen | Haritada görünüşü | Ne anlama gelir |
|---|---|---|
| F-pattern | Üstte yatay, solda dikey yoğunluk | Biçimlenmemiş metin duvarı; en verimsiz |
| Spotted (benekli) | Dağınık, öbekli sıcak noktalar | Kullanıcı link/sayı/anahtar kelime arıyor |
| Layer-cake (kat kat) | Başlık hizalarında yatay şeritler | Başlıklar taranabilir; en verimli desen |
| Commitment (bağlanma) | Neredeyse her satır sıcak | Yüksek motivasyon; gerçek okuma |
Pratik çıkarım: haritanda F görüyorsan içeriğin biçimlenmemiş demektir. Hedef onu layer-cake’e çevirmek; yani göz başlıklardan başlığa atlayıp ilgilendiği bölümü okuyabilsin. Bunu açıklayıcı, ayırt edilebilir başlıklar ve bölüm aralarına yerleştirilmiş özet/madde yapılarıyla sağlarsın.
F-pattern on yıldan eski olsa da konu kapanmadı; 2024-2025 çalışmaları aynı soruyu derin öğrenmeyle ele alıyor. Bir çalışma 41 katılımcının 450 web sayfasını serbestçe incelemesinden topladığı veriyle hem sıcaklığı (saliency) hem de bakış sırasını (scanpath) tahmin eden bir model kuruyor; bu modelin afiş, çizgi roman ve mobil arayüzlere de genellendiğini gösteriyor.5 Bir diğeri, bilişsel yük arttıkça kullanıcının arayüz öğelerine ayırdığı dikkatin azaldığını ama dinamik vurgulamanın (highlighting) o yük altında bile dikkat çekmeyi sürdürdüğünü ölçüyor.6 İkisinin ortak mesajı: sıcaklık haritası rastgele değil, içeriğin görsel hiyerarşisi ve kullanıcının o anki yükü tarafından şekilleniyor.
Aynı yoğunluk mantığı web arayüzüne özgü de değildir. Perakende mağazasında müşteri akışı, bir coğrafyada olay sıklığı ya da bir maçta top yoğunluğu da aynı renk kodlamasıyla okunur; bu yüzden bir bağlamda kazandığın okuma refleksi diğerine taşınır.
5. Derinlik ve Eşik Kontrolü
Scroll map’te ani renk düşüşlerinin olduğu yatay çizgiler “okuma eşikleridir”. Kullanıcıların yarısının terk ettiği nokta, içeriğin değil tasarımın sorunu olabilir. Eğer eşik, sayfada içerik bittiği izlenimi veren büyük bir boşluğa ya da bir bölüm sonuna denk geliyorsa, kullanıcı yanlışlıkla sayfanın bittiğini sanıyordur. Buna false bottom (sahte zemin) denir. Bölüm geçişlerine devam sinyali (yarım görünen bir görsel, bir başlık kırpması) ekleyerek çözülür.
Heatmap’in Seni Yanılttığı Dört Durum
Çoğu rehber heatmap’i kusursuz bir gerçek kaynağı gibi anlatır. Pratikte heatmap, yanlış okunduğunda yanlış kararlara yol açan bir araçtır. Şu dört tuzağı kontrol etmeden hiçbir haritaya güvenme.
1. Düşük örneklem. En sık bu tuzağa düşülüyor: trafiği düşük bir sayfada heatmap açıp birkaç günün verisiyle karar vermek. Birkaç yüz oturumun altında heatmap gürültüden ibarettir; tek bir meraklı kullanıcının gezinmesi haritayı kızıla boyayabilir. Anlamlı bir desen için sayfa başına yeterli oturum birikmesini bekle; trafiği düşük sayfalarda heatmap yerine tek tek session recording daha dürüsttür.
2. Segment ortalaması. Tek bir harita mobil ve masaüstü kullanıcılarını birbirine karıştırırsa, ortaya çıkan sıcaklık kimsenin gerçek davranışı değildir; iki farklı kitlenin ortalamasıdır. Cihaz, trafik kaynağı ve yeni/dönen kullanıcı kırılımlarını her zaman ayrı oku.
3. Dinamik içerik kayması. Öğelerin konumu kullanıcıya göre değişiyorsa (kişiselleştirilmiş bloklar, A/B varyantları, çerez banner’ı, dönen kampanyalar), heatmap koordinat bazlı topladığı için yanlış alanı sıcak gösterebilir. Dinamik sayfalarda öğe-bazlı (element-level) heatmap sunan araçları tercih et.
4. Breakpoint karışımı. Responsive bir sayfada geniş masaüstü ve dar mobil viewport aynı haritada toplanırsa, hiçbir genişlik için doğru olmayan bir görüntü çıkar. Her büyük breakpoint’i ayrı oku.
Heatmap’ten Aksiyona
Bir desen tespit etmek hipotezdir, kanıt değil. Heatmap’in tek başına söyleyebileceği şey sınırlıdır; çünkü ne olduğunu gösterir, neden olduğunu değil. Sağlam bir akış şöyle işler:
- Heatmap ile deseni bul. “CTA butonu beklenenden soğuk.”
- Session recording ile nedeni doğrula. O butonu görmezden gelen oturumları izle; buton fold altında mı kalıyor, sayfa mı yavaş yükleniyor?
- Hipotezi A/B testiyle sına. Butonu yukarı taşıyan bir varyant kur, ölç.
- Sonucu tekrar heatmap ile teyit et. Yeni varyantta sıcaklık beklenen yere kaydı mı?
Heatmap bu döngünün ilk adımıdır, tamamı değil. Tek bir haritaya bakıp tasarım değiştirmek, nedenini doğrulamadan karar vermek demektir; çoğu zaman yanlış sorun çözülür.
Hangi Araçla Okumalı?
Üç yaygın araç da bu haritaların hepsini sunar; farkları okuma deneyiminde ve veri sahipliğinde ortaya çıkar.
| İhtiyaç | Uygun araç |
|---|---|
| Ücretsiz ve sınırsız başlangıç | Clarity |
| Hızlı kurulum, anket entegrasyonu | Hotjar |
| Self-host, veri mülkiyeti, öğe-bazlı heatmap | PostHog |
Araç karşılaştırmasının tamamı, ücretsiz katman sınırları ve KVKK self-host argümanı için davranışsal analiz rehberindeki karşılaştırma tablosuna bakabilirsin. AI destekli session analizinin gerçekte ne yaptığını davranışsal analitik AI/ML yazımda ele aldım.
Üç harita türü arasında sürekli geçiş yapmak yorucu olduğu için bazı araçlar (örneğin Contentsquare) click, scroll ve move verisini tek görselde toplayan zoning (bölge bazlı) haritalar sunar.2 Bölge bazlı okuma, “bu bölüm hem görülüyor hem tıklanıyor mu” sorusunu üç haritayı yan yana açmadan yanıtlar; tek tek harita okumaya göre daha hızlıdır ama yine aynı tuzaklara (örneklem, segment, dinamik içerik) tabidir.
Sonuç
Heatmap güçlü bir araçtır ama yalnızca doğru soruyla, yeterli örneklemle ve doğru segmentle okunduğunda. Renkleri değil desenleri oku; deseni session recording ile doğrula; hipotezi A/B testiyle sına. Heatmap nereye bakılacağını söyler, ne yapılacağını değil. O karar, beklenti ile gerçeğin karşılaştırılmasıyla verilir.
Heatmap yorumlama, session recording ve veri-odaklı CRO mimarisini sektörüne ve KVKK gereksinimlerine göre DNOMIA çatısı altında kuruyorum.
Mimari değerlendirme talep etFootnotes
- The complete guide to website heatmaps. Hotjar ↩
- Heatmap Analysis: 5 Strategies For Quick Results. Contentsquare ↩ ↩2
- F-Shaped Pattern of Reading on the Web. Nielsen Norman Group. İlk araştırma 2006’da yapıldı, 2017’de eyetracking ile yeniden doğrulandı. ↩
- Text Scanning Patterns: Eyetracking Evidence. Nielsen Norman Group. Dört desen: F-pattern, spotted, layer-cake, commitment. Layer-cake için ayrıca The Layer-Cake Pattern of Scanning Content on the Web. ↩
- Predicting Visual Attention in Graphic Design Documents. arXiv:2407.02439, 2024. 41 katılımcı, 450 web sayfası; saliency ve scanpath tahmininde mevcut modelleri geçen iki aşamalı derin öğrenme modeli, afiş/çizgi roman/mobil arayüze de genelleniyor. ↩
- Shifting Focus with HCEye: Visual Highlighting and Cognitive Load on Saliency Prediction. arXiv:2404.14232, 2024. 27 katılımcı, 150 web sayfası; bilişsel yük arttıkça dikkat azalır ama dinamik vurgulama dikkat çekmeyi sürdürür, saliency modelleri yükü hesaba katınca iyileşir. ↩
- 01 Heatmap okumak renkleri değil desenleri okumaktır; önce soruyu seç, sonra harita türünü.
- 02 Click map niyeti, move map ilgiyi, scroll map içerik derinliğini ölçer; üçü farklı soruya yanıt verir.
- 03 Rage click ve dead click doğrudan UX hatası sinyalidir; en yüksek öncelikli aksiyon kalemleridir.
- 04 Heatmap düşük örneklemde, karışık segmentte ve dinamik içerikte yanıltır; bu üç tuzağı kontrol et.
- 05 Heatmap ne olduğunu gösterir, neden olduğunu değil; nedeni session recording ile doğrula.
+ Heatmap nasıl okunur?
Heatmap okumak renkleri değil desenleri yorumlamaktır. Önce hangi soruyu yanıtlamak istediğine karar ver, ona göre doğru harita türünü seç: tıklama için click map, ilgi dağılımı için move map, içerik derinliği için scroll map. Sıcak alanları beklentinle karşılaştır; beklenen yerde sıcaklık yoksa ya öğe görülmüyor ya da ilgi çekmiyordur.
+ Click map, move map ve scroll map arasındaki fark nedir?
Click map kullanıcıların nereye tıkladığını gösterir, eylem niyetini ölçer. Move map fare hareketini izler, ilginin nerede yoğunlaştığını kabaca gösterir ama göz hareketinin tam karşılığı değildir. Scroll map sayfanın ne kadarının görüldüğünü katman katman gösterir, içeriğin kaçta kaçının okunduğunu söyler.
+ Rage click ve dead click ne anlama gelir?
Rage click, kullanıcının kısa sürede aynı noktaya defalarca öfkeyle tıklamasıdır; genellikle çalışmayan bir öğe ya da donmuş arayüz işaretidir. Dead click ise tıklanan ama hiçbir tepki vermeyen alandır; tıklanabilir görünen ama tıklanamaz bir öğe vardır. İkisi de doğrudan UX hatası sinyalidir.
+ Heatmap verisi ne zaman yanıltır?
Heatmap düşük örneklemde (birkaç yüz oturumun altı) gürültüden ibarettir. Ayrıca tüm segmentleri tek haritada ortalarsa mobil ve masaüstü davranışını birbirine karıştırır, dinamik içerikte konum kayması nedeniyle yanlış alanı sıcak gösterir. Heatmap'i her zaman yeterli örneklem, segment ayrımı ve tek breakpoint ile oku.