Heatmap Nedir ve Türleri Nelerdir?

Heatmap veya Isı Haritası, web sitenin ne kadar trafik çektiği, kullanıcıların dikkatini çeken yerleri ve daha fazlasını sana verecek analizlerdir.

Heat Map ya da diğer adı ile Isı Haritasının ne olduğunu ve ne işe yaradığını biliyor musun? En azından ismini duydun mu?

Heat Map’ler bugün her yerdeler. Hava durumlarında, gayrimenkul sitelerinde ve daha birçok yerde karşımıza çıkıyorlar. Sonuçta bu harita türü o kadar kullanışlıdır ki her yerde inanılmaz yardımları dokunur.

Büyük hacimli verilerin anlaşılabilir hale getirilmesi gereken bilimsel disiplinlerde giderek daha popüler hale geliyorlar.

Bunun nedeni, eğilimlere ilişkin verileri gözden geçirmenin ve sonra ne yapacağını anlamanın harika bir yolu olmalarından geçiyor.

İşte dijital pazarlama gibi verilerin, grafiklerin temel aldığı bir alanda Heatmap kullanmayacağız da ne kullanacağız sorusu belki de tam bu anda ortaya çıkıyor.

İşletmen için mükemmel bir web sitesi kurma ve yönetme yapmak istiyorsan bilmen gereken bir diğer konu da işte Heat Map’dir. Eğer hazırsan artık başlayalım. Yine uzun bir rehber ile karşındayım, o yüzden arkana yaslan. Başlıyoruz.

Yazılım alanında biraz daha gelişmek istiyorsan Yazılım kategorisinde yer alan rehberlere göz atmak isteyebilirsin benden söylemesi. 😉

Bölüm 1 : Heatmap (Isı Haritası) Nedir?


Web sitesi ısı haritası veya daha çok bilinen şekli ile Heatmap, işletmelerin web sitelerindeki belirli sayfaların nasıl performans gösterdiğini anlamalarına yardımcı olan bir veri görselleştirme aracıdır.

Ziyaretçilerin bir sayfanın farklı bölümlerine katılımının yoğunluğunu belirtmek için renkleri kullanır. Web sitesi ısı haritaları, bir web sayfasının performansını göstermek için sıcaktan soğuğa bir renk şeması kullanır; en sıcak renk, en yüksek ziyaretçi katılımını ve en düşük ziyaretçi katılımını gösterir.

Basitçe ifade etmek gerekirse, web sitesi ısı haritası, farklı renkler farklı veri kümeleri ve değerleri ifade eden bir diyagram veya harita şeklinde verilerin grafiksel bir temsilidir.

heatmap color grafiği

Bir web sayfasının hangi bölümünün en yüksek ziyaretçi katılımına sahip olduğunu, ziyaretçilerin en fazla tıkladıkları yeri, ziyaretçilerin CTA’yı tıklayıp tıklamadıklarını, ekranın alt kısmına ulaşıp ulaşmadıklarını ve bu tür birçok ziyaretçi davranışı anlayışını bulmak istiyorsan, web sitesi ısı haritası gitmek için bir yoldur.

Web sitesi ısı haritaları, ziyaretçilerin web sayfanızdaki davranışlarıyla ilgili tüm verileri toplar ve bilinçli optimizasyon kararları vermenize yardımcı olur. Sayıların yol açtığı karışıklığı ortadan kaldırır ve verileri anlaşılması kolay bir şekilde temsil eder.

Web Sitesi Heat Map Türleri

5 ana web sitesi ısı haritası türü vardır: Heatmap, Clickmap (Tıklama Haritası), Kaydırma Haritası (Scrollmap), Mouse (Fare) İzleme Heatmap ve Göz İzleme (Eye Tracking) Heatmap.

  • Heat Map

Heatmap, ziyaretçilerin davranış öngörülerini toplamanıza yardımcı olur, böylece bu verileri web sitenizi ziyaretçilerin beklentilerine uyacak şekilde özelleştirmek için kullanabilirsiniz. Web sitenizdeki çeşitli sayfaların, iyi bir kullanıcı deneyimi sunma ve ziyaretçilerinizin sorularını yanıtlama açısından nasıl performans gösterdiğini görsel olarak gösterir.

  • Click Map

Tıklama haritaları ya da diğer ismiyle Click Map, web sayfanın hangi bölümlerinin en az ve en çok tıklandığını gösterir.

Web sayfanın hangi öğelerinin en popüler olduğunu görsel olarak temsil etmenin yanı sıra, tıklama haritaları da web sayfandaki gezinme boşluklarını tanımlamaya yardımcı olur.

Tıklamaları kullanarak, aşağıdakileri tıklayabilirsin:

  • Görseller: Ziyaretçilerinin en çok hangilerini tıkladığını görmek için web sayfandaki resimlerin tıklamalarını izle ve ardından bunlara alakalı bağlantılar ekle ve ziyaretçilerinin beklentilerine göre yerleştir. E-Ticaret mağazana trafik çekip göz atarken, ziyaretçilerin, ürün açıklamalarının bulunduğu bir sayfaya yönlendirilmeyi bekleyen köprülü olmayan ürün resimlerini giderek tıkladıkları, ancak bunun yerine görüntünün başka bir sayfaya bağlı olmadığı için hiçbir yere gitmediği bir senaryo düşün. Bu karışıklığa ve sürtünmeye neden olabilir. Tıklama haritalarının yardımıyla bu modelleri belirleyebilir ve veri destekli değişiklikler yapabilirsin.
  • Bağlantılar: Ziyaretçilerin belirli bağlantıların nerede olmasını beklediklerini belirlemek ve bu bağlantıları ziyaretçilerinizin beklentilerine göre yerleştirmek için tıklama haritalarını kullan. Örneğin, sayfalarından birinde tıklama haritaları ayarladıktan ve belirli bir süre çalıştırdıktan sonra, farklı sayfalara göz attıktan sonra ana sayfaya geri dönmek için ziyaretçilerinin çoğunlukla bir bölümü veya öğeyi tıkladığını fark edersin. Ana sayfaya bağlantı yok elbette. Bu, sayfanın yapısının ziyaretçilerinin beklentilerine uymadığını ve değiştirilme zamanının geldiğini gösterir.
  • CTA: Ziyaretçilerin ana CTA’yı tıklayıp tıklamadığını veya diğer öğelerden rahatsız olup olmadığını görmek için tıklama haritalarını kullan. Tüm bu dikkat dağıtıcı unsurları tanımla ve CTA’nı web sayfanın en popüler bölümüne yerleştir.
  • Gezinme: Tıklamaları kullanarak web sitenin gezinebilirliğini kontrol et ve kullanıcı deneyimini geliştir (UX). Örneğin, alışveriş sepeti sayfasındaki ‘devam et’ düğmesini tıkladığında, ziyaretçilerin sepete bir ürün eklemeden önce tam olarak bulundukları ürün sayfasına geri dönmeyi bekleyebilir. Ancak ziyaretçilerinin beklentilerinin aksine, ‘devam et’ düğmesi onları ödeme sürecindeki bir sonraki adıma götürür. Bu, web sitenin gezinmesinin ziyaretçilerinin beklentilerini karşılamadığı ve bunlara uyacak şekilde değiştirilmesi gerektiği anlamına gelir.
  • Scrollmap

Kaydırma haritası veya bir diğer adıyla Scrollmap, ziyaretçilerinin kaydırma davranışının görsel bir temsilidir.

Kullanıcıların bir sayfayı ne kadar aşağı kaydırdıklarını ve hangi bölümlerde en fazla zaman harcadıklarını gösterir. Sana bir sayfanın en altına kaydırılan ziyaretçi sayısını, bir sayfanın yüzde yüzünü değil % 50’sini kaydeden ziyaretçileri belirtir ya da ziyaretçilerin siteyi en çok terk ettiği noktaları gösterir.

Kaydırma haritası raporuna dayanarak, web sayfasının en kritik öğelerini ziyaretçilerin en fazla zaman harcadığı bölümlere yerleştir.

Kaydırma haritaları (Scroll Map) yalnızca çeşitli renklere sahip verileri belirtmekle kalmaz, aynı zamanda web sayfanda daha aşağı inen ve yapmayan kullanıcı sayısı konusunda seni bilgilendirmek için verilen yüzdeleri de yansıtır. Göz ardı edilen önemli içeriğin belirlenmesine yardımcı olurlar.

Aşağıdakileri yapmak için kaydırma haritalarını kullan:

  • Bir web sayfasının, ziyaretçilerin aşağıya kaymadığı ideal uzunluğunu hesapla, ziyaretçilerin ekranın altındaki içeriğe ulaşıp ulaşmadığını belirle ve yanlış zaman mı yoksa yanlış zemini mi tespit et.
  • Ziyaretçilerin en çok nerede zaman harcadıklarını ve nerede ilgi kaybettiklerini belirle.
  • CTA’lar gibi anahtar bilgilerin veya öğelerin yerleştirilmesi gereken en uygun alanı belirle.
  • Mouse Heat Map (Fare Hareketi İzleme Isı Haritası)

Mouse Heat Map yani bir diğer adı ile Fare Hareketi İzleme Isı Haritası (genel olarak Gezinti Haritaları, Dikkat Haritaları, Haritaları Taşı olarak da bilinir) ziyaretçilerin imlecini en çok gezdirdiği alanları gösterir.

Fare izleme ısı haritalarını aşağıdakileri yapmak için kullanabilirsin:

  • Ziyaretçilerin en çok hangi bölümlerde bulunduğunu belirle ve ardından bu bölümlere önemli içerik, birincil CTA, gerekli reklamlar gibi alanlar yerleştir.
  • Bir ziyaretçinin web sayfanda gezinirken, farelerinin nerede durakladığını ve daha hızlı bir şekilde geçmişin neresine geldiklerini analiz ederek ziyaretçinin nerelere baktığına ilişkin bilgiler edin.
İlginç bir gerçek, ziyaretçilerin genellikle ilgi çekici ve ilginç buldukları alanların üzerinde gezinme eğiliminde olmaları veya mesajlaşmanın kafa karıştırıcı veya anlaşılması zor olabileceği için anlaşılması daha uzun sürüyor. Bu nedenle fare izleme ısı haritaları, ziyaretçilerin en çok ve en az zaman harcadıkları alanları belirlemeye yardımcı olabilir.

Ancak, özellikle çevrimiçi haber siteleri için yukarıdakilerin her zaman doğru olmayabileceğini hatırlamak önemlidir. Bunun nedeni ‘parkçılar’ olarak adlandırılan bir kitledir.

Parkçılar, ne okuduklarına, hangi bölümde bulunduklarına veya hiç okumalarına bakılmaksızın imlecini bir noktada bırakan ziyaretçilerdir. Fare izleme ısı haritası verilerini etkileme olasılığını göz ardı etmek, genellikle veri kirliliği olasılığını artırır. Bunun bir yolu harcanan zamana göre bölümlere ayırmaktır.

Örneğin, haber sitendeki en yüksek trafiğe sahip makalenin okuma süresinin 6 dakika olduğunu varsayalım. Ziyaretçilere 4 dakikalık fazladan bir arabellek vererek, ziyaretçileri yalnızca sayfada 10 dakikadan az harcayan kullanıcıları içerecek şekilde segmentlere ayırabilirsin. Bu şekilde, yalnızca analizindeki makaleyi gerçekten okuyan ziyaretçilerin ve kullanıcıların verilerini değil, aynı zamanda parkçıların da varlığı nedeniyle veri kirliliği riskini de ortadan kaldırırsın.
  • Eye Tracking (Göz İzleme) Heatmap

Mouse Heatmap genellikle Eye Tracking Heat Map çeşidi ile karıştırılabiliyor. Sabitleme uzunluğuna ve bir ziyaretçinin bir görüntüye kaç kez bakıldığına bağlı olarak, göz izleme ısı haritaları bir sayfanın hareketini izleyerek “sıcak” ve “soğuk” noktalar şeklinde ziyaretçilerin dikkatini çeken ve websitenin en çekici öğelerini temsil eden bir haritadır.

İnsanların başka herhangi bir anlamda görüş görme eğilimi vardır ve bu birçok işletme için tam olarak kullanışlı olabilir. Örneğin, ziyaretçilerin web sitelerine geldiklerinde en çok neye baktıklarını anlayabilirlerse, bir e-ticaret mağazası çok yararlanabilir. En çok hangi bölümlerin bir ziyaretçinin dikkatini çektiğini bilmek ve göz etkileşiminin en fazla olduğu bölümlere yerleştirilmekten faydalanabilecek öğeleri belirlemek, işletmelerin web sitelerinde ziyaretçi beklentilerine uygun veri destekli değişiklikler yapmasına yardımcı olabilir. Göz izleme ısı haritaları, bir web sitesinde belirli görüntülerin ne kadar ilgi çekici olduğunu belirlemek için özellikle yararlıdır.

Göz izleme ısı haritalarını aşağıdakiler için kullanabilirsin:

  • Bilgi için ziyaretçilerin sayfalarınızda en çok nereye baktıklarını belirle.
  • Ziyaretçilerin bakışlarının sayfadaki herhangi bir öğeyle (görsel veya metinsel) dikkatinin dağılmış olup olmadığını belirle.
  • Sayfanın en dikkat çekici bölümlerine tüm önemli içeriği ve görüntüleri yerleştirmek için ziyaretçilerin bakış düzenini izle.

Bölüm 2: Neden Web Sitesi Heat Map Kullanmalısın?


Geleneksel veya nicel kullanıcı analizi araçları, yalnızca sayfanıza kaç ziyaretçinin geldiğini ve kaç ziyaretçinin dönüşüm sağladığını, ancak bu iki adım sırasında neler olduğunu tam olarak yanıtlayamadığını ve sonuçta elde edilen işlemlere yol açtığını söyler. İşte bu etkileşimlerin kalitesini anlamak burada devreye giriyor.

Diyelim ki, bir e-ticaret mağazası günde yaklaşık bin yeni ziyaretçi görüyor ve yaklaşık 20 yeni müşteri bir şey satın alıyor.

Mağaza sahibi için, geri kalan 980 ziyaretçinin neden dönüşüm sağlamadığını anlamak için, herhangi bir satın alma işlemi yapmadan mağazadan ayrılmalarına neden olan çeşitli nedenleri bilmeleri gerekir. Sebepler, ‘Sepete ekle’ düğmesini bulamamak veya gönderim bilgilerini bulamamak veya ‘ödeme için konuk hesabı oluşturmak için çok fazla zaman harcamak’ gibi olabilir. Bu tür bilgiler, ısı haritaları gibi nitel analiz araçları kullanılarak kolayca bulunabilir.

Heatmap vermeye devam eden bir armağandır. Heatmap, ziyaretçilerin web sayfalarınla nasıl etkileşime girdiğiyle ilgili daha fazla bilgi edinebileceğin ve web sitenin daha akıllı bir kullanıcı arayüzü için web sitenin katılımını ve tasarımını geliştirmek için bu bilgileri kullanabileceğin en güçlü ve verimli teşhis araçlarından biridir.

Web sitesi performansını ölç: Farklı performans düzeylerini gösteren çeşitli renk tonları ile ısı haritaları web sitendeki önemli sorunları anında vurgular. Ziyaretçilerinin tıklama desenini izleyen tıklama haritaları, en uygun sayfa uzunluğunu belirleyen Scrollmap haritaları ve bir ziyaretçinin web sayfana göz atarken nerede durduğunu belirten Mouse Heatmap haritaları ile web sitenin ne kadar ilgi çekici olduğunu ve bir işin ne kadar iyi çalıştığını kolayca öğrenebilirsin.
Sayısal verileri basitleştir: Yukarıda belirtildiği gibi, Heatmap’ler sayılarla oluşturulan hipotezi tamamlar ve verileri anlaşılması kolay bir şekilde temsil eder. Kullandığı renk şemasına dayanarak, web sayfanın hangi bölümlerinin iyi performans gösterdiğini, hangi bölümlerin iyileştirme kapsamına sahip olduğunu ve hangi bölümlerin eksiksiz bir yeniden tasarıma ihtiyaç duyduğunu kolayca öğrenebilirsin.
Örneğin, bir e-Ticaret mağazan olduğunu ve tüm ziyaretçilerinin sorularını yanıtlama açısından ne kadar iyi olduğunu görmek için ürün sayfanda bir heatmap ayarlamak istediğini varsayalım. 3000 ziyaretçiden oluşan bir örneklem büyüklüğü ve 2 haftalık bir örnekleme dönemi seçtikten sonra, heatmap ile başlayabilirsin.

Örnek süresinin tamamlanmasından sonra, ürün sayfanızın performansının tek bir ekranda grafiksel bir gösterimini elde edersiniz. Sadece renk konsantrasyonuna bakın ve her bölümün performansını ve etkileşim potansiyelini daha fazla analiz edin. GA gibi kaynaklardan ve Excel gibi araçlardan alınan verileri kullanarak aynı egzersizi yapsaydınız, her bölümün performansını gösteren tüm verileri sıralamak iki kattan fazla zaman alacaktı. Ayrıca, her sayısal veriyi manuel olarak girmek de hata ve veri bozulması olasılığını artırır.

Ziyaretçilerinin fikirlerini oku: Ziyaretçilerini nerede bulmayı beklediklerini düşünmüyorsan, web sitenin tamamını yeniden tasarlayabilir ve yine de performansını iyileştiremezsin. Heatmap verileri, ziyaretçilerinin beklentilerine uygun garantili değişiklikler yapmana yardımcı olur. Isı haritalarının yapabileceği en iyi şey, ziyaretçilerin web sitende tam olarak nasıl davrandığını ve işlerin nasıl olmasını beklediklerini sana tam olarak söyleyebilmektir. Basitçe söylemek gerekirse, web sitesi heatmap verileri, ziyaretçilerinin zihinlerini okumana ve buna göre değişiklikler yapmana yardımcı olacaktır.

Tabi şimidi bana formların ve anketlerin bile bu amaca hizmet edebileceğini iddia edebilirsin.

Ama bir saniye düşün.

Yaşamın boyunca doldurduğun tüm geri bildirim formlarını ve anketlerini bir gözünün önünden geçir.

Kaçınılmaz olarak tüm bu anketlerin çok tek bir taraftan baktığını düşünebilirsin. Sonuçta bu anketler herkesin ortak noktalarını düşünerek oluşturulmuştur.

Ziyaretçilerin belirli şeyleri arayarak ve belirli yerlerde aradıkları şeyleri bulma beklentisiyle web sitene geldikçe Heatmap bu önyargıyı ortadan kaldırır.

Bu 2 parametre, ziyaretçilerinin tarama düzenini birleştirir ve şekillendirir. Heatmap verileri de tam olarak bunu izler ve sana anlamlı ve eyleme geçirilebilir bilgiler verir.

Web sitenin dönüşüm oranını optimize et: Yukarıdaki tüm avantajlar, web siteni mümkün olan en iyi ve en akıllı sürüme optimize etmek için yapılan büyük bir çalışmaya katkıda bulunur. Bir heatmap verisi üzerinde izlenen her ziyaretçi, web siteni optimize etmek için eklenebilir öngörüler anlamına gelir.
  • Heatmap verilerinin genel anlamda web sitesi optimizasyonuna nasıl katkıda bulunduğunu anlamak için bir örnek verelim.

Herhangi bir çevrimiçi işletme için, ana sayfa her ziyaretçinin yolculuğunun başladığı yerdir (doğrudan bir ürüne veya teklif sayfasına harici bağlantılar, ücretli reklamlar gibi yollarla gelmedikleri sürece).

İster bir ürün satın almaya devam et, ister bir bültene abone ol, potansiyel müşteri formu doldur, ister dönüşüm gerçekleştirmeden ayrıl… Tüm bu yolculukların başlangıç noktası aynıdır: Ana Sayfa!

  • Bir e-ticaret mağazan olduğunu ve ziyaretçilerin ana sayfana nasıl tepki verdiğini görmek istediğini varsayalım.

Böylece, ana sayfada bir 2 haftalık örnekleme süresi ve 3000 yeni ziyaretçinin örnek trafiğini oluşturuyorsun. Heatmap, örnek dönem boyunca başarıyla çalışır ve ziyaretçinin davranışıyla ilgili tonlarca fikir verir. Bu şekilde üretilen heatmap inceleyerek baktıktan sonra, ana sayfanızda çok sayıda ziyaretçi çeken birkaç bölüm olduğunu fark edersin.

Sayfanın en üstünde olan bölümler: Anasayfa da yer alan görsel, ana sayfanın başlığı ve ürün incelemeleri.

Ayrıca dikkatini çeken şey, çok fazla ziyaretçinin ana sayfanın en altına gitmediği ve ana sayfanın birincil CTA’sı oldu mu?

“Aylık yazı bilgilendirmemize abone ol!”

Artık tüm bu öngörülere sahip olduğuna göre, ziyaretçilerin web siten hakkında ne düşündüğünü bildirmekten başka yararları var mı? KESİNLİKLE EVET!

Dönüşüm Oranı Optimizasyonuna Gir

Artık ana görselin, ana sayfanın başlığının ve ürün incelemelerinin en fazla dikkat çektiğini bildiğine göre, bu bölümleri daha iyi hale getirmeye çalışabilir ve bu bölümlere diğer önemli bilgileri de ekleyebilirsin. Ayrıca ana sayfanın birincil CTA’sının konumunu değiştirebilir ve ekranın üst kısmına ve maksimum dikkat çeken bir bölüme getirebilirsin. Bu değişikliklerin yapacağı şey, ana sayfanı ziyaretçilerinin beklentilerine uygun bir sürüme dönüştürecek, web sitenin kullanıcı deneyimini (UX) iyileştirecektir. Bu nedenle web sitenin dönüşüm oranını artırmaya yardımcı olacaklardır.

Heatmap, Dönüşüm Oranı Optimizasyonu (CRO) gibi daha geniş bir programın parçasıdır. CRO içinde Heatmap’ler, web sitende değişiklik yaptığın ziyaretçilerin davranışları hakkında bilgi veren nitel araştırma araçlarıdır.

Heatmap ile kurar, sonuçları analiz eder, bunlara dayalı varyasyonlar oluşturur. Varyasyonları orijinal ile karşılaştırır ve kazanan sürümü dağıtırsın. Heatmap verilerinin oluşturduğu bilgiler sayesinde CTA yerleşimini değiştirme, sayfa uzunluğu ve belirli sayfaları yeniden tasarlama, eksiksiz web sitesi yeniden tasarlama gibi büyük değişiklikler yapabilirsin.

Web Sitesi Heatmap OlmadanWeb Sitesi Heatmap ile
Ziyaretçilerin web sayfalarınla nasıl etkileşime girdiğinden emin ol.Ziyaretçilerin web sayfalarınla nasıl etkileşime girdiğini gerçek zamanlı olarak izle.
İçine doğan duygu ve tahminlerine göre web sitende değişiklik yap.Bir web sitesi ısı haritası tarafından oluşturulan ziyaretçi davranış verilerini kullanarak veri destekli değişiklikler yap.
Ziyaretçilerin dönüştürmediği tek bilgiye razı ol.Ziyaretçilerin neden gizlenmediği hakkında bilgi edin.
Tarama düzenin ve kitlenin belirli segmentlerinden beklentiler hakkında bilgi edinmezsin.Hedef kitlenin belirli segmentlerinin tarama desenlerine derinlemesine dal.
Web siten için işe yarayıp yaramayabilecek en iyi endüstri uygulamalarına göre tasarım değişiklikleri yap.Daha iyi kullanıcı deneyimi ve doğrudan ziyaretçi davranışı bilgilerine dayanan daha akıllı kullanıcı arayüzü için tasarım değişiklikleri yap.

Bölüm 3: Bir Web Sitesi Heatmap Sistemi Nasıl Çalışır?


Artık heatmap kullanmanın faydalarını bildiğine göre, ziyaretçi davranış verileriyle doğrulanmasını istediğin tonlarca fikir ve hipotezin olacaktır. Bu bölümde, web sayfalarından herhangi birinde web sitesi heatmap verilerini nasıl ayarlayabileceğin ve hipotezlerini nasıl doğrulayabileceğin konusunda adım adım bilgi edinebilirsin.

1-Hedef ve Hedef Belirleme

Bir web sayfası oluşturduğunda, her zaman bir bitiş hedefi vardır. Ve her işletme hedeflerine giden yolda engellerle karşılaşır.

Bir web sitesi heatmap verisini kullanmaya karar vermeden önce, ziyaretçi davranış verilerine ihtiyaç duyacağın bir sorun alanı tanımlaman gerekir. Sorunlu bölgeyi belirledikten sonra, kullanmak istediğin heatmap tipine karar verebilirsin. Heatmap yöntemi ile çalışmanın başında her zaman bir hedef belirlemen gereken bir diğer önemli neden de analizinin hedeflerinden akması gerektiğidir.

Örneğin bir B2B Saas işletmesiysen, belki de web sitenin kayıt sayfasındaki dikkat dağıtıcı unsurları belirlemek için web sitesi heatmap’ini kullanmak isteyebilirsin.

Bir haber sitesiysen makalelerinin olması gereken optimum uzunluğu bulmak için Scroolmap haritalarını kullanmak isteyebilirsin.

Veya bir e-Ticaret işletmesiysen, ziyaretçilerin ana sayfanda en çok nereyi tıkladıklarını öğrenmek için Clickmap haritalarını kullanmak isteyebilirsin. Sorun alanını belirledikten ve bir hedef belirledikten sonra, web sitesi heatmap ayarlama işlemi başlar.

2-Doğru Aracı Seçme

Web sitesi heatmap çıktısını kullanmanın ikinci adımı, tüm sorularını yanıtlamaya yardımcı olacak doğru özelliklere sahip bir araç seçmektir.

Web sitesi heatmap verilerine olan talep arttıkça, birçok heatmap aracı da ortaya çıktı. Ve hepsi aynı özellikleri de sunmamaktadır.

En iyi aracı bulmanın anahtarı örnek trafiğini özelleştirmene, kullanıcıların mevcut iş taleplerine göre bölümlere ayırmana ve aynı zamanda bütçene uyurken elde edilen verilere serbestçe dalmana olanak tanıyan bir araç seçmeni sağlamaktır.

turstradiuıs

3-Bir Heatmap Ayarlama

Üçüncü adım, veri toplamaya başlamak için sonlandırılmış aracın ayarlanmasını içerir.

İlk olarak, heatmap’in çizilmesini istediğin sayfaları sonlandırman gerekir. Tüm web sitesini ayarlamak mantıklı olmayacaktır, çünkü sadece tonlarca işe yaramaz veriyle dolup taşacaksın. İyi miktarda trafik alan, iş açısından kritik öneme sahip olan ve analiz için yeterince çeşitli olan sayfaları seç.

Örneğin, bir e-Ticaret web sitesi için, iş açısından kritik öneme sahip 1 sayfa (ana sayfa, alışveriş sepeti sayfası, ürün sayfası, ödeme sayfası gib) veya ana sayfa, kategori sayfası ve ürün sayfası karışımını seçmek yararlı olacaktır. Performansın web sitesinin tüm sayfalarında Heatmap’i çizmek yerine birbirleri üzerinde bir etkisi vardır.

İkinci olarak, ziyaretçi davranış araştırman için kullanmak istediğin ısı haritası türünü seçmen gerekir. Seçtiğin heatmap türü her zaman belirlediğin hedeflere bağlıdır:

HedefWebsitesi Heatmap Türü
Bir web sayfasının ideal uzunluğunu belirlemeScrollmap
Ziyaretçilerin en çok ve en az hangi bölümlerde dolaştığını belirlemeMouse Tracking Heatmap
Ziyaretçilerin öngördüğü köprü oluşturma fırsatlarını belirlemeclickMap
Web sitesinin gezilebilirliğini test etmeIsı Haritası ve Tıklama Haritası
Potansiyel müşteri toplama formları, kayıt formları ve benzerlerindeki sürtünme alanlarının belirlenmesiTıklama Haritası ve Fare İzleme Isı Haritası
İçerik parçalarının ideal uzunluğunu belirlemeScrollmap
Harekete geçirici mesaj düğmeleri (CTA) gibi kritik öğelerin yeterince ilgi görüp görmediğini keşfetmeTıklama Haritası ve Fare İzleme
Bir sayfanın birincil CTA’sının en popüler bölümlerde olup olmadığını belirlemeIsı Haritası ve Tıklama Haritası
Web sayfanızdaki görüntülerin ziyaretçileri dönüştürmekten rahatsız edip etmediğini belirlemeGöz İzleme Isı Haritası, Tıklama Haritası ve Isı Haritası

Analiz almak istediğin sayfaları sonlandırdıktan sonra, bunlar üzerinde heatmap çıktılarını oluşturmaya devam edin. Her araç, analiz etmek istediğiniz sayfaya akıllı bir kod yüklemenizi ister, böylece üzerine bir ısı haritası çizilebilir. Bu akıllı kod, aracın tıklamaları ve hareketleri izlemeye başlamasını sağlar.

Ancak aracın ayarlanması, anlayışlı heatmap verilerini toplamak için yeterli değildir. Anlamlı veri toplamak için, tüm trafiğini temsil eden örneklem büyüklüğünü ve örnek süreni ayarlaman gerekir, aksi takdirde toplanan veriler temel gerçekliğin yalnızca yarısını temsil eder.

Örnek boyutun, web sitenin performansını etkileyebilecek olası her segmentin ziyaretçilerini içermelidir. İdeal olarak, örnek süren haftanın tüm günlerini kapsamalıdır, böylece satış, tatil gibi dış öğeleri göz önünde tutarak veri toplamayı etkileyebilir.

İlk 3 adımda işin bittiğinde, kullanabileceğin mümkün olduğunca fazla veri toplayabilmesi için web sitesin üzerinde heatmap verilerini almaya başlayabilirsin.

Web sayfalarında web sitesi heatmap oluştururken, ziyaretçileri web sitesi performans analizi için anonimleştirilmiş tıklama davranışını izleyen çerezler hakkında bilgilendirmen ve onaylarını alman önemlidir. Kitlelerinin bilgilerini ve gizliliğini korumak için belirlenmiş düzenlemeleri istemez ve ihlal etmemelisin.

4-Heatmap Verilerinin Analiz Sonuçları

Dördüncü adım toplanan verilerin analizini içerir.

Bu adım, web sitesi heatmap verinin nasıl çalıştığı sürecindeki en önemli adımdır. Çoğu pazarlamacının bir web sitelerindeki heatmap verilerini analiz ederken karşılaştığı en yaygın sorun, nereden başlayacaklarını bilmemesidir.

Heatmap verilerinin analizi, kullandığın web sitesi heatmap türüne göre değişir:

Heatmap
: Bir heatmap (ısı haritası) kullanarak, sayfandaki en çok ve en az dikkat çeken bölümler ve öğeler hakkında temel bir yön elde edebilirsin. Bir sayfanın en popüler bölümlerini tanımlamak, ziyaretçilerin ana sayfanızdaki ana CTA’yı tıklamasını engelleyen dikkat dağıtıcıları belirlemek için ısı haritaları kullanabilirsin. Bir ısı haritası çizmek kolaydır, ancak analiziniz kusurluysa, size anlamlı bilgiler vermeyecektir.

Web sitesinin tamamını yeniden tasarladığını varsayalım. Ziyaretçilerin buna nasıl tepki verdiğini görmek için, ana sayfasına bir ısı haritası çiziyorsun. 1000 ziyaretçinin örnek boyutunu düzeltir ve kararlaştırılmış bir örnekleme dönemi için veri toplamayı başlatırsın.

Örnek süresinin tamamlanmasından sonra, toplanan verileri analiz etme görevine başlarsın. Analizden sonra, veriler 500 ziyaretçinin yeni tasarıma olumlu tepki verdiğini ve dönüştürüldüğünü gösterir. Böylece, daha fazla araştırma yapmadan yeni tasarımını son tasarımın olarak % 50 dönüşüm oranıyla dağıtırsın.

Analiz başarılı ve doğru değil mi? Yanlış!!

Birçok pazarlamacı, yeni tasarımın % 50 dönüşüm sağladığını öğrenir öğrenmez heatmap analizlerini durdurabilir. Ziyaretçilerin yeni web sitesine nasıl tepki verdiğini bulmanın üst düzey hedefini düşünüyorsan, evet. Ancak, heatmap’inin sağlayabileceği her içgörü elde etmek için derin dalış yapmalı ve ‘neden’ diye sormalısın.

  • Peki ya ziyaretçilerin diğer % 50’si neden dönüşmedi?
  • Dönüşüm sağlayan % 50 ziyaretçiye ne oldu?

Bunlar sormanız gereken en başlıca sorulardan sadece iki tanesidir.

Yukarıdaki gibi soruların cevaplarını almanın en iyi yolu, bir heatmap çıktısının ürettiği verileri segmentler açısından analiz etmektir.

Örnek ziyaretçilerini segmentlere ayırmadığın için, dönüşüm gerçekleştiren 500 ziyaretçiden 400’ünün yeni ziyaretçi ve 100’ünün geri gelen ziyaretçi olduğunu fark etmedin. Örneğini yeni ve geri gelen ziyaretçilere segmentlere ayırsan, web sitenin heatmap verileri sana yeni ziyaretçilerin % 80’inin yeni tasarıma iyi tepki verdiğini ve dönüştüğünü gösterirken, geri gelen ziyaretçilerin yalnızca % 20’si yeni tasarımı ilgi çekici bulduğunu gösterecektir.

Artık, geri gelen ziyaretçilerin web sitenin yeniden tasarlanmasından çok memnun olmadığını başarıyla belirlediğine göre, dönüşümden uzaklaştıran şeyin tam olarak ne olduğunu öğrenmek için onlar için bir anket oluşturabilirsin.

Ziyaretçilerin bu kadar derinlemesine anlaşılması, ancak analiz sırasında segmentlerin ve kişilerin bireysel davranışlarına derinlemesine dalman durumunda mümkündür. Ziyaretçileri belirli bir ülkeden, belirli bir cihaz türünden veya belirli yönlendiren alanlardan gelen kullanıcılara göre bir sayfada segmentlere ayır.

İpucu: Web sitenin heatmap aracını, daha derin ve güvenilir işlem yapılabilir bilgiler için diğer nitel ve / veya nicel araştırma araçlarıyla eşleştir.

Bu arada e-posta bültenimize üye olmadıysan üye olabilirsin, en yeni makaleler geldikçe seni haberdar ediyor olacağım.


Tıklama Haritası:
Bir tıklama haritasını kullanarak, web sayfandaki her bir öğenin veya bölümün tıklama sayısını izleyebilirsin. Tıklama haritaları ayrıca bir bölümün başka bir bölümüyle, bir bölümün tüm sayfayla ve bir bölümün tıklamalarını birden çok başka bölümle karşılaştırmana olanak tanır.

Bir B2B Saas işi için kaliteli olası satışlar hayatta kalmak için son derece önemlidir.

Bu olası satışların en önemli kaynağı formları: kayıt formu, demo istek formu, girişli içerik formu olarak sayılabilir. Tabi bunlara daha birçok çeşidini ekleyebilirsin. Aynı sayfada iki formun varsa, tıklama haritaları her birinin aldığı tıklama sayısını izlemene ve karşılaştırmana yardımcı olur. Reklamının açılış sayfalarından birinde bir videoyla birlikte bir formun varsa, videonun ziyaretçilerin formu doldurmasını engelleyip engellemediğini belirlemek için tıklama çiftlerini kullanarak ikisinin tıklama sayısını karşılaştırabilirsin.

Tıklama haritalarını kullanarak ziyaretçilerin birden çok kez tıkladıkları bir alan olup olmadığını belirlemek için form alanlarındaki tıklamaları izleyebilirsin. Bir form alanında çok fazla tıklama yapılması sorunun net olmadığı anlamına gelebilir ve bu nedenle ziyaretçiler aynı alanda çok fazla hata yapıyor demektir. Daha sonra bu bilgileri formunuzu optimize etmek için kullanabilirsin.

Herhangi bir hedef için tıklama haritası verilerini analiz ederken hatırlanması gereken bir nokta, ölü alan tıklamalarını yok saymamaktır.

Belirli bir öğeye çok fazla ölü tıklama gelmesi, ziyaretçilerin oraya tıklamayı beklemelerini bekliyor olabilir, ama değil.

Örneğin, web sitenin her yerde bulunan ana görsel görüntüsünde çok fazla ölü tıklama varsa, belki de ziyaretçiler kahraman görüntüsünün tıklanmasıyla ana sayfaya yönlendirilmeyi bekliyor olabilirler. Bu bilgi, ziyaretçilerinin bekledikleri yerlere eksik bağlantılar eklemene yardımcı olabilir.
Scrollmap Haritası:
Doğru yürütülür ve analiz edilirse, kaydırma haritaları web sayfanın olması gereken ideal uzunluğu belirlemene yardımcı olabilir.

Örneğin, bir yayınevinin temel dönüşüm metriği, aylık bültene daha fazla kişinin kaydolmasını sağlayarak okuyucu sayısını artırabilir. Scrollmap haritalarını doğru bir şekilde analiz etmek, haber bülteni kayıt formu için en iyi konumu belirlemene yardımcı olabilir. İki farklı kaynak tarafından toplanan verilerin karşılaştırılması, her zaman iki kaynağın tek tek ortaya çıkaramayacağı yeni bilgiler bulmaya yardımcı olur.

Scrollmap haritan, çoğu ziyaretçinin sayfanın altına doğru ilerlediğini ve hatta ana CTA’nın olduğu ekranın alt kısmına gittiğini söylerken aynı sayfadaki bir tıklama haritasının, sayfanın sonuna daha yakın alanların aldığını söyleyebilir en az tıklama sayısına ulaşabilir.

2 veri kümesini birleştirip analiz ederek, temel sorunu tanımlayabilirsin: ziyaretçiler sayfanın altına doğru kaydırıyor ancak alanı tıklamıyor. Bu, alt alandaki mesajların ziyaretçileri CTA’yı tıklamaya teşvik edecek kadar açık olmadığını veya sayfanın o kadar uzun olduğunu ve ziyaretçiler sayfanın altına ulaştığında ilgilerini kaybettiklerini ve hatta fark etmediklerini gösterebilir.

Hedefine dayanarak, birçok hipotez oluşturabilir ve sorunun tam yerini belirlemek için kaydırma haritası bilgilerini kullanabilirsin.

Gizli bilgileri ortaya çıkarmak için scrollmap haritalarını diğer heatmap türleriyle eşleştir.
Mouse Tracking Heatmap:
Ziyaretçilerin fare hareketlerini izleyerek Mouse Tracking heatmap ile ziyaretçilerin en çok üzerine geldiği alanları ve en az dikkat çeken alanları belirlemenize yardımcı olur.

Derinlemesine analiz ile Mouse Tracking Heatmap, toplu ziyaretçi davranışlarını toplamana, görselleştirmene ve anlamana yardımcı olabilir. Ziyaretçilerin farelerini nasıl kullandıklarını, nereye taşındıklarını, yaptıkları yere ulaşmak için izledikleri yolu ve web sitenden nereden çıktıklarını kaydeder.

Ziyaretçilerin fare hareketlerini analiz ederek, reklam yerleştirmek için en iyi noktayı, sayfanın alakasız bölümlerini belirleyebilir ve ayrıca ziyaretçilerin web sitenin yapısının ve içeriğinin nasıl olmasını istedikleri gibi…

Seyahat endüstrisinin nasıl çalıştığını daha iyi anlamak için bir Mouse Tracking Heatmap kullanım durumu alalım.

Bir Mouse Tracking Heatmap verisii seyahat şirketinin dönüşüm oranını artırmasına yardımcı olabilmesinin bir yolu, sorunu ana rezervasyon formunda tanımlamaktır.

Ziyaretçilerin en çok zaman harcadıkları form alanını veya web sitenden çıktıkları yere ulaşma alanını izleyip bu verileri analiz ederek bu alanlardaki sorun alanını tanımlayabilir ve hemen çıkma oranını azaltmak için rezervasyon formunu optimize edebilirsin. Bu da web sitesi dönüşümlerini iyileştirmeni sağlar.

Mouse Tracking Heatmap çıktıları, form akışlarındaki sızıntıları bulmak ve bunları düzeltmek için B2B SaaS işletmeleri için de yararlı olabilir.

Aşağıdaki görsele beraber bakalım ne dersin?

heatmap

Gördüğün gibi yukarıdaki sayfada çizilen mouse tracking heatmap, ziyaretçilerin farelerini en çok ve en az üzerinde gezdirdiği tüm alanları vurgular. Bu bilgileri kullanarak, ziyaretçilerin form sayfalarındaki ve formlardaki göz atma davranışlarını izleyebilir ve bırakmaları azaltmak için gerekli değişiklikleri yapabilirsin.

Eye Tracking Heatmap:
Diğer tüm ısı haritası türleri gibi, Eye Tracking Heatmap verilerini kullanarak, web sitesinin kullanıcı deneyimi (UX) ve kullanıcı arayüzü (UI) değişimlerini çok kolay ve doğru bir şekilde yapabilirsin.

Aşağıdaki ekran görüntüsüne bakalım:

scarlett heatmap

Bu Scarlett Johansson (önde gelen Hollywood oyuncusu ve evet Marvel seviyoruz) içeren Dolce & Gabbana kokularından birinin reklamıdır. Reklamı inceleyip ‘Vay canına! Yeni parfüm serimizin reklamını yapmanın mükemmel yolu budur ‘. Şimdi bu reklamda oluşturulan Eye Tracking Heatmap verilerine bakmaya ne dersin?

scarlett heatmap

Heatmap çıktısına bakarak, ziyaretçilerin aktörün yüzü tarafından dikkatinin dağıldığını ve reklamı yapılan ürüne bakmadığını açıkça görebilirsin. Ürüne değer katmak ve ürünü denemek için gittikçe daha fazla ziyaretçi çekmek yerine, görsel ve ürünün yerleştirilme şekli, ürün resmini reklamdaki ürün destekçisi lehine gölgede bırakmaktır.

Bu reklam tasarımını yine de ürünün için kopyalar mısın?

Eye Tracking heatmap verileri olmadan, seni destekleyen veya onlara meydan okuyan herhangi bir veri olmadan diğer tasarımları ve fikirleri çoğaltma hatasını üstlenmeyeceksin. Heatmap verilerinin doğru analizi, web sayfalarının tam olarak nerede yanlış gittiğini anlamana ve aynı zamanda ziyaretçi beklentilerine uygun değişiklikler yapmana yardımcı olacak eyleme geçirilebilir bilgiler sunar.

Deney yoluyla analizi doğrulama:
Yukarıda açıklandığı gibi, bir ısı haritasını analiz etme şeklin izlediğin hedefe ve kullandığın heatmap türüne göre değişiklik gösterecektir. Oluşturulan Heatmap verilerini analiz etmeyi tamamladıktan sonra, hedeflerine nasıl ulaşacağın konusunda gözlemler yapmalısın.

Örneğin, ana sayfanda oluşturulan Clickmap verilerini analiz ettikten sonra, çoğu ziyaretçinin sayfanın birincil CTA’sı bile olmayan bir metni tıkladığını gözlemlersin. Sayfanın birincil CTA’sı, sayfadaki toplam tıklamaların % 20’sinden daha azını almıştır. Buradan, CTA’nın ziyaretçilerin için en az dikkat çektiği bir alanda bulunduğunu ve bu nedenle dönüşümleri iyileştirmek için CTA’yı en çok tıklanan metnin bulunduğu bölgeye taşıman gerektiği sonucunu çıkarmalısın.

Heatmap verilerine dayanarak bir eylem planı belirledikten sonra, bulguları birden çok yöntem kullanarak doğrulayabilirsin. En yaygın yöntemlerden biri A / B split testidir.

CTA’yı maksimum tıklanan metnin bulunduğu alana yeniden yerleştirmenin dönüşümleri artırmaya yardımcı olacağına karar verdikten sonra, hipotezinizin geçerli olup olmadığını orijinal sürümle test ederek A / B’yi kontrol ederek çapraz kontrol edebilirsin.

Hatalı analiz, hatalı sonuçlara yol açacaktır.

Bölüm 4: Web Sitesi Heatmap Verilerini Ne Zaman Kullanmalısın?


Araştırma hakkında konuştuğumda 2 çeşit araştırma yöntemi kullanmaktayım: Nicel araştırma ve Nitel araştırma.

Google Analytics (GA) gibi nicel araştırma araçları, sayılarda sana yardımcı olan veriler oluşturur. Nicel veriler, web sitene kaç ziyaretçinin geldiğini, ne kadar zaman harcadıklarını, kaç ziyaretçinin dönüşüm sağladığını, web sitenin hemen çıkma oranının olduğunu gösterir. Web sitenin performansı hakkında somut sayısal gerçekler istiyorsan, nicel veriler amaca oldukça başarılı bir şekilde hizmet eder.

Rakamlardan daha derine inmek istediğinde ne olur?

Ziyaretçilerin neden web sitende yaptıkları kadar zaman harcadıklarını, neden ziyaretçilerin ‘x’ sayısını dönüştürdüğü ve diğerlerinin yapmadığı, web sitenin hemen çıkma oranı nedir? Nicel veriler ‘neye’ cevap verir, ama ‘neye’ cevap vermez. Yalnızca nitel veriler, web sitenin neden böyle performans gösterdiğini anlamana yardımcı olabilir.

Tüm sektörlerden işletmeler ortak bir şeyi başarmaya çalışırlar: ziyaretçileri başarıyla anlamak ve web sitelerini bu anlayışa göre değiştirmek. Alt satır, neredeyse her zaman heatmap verilerini kullanmalısın. Gereklilik ne kadar büyük veya küçük olursa olsun, heatmap ziyaretçi davranışının arkasındaki ‘neden’i anlamana yardımcı olacaktır.

Belki bir B2B şirketi düşük rakamlarla sıkışıp kalmış olabilir, bir e-ticaret mağazası yüksek bir sepet terk etme oranıyla mücadele ediyor olabilir, bir medya ve eğlence sitesi azalan bir kitleyle mücadele ediyor olabilir, bir yayınevi düşük okurluk ve düşük abonelik ile uğraşabilir. İşte tüm bu oranlar ve sorunlar farklı sektörlerde aktif olarak hizmet veren şirketlerin yaşayacağı sorunlar listesine girecektir.

Heatmap, hedefin ziyaretçilerinin bir sayfa ile etkileşimini izlemek olduğunda kullanışlıdır.

Heatmap verileri web sayfandaki her bölümün performansını farklı açılardan gösterir. Heatmap’leri ne zaman kullanman veya kullanmaman gerektiği konusunda belirlenmiş bir kılavuz yoktur. Heatmap’ler o kadar çok yönlüdür ki ziyaretçilerin bakış açısıyla cevap isteyen her türlü olay veya koşul için kullanılabilirler.

Bu nedenle, projenin kapsamından bağımsız olarak tüm analizlerin için heatmap verileri ve türleri kullanmak iyi bir uygulamadır. O kadar sezgisel ve kullanışlıdır ki, ziyaretçilerinin davranışları söz konusu olduğunda gereken en küçük bilgiler için bile bir tane çalıştırmalısın.

Heatmapleri ne zaman kullanacağını daha iyi anlamak için, Heatmap türlerini kullanabileceğin belirli örneklere bakmaya ne dersin:

a) Daha sezgisel kullanıcı arayüzü için yeniden tasarım

Yeniden tasarım, küçük tasarım değişikliklerinden tam tasarım yenilemeye kadar değişebilir. Bir şeyi yeniden tasarladığınızda, yeni sürümün öncekinden daha iyi olmasını istersiniz. Ayrıca, bir web sitesini yeniden tasarlamak sıkıcı ve pahalı olabilir, bu nedenle yeni bir siteyle yayınlanmadan önce tüm kullanıcı araştırma hipotezlerini test etmek ve doğrulamak istersiniz. Web sitenizi yeniden tasarlarken doğru yolda olduğunuzdan emin olmanın bir yolu ısı haritaları kullanmaktır. Daha önce de belirtildiği gibi, hiçbir şey ziyaretçileriniz hakkında bir ısı haritası gibi nitel araçlardan daha iyi bir şey söyleyemez.

Isı haritaları yardımıyla sayfanızdaki içerik yerleşimi, renk seçimi, CTA metni ve benzerleri gibi farklı öğelerin ziyaretçi davranışını nasıl etkilediğini ortaya çıkarabilirsiniz. Bu bilgileri ortaya çıkardıktan sonra, yalnızca ziyaretçi katılımını artırmakla kalmayacak, aynı zamanda dönüşümleri artıracak daha sezgisel ve daha akıllı kullanıcı arayüzü için web sitenizi karlı bir şekilde yeniden tasarlamak için kullanabilirsiniz.

b) Hemen çıkma oranını azaltma

Web siteniz çok fazla trafik üretiyor olabilir, ancak hemen çıkma oranı eşit derecede yüksek mi? Ziyaretçilerin dönüşüm gerçekleştirmeden veya yeterli zaman harcamadan web sitenizden çıkmalarını sağlayan şeyleri anlamakta zorlanıyor musunuz? Heatmap verilerinin sizin için işi yapmasına izin verin.

Heatmap verileri, web sitenizdeki dikkat dağıtıcı unsurları belirlemenize, web sitenizin düzenini ve içerik yerleşimini optimize etmenize, gezinme boşluklarını düzeltmenize ve ziyaretçi katılımını artırmak için doğru içerik türünü koymanıza ve böylece hemen çıkma oranını azaltmanıza ve dönüşümleri artırmanıza yardımcı olur.

ABD merkezli bir dijital pazarlama ajansı olan Smartz, yüksek hemen çıkma oranıyla mücadele ediyordu. Eski ana sayfa tasarımları geçmişte çalışmasına rağmen, değişen zaman ve teknoloji aşamasıyla daha az ilgi çekmeye başlamıştı.

Ziyaretçilerinin websitelerine ne şekilde tepki verdiklerini ölçmek için Heatmap verilerine başvurmayı planladılar.

heatmap verileri

Yukarıdaki görüntüden birkaç gözlem kolayca yapılabilir. İlk olarak, en ilgi çekici bölümler ısı haritası ile vurgulanır. İkincisi, hiç bir rengin olmadığı bir bölümün tamamını görebilirsiniz.

Renksiz bir bölüm, bölümün sıfır ziyaretçi katılımı anlamına gelir.

Bu Heatmap verilerinden sonra ne mi oldu? Smartz’daki ekip bu ve diğer gözlemleri dikkate alarak ana sayfayı yeniden tasarladı.

heatmap yeniden tasarım verileri

Yenilenen tasarımdan önce, sayfanın her bir bölümünün ziyaretçileri ilgilendirdiğini ve ikincisinin olması gerektiği gibi, yeni sayfanın 4 sıcak noktayı içermediğini kolayca anlayabiliriz. Bunun anlamı, ana sayfanın mesajlaşma ve amacının artık tüm ziyaretçiler için daha açık olmasıdır.

c) Gezinme boşluklarını düzeltme

Çoğu zaman, web sitenizin gezinmesi ziyaretçilerinizin beklentilerini karşılamayabilir, çünkü ziyaretçilerin gezinmeyi nasıl beklediğini bilmeden yapılandırdınız. Bu, kötü kullanıcı deneyimi sağlar ve ziyaretçiler aradıklarını tam olarak bekledikleri yerde bulamadığında sürtünme yaratır. Ziyaretçilerinizin web sitenizin gezinmesinin nasıl olmasını beklediğini anlamak ve dönüşümleri artırmak için buna göre yapılandırmak için ısı haritalarını kullanın.

d) Kayıtların artırılması

Bir B2B Saas işletmesi için kayıtlar (ücretsiz demo, ücretsiz deneme sürümü veya bülten için olsun), olası satışların nihai kaynağı olarak hizmet eder. Ziyaretçiler, nitelikli potansiyel müşteri havuzuna eklenen işlemleri tamamlamıyorsa, formunuza ve yerleşimine başka bir göz atmanın zamanı gelmiş olabilir.

Örneğin, bir B2B Saas işletmenize sahip olduğunuzu ve ana iyi potansiyel satış kaynağınızın ücretsiz deneme talep formunuz olduğunu varsayalım. Mevcut ana sayfa tasarımınızda, ücretsiz deneme isteği formunun sayfanın altına yerleştirildiğini varsayalım. GA verilerinize bakarsınız ve iyi bir trafik elde ettikten sonra bile web sitenizin dönüşüm oranının etkileyici olduğundan daha düşük olduğunu görürsünüz. Böylece sayfada bir kaydırma haritası çalıştırmaya karar veriyorsunuz.

Örnekleme dönemini başarıyla tamamladıktan sonra, oluşturulan kaydırma haritasına bakarsınız ve ziyaretçilerinizin yarısından fazlasının sayfanın en altına gitmedikleri için ücretsiz deneme isteği formunu bile bulamadıklarını fark edersiniz. Artık sayfanızın en popüler bölümlerini tanımlamak için bir ısı haritası çalıştırabilir ve maksimum ziyaretçi katılımı sağlamak için demo istek formunu bu bölümlerden birine yerleştirebilirsiniz.

e) A / B testleri yapmak

Heatmap verilerini kullanma fırsatını kesinlikle geçemediğiniz bir örnek, A / B testlerini gerçekleştirmeyi planlamaktır. A / B testi, dönüşüm oranınızı artırmanıza ve işletmenizin her gün mücadele etmesini önlemeye yardımcı olabilir. Ancak bu yalnızca A / B testi veri destekli olduğunda geçerlidir. Tüm A / B test kampanyalarınızdan önce , ziyaretçilerinizin web sitenizdeki davranışlarının iyi bir niteliksel analizi yapılmalıdır.

Mevcut tasarımınız ziyaretçileri dönüştüremiyor, bu yüzden biraz değiştirmeniz veya tamamen değiştirmeniz gerektiğini biliyorsunuz. Biraz tweak veya tam bir dönüşüme ihtiyacı olup olmadığına nasıl karar vereceksiniz? Isı haritalarının yardımıyla. Isı haritalarıyla, mevcut tasarımınızın arkasındaki nedeni istenen dönüşümü desteklemeyin. Yüksek ve düşük dikkat gerektiren noktaları belirleyebilir ve A / B testiniz için buna göre bir varyasyon oluşturabilirsiniz.

Yukarıdaki iş ihtiyaçlarının yanı sıra, bir web sitesinin farklı sayfaları ve öğeleri de web sitesi ısı haritaları için farklı kullanım durumlarına sahiptir. Bunlar, işletmeniz için dönüşüm sağlayan en kritik sayfalar ve öğeler olabilir. Web sayfaları için ısı haritası analizi, izlediğiniz hedeflere göre de değişir. Web sitesi ısı haritasının, web sayfalarını ve öğelerini yönlendiren dönüşümlerinizin her birini nasıl iyileştirebileceğine bakalım:

Ana Sayfa

Ana sayfanız tüm web sitenizi bir arada tutan şeydir. Web sitenizdeki her web sayfası bu siteden ayrılır. Ayrıca ziyaretçilerin markanızı görüntüleme şeklini de şekillendirir. Ana sayfanız markanız hakkında ilk izlenimi veren şeydir. Ana sayfanız iyi bir kullanıcı deneyimi sunma yeteneğiyle iyi tasarlanmamışsa ve ziyaretçi beklentilerini karşılayamazsa, ziyaretçilerinizin dönüşüm huninizin derinliklerine inmek yerine, ayrılma olasılığı daha yüksektir.

Ziyaretçilerin ana sayfanızda en çok nereyi tıkladıklarını belirlemek için tıklama haritalarını kullanabilirsiniz. Ana sayfanızın çok kısa veya çok uzun olup olmadığını anlamak ve ana sayfanızın olması gereken optimum uzunluğu bulmak için kaydırma haritalarını da kullanabilirsiniz. Isı haritaları aracılığıyla sürekli izleme sayesinde, ana sayfanızın en popüler bölümlerini kolayca belirleyebilir ve bu bölümlere önemli içerik ve CTA yerleştirebilirsiniz.

Ürün Sayfası

Ürün sayfanız , ziyaretçilerin sepetlerine ürün ekleyip eklemeyeceklerini belirler. Ürün sayfanız yeterince bilgilendirici değilse, kaliteli ürün resimlerine sahip değilse veya boyut kılavuzu bulmak çok zorsa, ziyaretçiler kesinlikle satın almadan web sitenizden geri döner. Kullanıcıların ürün sayfalarınızda nasıl gezindiğini izlemek, teklif arıyorlarsa boyut kılavuzunu bulmakta zorlanıyorlar mı ve çok daha fazlasını belirlemek için web sitesi ısı haritalarını kullanabilirsin.

Örneğin, bir e-Ticaret işletme sahibi olarak, ürün sayfanıza bir ısı haritası çizmeye karar verdin. Örnek periyodunun tamamlanmasından sonra geri dönüp verileri analiz edersin.

Heatmap-Product-page-1

Heatmap verilerine baktıktan sonra, birçok kullanıcının ürün resmini tıkladığını ve mevcut tasarımınıza göre ürün resmini tıkladığında genişlemediğini gözlemliyorsun. Burada ısı haritasının yaptığı, kullanıcıların ürün sayfanızdan tam olarak ne beklediklerini anlatmaktı ve ürün sayfanızı ziyaretçi beklentilerini karşılayacak ve web sitenizin UX’sini nasıl iyileştirebileceğiniz konusunda eyleme geçirilebilir bir fikir verdi.

Ödeme Sayfası

Ödeme sayfası, dönüşüm huninizdeki son sayfadır. Bu nedenle, ziyaretçilerin bu sayfada gerekli tüm bilgileri bulmaları kesinlikle önemlidir. Durum böyle değilse, ziyaretçiler eksik bilgi aramak için web sitenizden çıkabilir ve daha sonra geri dönmeyebilir. Web sitesi ısı haritası, ödeme sayfasındaki kullanıcı davranışını izleyerek bu tür tüm eksik bilgileri belirlemenize yardımcı olabilir.

Örneğin, Google Analytics (GA) verileriniz, alışveriş sepetlerine ürün ekleyen çoğu ziyaretçinin ödeme sayfasında ayrıldığını gösterdi. Ödeme sayfanıza bir ısı haritası çizmeye karar verdiniz. Toplanan verileri analiz ettikten sonra, çok sayıda ziyaretçinin ‘Kuponu Uygula’ alanını tıkladığını ve bir daha asla geri dönmemesi için web sitenizden çıktığını fark ettiniz.

Bu bilgileri kullanarak, artık geçerli tüm kupon kodlarının bir açılır listesini eklemenin veya her müşterinin uygunluğunun alanın otomatik olarak doldurulmasının alışveriş sepetinden vazgeçme oranını azaltmaya ve satın alma işlemlerini artırmaya yardımcı olacağını varsayabilirsiniz.


Bu arada e-posta bültenimize üye olmadıysan üye olabilirsin, en yeni makaleler geldikçe seni haberdar ediyor olacağım.


Bloglar ve Diğer Kaynak Sayfaları

Bloglarınızın, örnek olaylarınızın, makalelerinizin ve diğer içerik parçalarınızın en uygun uzunluğunu öğrenmek istediğinizde, ısı haritaları sihir gibi çalışabilir. Kaydırma haritaları, kullanıcıların bir sayfayı ne kadar aşağı kaydırdığını, bir sayfanın % 50’sini değil, % 100’ü kaydırmayan ziyaretçi sayısını belirtir. Kaydırma haritalarını kullanarak içeriğinizi optimize edebilir ve uzunluğunu ziyaretçilerinizin kaydırma düzenine göre planlayabilirsiniz.

Harekete Geçirici Mesaj (CTA)

Web sayfanızın ‘Harekete Geçirici Mesaj’ veya CTA, tüm gerçek işlemin gerçekleştiği yerdir. Yerleştirmek için yanlış metin, renk veya alan seçerseniz, web sitesi dönüşüm oranlarınız büyük ölçüde etkilenir. Web sayfanızın en popüler bölümlerini tanımlamak istediğinizde, web sitenizin en popüler bölümlerini tanımlamak istediğinizde veya ziyaretçilerin sayfanın tamamında kaydırma yapıp yapmadığını ve CTA’nızın bulunduğu ekranın altına ulaşıp ulaşmadığını izlemek istediğinizde web sitesi ısı haritasını kullanın yerleştirilir.

Bölüm 5: Web Sitesi Heatmap Verilerini Kullanılırken Sık Yapılan Hatalar


Sayfadaki ziyaretçi davranışını değerlendirmenin hızlı ve kolay bir yolu olan ısı haritası gibi bir araçla, hata yapma olasılığının daha az olduğunu düşünebilirsiniz. Web sitelerinde ısı haritası oluşturup kullanırken pazarlamacıların sık sık yaptığı basit hatalardan şaşıracaksınız.

Örnek Boyutu

Pazarlamacılar genellikle heatmap seçerken diğer herhangi bir istatistiksel araç gibi ele alınmasını ve hedef kitlenin tamamını temsil eden örnek boyutunu seçmeleri gerektiğini unuturlar.

Örnek boyutunu seçerken, çok büyük veya çok küçük olmaması gerektiğine dikkat et, çünkü o zaman örnek boyutu temsili olmayacak ve heatmap raporu fazla kullanılmayacaktır.

İzlemek istediğin hedefe bağlı olmanın yanı sıra, örnek boyutun da diğer faktörlere bağlıdır. Aşağıdaki haritalara göre ısı eşleme egzersizin için doğru örnek boyutunu hesaplayabilirsin:

  • Bir Aylık Trafik: Heatmap’lerini çizmek istediğin sayfaların toplam aylık trafiği.
  • Hata Payı: Belirlediğin hata payı, araştırma sonuçlarının tüm popülasyonun gerçek resminden ne kadar farklı olabileceğini yansıtır.
  • Güven Düzeyi: Elde ettiğin yüzde seçtiğin örnek ile belirli bir yüzdeliğe ne kadar güvendiğini yansıtır.

Web siten çok fazla trafik alıyorsa, Scott Smith tarafından sunulan aşağıdaki formülü kullanarak heatmap’in için örnek boyutunu kolayca ayarlayabilirsin:

(Z değeri) ² X standart sapma (1 standart sapma) / (hata payı) = n²

Burada, Z değeri seçtiğin güven düzeyine karşılık gelir. En yaygın olan güven düzeyi levhalar için z değerlerini numaralandıran çevrimiçi tabloları kolayca bulabilirsin.

Güven seviyesiZ puanı
% 992.58
% 951.96
% 901.65
% 851,44
% 801.28

Standart sapma, bir veri kümesinin ortalaması ile veri kümesindeki tek tek veri noktaları arasındaki farkın derecesidir.

Herhangi bir hesaplama hatası vermemek için çevrimiçi örnek boyutu hesaplayıcılarını kullanmayı da tercih edebilirsiniz.

Böyle bir çevrimiçi örneklem büyüklüğü hesaplayıcısı, çevrimiçi anketler yürüten çevrimiçi bir anket portalı olan SurveyMonkey tarafından sunulmaktadır.

Trafik Türü

Örnek boyutunun yanı sıra, yanlış trafik türünü kullanmaktan kaçınmak da önemlidir.

Örneğin, herhangi bir sektörden işletmelerin her zaman ortak web sitelerine 2 çeşit ziyaretçisi vardır: yeni veya ilk kez gelen ziyaretçiler ve eski veya geri gelen ziyaretçiler.

Şimdi, ilk kez gelen ziyaretçiler ve geri gelen ziyaretçiler için davranış izleme parametreleri çok farklıdır. Geri gelen bir ziyaretçi, web sitendeki mesajlara ilk kez gelen bir ziyaretçiden çok farklı bir şekilde tepki verebilir. Veya, web sitene ilk kez gelen ziyaretçiden farklı bir bilgi parçası arayan bir geri gelen ziyaretçi gelebilir.

Örnekleminiz gibi, seçtiğiniz trafik türü de izlediğiniz hedefe bağlıdır. E-Ticaret web sitenizde tekrarlanan satın alma sayısını artırmak istediğini düşün. Seçtiğin trafiğin temsili olması ve sıcak haritanın anlamlı bilgiler üretmesi için yalnızca geri gelen ziyaretçileri kitlen olarak seç. Yine, hedefin yeni web sitesi tasarımının kullanılabilirliğini test etmekse, son verilerin her iki segment için de konuşabilmesi için ziyaretçileri yeni ve geri gelen ziyaretçilere ayır.

Isı eşleme aracının ziyaretçilerini iş ihtiyaçlarına göre segmentlere ayırmana izin vermesi çok önemlidir.

Örnek Dönem

Web sayfanda bir ısı haritası ayarlarken, onu çalıştırmak için seçtiğin süreye dikkat et. Örnek periyoduna karar verirken aşağıdaki noktaları unutma:

  • Örnek dönemin tatiller, festivaller, satış süresi, hafta sonları gibi dış faktörler dikkate alınarak ayarlanmalıdır.
  • Örnek süren farklı alıcı davranışlarını dikkate almalıdır.

Örnek periyodu ayarlanırken yukarıdaki noktalar dikkate alınmazsan, Heatmap veri raporunun temsili olmama olasılığı artar.

  • Örneğin, bir e-ticaret mağazan var ve Şeker Bayram’ından bir hafta önce sayfalarından birinde bir Heatmap başlatıyorsun. Sence elde edilen sonuçlar tüm yılı temsil edecek mi?  Hayır, muhtemelen olmayacak. Festivaller veya etkinlikler sırasında satın alma davranışı yılın geri kalanından büyük ölçüde farklıdır.
  • Başka bir örnek olarak, ana haritadaki ilk 5.000 ziyaretçiye veri toplamak için Heatmap aracını ayarladığını varsayalım. İlk 2-3 günde 5000 işaretine ulaştığında ne olur? İşareti vurduktan sonra daha fazla veri toplamayı durdurur. Örnek süren bir Cuma günü başladıysa ve Pazar gününe kadar 5000 ziyaretçiyle ilgili veri topladıysa, hafta içi web sitene gelen ziyaretçilerin veri hesabı nasıl olacak?

Kirli Veriler

Pazarlamacılar olarak her zaman hızlı sonuçlar almanın yollarını ararız. Bazı durumlarda, bu yararlı olabilir, ancak bazılarında bu zararlı olabilir.

Heatmap türleri söz konusu olduğunda bu merak, üretilen verilerin kalitesini engeller. Bu özellikle ısı haritaları gibi araçları kullanmaya yeni başlayan kuruluşlar için geçerlidir. Bir Heatmap’e tekrar tekrar gizlice baktığında veya numune süresi sona ermeden sonuç çıkarırsan, temel olarak kendi Heatmap verilerini kirletirsin.

Örneğin, ana sayfanda bir heatmap türünden bir tanesini ayarladın. 2 gün sonra, ana görselinin etrafında bir bağı olmayan büyük bir kırmızı renk blogunun oluştuğunu fark ettin. Artık bu öğenin neden bu kadar çok ziyaretçi çektiğini bilmek istiyorsun ve bu nedenle meslektaşlarından bilgi isteyebilirsin. Bir açıklama aramak için iş arkadaşların ana sayfaya gider, bu sayfaya göz atar ve ana görselin tıklamalarına katkıda bulunur, böylece heatmap verilerini kirletirler.

Doğru Heatmap veri üretimini sağlamak için kuruluşundaki verileri kirletebilecek tüm IP’lerin engellendiğinden emin olmayı da unutma.

Hızlı Sonuç

Pazarlamacıların yaptığı en yaygın ve zararlı hatalardan biri, nihai sonuç olarak erken kazanma eğilimlerini almak ve örnekleme süresi bitmeden sıcak haritayı durdurmaktır.

Örneğin, web sayfalarından birinde bir Heatmap oluşturduğunu ve örnek süresi olarak 2 hafta sürdüğünü varsayalım. İlk haftanın sonunda, verilere bakıyorsun ve çok sayıda ziyaretçinin birincil CTA’yı tıklamak yerine bağlantıları olmayan bir bölümü tıkladığını fark ediyorsun. İkinci haftanın bitmesini beklemeden değişiklikler yapar ve uygularsın.

Varsayımlara göre değişiklik yaparak, Heatmap raporunun geçerliliğinden ödün veriyorsun. Erken bir sonuca vararak, Heatmap’in işletmen için üretebileceğine dair temel bilgileri gözden kaçırabilirsin.

Örnekleme süresi bitmeden her zaman erken çıkarım yapmaktan kaçınmalısın.

Yalıtılmış egzersiz: Heatmap yalıtılmış bir veri toplama aracı değildir. Bu şekilde davranmak, pazarlamacıların yaptığı tüm hatalardan en yaygın olanlarından biridir. Heatmap her zaman daha geniş bir veri kümesinin parçası olarak kullanılmalıdır.

Google Analytics (GA), oturum kayıtları gibi diğer web analizi araçlarıyla birleştirilmeli, böylece önerdiğin değişiklikler ve topladığın veriler çapraz referanslandırılabilir ve onaylanabilir.

Örneğin, verilere baktıktan sonra web sayfalarından birinde ayarladığın Heatmap’in herhangi bir nedenle kirlendiğinden şüphelenirsin. Senin tarafından başka bir veri toplama aracı kullanılmıyorsa, bunu nasıl onaylayacak veya sayıları nasıl kontrol edeceksin?

Bir heatmap’in yanında alternatif araçların bulunması, Hearmap verilerini doğrulamak ve raporlamak için birden fazla seçenek sunar. Ayrıca işletmen için doğru seçimleri yapmana yardımcı olacaktır.

Yanlış araç: Günümüzde artan popülaritesi nedeniyle piyasada çok sayıda düşük maliyetli heatmap araçları ortaya çıkmıştır. Ancak, mevcut her araç aynı derecede iyi değildir. Nasıl ayarlayabileceğin konusunda sana birden fazla seçenek sunan Heatmap araçlarını ara. Mevcut tüm araçlar üzerinde kapsamlı araştırma yap ve ziyaretçileri birden fazla parametreye göre segmentlere ayırmana, ziyaretçi etkinliğini kaydetmene, ziyaretçi geri bildirim seçenekleri sunabilir misin bak.

Bölüm 6: Web Sitesinde Heatmap Kullanmanın Zorlukları Nelerdir?


Bir araç ne kadar sezgisel veya basit olursa olsun, her zaman kendi zorluklarını beraberinde getirir. Ancak bu, aracı kullanırken bu zorlukların üstesinden gelemeyeceğin anlamına gelmez. Heatmap’ler teoride basit ancak pratikte karmaşıktır.

Herhangi bir tür Heatmap kullanmayla ilgili en yaygın zorluklardan bazılarına bakalım:

  • Dinamik URL İzleme

Niteliksel araştırma araçları, ziyaretçi davranışını anlamaya çalışan pazarlamacılar arasında favoridir. Web sitesi Heatmap’leri popülerdir çünkü ziyaretçi davranışları, kaydırma haritaları, tıklama haritaları gibi birden çok biçimde anlaşılması kolay grafiksel bir şekilde sağlar. Bununla birlikte son zamanlarda, pazarlamacılar dinamik sayfalar söz konusu olduğunda, Heatmap’lerin ziyaretçilerin web sitesinde nasıl gezindiğine dair derin bilgiler sağlama açısından çok iyi olmadığını fark ettiler.

Bu derinlemesine analiz, özellikle her kullanıcıya kişiselleştirilmiş hizmet sunmak istediğinde önemlidir. Günümüzde en küçük işletmelerin bile web sitelerindeki sayfaların çoğu için statik URL yerine dinamik URL’leri olduğu için bu zorluk tüm sektörlerde karşılaşılmaktadır. Günümüzde çoğu web sayfası genişleyen menüler, çoklu animasyonlar, pop-up’lar gibi İle dinamiktir.

Statik ısı haritalarından farklı olarak, dinamik Heatmap’ler kolayca sepet sayfası, siparişler sayfası, müşteri profili gibi dinamik sayfalar, dinamik URL’lere sahip olduklarından, normal web sitesi heatmap’leri kullanılarak analiz edilemezler.

Dinamik Heatmap türleri, ziyaretçilerin çevrimiçi tarama düzeniyle ilgili daha ayrıntılı bilgi edinmene yardımcı olmak için web sitesinde ve dinamik URL’lere sahip sayfalarda gezinmeni sağlar.

Örneğin, bir e-Ticaret mağazan olduğunu ve alışveriş sepeti sayfanda ziyaretçilerinin tarama düzenini anlamak istediğini varsayalım. Alışveriş sepeti sayfasında dinamik bir ısı haritası ayarla ve öngörülen sürenin geçmesini bekle. Bu şekilde oluşturulan rapor şöyle görünecektir:

Yukarıdaki dinamik Heatmap ekran görüntüsü, bir benzersiz ziyaretçinin etkinliklerini temsil eder.

verileri izlemek

Kırmızı yamalar en yüksek etkileşime sahip alanları gösterir ve açık mavi yamalar en düşük etkileşime sahip alanlardır. İlk bakışta gözlemleyebileceğin, seçilen ürün görüntüsünde, iptal düğmesinde, posta kodu alanında, indirimler seçeneğinde ve ödeme sayfasında yüksek etkinliktir. Bu gözlemleri kullanarak, bireysel ziyaretçileri kolayca derinlemesine anlayabilir ve sayfayı ziyaretçilerin beklentilerini daha iyi karşılayacak şekilde optimize edebilirsin. Böyle derinlemesine bir analiz sadece dinamik heatmap ile mümkündür.

  • Veri Analizi

Heatmap’ler güzeldir: canlı renkler, verilerin yorumlanması kolaydır, hepsi onu çok çekici ve güzel kılar. Ancak bu güzellik, dikkatli değilsen tüm heatmap egzersizini de öldürebilir.

Birçok pazarlamacı Heatmap verilerini yorumlarken bir soru ile mücadele ediyor: nereden başlamalı?

Heatmap verilerini kullanmak, excel gibi geleneksel veri toplama ve temsil yöntemlerinden daha sezgisel ve daha hızlıdır. Ama yine de doğru yorumlanmaları gerekiyor.

Bir Heatmap verisini analiz ederken akılda tutulması gereken bir şey, analizin diğer taraftan değil, hedeflerinden akması gerektiğidir. Herhangi bir hedef belirlemeden bir Heatmap analizini başlatırsan, büyük olasılıkla ziyaretçilerin müşterilere dönüşmesini engelleyen dikkat dağıtıcı unsurları tespit edemezsin.

Örneğin, yayınevinin web sitesi ana sayfasının birincil CTA’sının ziyaretçilerin aylık bültene abone olmalarını istediğini varsayalım: “Aylık Bültenimize Abone Ol'”

CTA ayrıca, şimdi bağış yapın, bizimle iletişime geçin ve bizimle stajyer gibi diğer önemli bilgilerin yanı sıra ana sayfandaki ekranın altına yerleştirilir.

GA verilerinize bakar ve iyi trafik almana rağmen dönüşüm oranının önemli ölçüde düşük olduğunu görürsün. Böylece ana sayfanda bir Heatmap ayarlarsın. Ancak herhangi bir hedef tanımlamadan, Heatmap üzerinden veri toplamaya başlarsın. Örnek periyodunun tamamlanmasından sonra toplanan verileri analiz etmeye başlarsın. Son Heatmap verilerini gördüğün anda, en parlak olan bir bölüme çekilirsin. Böylece birincil CTA’yı anında bu bölüme yerleştirmeye karar verirsin.

Heatmap çizmeden önce herhangi bir hedef belirlemediğin için, sayfada bir Scrollmap haritası çizdiğini fark etmedin, çoğu ziyaretçinin ana sayfanın altına bile kaydırmadığını ve böylece birincil CTA’da eksik olduğunu fark etmiş olabilirsin ve buradaki diğer tüm önemli bilgilerin yanı sıra bu oldukça önemli bir bilgi olarak kalıyor.

Belki, CTA’nı en popüler bölüme yerleştirerek, bülten aboneliklerinin sayısını artırabilirsin. Ancak tüm öngörülere sahip olmadığında, ekranın altındaki diğer içeriğin oluşturduğu fırsatları kaçırırsın.

Bölüm 7 : Popüler Endüstrilerde Heatmap Örnekleri

Heatmap türleri bazen kafa karıştırıcı olabilir. Sonuçta daha önce hiç kullanmadıysan markan için hangisinin en iyisi olduğunu bulmak zorlayıcı olacaktır.

Tabi bazı sektörler için Heatmap türlerinden bazılarını direk olarak önersek de bazen hiç düşünmediğin bir tür bile asıl ihtiyacın olan olabilir.

Yine de bir başlık açalım ve bazı önemli sektörlerdeki önemli Heatmap kullanımlarına yakından bakalım dedim. Çünkü Heatmap örneklerine baktığından benimle aynı şeyi düşünebilirsin. Alanlarının en iyileri rakiplerinin önüne geçmek için birçok başka yöntemin yanı sıra Heatmap’i çok ama çok uzun süredir kullanıyor. Bugün Amazon’a girdiğinde tam da senin ihtiyaçlarını gösteren bir sayfa ya da Netflix’in saan en beğeneceğin filmleri ve dizileri en başta göstermesinin de cevabı Heatmap yönteminden geçmektedir.

İşte bende bunun için dikkate alman gereken ve hatta uygulaman gereken bilgilere sahip olan tüm bu önemli örnekleri sektörlerinin başlığı altında inceledim.

a) E-Ticaret’teki Website Heatmap Örnekleri

Web sitesi heatmap verileri, ziyaretçilerin web sitelerinde tam olarak nasıl davrandıklarını anlamalarına ve analiz etmelerine yardımcı olduğundan, e-ticaret işletmeleri dönüşümlerini artırmak için Heatmap kullanır.

Bunun gerçekte nasıl çalıştığını anlamak için, alışveriş yapanların kitap satın alırken Amazon’u nasıl kullandıklarıyla ilgili bir Websitesi Heatmap örneğini ele alalım.

Heatmap verisine bakarsan, sayfada en çok dikkat çeken alanları kolayca belirleyebilirsin:

amazon örneği

Bu ısı haritasının ortaya koyduğu şey, en dikkat çekici bölümlerin ve en fazla etkileşimi sağlayan bölümlerin sayfanın üstünde olmasıdır. Bir başka gözlem de ziyaretçilerin “bunu satın alan müşteriler de satın aldı”, ‘sponsorlu ürünler’ ve ‘bu serideki kitaplar’ bölümüne tıkladıklarıdır:

amazon verileri

Yukarıdaki gibi bilgileri kullanarak, e-ticaret mağazaları ilgili ürünleri ve önemli içerikleri en popüler alanlara yerleştirebilir ve daha yüksek dönüşüm sağlayabilir.

E-Ticaret endüstrisinde Heatmap verilerinin daha spesifik bir kullanımını anlamak için, bebek ürünleri satan bir çevrimiçi mağazanın dikkat dağıtıcıları tanımlamak için web sitesi heatmaplerini nasıl kullandığını ve bu dikkat dağınıklığını yararlarına nasıl kullandığını inceleyelim.

Aşağıda orijinal sayfada çizilen bir Heatmap bulunmaktadır:

bebek

Analizde, Heatmap sayfadaki bebeğin yüzünün, mesajlaşma ve sağ tarafta en popüler alanlar olması gereken ürün olması durumunda ziyaretçinin dikkatini çektiğini ortaya koymaktadır.

Daha fazla araştırma, bebeğin yüzünün toplandığı dikkatin arkasındaki mantığı ortaya koyar: kadınlar, bebekler ve çekici insanlar, herhangi bir sayfada ziyaretçilerin bakışlarının ana konusudur.

Tüm bu anlayışlara dayanarak, sayfanın tasarımı değiştirildi ve bu yeni tasarımın heatmap verisi aşağıdaki gibi oldu:

örnek 3

İlk ekran görüntüsünde, bebeğin yüzünün ziyaretçiler için dikkat dağıtıcı olduğu belirtildi. Böylece bebeğin görüş konusu ürün ve mesajlaşma olarak değiştirildi ve yeni tasarımın Heatmap verisi, bebeğin yüzü dikkat çekmeye devam ederken, ziyaretçilerin bebek çizgisini takip ederek sağ taraftaki içeriğe ve ürüne giderek daha fazla dikkat ettiğini gösteriyor. Yani görüş mesafesine istenilen mesaj eklenerek başarıya ulaşıldı.

b)Medya ve Yayıncılıkta Websitesi Heatmap Örnekleri

Çevrimiçi bir yayın şirketi, bültenler, gazeteler, aylık dergiler gibi ürünleri yayına sunabilir. İçerik türü ne olursa olsun, temel amaç her zaman sundukları çeşitli ürünler için okuyucuyu ve abonelikleri arttırmaktır.

Gerçek şu ki, insanlar sadece makalelerini ve dijital gazetelerini okuyacak ve makalen mevcut bilgilerine değer katıyorsa bunlara abone olacaklardır. Bu nedenle, yalnızca sayfanın en çok görüntülenen bölümlerine insanların daha fazla bilgi edinmek istedikleri en bilgilendirici parçaları koyman zorunlu hale gelir.

  • Örneğin, Guardian’ın gazete sorunlarından birinin ısı haritasına bakalım:

guardian unlimited

Heatmap, dikkatin çoğunun sayfanın sol üst bölümlerinde yoğunlaştığını ve sayfanın alt ve sağ tarafının çok az dikkat çektiğini veya hiç dikkat çekmediğini ortaya koyuyor. Sayfanın bazı bölümleri en çok dikkat çekiyorsa ve diğer bölümler tamamen yok sayılıyorsa, sayfanın yeniden tasarlanması gerekir.

Diyelim ki, yukarıdaki sayfadaki ‘daha fazla haber’ bölümünde okuyucunun ilgi alanlarına uyan haber öğeleri olabilir. Ancak dikkat süreleri alt bölüme ulaştıklarında azaldıklarından, sadece ilgilendikleri konu olmayan sol üst bölümlerle gerçekten etkileşime girerler. Bu, sürtünmeye ve kötü kullanıcı deneyimine yol açabilir. Web sitesi Heatmap türleri, bu tür tarama modellerini tanımlamana yardımcı olabilir ve haber öğelerini ziyaretçilerin ilgi ve beklentilerine göre yerleştirmene olanak tanır.

Video akışı endüstrisinin en büyük oyuncularından biri olan Netflix, kullanıcıları için deneyimi kişiselleştirmek için A / B testi, web sitesi heatmap ve diğer ziyaretçi davranışı analiz araçları gibi dönüşüm optimizasyonuna çeşitli yöntemler kullanmak konusunda kraldır.

Bunun en güçlü kanıtlarından biri, kullanıcılarının bilişsel yükünü azaltmayı amaçlayan tüm kullanıcı arayüzünün 2013 revizyonudur. Netflix’in sayfası elden geçirilmeden önce baktığı şey şuydu:

netflix ilk tasarım

Netflix, 2009 yılında akıllı TV’ler ve bağlı cihazlar için yukarıda gösterilen biçimi başlattı. Ancak bu biçim, kutu kapak resminin bitmeyen satırlarını sundu. 2012’de Netflix’teki tasarımcılar, büyük resimlere odaklanacak ve kutu resmini raflarla değiştirecek bir UI formatı için maketler oluşturma arayışına girişti.

Yeni tasarım ise şöyle görünüyordu:

netflix yeni tasarım

Videoların kullanıcılara gösterilme şeklini değiştirmenin yanı sıra Netflix, 2009 sürümünün sahip olduğu sayfanın sağ tarafındaki metin açıklamasını da kaldırmış ve başlığın üstünde sol üste kaydırmıştır. Bu, sayfada çizilen bir Eye Tracking Heatmap, kullanıcıların sağdaki metin ile soldaki başlık arasında sürekli olarak dengelemek zorunda kaldıkları için yapıldı.

netflix heatmap

Netflix’in başarılı ekibi de sonuçlarından hareket edebilecekleri bir Heatmap oluşturmaya karar verdi.

netflix heatmap çıktıdı

Yeni arayüzde ortaya çıkan Heatmap verisi, yeni arayüzün bir bilgi parçasından diğerine daha az ileri gitmesini istediğini ve kullanıcıların bilişsel yükünü azalttığını ortaya koydu. Netflix, yeni arayüzü incelemek için 7 tane A / B testinin bir kaydını yaptı ve daha sonra canlı hale getirdi. Bugün bildiğimiz ve gördüğümüz Netflix, yukarıda gösterilen yeni elden geçirilmiş arayüzün optimize edilmiş bir sürümüdür.

İnanılmaz değil mi?

c) Seyahat Websitesi Heatmap Örnekleri

Bazı seyahat web sitelerinin tam olarak olmasını istediğin bilgileri tam olarak istediğin yerde nasıl bulduğunu hiç merak ettin mi?

İşte bunu yapmanın olası yolu kuşkusuz ki web sitesi heatmaplerdir.

Herhangi bir seyahat şirketinin web sitesi için birincil hedef her zaman rezervasyonları artırmaktır. Ancak uçuş bilgileri, çevrimiçi check-in, şikâyetlerin giderilmesi gibi diğer kullanıcı gereksinimlerini de karşılar.

Çevrimiçi rezervasyonların sayısını artırmak ve kullanıcıların web sitesinde aradıkları bilgileri bulmalarını kolaylaştırmak için seyahat işletmeleri genellikle yardım için web sitesi heatmap verilerine yönelir. Bu rehberde daha önce belirtildiği gibi heatmap türleri, ziyaretçilerinizin ve kullanıcıların web sitendeki tarama davranışlarını izlemene yardımcı olur; böylece bilgileri web sitenin kullanıcı arayüzünü ve kullanıcı arayüzünü iyileştirmek için kullanabilirsin.

Merkezi Amstelveen, Hollanda’da bulunan ve 1919 yılında kurulan KLM Royal Dutch Airlines, halen orijinal adı altında faaliyet gösteren dünyanın en eski havayolu şirketidir. Havayolu web sitelerinin kullanıcı deneyimi üzerine yapılan bir araştırmaya göre, kullanıcılar biniş kartlarını KLM Havayolları’nın web sitesinde bulmak için en uzun süreyi aldılar.

Delta Airlines, kullanıcıların web sitelerine biniş kartlarını almanın en kolay yolunu bulmasıyla listenin en tepesinde yer aldı. Delta Airlines’ın sayfası şöyle görünüyordu:

delta

KLM Airlines’ın ana sayfası ise şöyleydi:

KLM Airlines

KLM’deki deneyim optimizasyonu ekibi, kullanıcıların diğer havayollarının web sitelerine kıyasla web sitelerinde biniş kartlarını bulmanın neden en uzun sürdüğünü anlamak için ana sayfalarında bir ısı haritası çalıştırmaya karar verdi. Sayfada oluşturulan heatmap verisi ise şöyleydi:

heatmap verisi

KLM’nin web sitesini Delta’nın web sitesiyle karşılaştırırsan, ilgili sayfalar arasında büyük bir fark olduğunu görürsün. Delta’nın sayfasının tasarımı temiz, güncel ve karmaşık değildi. Oysa KLM’nin yukarıdaki web sitesi heatmap verisi, ana sayfalarının ne kadar karmaşık olduğunu gösteriyor ve bu çevrimiçi biniş kartlarını bulma konusunda düşük performanslarının nedeni olabilir.

Seyahat web sitelerinin dönüşüm optimizasyonu için heatmap verilerini kullanabilmesinin bir başka ilginç yolu, ziyaretçi davranışını analiz etmek için backend kısmında değil, ziyaretçilerin rezervasyon deneyimlerini geliştirmelerine yardımcı olmak için frontend kısmında olmasıdır.

Hipmunk, farklı ulaşım modları, oteller ve tatil kiralamaları için kapsamlı seyahat araması sunan ve en iyi ve en ucuz seçenekleri göstermek için en iyi seyahat sitelerini karşılaştırmaya yardımcı olan bir web sitesi olarak Frontend Heatmap’leri kullanan ilk siteydi.

Heatmap verilerinin ziyaretçilerini nasıl incelediğini ve sonuçlarını ise aşağıdaki görselde görebilirsin:

harita gösterimi

Heatmap verilerine dayanarak, Hipmunk web sitesindeki ziyaretçiler nerede kalacaklarına, nerede yenebileceklerine, hangi yerleri ziyaret edeceklerine ve güzergahlarının diğer önemli kısımlarına karar verebileceklerine kolayca karar verebilirler. Ziyaretçilerin gezilerinin farklı yönleriyle ilgili öneriler aramak için birden fazla siteye gitmeleri gerekmediğinden, Hipmunk kullanıcı deneyimi büyük ölçüde iyileşti ve dönüşüm oranlarında gösterdi.

Hipmunk’ın izinden sonra Kayak.com gibi diğer rakipler de ziyaretçilere ziyaret etmeyi planladıkları şehrin sıcak ve serin noktalarının sıcak harita görünümünü sunmaya başladı.

 

d)SaaS B2B Websitelerinde Heatmap Örnekleri

Nitelikli potansiyel müşteriler bir B2B SaaS şirketi için son derece önemlidir.

İyi, nitelikli olası satışlar olmadan, B2B işletmeleri hiçbir ürün satamayacağı için başarılı olmazlar.

Ve bu tür olası satışların ana kaynağı, web sitelerinde barındırılan çeşitli formlar olacaktır: kayıt formu, demo istek formu, vaka çalışması indirme formu, bülten gibi.

Bu formlar çeşitli sayfalarda bulunur ve web sitesinde birden fazla CTA aracılığıyla dağıtılır. Birçok B2B işletmesi, bu tür CTA’ları ve formları yerleştirmek için bir sayfadaki en iyi bölümü belirlemek ve form akışındaki molaları belirlemek ve ziyaretçilerin beklentilerine uyacak şekilde düzeltmek için farklı türdeki web sitesi heatmaplerini kullanır.

Bir B2B SaaS işletmesinin ana sayfası, tüm web sitesindeki en önemli sayfalardan biridir. Çünkü sadece üzerinde birden fazla olası satış toplama formuna sahip olmakla kalmaz, aynı zamanda ana sayfa web sitesinde başka herhangi bir yere ziyaretçi çektiği için bu şekilde bir öneme sahiptir ( reklamlar, sosyal medya tanıtımları ve bu tür diğer kanallar). Ana sayfalarının sunduğu keşfedilmemiş fırsatlardan faydalanmak ve dönüşüm hunilerinden tüm olası engelleyicileri kaldırmak için, birden çok pazarlama aracı sunan Saas merkezli bir şirket olan Sumo, ana sayfasında bir ısı haritası çizmeye karar verdi.

Ortaya çıkan Heatmap şöyle görünüyordu:

suma heatmap

Ana sayfada çizilen ısı haritasına baktıktan sonra Sumo’daki ekip birkaç gözlem yaptı:

  • Sayfanın büyük başlığındaki öğeler dikkat çekti.
  • Banner’da ziyaretçiler en çok ‘Hakkımızda’ bağlantısını tıkladı.
  • Sayfanın 2 ana CTA’sı – ‘Başlayın’ ve ‘Videoyu İzle’ de önemli ölçüde tıklandı.
  • Sayfanın gövdesinde listelenen ücretsiz araçlar ayrı bir düzeyde tıklanmıştır, ancak genel eğilim, sayfanın sol tarafında listelenen araçların, sayfanın sağ tarafında listelenen araçlardan daha fazla tıklanmasıydı.
  • Sayfanın büyük başlığının altına gitmeye yön veren ok, köprülenmemiş olsa bile çok tıklanmıştır. Bu, ziyaretçilerin köprü oluşturmasını bekledikleri anlamına geliyordu.
  • Bu gözlemler daha sonra Sumo’daki ekibin sayfada tasarım ve içerik değişiklikleri yapmasına yardımcı oldu ve sonuçta Sumo’nun dönüşüm oranlarında bir artışa yol açtı.

Sonuç


Şimdi bu kılavuzu okuduğuna göre, Heatmap hakkında birçok kişiden çok daha fazla bilgiye sahipsin demektir. Ne olduğundan, nasıl işlediğine ve nelere dikkat etmen gerektiğine kadar birçok konuda bu rehber sayesinde çoğu şeyi öğrendin.

Web sitesi Heatmap türleri ve yöntemleri kesinlikle vazgeçilmez bir ziyaretçi davranışı analiz aracıdır, ancak tüm sürecin karmaşıklıklarını bilmeden kullanmak ve yapılandırılmamış yaklaşıma göre hareket etmek sana bozuk ve yanlış veriler verecektir.

Doğru bir şekilde yapıldığında, yapabileceğin tüm küçük hataları, kullanabileceğin içgörü türlerini ve doğru web sitesi heatmap türünü göz önünde bulundurarak, web sitenin tasarımını ve içeriğini gerçek zamanlı ziyaretçi etkileşimlerine göre düzenleyebilirsin. Bu da internet sitenin rakiplerinin çok daha önüne geçeceğini, istediğin içeriği hedef kitlene daha yüksek oranda ulaştırabileceğine ve belki de yeni lansmanını yaptığın ürünün satışını yapabilmeni sağlayacaktır.

Yani gördüğün gibi tek bir Heatmap yönetiminin sana ve markana neler kazandıracağını görüyorsun değil mi? Hiçte yadırganacak bir yöntem olmadığını en başından söylemiştim. :)

İşte tüm bunların ışığında maalesef bu rehberimizin de sonuna geldik. Çok klasik bir şekilde bitirdiğimin farkındayım aramızda :D

Bu bilgilendirici ve yararlı bulduysan ve bunun bir pazarlamacı olarak bazı sorularını yanıtlamaya yardımcı olduğunu düşünüyorsan, kendi web sitelerinde Heatmap türlerini aktif hale getirmenin tam sırası. Süreç boyunca aklına takılan yerleri yorumda sorabilirsin. Ben ve arkadaşlarım bu konu da sana yardımcı olacağız.

Başka pazarlamacı arkadaşlarının da bu rehberden yardım almasını istiyorsan paylaşmayı unutma.

O zaman şimdilik benden bu kadar. 😉

Bu yazıyı beğendiyseniz bunu arkadaşlarınızla Facebook, Twitter ve LinkedIn profilinizde paylaşabilir, bize destek olabilirsiniz!

Push Notification Nedir? başlıklı makalemizi de okumanızı öneririm.

Bu yazı yardımcı oldu mu?
EvetHayır

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Kapalı