Isı haritaları ve oturum kayıtları, tasarım topluluğunda tartışılan en popüler konulardan biri hâline geldi. Bazı profesyoneller bunun gizlilik boyutunu sorgularken, diğerleri ısı haritalama yönteminin kullanıcı verilerini gizli ve güvende tutma açısından tamamen uygun olduğunu düşünüyor.
Ancak herkesin hemfikir olduğu bir konu var: Siz (UX tasarımcısı) bir ısı haritalama aracı kullanarak değer elde ediyorsunuz.
Bugün bu konuyu birlikte incelemek ve kullanıcı deneyimlerinizi oluşturma biçiminizi geliştirmek için ısı haritalarını nasıl kullanabileceğinizi anlamak istiyorum.
Isı Haritaları Nedir?
Isı haritaları, hedef kitlenizin ürününüzle veya web sitenizle nasıl etkileşim kurduğunu anlamak için kullanabileceğiniz veri izleme ve görselleştirme araçlarıdır.
Isı haritaları, yararlı bilgileri aktarmak için alanın belirli kısımlarını belirli renklerle vurgulayan iki boyutlu grafiklerdir. Örneğin Helsinki hükümeti kısa süre önce şehrin hangi bölgelerinin en kalabalık olduğunu gösteren gerçek zamanlı bir harita kullanıma sundu.
Belirli mahallelerdeki insan sayısını görselleştirmek için şehrin bir ısı haritasını oluşturdular.
Şehrin belirli bir bölümünde ne kadar çok insan varsa, haritada o bölüm o kadar “sıcak” vurgulanır. Hiçbir şey vurgulanmıyorsa söz konusu mahalle kalabalık değildir.
Görselleştirme araçları olarak ısı haritaları oldukça kullanışlıdır. Bu nedenle fiziksel bir haritadaki “yoğun bölgeleri” görselleştirmenin yanı sıra (yukarıdaki Helsinki örneği veya televizyonda gördüğümüz hava durumu haritaları gibi), bunları kullanıcı arayüzünüzün üzerine de yerleştirebilirsiniz.
Bu durumda arayüzünüzde en fazla kullanıcı etkileşiminin gerçekleştiği bölümleri vurgulayabilirsiniz. Ardından bunu, size şu konularda yardımcı olacak ayrıntılı bir kullanıcı yolculuğu ve UX araştırması için oturum kayıtlarıyla birleştirebilirsiniz:
- Kullanıcıların web sitenizle veya mobil uygulamanızla nasıl etkileşim kurduğuna dair değerli içgörüler elde etmek.
- Kullanıcılarınızın dikkatini daha iyi çekmek için neler yapabileceğinizi anlamak.
- UX'inizi optimize etmek ve temel metriklerinizi iyileştirmek için yeni fırsatları belirlemek (dönüşüm oranını, harekete geçirici mesaj düğmelerinizin tıklama oranını (CTR) artırmak vb.).
Bu nedenle ısı haritaları, hem UX tasarımcılarının hem de ürün yöneticilerinin kullanıcıların ürünleriyle nasıl etkileşim kurduğunu incelemesi ve ürünlerini geliştirmesi için harika araçlardır.
Popüler Isı Haritası Araçları
Şimdi ürününüz için nasıl bir ısı haritası oluşturabileceğinizi görelim. Web, kullanıcı etkileşimlerini izleyebilen ve en fazla ilgiyi gören sayfa öğelerini vurgulayabilen analiz araçlarıyla dolu.
En öne çıkanlar arasında Hotjar, Mouseflow, Fullstory, Crazy Egg ve diğerleri yer alıyor.
Ancak bu konuyu derinlemesine incelemek istemiyorum; bunun yerine göz atabileceğiniz, özel olarak hazırlanmış bir ısı haritası araçları listemiz var.
Have an account? Log In
Ürün Tasarımcıları İçin 4 Temel Isı Haritası Türü
UX'inizi analiz etmek için kullandığınız görsel bilgi türü “ısı haritası” olarak adlandırdığımız tek bir türden ibaret değildir. Bunun yerine “ısı haritası”, aynı genel ilkeye göre çalışan çeşitli görsel araçları kapsayan bir terimdir: UX'inizdeki belirli alanları farklı renklerle vurgulamak.
Ürün ve UX tasarımcıları için bunların çoğu tamamen kullanışsız olduğundan, tüm farklı ısı haritası türlerini ele almak istemiyorum. Bunun yerine tasarım ekibimin en yararlı bulduğu dört türe bakalım.
1. Tıklama Haritaları
Isı haritaları hakkında konuşulduğunda muhtemelen aklınıza gelen ilk şey tıklama haritalarıdır. Piyasadaki en popüler ısı haritası türüdür ve neredeyse tüm ısı haritası ve analiz araçlarında bulunur (Google Analytics ve etkinlik tabanlı araçlar hariç).
Tıklama haritası (diğer adıyla tıklama ısı haritası), kullanıcılarınızın arayüzünüzde (ör. web sitesi ana sayfası) neleri tıkladığını gösterir. Kitlenizin tıklama etkinliğini, ilgili alanları vurgulayarak ve UX'inizin hangi bölümlerinin “sıcak” veya “soğuk” olduğunu renk kodlamasıyla gösterir.
Hotjar'ın kariyer sayfasının tıklama haritası şöyle görünüyor.
Buradaki tıklama haritasını inceleyerek aşağıdakileri görebiliriz:
- Ana CTA'nın ("Açık Pozisyonları Görüntüle") yakınında kırmızı bir “sıcak” alan.
- Sayfadaki öne çıkan görseli değiştiren sağ ok düğmesinin çevresinde biraz “ılık” (sarı) etkinlik.
- Sol okta da biraz etkinlik (mavi) var.
Ekranın geri kalanında herhangi bir vurgulama bulunmuyor. Bu da bölgenin “soğuk” olduğunu ve hiç kimsenin bu alanlara tıklamadığını gösteriyor.
Öte yandan ana CTA üzerindeki “sıcak” vurgu, çok sayıda kullanıcının ("sıcaklık" düzeyine bakılırsa muhtemelen çoğunluğun) buna tıkladığını gösteriyor. Ardından, kullanıcıların küçük bir bölümünün öne çıkan görseller arasında da gezindiğini gösteren ok düğmelerinin çevresindeki ılık alanları görüyoruz.
Bu Tür Isı Haritaları Nasıl Kullanılır? CTA'larınızda A/B Testi!
Tıklama haritalarının çok çeşitli kullanım alanları vardır. Örneğin bunları CTA yerleşiminizin, metninizin ve benzeri unsurların ne kadar etkili olduğunu anlamak için kullanabilirsiniz. Ancak ben ve Ürün Tasarımcılarım, ısı haritalarını farklı bir nedenle kullanmayı seviyoruz: CTA'larımızı ve diğer tasarım öğelerimizi A/B testine tabi tutmak.
Bu kullanım alanını bir örnekle açıklayayım. ChatGPT web uygulamasından sorumlu olduğunuzu ve kullanıcıların yeni sohbetler oluşturmak yerine tek bir sohbet oturumunda yapay zekâyla konuşmaya devam etmesiyle ilgili bir sorun yaşadığınızı düşünün.
Isı haritasına baktıktan sonra, kenar çubuğunuzun üst kısmındaki “Yeni Sohbet” düğmesinin soğuk olduğunu (hiçbir şeyin vurgulanmadığını) görüyorsunuz.
Hızla, bunun CTA'nın kenar çubuğu arka planıyla aynı olan renginden kaynaklandığını varsayıyorsunuz. Bunun üzerine bir A/B deneyi gerçekleştiriyor; A varyantında arka plan rengini yeşil olarak değiştiriyor, B varyantında ise rengi “olduğu gibi” bırakıyorsunuz.
Belirli sayıda kullanıcı bu iki varyantla etkileşime girdikten sonra her birinin tıklama ısı haritasını açabilir ve hangisinde “Yeni Sohbet” düğmesinin daha “sıcak” olduğunu görmek için yan yana karşılaştırma yapabilirsiniz.
Daha sonra, ısı haritası analizinize göre CTA'nın daha fazla tıklama aldığı varyantı seçersiniz.
2. Kaydırma Haritaları
Kullanıcı tıklamalarını haritalamak harika bir yöntemdir, ancak bu her zaman size hikâyenin tamamını anlatmaz.
Örneğin tıklama haritanız ekranınızın bir yerinde düşük performans gösteren bir düğme olduğunu ortaya koyuyorsa bu, CTA metninizde, renginizde veya diğer unsurlarda mutlaka bir sorun olduğu anlamına gelmez. Belki CTA'nız oldukça iyidir, ancak insanlar sayfayı aşağı kaydırıp onu görmüyor olabilir.
Kaydırma haritaları (diğer adıyla kaydırma ısı haritaları) burada devreye girer. Kullanıcı arayüzünüzdeki kullanıcı tıklamalarını vurgulayan önceki türün aksine, kaydırma haritaları kullanıcıların arayüzünüzün her bölümünde geçirdiği süreyi ve kaydırma davranışlarını gösterir.
Her bölümde geçirilen süreye bağlı olarak sayfa kırmızı (çok zaman geçirilen), turuncu/sarı (orta düzeyde zaman geçirilen) ve yeşil/mavi (az zaman geçirilen) renklerle vurgulanır.
Bunu başka bir Hotjar örneğiyle göstereyim.
Yukarıda gördüğümüz görsel, Hotjar'ın “hakkımızda” sayfasının eski sürümlerinden birine ait. Bu sayfanın kaydırma ısı haritası verilerine bakarak şu sonuçlara varabiliriz:
- Kullanıcılarınızın tamamı sayfanızın üst kısmını görmüş (kırmızıyla vurgulanmış). Açıkçası, öyle değil mi?
- Ardından, yaklaşık %75'inin Hotjar kullanan markaların logolarını görmek için biraz aşağı kaydırdığını görüyoruz (logo bölümü sarı).
- Son olarak sayfanın alt kısmı yeşil; bu da kullanıcılarınızın yalnızca bir bölümünün bu kadar aşağı kaydırdığını gösteriyor. Glassdoor logosunun hemen üzerindeki çizgi, kullanıcıların yalnızca %57'sinin bu noktaya kadar kaydırdığını bize söylüyor.
Bu, üst kısmın kırmızı, orta kısmın sarı ve alt kısmın yeşil olduğu klasik bir örnekti. Ancak gerçek hayatta, ekranınızın alt bölümlerindeki belirli bir bölümün (örneğin fiyatlandırma planlarınız bölümü) iyi performans gösterdiği, kullanıcılarınızın ise üstteki ve alttaki içerikleri görmezden geldiği kaydırma haritaları görebilirsiniz.
Ürün Tasarımcıları Kaydırma Haritalarını Nasıl Kullanır: İçerik Optimizasyonu
Tıklama haritaları gibi kaydırma haritaları da çeşitli amaçlarla kullanabileceğiniz çok yönlü araçlardır. Ancak en yaygın kullanım alanları, içeriğinizin yerleşimini optimize etmektir.
Örneğin daha önce belirttiğim gibi fiyatlandırma bölümleri web sayfanızda gerçekten iyi performans gösteriyor. Bu, insanların içeriğinizin üzerinden hızla kaydırdığını, ardından fiyatlandırma bölümünüzü fark edip durduğunu, okuduğunu ve kaydırmaya devam ettiğini gösterir.
Bu davranış biçimi, fiyatlandırma bölümünü sayfamızın ortasına veya alt kısmına stratejik olarak yerleştirmemize olanak tanır. Bunu, fiyatlandırma planlarımızla ilgili bilgiyi bulmadan önce insanların sayfanın tamamını kaydırmasını (ve onlara iletmek istediğimiz önemli mesajlardan bazılarını fark etmesini) sağlamak için yaparız.
Buradaki stratejimiz, süpermarketlerin süt ürünleri ve unlu mamulleri yerleştirirken kullandığı stratejiye benzer. Her ikisi de genellikle sık sık satın aldığınız ürünlerdir. Bu nedenle onları binanın karşı tarafına yerleştirirler; böylece bu ürünlere ulaşmak için tüm süpermarketi geçmeniz gerekir.
Mantık şudur: Büyük olasılıkla reyonlardaki diğer ürünleri fark eder ve süt ürünleri bölümüne giderken bunları da satın alırsınız.
3. Hareket Haritaları
Kaydırma haritaları, kullanıcılarınızın hangi bölümlere baktığına dair size genel bir bakış sunar. Tıklama haritaları ise kullanıcının tam olarak hangi öğeye tıkladığını göstermesi bakımından biraz daha düşük seviyelidir.
Bununla birlikte, insanların sayfanızın belirli bir bölümündeki bilgiler ve kullanıcı arayüzü öğeleri arasında nasıl gezindiğini size gösterebilecek “orta düzey” bir araca ihtiyaç vardır.
Hareket haritalarından yararlanabileceğiniz nokta burasıdır. Adından da anlaşılacağı üzere bu tür ısı haritaları, fare imlecinin arayüzünüzdeki hareketlerini takip eder.
Diğer haritalarda olduğu gibi arayüzün bölümleri, maviden kırmızıya uzanan bir renk aralığıyla vurgulanır; mavi, o alan üzerinde az fare hareketi olduğunu (kırmızı ise çok fazla olduğunu) gösterir.
Bir blog makalesinde bunun nasıl göründüğüne bakalım.
Buradaki harita, kullanıcıların küçük bir bölümünün farelerini makalenin başlığı ve ilk başlığı üzerinde gezdirdiğini gösteriyor. Ancak çoğunluk, farelerini sağ üst köşedeki arama alanının yakınında tutuyor.
Ürün Tasarımcıları Hareket Haritalarını Nasıl Kullanır: Belirli Öğelere Gösterilen Dikkati Takip Etme
Kullanıcı arayüzümüzde tıklanabilir olmayan ancak yine de çok önemli bazı unsurların bulunması oldukça yaygındır ve kullanıcılarımızın bunları gördüğünden emin olmak isteriz.
Buna örnek olarak fiyatlandırma sayfasındaki özellikler listemizi verebiliriz. Kullanıcıların fiyatlandırma tablomuzu incelerken hangi özelliklere en fazla dikkat ettiğini anlamak isteyebiliriz.
Bunun için o anda okuduğumuz veya taradığımız şeylerin üzerinde fareyi gezdirme alışkanlığımızdan yararlanabilir ve kullanıcıların fiyatlandırma sayfamızda en çok hangi özelliklere baktığını gösterecek bir fare hareketi haritası oluşturabiliriz.
4. Öfke Tıklaması Haritaları
Normal tıklamalar vardır, bir de öfke tıklamaları vardır.
Bu durum, kullanıcı deneyiminizdeki kusurların kullanıcıları öfkelendirmesi ve aşağıdaki nedenlerden dolayı kullanıcı arayüzü öğelerinizden birine agresif ve art arda tıklamalarına yol açmasıyla ortaya çıkar:
- Tıklanabilir bir şey olduğunu düşünürler, ancak değildir.
- Tıklanabilirdir, ancak kullanıcı tıkladıktan sonra ürününüz hiçbir işlem gerçekleştirmez.
İlk durumun temel nedeni, düğme veya bağlantı olmayan ancak bunlara benzeyen kullanıcı arayüzü öğeleri tasarlamaktır.
İkinci duruma gelince, aşağıdaki sorunlardan biriyle karşılaşmış olabilirsiniz:
- Ürününüzün ilgili düğmenin gerçekleştirmesi gereken işlemi yapmasını engelleyen bir hata veya çökme.
- Her şey düzgün çalışıyor olabilir, ancak kullanıcı deneyimi geri bildirimi eksiktir. Kullanıcı düğmenizin yardımıyla yapmak istediği işlemi başarıyla gerçekleştirmiş olsa bile, bunu ona bildirmemişsinizdir.
- Ürününüz, kullanıcının istediği işlemi gerçekleştirmeye çalışıyordur, ancak yavaştır. Kullanıcılar ya bu durumdan rahatsızdır ya da işlemin devam ettiğini kullanıcıya bildirmemişsinizdir.
Normal tıklama haritaları öfke tıklamalarını da kaydeder (sonuçta bunlar da tıklamadır), ancak öfke tıklamalarını normal tıklamalarınızdan ayırt edemezsiniz. Verilerinizden hatalı sonuçlar çıkarırsınız.
Örneğin düğmeniz çalışmıyorsa ve insanlar ona öfkeyle tıklıyorsa, normal tıklama haritanız insanların bu özelliği aktif olarak kullandığını gösterir; oysa gerçek bunun tam tersidir.
Görsel olarak öfke tıklaması haritaları normal tıklama haritalarıyla aynıdır. Tek fark, normal tıklama haritasında çok sayıda kırmızı nokta bulunmasının iyi olması, öfke tıklaması haritasında ise kötü haber olmasıdır.
More Articles
Ürün Tasarımcıları Hareket Haritalarını Nasıl Kullanır: Kötü Kullanıcı Deneyimini Belirleme
Mükemmel bir kullanıcı deneyimine sahip bir ürün yoktur. Öyle olmadığını düşünseniz bile sonunda her zaman sorunlu öğeler veya deneyimlerle karşılaşırsınız.
Öfke tıklaması haritaları; kötü kullanıcı deneyimi geri bildirimi, kötü öğe tasarımı ve diğerleri dahil olmak üzere bu kötü deneyimlerin çeşitli türlerini belirlemenize yardımcı olma konusunda oldukça etkilidir.
Isı Haritaları, Kullanıcı Deneyimi Tasarımcılarının En İyi Dostlarıdır
Kendi deneyimime ve ürün tasarımı ekibimin deneyimine dayanarak, web sitesi ısı haritaları kullanılabilirlik testleri gerçekleştirmek ve kullanıcı davranışını incelemek için en yararlı araçlar arasındadır.
Onların yardımıyla web tasarımınızın etkililiği hakkında nicel içgörüler (masaüstü ve mobil cihazlarda nasıl kullandıkları da dahil) elde edebilirsiniz.
Daha sonra bu içgörüleri analiz edebilir ve ürününüzün, web sitenizin, e-ticaret platformunuzun veya açılış sayfanızın kullanıcı dostu olmasını sağlamak için tasarımınızda ve işlevselliğinizde doldurmanız gereken boşlukları belirleyebilirsiniz.
Daha fazla ürün yönetimi kaynağı ve rehberinin yanı sıra sektör liderlerinden ve uzmanlardan en yeni podcast'leri, röportajları ve diğer içgörüleri almak için bültenimize abone olmayı unutmayın.