Bir Açılış Sayfası Isı Haritasını Kullanmadan Önce Bilmeniz Gereken Her Şey

Cormac Kinney'in yazılımı, Wall Street tüccarlarının borsada oynamasına yardımcı olacak bir araç olarak başladı. Finansal verileri, tüccarlara renk kullanarak ne zaman alıp satacaklarını gösteren “ısı haritaları ” adı verilen “ kırmızı ve mavi karelerden oluşan parlak mozaiklere” dönüştürdü.

Yirmi yıldan uzun bir süre sonra, ısı haritalarından ve sağladıkları içgörülerden yararlananlar sadece tüccarlar değil. Pazarlamacılar (ve şimdi Instapage müşterileri) de bunları kullanıyor. Ve bunu yaparak, potansiyel müşterilerin web sayfalarında nasıl davrandığını tam olarak öğreniyorlar.

Isı haritası nedir?

Isı haritası, ziyaretçilerin renk kodlu bir sistem kullanarak bir web sayfasıyla nasıl etkileşime girdiğini gösteren bir veri görselleştirmesidir. Örneğin, tüm zamanların belki de en iyi bilinen ısı haritasına bir göz atın (en azından dijital pazarlamacılar tarafından), bu da insanların web'de F-şekilli bir düzende okuduklarını gösterir:

Haritanın kırmızı ve sarı kısımları, yüksek oranda görüntülenen bir alanı gösterir. Mavi, ziyaretçilerin en az baktığı yerdir.

Bu özel veriler, Nielsen Norman Group tarafından, bir web sayfasında metinle karşılaştıklarında ziyaretçilerin bakışlarını izleyen 2006 göz izleme çalışmasından toplanmıştır. Ancak bunun gibi testler, web'de dolaştığını göreceğiniz testler değil.

Göz izleme ısı haritaları ile fare izleme ısı haritaları karşılaştırması

Göz izleme deneylerinden elde edilen ısı haritaları en doğru olanlardır, ancak aynı zamanda üretilmesi en maliyetli ve zahmetli olanlardır. Yukarıdaki Nielsen Norman'daki gibi çalışmalar genellikle kontrollü bir ortamda (laboratuar, kurum içi) bir araştırma ekibi veya ziyaretçilerinizin web sayfanızla etkileşime girerken gözlerini gözlemleyen pahalı bir donanım ile gerçekleşir. Bunların çalıştırılması birkaç bin dolardan fazlaya mal olabilir.

Tüm bir araştırmacı ekibini işe almak çoğu işletme için söz konusu olmadığı için, birçoğu bunun yerine fare izleme yazılımına yöneliyor. Gerçek göz hareketlerini izlemenin aksine, fare izleme yazılımı tıklama, kaydırma ve gezinme gibi ziyaretçi fare hareketlerini izler.

Bu yöntem, resmi bir laboratuvar ortamı veya bir işletmenin bütçesinin büyük bir bölümünü gerektirmediğinden, çok daha kolay erişilebilir. Bugün, fare izleme yazılımı yükleyebilir ve ziyaretçilerin davranışlarını hemen izlemeye başlayabilirsiniz - ve bazı araştırmalar, neredeyse resmi göz izleme çalışmaları kadar doğru olduğunu gösteriyor.

Soldaki ısı haritası resmi bir göz izleme çalışmasından, sağdaki ise fare izleme ile oluşturulmuştur. ClickTale'e göre, her iki tekniğin aynı anda uygulandığı deneyler, sonuçları arasında %84-88'lik bir korelasyon olduğunu göstermiştir.

Temel olarak, bazı durumlarda, insanların farelerini hareket ettirdikleri ve baktıklarının çakışma eğilimi vardır (daha sonraları).

Mevcut farklı fare izleme ısı haritaları türleri

İnsanlar bir "ısı haritasından" bahsettiğinde, kullanıcı davranışını gösteren bir görselleştirmeye atıfta bulunurlar. Ancak, bu kullanıcı davranışı her zaman aynı değildir. Bazı ısı haritaları insanların nasıl gezindiğini gösterirken, diğer türler insanların bir ekranda fareleriyle nereye geldiklerini belirleyebilir. Fare izleme ısı haritalarının başlıca türleri aşağıdaki gibidir:

Isı haritalarını tıklayın

Tıklama haritaları, bir ziyaretçinin web sayfanızda nereye tıkladığını gösterir. Popüler bağlantıları veya ziyaretçilerin bağlantı olduğunu düşünebileceği ancak bağlantı olmadığını düşündüğü alanları keşfetmek için özellikle değerlidirler.

Örneğin, bir sayfada en çok tıklanan öğelerin ürünün fotoğrafları olduğunu ortaya çıkaran bu haritayı ele alalım:

Brothers Leather Supply Company'nin kurucusu Adam Kail, konu ürün sayfası tasarımına geldiğinde bu haritanın işletmenin odağını nasıl değiştirdiğini açıklıyor:

Isı haritaları, tüm ürün sayfalarımızda harika görüntülere olan ihtiyacımızı güçlendirdi. Eskiden doğru kopyanın kölesiydik - ama şimdi görüntüleri doğru şekilde elde etmek için zaman harcıyoruz. Her resim, çantalarımız için farklı bir kullanım veya açı gösteriyor... Gelecekteki müşteriler, biri çantayı giydiğinde, içinde dizüstü bilgisayar varken çantanın nasıl göründüğünü bilmek istiyor.

Sonuç olarak, ısı haritası analizinin amacı budur - kullanıcı deneyimini optimize etmek için kullanabileceğiniz gerçek hayattaki ziyaretçi davranışını keşfetmek. Örneklemek için, bir cep telefonu tıklama sonrası açılış sayfasından gelen başka bir tıklama haritasına bakalım:

Kırmızı çerçeveli, en çok tıklanan telefonun ekranın çok altında, daha az popüler olan birkaç modelin altında yer aldığını fark edeceksiniz. Peki, kullanıcı deneyimini geliştirmek için bu haritayı nasıl kullanabilirsiniz?

Ekranın üst kısmındaki daha az popüler olan modellerden birini kırmızı ile belirtilen modelle değiştirin. Bu şekilde, insanlar onu bulmak için avlanmak zorunda kalmazlar.

Belki de tıklama sonrası açılış sayfası tasarımıyla en alakalı ısı haritası, VWO'nun bir müşteri olan Çift (şimdi Çift) üzerindeki bir vaka çalışmasından gelir.

İşte uygulamanın orijinal ana sayfası:

Ve işte o ana sayfanın tıklama ısı haritası şöyle görünüyordu:

Pair'in büyüme pazarlamacısı Lim Cheng Soon'un bu ısı haritasında ne yaptığını fark ettiniz mi? Diyor:

Görünüşe göre, çok fazla kişinin dönüşüm düğmesini tıklamak yerine en üstteki gezinme çubuğuna tıkladığını öğrendim (AppStore ve Google Play'e bağlantı). Bu yüzden, dönüştürme düğmesinin etrafında çok fazla "dikkat dağıtan şey" olmasının pek iyi bir fikir olmadığına dair bir teori oluşturdum.

Bu yüzden, dönüştürme düğmesinin etrafındaki "dikkat dağıtıcı unsurları" ortadan kaldırma teorisine dayanan birkaç A/B testi yapıyorum.

Sonuçlar?

• Düğmenin üzerindeki "ücretsiz indir" metnini gizlemek, dönüşüm oranını %10 artırdı.
• Gezinme menüsünün gizlenmesi, dönüşüm oranını %12 artırdı

Yakında'nın “çok fazla dikkat dağıtıcı” teorisi hiç uydurulmaz. Diğer birkaç testin gösterdiği gibi, gezinme bağlantıları dönüşüm oranını önemli ölçüde azaltabilir. Tıklama sonrası açılış sayfanızda, bunları tasarımınızın dışında tutmak en iyisidir.

Yukarıdakiler gibi tıklama haritaları, tıklama sinyalleri nedeniyle özellikle değerlidir - eylemin rastgele olmaktan çok amaçlı olması muhtemeldir. Birisi tıkladığında, belirli bir öğe veya buna karşılık gelen içerik (bir CTA düğmesi, “hakkımızda” bağlantısı vb.) hakkında daha fazla bilgi edinmek istedikleri için bunu yaparlar.

Isı haritalarını kaydırın

Slate tarafından 2013'te yayınlanan bir makalenin başlığı "Bu makaleyi bitirmeyeceksin" idi. İçinde yazar Farhad Manjoo, Chartbeat ve çevrimiçi dergi arasındaki ortak bir ısı haritası analizinden elde edilen bulguları ortaya koydu ve bu, çok az kişinin hepsini okuduğunu gösterdi. makalelerden geçen yol.

Etkileşimin %86,2'lik etkileyici bir oranı ekranın alt kısmında gerçekleşmiş olsa da, insanların yalnızca %25'i 1600 piksel sayısını geçmiştir (çoğu Slate makalesi yaklaşık 2.000 piksel uzunluğundadır). Bunun gibi öngörüler, özellikle daha uzun sayfalarda, kaydırma haritalarının ortaya çıkarılmasına yardımcı olur.

Tıklama sonrası açılış sayfası terimlerinde, bu büyük olasılıkla bir satış sayfasıdır. Ustalıkla hazırlanmış bu ikna edici pazarlama teminatları devasa boyutlara ulaşabilir. Örneğin bu, 5.000 kelimeden uzun (tam sayfa için buraya tıklayın):

Bunun gibi bir sayfadaki bir kaydırma haritası, yaratıcılarına insanların okuma sürecinde nereye gittiklerini söyleyebilir. Peep Laja, bu verilerle, içerik oluşturucuların, başarısız kopya, rahatsız edici reklamlar ve hatta arka plan rengindeki bir değişiklik gibi bırakma nedenlerini varsayabilirler:

Güçlü çizgileriniz veya renk değişiklikleriniz varsa (örneğin beyaz arka plan turuncuya dönerse), bunlara 'mantıksal uçlar' denir - genellikle insanlar aşağıdakilerin artık öncekiyle bağlantılı olmadığını düşünürler.

Oradan, optimize ediciler, insanların tüm sayfayı okumasını sağlamanın potansiyel yollarını test edebilir - ki bir Nielsen Norman Group deneyinin kesinlikle mümkün olduğunu gösteriyor:

Nadirdir ama mümkündür.

Unutmayın, yukarıdaki harita yalnızca kaydırma derinliğini değil, göz hareketlerini gösterir. Bu, yalnızca ziyaretçilerinizin sayfada ne kadar ilerlediğini gösterecek olan kaydırmalı bir haritada göreceğinizden daha ayrıntılı olduğu anlamına gelir. İşte RJMetrics'in web sitesinde yapılan bir testten bir örnek:

Bu web sayfasında renge göre en çok görüntülenen alanlar şunlardır:

• Beyaz
• kırmızı
• Sarı
• Yeşil
• Mavi

Ne düşündüğünüzü biliyoruz: Bir sayfanın en üst kısmı nasıl ortasından daha az görüntülenebilir?

Pekala, Chartbeat'ten yapılan araştırmalar, birçok insanın bir sayfa yüklenmeden önce kaydırmaya başlama eğiliminde olduğunu gösteriyor, bu da en tepeyi kaçıracakları anlamına geliyor.

Araştırmaları ayrıca, etkileşimin birçok sayfada ekranın hemen altında zirve yaptığını gösteriyor:

Ve bu, kıvrımın yanındaki alanın neden kırmızı olduğunu ve üstündeki alanın çoğunun sarı olduğunu açıklayabilir.

Bu haritadan, RJMetrics'te eski bir ön uç geliştirici olan Stephanie Liu, aşağıdaki hipotezi ortaya çıkardı:

Benim hipotezim, düğmeyi beyaz sıcak kaydırma harita alanına taşımanın, tasarımın orijinal fiyatlandırma sayfasına kıyasla daha yüksek bir dönüşüm oranına sahip olmasına neden olacağıydı. Daha fazla insan, gözleri daha uzun süre orada kalacağı için düğmeye dikkat ederdi.

Orijinal sayfa şöyle görünüyordu:

Yarattığı varyasyon şuna benziyordu:

Sonuç, dönüşümlerde %310'luk bir artış oldu.

Bu kaydırma haritası testinden iki önemli çıkarım şunlardır:

1. Bir kaydırma haritasıyla, insanların neden oldukları kadar ileri gittiklerini bilemezsiniz . Bunu anlamak için siz ve ekibiniz bazı hipotez testleri yapmak zorunda kalacaksınız.

2. Bazen insanların neden bıraktıklarını bilmek zorunda değilsiniz. Amaç her zaman insanların daha derine inmesini sağlamak değildir. Stephanie'nin durumunda, CTA düğmesini daha çok görüntülenen bir alana taşımak, RJMetrics için büyük bir dönüşüm artışı sağladı.

Hover ısı haritaları (aka hareket ısı haritaları)

Gözleriniz, fare imlecinizin hareket ettiği yerde hareket eder - bu, "hareket" ısı haritaları olarak da bilinen vurgulu ısı haritalarının temel alındığı genel varsayımdır.

Bu haritaların doğruluğu, daha önce atıfta bulunulan çalışmanın gösterdiği gibi, göz hareketi ile fare hareketi arasındaki korelasyona dayanır ve bunun %84-88 civarında olabileceğini gösterir. Diğer kaynaklar, yine de, o kadar yüksek olduğuna ikna olmadı.

2010 yılında, Google'dan Dr. Anne Aula, fareyle üzerine gelme ısı haritalarının doğruluğuna ilişkin bulgularını yayınladı:

• İnsanların %6'sı fare hareketi ile göz hareketi arasında dikey bir ilişki olduğunu gösterdi.
• İnsanların %19'u fare hareketi ile göz hareketi arasında yatay bir ilişki olduğunu gösterdi.
• İnsanların %10'u, etrafındaki alanlara bakarken fareyle belirli bir sayfa öğesinin üzerine geldi.

Google ve Carnegie Mellon tarafından yapılan başka bir deney, fare hareketi ile göz hareketi arasında %64'lük bir korelasyon buldu.

Söylemeye gerek yok, hareket ısı haritaları üzerine araştırmalar her yerde. Peki ya gerçek hayattaki uygulamalar?

Eh, bu da her yerde var.

North Face'in ödeme sayfasını optimize etmek için kullandığı vurgulu ısı haritası:

Sol tarafta, Versiyon A, sağ kenar çubuğundaki bir banner'ın, altındaki CTA düğmesinden (beyaz daire içine alınmış) daha fazla dikkat çektiğini gösteriyor gibi görünüyor. Sürüm B bunu dikkate alır ve başlığı düğmeyle değiştirir (yine beyaz daire içine alınmış).

Sonuç, dönüşüm oranında %62'lik bir artış oldu.

İşte size şunu gösteriyor gibi görünen başka bir vurgulu harita… Şey… Kendiniz görün:

Bu haritadan net bir paket servis yok gibi görünüyor. Çok fazla gezinme var. Her yer.

Genel olarak, vurgulu ısı haritası araştırmasından ve pratik uygulamalarından çıkarılması gereken en önemli şey şudur:

Tasarımınızı bilgilendirmek için vurgulu haritaları kullanın, ancak EyeQuant'tan Rory Gallagher'ın sözleriyle “fazla genelleme yapmayın”.

Haritanız North Face tarafından üretilene benziyorsa, A/B testi için aşağıdaki gibi değerli bir hipoteziniz olabilir:

"Bir vurgulu ısı haritasından, ödeme sayfası CTA düğmesinin üstündeki alanın daha fazla ziyaretçi ilgisini çektiğini fark ettik. Bu nedenle, üzerinde promosyon banner'ı bulunan düğmeyi değiştirerek ödemeleri artırabileceğimize inanıyoruz."

Bununla birlikte, ikinci ısı haritasından bir test hipotezi geliştirirseniz, muhtemelen onaylama yanlılığından suçlusunuzdur - bir testten belirli bir sonuç arıyorsunuz, çünkü bir şeye olan inancınızı doğrulamaktadır. Yanlış bilgilendirilmiş bir streç şöyle görünebilir:

“Vurgulu ısı haritasından 'Nasıl Yapılır' kelimelerinin ekranın üst kısmındaki her şeyden daha fazla dikkat çektiğini fark ettik. Bu nedenle, gelecekte okuyucuları çekmek için tüm blog yazısı başlıklarının 'Nasıl Yapılır' ile başlaması gerektiğine inanıyoruz.”

“Nasıl Yapılır” bir başlığa başlamanın harika bir yoludur, ancak bu test bunu göstermiyor. Isı haritası sonuçlarınıza şüpheci bir zihniyetle yaklaşın ve yalnızca net bir nedeniniz olduğunda test edin.

Isı haritalarını sorumlu bir şekilde kullanmak

Isı haritaları, insanların web sayfanızı nasıl kullandığını ortaya çıkarmak için değerlidir, ancak bunu yapmak için kullandığınız tek araç olmamalıdır . Tek başlarına, kullanıcılarınızın eksik bir resmini çizerler ve potansiyel davranışınızın tek göstergesi olarak onlara güvenmek sizi yanıltma potansiyeline sahiptir. Optimizely ekibi bir örnek sunuyor:

Bir formun ısı haritasına bakarken, kullanıcıların ilk alana tıkladığını ve sonraki alanlara daha az tıklama olduğunu gösterebilir.

Bu, kullanıcıların ilk alanı doldurduktan sonra süreçten ayrıldığını gösterebilir. Bununla birlikte, ısı haritalarının göstermediği şey, kullanıcıların form alanları arasında gezinmek için fareleri yerine klavyelerini kullanıp kullanmadıklarıdır.

Bunun gibi nedenlerle, ısı haritalarınızı Google Analytics veya Instapage Analytics gibi diğer araçlardan alınan bilgilerle birleştirmek, tıklama sonrası açılış sayfanızda potansiyel müşterilerinizin nasıl davrandığına dair daha eksiksiz bir görüntü oluşturacaktır.

Ancak, bu "daha dolgun görüntü" herhangi bir şeye değecek mi? Yeterince kullanıcı verisi toplamazsanız olmaz, diyor Peep Laja:

Herhangi bir sonuca güvenmeden önce sayfa/ekran başına yeterli örnek boyutuna ihtiyacınız var. Kaba bir basketbol sahası, tasarım ekranı başına 2000-3000 sayfa görüntüleme olacaktır. Isı haritası 34 kullanıcı gibiyse hiçbirine güvenmeyin.

Günün sonunda, ısı haritalarının veri olmadığını hatırlamak önemlidir; verileri kolayca sindirilebilir bir şekilde düzenlerler . Tıklamaları, kaydırmaları ve gezinmeleri gösterirler. Bu fare hareketlerinin ne anlama geldiğini belirlemek size kalmış.

Müşteri edinme başına maliyetinizi düşürmek için tüm reklamlarınızı her zaman kişiselleştirilmiş tıklama sonrası açılış sayfalarına bağlayın. Bugün bir Instapage Enterprise demosuna kaydolarak özel tıklama sonrası sayfalarınızı oluşturmaya başlayın.