Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2019-02-200 komment

Mi az a hőtérkép? Mire használható? És hogyan értelmezd?

Tartalomjegyzék
Bővített tartalomjegyzék

Miközben egy blogbejegyzés címéről például sokat elmond az, hogy mekkora forgalom érkezik rá, egy ilyen adat azt már nem mutatja meg, hogy mit tesznek a látogatók a weboldalon, milyen utakat járnak be és mi köti le a figyelmüket. Egy hőtérkép viszont jó megoldást kínál erre. (Frissítés, 2020.05.15. – Mire használhatod a hőtérképet a weboldaladon?)

Az adatvizualizációs eszközök világossá teszik, hogy egy weboldalnak mely része kelti fel leginkább a felhasználók figyelmét, és melyik az, amelyre rá sem hederítenek. Egy weboldal működéséről és hatékonyságáról sokat elárulnak az úgynevezett hőtérképek, melyekhez nem kell felhasználói teszteket végezni, mindössze egy szoftverre van szükség, mely vizsgálja és ábrázolja a látogatók tevékenységét a weboldalon. Az adatok alapján pedig levonhatók a következtetések arra vonatkozóan, hogy hol kellene optimalizálni a szöveget vagy a vizuális designt.

Mi az a hőtérkép?

A hőtérkép a weboldalon mutatott felhasználói aktivitás vizuális megjelenítése. A hőtérképek különböző színeket használnak annak érdekében, hogy megfelelően prezentálják a felhasználó számára, hogy a weboldal mely részei keltik fel leginkább a felhasználók figyelmét, és melyek nem: a pirossal jelzett, “forró” részek kötik le a látogatók figyelmét, míg a kék színű, “hideg” területekkel nem foglalkoznak.

Hőtérképből többféle létezik, ezáltal pontosabban mérhető a tartalom figyelemfelkeltő képessége, hiszen különböző adatok nyerhetők ki általuk. Alapvetően háromféle hőtérképről beszélhetünk: görgetési térkép, kattintási térkép és hover térkép.

Görgetési hőtérkép

A görgetési hőtérkép azt mutatja meg, hogy a látogatók hány százaléka görgetett le a weboldal egy bizonyos részéhez. Minél melegebb színnel van ábrázolva egy rész, annál több látogató pillantott rá. Az adatok tehát megmutatják, hogy hová érdemes elhelyezni egy call to actiont (CTA) vagy más fontos információkat. A színekben történő változás jelzi azt, hogy hol veszítik el az érdeklődésüket a látogatók.

Görgetési hőtérkép

Kattintási hőtérkép

A kattintási hőtérkép azt mutatja meg, hogy a weboldalon hova kattintanak a látogatók. Ezeknél is az jelenik meg, hogy minél melegebb színnel jelzett egy rész, annál többet kattintottak rá az emberek. Az adatok tehát elsősorban azt mutatják meg, hogy a felhasználók foglalkoznak-e azokkal a CTA vagy egyéb gombokkal, melyek egy eltervezett cselekvést visznek tovább. Azt is megmutatják, hogy akadnak-e olyan nem kattintható elemek, melyek eltérítik őket, azaz kattintanak rájuk annak ellenére, hogy nem kattinthatók. Ez komoly hibát jelent a webdesignt tekintve.

Hover hőtérkép

A hover hőtérképek azt jelzik, hogy merre jár a látogatók egérmutatója, miközben olvasnak a weboldalon. Minél melegebb színnel van jelölve egy terület, annál hosszabb ideig időzik azon a felhasználó kurzora. Az adat segít meghatározni azt, hogy a látogatók miként navigálnak a weboldalon. Ennek fényében pedig a fontos elemek olyan helyre helyezhetők, amelyre egyébként a legnagyobb figyelem irányul. Az is megállapítható, hogy melyek azok a felesleges elemek, melyek elvonják a látogatók figyelmét a fontos elemekről.

Hover hőtérkép

Milyen típusú oldalaknál használhatod a hőtérképeket?

Nyilván az ideális az lenne, ha a weboldalad valamennyi oldalán használnál hőtérképeket, ez azonban nem igazán hatékony megoldás: sok idő megy el vele feleslegesen. Elegendő az, ha azon oldalaidat vizsgálod csak hőtérképek használatával, melyek a konverziók szempontjából a legfontosabbak: ilyen például a főoldalad, a céloldalaid (landing page-ek), és a konverziókat hozó blogbejegyzések. Emellett azonban bármely más oldalad is lehet az elemzés tárgya, akár egy “rólunk oldal”, akár egy kapcsolati oldal és űrlap. Nézzük ezeket részletesen!

Főoldal

A főoldalad az, amely első körben bemutatja a cégedet, sokan érkeznek erre az oldalra például egy márkakeresésre vagy egyéb, a weben elhelyezett linkekről. Ha folyamatosan elemzed, melyik részeken görgetnek át a felhasználók, a kulcsfontosságú információk fölé mozgatják-e az egeret és hogy kattintanak-e az itt elhelyezz CTA-ra, akkor pontosan látni fogod, hogy

  • hova helyezd a legfontosabb elemeket,
  • miként csökkentsd a visszafordulási arányt és
  • hogyan növeld a konverziók számát.

Céloldalak

A céloldalak jelentik az utolsó lépést abban a folyamatban, amikor a látogatók leadekké vagy megrendelőkké válnak. Ha elemzed ezeket az oldalakat hőtérképek segítségével, akkor kialakíthatod a tökéletes, neked megfelelő céloldal-designt, mely a lehető legtöbb vevőt hozza a céged számára.

Jól konvertáló blogposztok

Egy-egy CTA elhelyezése a blogposztjaidban szintén meghatározza a konverziós arányt. Ezek a CTA-k elhelyezhető a szövegben vagy a poszt végén egy külön hirdetésben. Általában a szöveg elején, a hajtás felett elhelyezett CTA-k teljesítenek jobban, érdemes lehet azonban a pontos elhelyezkedésüket hőtérképek (és A/B tesztek) segítségével optimalizálni.

Tehát akár a weboldalad designjának A/B tesztjeinél használod a hőtérképeket, akár csak megpróbálod meghatározni a segítségével, hogy mi lenne a megfelelő helye egy CTA-nak valamely oldaladon, sokat segítenek egy hatékonyabb weboldal kialakításában. A legjobb eszközt jelentik arra, hogy mérd a felhasználói figyelem alakulását, és segít kialakítani egy olyan weboldal-tartalmat, melynek révén konverziókat hozó kapcsolatot hozhatsz létre a látogatókkal.

Mire használhatod a hőtérképet a weboldaladon?

Megtalálhatod vele azt a CTA-t, ami hatékony

A CTA szinte minden weboldal legfontosabb része. Ez az a pont, ahol a felhasználók konvertálnak, és megrendelik a terméked vagy szolgáltatásod. Ezért nagyon sok múlik a CTA megtervezésén: a megfelelő szóválasztáson, vizuális designon.

Egy CTA hatását vizsgálhatod hőtérkép segítségével is, hiszen megmutatja, hogy mennyire hívja fel magára a figyelmet, jó helyen található-e az oldalon. Ha valami elvonja róla a figyelmet, akkor az az elem módosítható, ha rossz utat járnak be a felhasználók, akkor változtatni kell az elemeken, melyek a figyelmük irányításában játszanak szerepet. Végül pedig maga a CTA gomb is hangsúlyosabbá tehető, a weboldal más pontjára helyezhető. A hőtérkép pedig megmutatja, hogy javult-e vagy romlott a helyzet.

Megmutatja a görgetési távolságot

Az átlagos weboldal-felhasználó ritkán görget le egy weboldal aljáig. Ezért is olyan fontos, hogy mi kerül a hajtás fölé. Ha érdekli egy weboldal, akkor görget, ha nem, akkor otthagyja úgy, hogy csak a hajtás feletti részt látta. Ugyanakkor a hajtás ma már minden eszközön egy kicsit máshová kerül.

Egy görgetési térképpel jó képet kaphatsz arról, hogy egyes eszközökön hol is van a hajtás, meddig görgetnek le a felhasználók, ez pedig jelzi, hogy hová kellene elhelyezned a legfontosabb információkat és a CTA-d. Így biztosíthatod, hogy ezeket valóban minden látogató lássa.

Észreveheted a félrekattintásokat

A kattintható elemek minden weboldalon egy kicsit máshogy néznek ki. Amikor az emberek olyan elemekre kattintanak a weboldaladon, melyek nem csinálnak semmit, mert nem kattinthatóak, akkor az problémát jelent webdesign szempontból.

Egy hőtérkép segíthet abban, hogy megtaláld a hibás kattintásokat és javítsd az érintett elemeket. Kicserélheted őket releváns elemekre, vagy megváltoztathatod, illetve eltávolíthatod a zavart okozó elemeket.

Mi az az F-minta a hőtérképen? És hogyan használhatod ki?

Az F-mintával azt a mozgást írhatjuk le, melyet a felhasználók tekintete bejár, amikor megérkeznek egy weboldalra, és rátekintenek a tartalomra. Az emberek sokszor ezen minta alapján olvassák a tartalmakat a weben, amire érdemes odafigyelni, ha weboldalad van.

A felhasználók tekintete egy weboldalon másodpercek alatt bejárja az F-formát, és fogadja be, illetve futja át ezen minta alapján a tartalmát. Az F-minta létezésére még több mint 10 évvel ezelőtt az NNGroup egy kutatása hívta fel a figyelmet. Ebben több mint 200 felhasználó szemmozgását figyelték több ezer weboldal meglátogatása során. Az F-forma azonban most is érvényes, hiszen legújabb kutatásaik is ugyanezt a mintát tárták fel.

Mint megfigyelték, az emberek olvasási viselkedése nagyjából azonos volt a különféle weboldalakon vagy éppen feladatok végrehajtása során. És a leginkább az F-formára hasonlított. Három fontos tényező rajzolódott ki a kutatás alapján:

  • Az emberek először vízszintes irányban járatták végig a tekintetüket a tartalom felső részén. Ez tehát az F felső vonala.
  • Ezután a bal oldalon haladtak egy kicsit lefelé, a bekezdések elején számukra érdekes kezdő mondatok után kutatva. Ha találtak valami fontosat, akkor ismét függőlegesen mozdult el a tekintetük, de már rövidebben, mint a korábbi horizontális mozgásnál.
  • Végül tovább mozdult a tekintetük függőlegesen lefelé, majd befejezték a weboldal tanulmányozását.

Ez így néz ki ábrázolva:

F-forma a webdesignban

És így mutat hőtérképen:

hoterkep

Természetesen a felhasználók tekintete nem mindig ezt az utat járja be. Hiszen például, ha már az oldal elején találnak valami számukra hasznos információt, akkor normál olvasásra váltanak, azaz vízszintes vonalak rajzolódnak ki a hőtérképen.

Az F-minta nem az egyetlen lehetőség

A F-forma mellett tehát több más olvasási minta is felfedezhető. Az egyik ilyen, amikor csak a címsort és az alcímeket olvassák el az emberek. Előfordul azonban olyan is, amikor nagy szövegrészeket ugrik át a tekintetük, mert valami specifikus dolgot keresnek, például egy linket, egy bizonyos szót, vagy szavak egy csoportját, mint például egy cím.

Mobiloknál az is gyakran előfordul, hogy a tekintet egy pontra mered, miközben a hüvelykujj folyamatosan görget. Ez olyan, mint amikor a balett táncosok egy pontra figyelnek, hogy megtartsák az egyensúlyt, ne szédüljenek el.

Azzal is lehet találkozni, hogy az emberek szándékosan átugorják a sorok első szavait, amikor például egy listában a sorok ugyanazzal a szóval kezdődnek. Végül pedig az is előfordul, hogy mindenre figyelnek, mindent elolvasnak a felhasználók a weboldalon. Jellemzően akkor, ha nagyon fontos és érdekes számukra a tartalom. Erre a viselkedésre azonban nem érdemes túl gyakran számítani, a legtöbb felhasználó csak átfutja az oldalt.

Miért F-formában tekintik át a tartalmat az emberek?

A felhasználók részéről alapvetően az F-mintára lehet számítani, akkor, ha

  • egy oldal vagy egy weboldal-rész olyan szöveget tartalmaz, ami nem a webre van alakítva. Tehát, ha van egy jelentős mennyiségű szöveged, de abban nincsenek kiemelések, felsorolások, alcímek.
  • Amikor az emberek hatékonyak akarnak lenni az adott oldalon.
  • Amikor nem érdekli annyira őket a tartalom, hogy annak minden szavát elolvassák.

Az utolsó két pont arra mutat rá, hogy miként használják az emberek a webet. A többségük arra törekszik, hogy minél előtt befejezze a feladatát a lehető legkevesebb erőfeszítést megtéve. Azért látogatják meg az oldalt, mert gyors válaszokat akarnak.

Egyébként pedig az látható, hogy ha a designerek nem tesznek meg mindent azért, hogy a felhasználókat a legfontosabb, legérdekesebb információk felé tereljék, akkor azok kialakítják maguknak a saját ösvényeiket. Ha hiányoznak a jelzések, melyek vezetik a tekintetet, akkor azt az utat fogják megtalálni, mely minimális erőfeszítést követel, és így a legtöbb időt ott fogják tölteni, ahol elkezdik az olvasást, ami legtöbbször a bal felső sarok. Az F-forma tehát akkor alapvető minta a weboldalon, amikor nincsenek erős jelzések, melyek vezetik a tekintetet a fontos információk felé. Ez jelenti az alapvető gondot az F-formával kapcsolatban.

Mi a gond az F-formával?

Ha a Te weboldaladon is vannak jelentős mennyiségben formázatlan szövegek, akkor az emberek azt az F-minta alapján fogják bejárni a szemükkel. Ilyenkor átugranak szavakat és mondatokat, gyakran a fontosakat is. Előfordul, hogy pont a fontosabb részeket ugorják át, és a lényegtelen részeket olvassák el. Erre azonban nem jönnek rá, mivel ők – veled ellentétben – nem tudják, hogy mi az, amit nem vesznek észre az oldalon.

Ráadásul egy reszponzív designnal készül oldalon a szöveg kialakítása mindig az adott ablak-mérettől függ. Ez azt jelenti, hogy a felhasználók tekintete nem ugyanazokon a szavakon állapodik meg. Így tehát nem is tudod az F-minta alapján elrendezni a legfontosabb dolgokat. Vagyis egy jó webdesign inkább mérsékelni igyekszik az F-minta hatását.

Fontos megérteni, hogy a felhasználók a költség-előny arányt az egész webet tekintve igyekeznek maximalizálni. Ha az internet egy tengerpart, akkor a Te weboldalad egy homokszem benne. Márpedig, amikor az emberek egy homokvárat akarnak építeni, akkor nem keresgélnek a legszebb homokszemek után, hanem egy vödörbe szedik a homokot. Ezt azt jelenti, hogy az emberek csekély erőfeszítést tesznek egy-egy weboldal megismerésére.

Hogyan vedd a kezedbe az irányítást?

Az F-mintát tehát figyelembe kell venned, ugyanakkor meg kell próbálnod irányítani a felhasználókat. Egy olyan designt kell kialakítanod, ahol a megfelelő fókuszpontokba kerülnek a legfontosabb dolgok, és amelyet az emberek könnyen áttekintenek. Az F-forma mentén a tartalom a legtöbb nyugati ember számára kényelmesen befogadható, hiszen fentről lefelé és balról jobbra olvasunk, ugyanakkor a lényeges elemekre külön fel kell hívnod a figyelmet a megfelelő formázással.

Azt ne felejtsd, hogy az F-forma mindig a weboldalak tartalmi részére vonatkozik, vagyis azt írja le, hogy az emberek miként kerülnek kapcsolatba egy weboldal tartalmi részével, és nem arra, hogy hogyan tanulmányozzák például a navigációs sávot, amikor el akarják dönteni, hova kattintsanak. Az F-mintát a legjobban a sok szöveget tartalmazó weboldalak, mint a blogok vagy a híroldalak tudják kihasználni. Tehát ha sok tartalom – különösen szöveg – van az oldaladon, akkor a felhasználók számára jobb, ha a természetes szemmozgásukat figyelembe véve épül fel az a tartalom.

Ehhez először meg kell határoznod a tartalom elemeinek fontossági sorrendjét. Ha ez megvan, akkor a legfontosabb dolgokat a fókuszpontokba kell helyezni, tehát olyan helyekre, melyeken biztos át fog haladni az emberek tekintete. Ilyen szempontból az első két bekezdés a leglényegesebb, azaz a legfontosabb tartalmi részt a weboldal tetejének közelébe kell helyezni, hogy gyorsan és hatékonyan kommunikálja a weboldal szándékát.

A legfontosabb következtetések, melyek levonhatók az NNG vizsgálata alapján:

  • Az első sora a szövegnek mindig több figyelmet von magára, mint az alatta lévő sorok.
  • Az első néhány szó a sorok elején mindig fontosabb, mint az utánuk következő szavak.

Az első sorból olvasnak el a legtöbbet az emberek, a további tartalmat viszont már nem elsősorban olvasásra, hanem átfutásra kell elrendezni. Vagyis minden új bekezdést valamilyen fontos kulcsszóval kell kezdeni. Az ugyanakkor fontos, hogy az F-forma soha sem tökéletes F. Akadnak olyan esetek, amikor az embereket megragadja egy-egy bekezdés az oldal alján, és így elkezdik olvasni, vagy az F-ből egyszer csak E-forma lesz.

Amire még figyelni kell, hogy a legfontosabb elemeket – amilyen például egy cselekvésre ösztönző gomb (CTA) – a jobb vagy bal oldalra helyezd el, ahol a felhasználók vagy elkezdik, vagy befejezik a vízszintes átfutását a tartalomnak. Az elején és a végén ugyanis egy pillanatra megállnak, és ez a kis extra időt érdemes kihasználni.

A lényeg, hogy el kell végezned az emberek helyett munkát a weboldaladon, hogy ne kelljen felesleges erőfeszítéseket tenniük. Alakítsd ki a fontossági sorrendet a tartalmadnál és formázd a szövegeket úgy, hogy oda vezesd a látogatókat, ahova szerinted menniük kellene! Vagyis:

  • A legfontosabb dolgok mindig jelenjenek meg az első két bekezdésben.
  • Használj címeket és alcímeket! Győződj meg arról, hogy azok fontosabbnak néznek ki és jobban észrevehetők, mint a normál szövegek.
  • A cím és az alcím mindig a legfontosabb szavakkal kezdődjön, hogy az első két szó alapján le tudják szűrni az emberek a lényeget.
  • Vizuálisan rendezd csoportokba a kapcsolódó tartalmakat! Használhatsz ehhez kereteket vagy akár eltérő háttérszíneket is.
  • Vastagítsd ki a fontos szavakat, mondatokat!
  • A linkek mindig olyan szavakból álljanak, melyek információt hordoznak, és nem csak annyit mondanak a felhasználónak, hogy “kattints ide”.
  • Használj felsorolásokat!
  • Dobd ki a felesleges tartalmakat!

Az F-forma figyelembe vétele ugyan hasznos a webdesignban, azonban nem kell mereven ragaszkodni hozzá, és minden áron követni. Figyelembe kell venned, de a legjobb, ha Te veszed a kezedbe az irányítást, és elvégzed a felhasználók helyett a munkát.

Kategória: Design | Címke: ,

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.

Comments are closed.