Veriye Dayalı Ürün Yönetimi İçin 8 Isı Haritası Örneği

Discover how to lead product teams and build better products. Create a Free Account

En öne çıkan 8 ısı haritası türünü inceleyelim, nasıl çalıştıklarını anlayalım ve kullanıcı davranışlarını analiz etmek için bunları nasıl kullanabileceğinizi görelim.

Heatmap examples for data driven product management standard editorial post

İyi bir ürün yöneticisinin muhtemelen en önemli özelliği, kullanıcılarla empati kurabilme yeteneğidir. Bu beceriyi geliştirmek için ürün yöneticileri, kullanıcı görüşmelerinde ve kullanıcı davranışlarının arkasındaki verileri inceleyerek saatler geçirir.

Ancak kullanıcı sezginizi keskinleştirmenin başka bir yolu daha var: kullanıcıların ürününüzle nasıl etkileşim kurduğunu ısı haritaları aracılığıyla analiz etmek.

Isı haritaları, kullanıcı yolculuğu boyunca sürtüşmeyi, niyeti ve fırsatları ortaya çıkarmaya yardımcı olan birçok kullanıcı araştırması aracından yalnızca biridir. Ayrıca ürün analitiği kapsamına girer ve gösteriş metriklerinin ötesine geçerek kullanıcıların gerçekte ne yaptığını görmenize yardımcı olur.

Buraya geldiyseniz, muhtemelen ısı haritalarının faydalarını zaten merak ediyorsunuzdur veya yatırımı haklı çıkarmak için gerçek hayattan örnekler arıyorsunuzdur.

Her iki durumda da doğru yerdesiniz. Farklı ısı haritası türlerini ve bunları ürün hedeflerinize ulaşmak için nasıl kullanabileceğinizi inceleyelim.

#1: Tıklama Haritaları ve Dokunma Haritaları

Hepsinin en popüler olanıyla, yani tıklama haritasıyla (masaüstü kullanıcı arayüzleri için) veya dokunma haritasıyla (mobil kullanıcı arayüzleri için) başlayalım.

Tıklama haritaları, kullanıcılarınızın kullanıcı arayüzünüzdeki öğelere tıklama biçiminin görsel bir temsilidir. Basitçe, kullanıcı arayüzünüzün bazı bölümleri farklı renklerle vurgulanmış bir ekran görüntüsüdür.

Isı haritası aracınız kullanıcı arayüzünüzdeki belirli bir öğeyi vurguluyorsa bu, bir kullanıcının (veya birçok kullanıcının) o öğeye tıkladığı anlamına gelir. Renk ise söz konusu öğenin aldığı tıklama sayısını gösterir.

Isı haritası araçları genellikle sıcaklık ölçeğindeki renkleri kullanır.

renk sıcaklığı ölçeği

Çok sayıda tıklama alan bölgeler için bu renk geçişindeki daha sıcak renkleri, ilgi görmeyen bölgeler içinse daha soğuk renk vurgularını görürsünüz.

Finanslarınızı yönetmenizi sağlayan bir mobil uygulama için dokunma haritasının veri görselleştirmesi şu şekildedir.

bir mobil uygulama için dokunma haritası görselleştirmesi
Kaynak: Smartlook

Her işlemde harcanan tutarı belirten alanların kırmızıyla vurgulandığını görebiliriz. Bu, birçok kişinin bu alanlara tıkladığı anlamına gelir (muhtemelen işlemi genişletip ayrıntıları görmek için).

Öte yandan üst kısımdaki hesap bakiyesi yeşille vurgulanmıştır; bu da çok az kişinin bu alana tıkladığını gösterir.

Tıklama Haritası Nasıl Kullanılır?

Tıklama haritaları, eyleme geçirilebilir içgörüler açısından oldukça zengindir. Kullanıcılarınızın tıkladığı alanlara bakarak davranışları hakkında öğrenebileceğiniz çok şey vardır.

Örneğin, kullanıcıların barınağınızı maddi olarak desteklemesine olanak tanıyan bir bağış sayfasına sahip bir köpek barınağı uygulamasını yönetiyorsanız, hangi bağış seçeneğinin en iyi performansı gösterdiğini görmek için tıklama haritasını kullanabilirsiniz.

mobil cihazdaki tıklama haritası
Kaynak: Smartlook

Yukarıdaki dokunma haritasını inceleyerek bağış tutarını seçerken 10 $ ve “Diğer” seçeneklerinin açık ara en popüler tercihler olduğunu söyleyebiliriz.

Buradan elde ettiğimiz önemli bir içgörü, listede yer almayan bir bağış tutarının (ör. 1 $) olma ihtimalinin yüksek olması ve insanların bu tutarı girmek için “Diğer” seçeneğine tıklamasıdır.

Bu nedenle, insanların “Diğer” bölümüne ne girdiklerini incelemek, en popüler olanları bulmak ve bunları listemize eklemek muhtemelen iyi bir fikirdir.

#2: Kaydırma Haritaları

Adından da anlaşılacağı gibi bu tür ısı haritası, kullanıcılarınızın kaydırma davranışını analiz etmenizi sağlar.

Kaydırma haritaları da sıcaklık ölçeği kullanılarak renklerle kodlanır. Ancak insanların tıkladığı arayüz noktalarını vurgulamak yerine, o noktaya kadar kaydırma yapan ve ilgili bölümü gören kişi sayısına göre sayfanızdaki bölümlerin tamamını vurgular.

Diğer ısı haritalarında olduğu gibi, çok sayıda kişi bir bölümü kaydırarak görürse sıcak renk vurguları, bunu yapan kişi sayısı azsa soğuk renk vurguları elde edersiniz.

Get Free Access to the Product Vault
We’ve collected the goods — AI prompts, exclusive deals, and a library of resources for product leaders. Unlock your account for access.
Get Free Access

Have an account? Log In

Kaydırma Haritası Nasıl Kullanılır?

Kaydırma haritaları, sayfanızdaki belirli öğelerin veya bölümlerin konumunu optimize etmek ve bu bölümlerle ilgili kullanım/etkileşim sorunlarını gidermek için harikadır.

Nelio adlı bir SaaS hizmetinin fiyatlandırma sayfasındaki kaydırma haritasını inceleyerek tipik bir sorun giderme durumunu ele alalım.

Nelio'dan kaydırma haritası
Kaynak: Nelio

Rekabet gücüyle ilgili sorun yaşadığınızı düşünün. İnsanlar bir nedenden dolayı rakiplerinize kaydolmayı tercih ediyor. Onlara nedenini sorduğunuzda, diğer araçta çok hedefli izleme özelliği olduğunu, sizde ise bu özelliğin bulunmadığını söylüyorlar.

Aslında sorun şu: Bu özellik sizde mevcut, dolayısıyla insanların bu özellikle karşılaşmamasının nedenini anlamanız gerekiyor.

Fiyatlandırma sayfanızın kaydırma haritasına baktığınızda, kullanıcılarınızın büyük çoğunluğunun sayfayı hiç kaydırmadığını görüyorsunuz. Ardından, çok hedefli izleme özelliğinizin açıklamasının ekranın alt kısmında ve mavi bölgede olduğunu fark ediyorsunuz. Bu, kullanıcılarınızın yalnızca küçük bir bölümünün kaydırma yapıp bu özelliği okuduğu anlamına gelir; bu durum çoğu kullanıcı davranışı için geçerli olabilir.

Sorun belirlendi! Şimdi bunu çözmek için, “Tüm Planlara Dahil” bölümünüzdeki özellikleri fiyatlandırma planı listelerinize ek öğeler olarak eklemeyi düşünebilirsiniz; bunların ekranın üst kısmında görünmesini ve insanların kaydırma yapmadan onları görmesini sağlayın.

#3: Üzerine Gelme Isı Haritaları

Hareket haritası olarak da bilinen bu ısı haritası türü, farenin konumunu izleyerek kullanıcılarınızın bir arayüzdeki “hareket” davranışını görselleştirmenizi sağlar.

Çoğu durumda, üzerine gelme ısı haritalarını kullanırken kullanıcıların büyük olasılıkla imleçlerinin üzerinde bulunduğu öğeye bakacağını varsayarız. Bu nedenle fare hareketini izleyerek bunu, kullanıcıların arayüzümüzde gezinirken neye baktıklarını izlemekle ilişkilendiririz.

Görsel olarak bu harita, kullanıcınızın fare imlecinin en uzun süre bulunduğu kullanıcı arayüzü bölümlerinde vurgulanmış noktalardan oluşur (yine sıcaklık renk şeması kullanılır). Bunun yanı sıra bazı ısı haritası araçları, kullanıcılarınızın genellikle nereden başladığını ve arayüzünüzde nasıl ilerlediğini gösteren bir “iz” de sunar.

Bu izlerin görünümü şöyledir.

Üzerine gelme ısı haritası örneği
Kaynak: Staticflickr

Bu, muhtemelen dünyanın en iyi kullanıcı deneyimine sahip arayüzlerinden biri olan Apple’ın web sitesinin fare izleme ısı haritasıdır (sonuçta tarihteki ilk kullanıcı deneyimi tasarımcılarına ev sahipliği yapıyorlar). Bu izler, insanların MacOS Snow Leopard açılış sayfasını keşfetmeye önce büyüleyici kedinin kendisini inceleyerek, ardından başlığı okuyup açılış sayfasındaki diğer öğelere ilerleyerek başladığını gösteriyor.

Üzerine Gelme Haritası Nasıl Kullanılır?

Hareket haritasını kullanabileceğiniz ilginç yöntemlerden biri, kullanıcıların dikkatini dağıtan unsurları belirlemektir.

Örneğin Amazon arama sonuçları sayfasını optimize etmekten sorumluysanız (amacınız, kullanıcıların Amazon’un kendileri için bulduğu bir ürüne tıklamasını sağlamaktır), üzerine gelme ısı haritasına bakabilir ve kullanıcıların çoğunluğunun arama sonuçlarını incelemeye devam etmeden önce banner’larınızdan birine (örneğin bir duyuruya) baktığını görebilirsiniz.

Bu, kullanıcılarınız için büyük bir dikkat dağıtıcıdır ve arama sonuçlarına tıklama olasılıklarını azaltabilir. Bu nedenle banner’ı kaldırabilir veya arayüzünüzde görsel olarak daha az öne çıkmasını sağlayabilirsiniz.

#4: Dikkat Isı Haritaları

Şimdiye kadar kullanıcılarınızı tıklamalar, fare hareketleri ve sayfa kaydırma üzerinden görsel olarak analiz etmenizi sağlayan üç analiz aracından söz ettik.

Yukarıdakilerin her biri bize değerli bilgiler sağlayabilse de yalnızca birine güvenmek yanıltıcı olabilir. Kullanıcı davranışına uygun bağlam olmadan tek başına bakmak, gerçekte neler olup bittiğine dair yeterince geniş bir bakış sunmayabilir.

Bu nedenle ürün ekipleri genellikle bu türlerin tümünü aynı anda kullanır ve analiz edip sonuçlara varmadan önce üçünün tamamından elde edilen içgörüleri birleştirir. Ancak bu çözüm de kusursuz değildir; eksiksiz analizi yapmak için muhtemelen 3 kat daha fazla zaman harcamanız gerekir.

Neyse ki yapay zekâ modellerinin ve gelişmiş algoritmaların ortaya çıkmasıyla birlikte modern ısı haritası görselleştirme araçları, kullanıcı tıklamalarından, fareyle üzerine gelme etkileşimlerinden ve kaydırmalardan elde edilen bilgileri tek bir ısı haritasında birleştirebilir.

Bu dördüncü tür, dikkat ısı haritası olarak adlandırılır; çünkü esas olarak kullanıcı arayüzünün hangi bölümlerinin kullanıcılarınızdan en fazla ilgiyi gördüğünü söyler. Görsel olarak tıklama haritasına çok benzer; kullanıcı ilgisinin miktarına göre kullanıcı arayüzünüzdeki belirli öğeler sıcaklık renk paletindeki farklı renklerle vurgulanır.

#5: Coğrafi Isı Haritaları

Isı haritaları, insanlar bu tekniği kullanıcı arayüzlerine uygulamaya başlamadan çok daha önce de hayatımızdaydı. Geleneksel ısı haritası türlerinin en öne çıkanlarından biri coğrafi haritadır.

Bu durumda, seçtiğiniz veri noktası türüne göre haritanın belirli bölümlerini vurgularsınız. Örneğin, Fransa'daki turistik konumların coğrafi dağılımını analiz etmek istiyorsanız bu coğrafi ısı haritasını kullanabilirsiniz.

coğrafi ısı haritası
Kaynak: Fransa Cumhuriyeti Ekolojik Geçiş Bakanlığı

Yukarıdaki haritada, kilometrekare başına düşen otel yataklarının (çoğunlukla turistleri hedefleyen) sayısı gösterilmektedir. Gördüğümüz gibi Korsika, Fransız Alpleri ve Côte D’Azure bu kategoride açık ara öne çıkan bölgelerdir.

Coğrafi Isı Haritası Nasıl Kullanılır?

Fransa'nın turizm veri kümelerine bakmak ilginç, ancak bu ısı haritaları dijital ürünümü analiz etmeme yardımcı olabilir mi? Size bir örnek göstereyim.

Turizm (ve Fransa) konusuyla devam edelim ve çevrim içi kısa süreli kiralama hizmeti işlettiğinizi (Airbnb'ye benzer bir şey) varsayalım. Hizmetinizi kullanarak daha fazla kişinin otel rezervasyonu yapmasını sağlamak amacıyla Fransa şehirlerindeki yerel festivaller için tanıtım materyalleri hazırlayıp dağıtma fikriniz var.

Aklınıza gelecek ilk soru şudur: Hangi şehir/festival ile başlamalısınız?

Bu sorunun yanıtını bulmak için hizmetinizi kullanan kiralık ev ve dairelerin dağılımını gösteren bir coğrafi ısı haritası oluşturabilirsiniz.

Kaynak: InsideBnB

Haritaya baktığınızda, hizmetinizin Fransa'nın güneyinde oldukça popüler olduğunu göreceksiniz. Bu nedenle Provence ve Côte D’Azur festivallerini tanıtarak başlamayı düşünebilirsiniz.

#6: Öfke Tıklaması Haritaları

Bu, tıklama haritalarının bir alt türüdür ve yalnızca kullanıcılarınızın öfkeyle bir şeye tıkladığı durumları filtreleyip gösterir. Isı haritası araçları, kullanıcı aynı öğeye arka arkaya birden çok kez tıklamaya devam ederse bunu genellikle öfke tıklaması (veya işlevsiz tıklama) olarak tanımlar.

Öfke Tıklaması Haritası Nasıl Kullanılır?

Öfke tıklaması haritaları, sorunlu kullanıcı deneyimlerini belirlemek için harika araçlardır. Tıklanabilir gibi görünen ancak aslında tıklanamayan, sezgisel olmayan veya yalnızca çalışmayan bir düğme olabilir.

Örneğin, Iterate sayfalarından birinde öfke tıklaması veri analizi yapacak olsaydık en az iki noktada kesinlikle öfke tıklamaları görürdük; işte nedeni:

Mavi renkle vurgulanan iki metin öğesini fark ettiniz mi? Tahmin edin ne oldu: Bunlar bağlantı değil. Bunlar yalnızca mavi renkte gösterilen sıradan metinler. Ben de dahil olmak üzere birçok Iterate ziyaretçisi, başka bir sayfaya yönlendirilmesini bekleyerek bu metin öğelerine tıklamayı denedi.

Elbette, bunlara tıkladıktan sonra hiçbir şey olmayacak ve bu durum kullanıcının hayal kırıklığına uğrayıp "öfkeyle tıklamaya" başlamasına yol açabilir.

Bu sayfanın öfke tıklaması haritasını inceleyerek çıkarılacak ders, örneğin metninizin köprü bağlantılarına benzemediğinden emin olmanız gerektiğidir. Farklı renklerle bir A/B testi yaparak mavi metnin öfke tıklamalarına neden olduğu varsayımınızın doğru mu yanlış mı olduğunu görebilirsiniz.

#7: Göz İzleme Isı Haritaları

Şimdiye kadar, kullanıcılarımızın web sayfamıza göz atarken nereye baktığını anlamak için üzerine gelme haritalarını kullandık. Kullanıcıların gözlerinin çoğu zaman imlece baktığını varsayıyoruz. Bu nedenle arayüzünüzdeki imleç hareketleri, kullanıcılarınızın gözlerini neye odakladığını size gösterebilir.

Bu, dikkati analiz etmenin yaygın bir yoludur. Ancak kullanıcılar her zaman imleçlerine bakmayacağı için sağladığı ısı haritası verileri kusursuz değildir.

Kullanıcılarınızın neye baktığına ilişkin kesin konum ve sayısal veriler elde etmek istiyorsanız bunun yerine bir göz izleme ısı haritası kullanmayı düşünebilirsiniz.

Diğerlerinden farklı olarak göz izleme ısı haritaları, kullanıcılarınızın göz hareketlerini takip edecek ve baktıkları öğelerin konumunu belirleyecek özel ekipmanlar takmasını gerektirir.

Bu, kullanıcılarınızı özel test oturumlarına davet etmeniz, bu takip cihazlarını takmalarını sağlamanız ve ürününüzü kullanmaya başlamalarını istemeniz gerekeceği anlamına gelir. Çok daha fazla zaman ve maliyet gerektirse de elde ettiğiniz verilerin kalitesi, diğer web sitesi ısı haritası türlerinden elde edebileceğiniz her şeyden çok daha üstündür.

Göz Takibi Isı Haritası Nasıl Kullanılır?

Göz takibi test oturumları düzenlemenin maliyetini göz önünde bulundurduğunuzda, göz takibini muhtemelen yalnızca yüksek etkili kullanıcı deneyimi optimizasyonu alanlarında kullanacaksınız.

Göz takibi çalışmaları, ürünlerinin kullanılabilirliğinde %1'lik bir iyileşmenin on milyonlarca gelir ve yatırım getirisi sağlayabildiği büyük teknoloji şirketlerinin ürünlerinde oldukça yaygındır.

Amazon bir göz takibi çalışması yapıp öne çıkan ürün banner'larını dönüşüm oranını %1 artıracak şekilde yerleştirirse ne kadar ek ARR elde edeceğini bir düşünün.

#8: [Bonus] Konfeti Haritaları

Konfeti ısı haritaları, kullanıcıların tıkladığı genel alanı vurgulamak yerine tek tek tıklamaları gösteren sıradan tıklama haritalarının bir alt türüdür.

Tek tek tıklamaları analiz etmenin avantajı, bunları çeşitli karmaşık veri noktalarına göre filtreleyebilmenizdir.

konfeti haritaları
Kaynak: CrazyEgg

Burada, örneğin, Arama eylem çağrısı üzerindeki tıklamaları, tıklama etkinliğinin gerçekleştiği haftanın gününe göre gruplandırdık.

Verilere dayanarak salı günlerinin en fazla tıklamayı aldığını, pazartesi günü ziyaret eden kişilerin ise en çok dikkat dağılan kişiler olduğunu görebiliriz (arayüzün her yerinde çok sayıda tıklama var).

Konfeti Isı Haritası Nasıl Kullanılır?

Konfeti ısı haritaları, kullanıcı davranışını ayrıntılı bir düzeyde analiz etmeniz gerektiğinde özellikle kullanışlıdır. Toplu verileri gösteren geleneksel ısı haritalarının aksine konfeti haritaları, tek tek tıklamaları cihaz türü, yönlendirme kaynağı ve hatta günün saati gibi parametrelere göre filtrelemenize olanak tanır.

Bu tür ısı haritaları, aksi takdirde fark edilmeyecek kalıpları yakalamak için harikadır. Örneğin ödeme düğmeniz cuma günleri daha fazla, ancak pazartesi günleri çok daha az tıklama alıyorsa kullanıcılarınız maaş gününe göre hareket eden dürtüsel alıcılar olabilir; pazartesi kitleniz ise dönüşüm gerçekleştirmek yerine hafta sonunun etkisinden hâlâ kurtulmaya çalışarak fiyatlandırma sayfanıza boş boş bakıyor olabilir.

Konfeti haritaları beklenmedik dikkat dağıtıcı unsurları da ortaya çıkarabilir. Kullanıcılar istediğiniz yere tıklamak yerine sayfanın her yerine tıklıyorsa kafaları karışmış olabilir ya da yalnızca bir yaşam belirtisi bulmak için çaresizce uğraşıyor olabilirler. Gezinme menünüz eylem çağrınızdan daha fazla tıklama alıyorsa bu, kullanıcıların kaybolduğu ve etkileşim kurmak yerine kaçış yolu bulmayı umduğu anlamına gelebilir. Özellikle sürtüşme noktalarını belirlerken kullanıcı yolculuğu haritanızı iyileştirmek için ısı haritalarından elde edilen içgörüleri kullanabilirsiniz. Kullanıcı segmentine göre filtreleme yapmak, hangi grupların en çok zorlandığını ve deneyimi nerelerde daha sorunsuz hâle getirmeniz gerektiğini görmenize yardımcı olabilir.

Isı Haritaları Kullanıcılarınızı Anlama Yetinizi Güçlendirir

Burada birlikte keşfettiğimiz her ısı haritası türü, kullanıcılarınızın ürünlerinizi nasıl keşfettiğine ve kullandığına dair size bir fikir verebilir. Yalın bir şekilde çalışıyorsanız ısı haritaları, daha kapsamlı kullanılabilirlik testlerine yatırım yapmadan önce kullanıcı deneyimi araştırması yürütmek için hızlı ve pratik bir yol sunar. Bunların yardımıyla kullanıcılarınızın yaşadığı zorlukları görebilir ve hissedebilir, ardından bunları düzeltmeye yönelik ilerleyebilirsiniz.

Ürün analitiği araçlarıyla birlikte kullanıldığında ısı haritaları, kullanıcıların ürününüzle nasıl etkileşim kurduğuna ve nerelerde ayrıldığına dair daha net bir tablo sunabilir. Örneğin ısı haritalarını oturum kayıt araçlarıyla eşleştirmek, kullanıcı davranışının hem “ne” olduğunu hem de “neden”ini görmenizi sağlar.

Isı haritaları harikadır, ancak empati kurmak için kullanabileceğiniz birçok araçtan yalnızca biridir. Diğerleri hakkında daha fazla bilgi edinmek için bültenimize kaydolduğunuzdan emin olun.

Suren Karapetyan
Suren Karapetyan, MBA, is a principal product manager focused on AI-driven SaaS products. He thrives in the fast-paced world of early stage startups and finds the product-market fit for them. His portfolio is quite diverse, ranging from background noise cancellation tools for work-from-home folks to customs clearance software for government agencies.
Follow the author: