HeatMap

O heat map, neboli teplotní mapě, jste už určitě slyšeli. Je to skvělý nástroj pro optimalizaci webových stránek. Pomocí teplotní škály zjistíte, kam návštěvníci webové stránky klikají, kde se pohybují kurzorem a kam až scrollují. Na základě toho pak můžete upravit webové stránky tak, aby byly pro návštěvníky poutavější.

Pokud je vaším cílem vyplnění formuláře na webové stránce, tak pomocí teplotní mapy můžete odhalit i několik problémů spojených s jeho vyplňováním.

Jak lze podle barev předpokládat, tak červená barva znázorňuje největší koncentraci zájmu a modrá barva minimální zájem.

Když se na optimalizaci podíváme trochu konkrétněji, tak podle červené barvy zjistíte, v jaké části webu návštěvníci nejvíce interagují, pak víte, kam nejlépe umístit informace o nabízeném produktu, nebo produkt samotný. Když naopak teplotní mapa odhalí, že návštěvníci klikají na prvky, které odvádějí jejich pozornost od hlavního sdělení, tak můžete tyto prvky odstranit.

Také snadno zjistíte, zda je akční tlačítko na webu dostatečně viditelné a návštěvníci na něj skutečně klikají. Pokud ne a převažuje na něm spíš zelená až modrá barva, tak je potřeba ho zvýraznit, přesunout na jiné místo, nebo upravit i celkové pozadí stránky.

Je také dost možné, že na webu máte více produktů/služeb, na které se návštěvnici v případě zájmu dále proklikávají. Pomocí teplotní mapy lehce zjistíte, které produkty/služby to jsou.

K zobrazení teplotní mapy webové stránky existuje několik nástrojů. My tu uvádíme ty, o kterých jsme již slyšeli, nebo je využíváme:

CrazyEgg

Jednoduchý nástroj se základními funkcemi vhodný pro menší weby. Nástroj je placený a můžete si vybrat mezi různými verzemi od základní (omezení pro 10 000 návštěv měsíčně) po nejdražší (omezení pro 250 000 návštěv měsíčně).

https://www.crazyegg.com/

Contentsquare

Contentsquare, dříve známý jako ClickTale, je dalším spíše jednodušším nástroj v moderním designu. Vidíte zde kam návštěvníci na stránce procentuálně nejčastěji klikají. Zažádat si můžete i o demo verzi s omezenými funkcemi.

https://contentsquare.com/

VWO

VWO je poměrně intuitivní nástroj, který zaznamenává údaje o návštěvnících a o stavu vašeho webu.

https://contentsquare.com/

Hotjar

Asi nejpoužívanější nástroj, který často využívají i weby velkých značek. Přihlásit se můžete přes Google účet a zdarma vyzkoušet.

https://www.hotjar.com/product/heatmaps/

HeatMap a bannery

Dále se budeme bavit o teplotních mapách v souvislosti s bannery. I zde nástroj slouží k optimalizaci a pomáhá grafikům a designérům zjistit, jaké objekty na bannerech nejlépe fungují.

V článku Jak na bannery II, jste se dočetli, proč je důležité mít na banneru akční tlačítko = CTA, odkaz najdete zde. Teplotní mapa vám pak pomůže zjistit, jestli je CTA dostatečně viditelné, jestli nezapadá v textech či obrázcích, nebo zda se na banneru nacházejí prvky, které odvádějí divákovu pozornost od hlavní informace a je potřeba je odstranit.

K tomu je skvělé využít i A/B testování, kdy pomocí teplotní mapy zjistíte, jestli testovaný prvek lépe vychází na banneru A nebo B. Konkrétně o A/B testování se u nás na blogu dozvíte zase později. 😊

Věděli jste že…?

Teplotní mapy nemusejí sloužit ale jen k lepšímu vzhledu bannerů. Využívat je můžete i k vaší ochraně. Teplotní mapy dokážou odhalit i to, jestli na bannery klikají skuteční uživatelé, nebo jen roboti. Roboti totiž často klikají na stejné místo. 😊

Co se týče sledování teplotních map u bannerů, tak u nás to jde například v systému Adform. (Co je Adform si můžete přečíst zde.) Tento systém konkrétně zaznamenává akce na banneru v podobě kliknutí. Lehce tak zjistíte, jaké komponenty přitahují/ruší pozornost uživatele a na základě toho snáze vytvoříte efektivnější bannery pro vaši kampaň.

Níže uvádíme pár příkladů Banner Heat Map z Adformu:

V Adformu se dají teplotní mapy zobrazit nejen u statických bannerů, ale i u video bannerů:

Snad jsme vám dnešním článkem trošku rozšířili vědomosti ohledně teplotních map a třeba se už ve vás probouzí myšlenka, že si také zkusíte svůj web otestovat pomocí některého z výše uvedených systémů.

Pokud budete potřebovat další pomoc s bannery, tak nás neváhejte kontaktovat a na základě vašich dotazů napíšeme další článek, abyste se ve světě online neztratili. 😊