A felhasználói élmény javítása – Milyen szerepe van az F-olvasásnak az online marketingben?

Olvasási idő: 8 perc
Share Button

Ha túl vagyunk weboldalunk beélesítésén, és már potenciális érdeklődőt is sikerült rá odacsábítanunk, már csak azt kell elérnünk, hogy ott is maradjon; hogy elolvassa a tartalmainkat és megtalálja a kulcsfontosságú területeket – vagyis (jó esetben) megnyomja a Rendelés gombot. Honnan tudjuk, hogy mit fog észrevenni a látogató? Hova helyezzük el az oldalon azt a bizonyos gombot, és vajon az odavezető úton milyen elrendezésben vezessék őt el a legfontosabb tartalmak? Egyáltalán mi köze van az F-olvasásnak az online marketinghez? Miért fontos látni az AARRR tölcsér aktivitás szakaszában, hogy mit végez a látogató a weboldalon? Miért kell hőtérképes elemzés alapján optimalizálnunk? Cikkünkben ezen kérdésekre kerestük a választ.

 

 

Hogy olvasnak a weben a felhasználók?

Hogyan hasznosítható ez a tudás?

Egy korábbi cikkünkben már írtunk arról, hogyan érdemes elhelyezni és megjeleníteni a szöveges tartalmakat, hogy azokat a lehető legtovább olvassák látogatóink.

Arról is írtunk már, hogy milyen képekkel lehet manapság a leghatásosabban felkelteni a figyelmet. Eheti cikkünk azon célból született,  HOVA érdemes elhelyeznünk a szöveges, képes területeket és a Call-to-action gombokat ahhoz, hogy lehető legpozitívabb hatást érjék el, mindezt persze az F-olvasás segítégével.

Jelen cikk célja, hogy többek között:

  • bemutassuk a design betűket, illetve a a  Nielsen kutatást,
  • rávilágítsunk, hogy miért pont így olvasunk,
  • tippeken és gyakorlati tanácsokon keresztül segítséget nyújthassunk, mire kell ügyelnünk egy weboldal tervezésnél, illetve hogyan s mi módon érdemes hasznosítani ezt a tudást.

 

Design betűk

 

Talán elsőre furcsának tűnhet, de bizony a design területén vannak, úgynevezett  fontos betűk (ilyen például az F, Z, C vagy a fordított L), melyek most a cikk témáját tekintve főleg alakzati szempontból lesznek érdekesek.

Ugyanis, az átlagos (azaz az olvasott oldal tartalma iránt nem kiemelten érdeklődő) olvasó ilyen ‘betű alakzatokban’ futja át az eléje kerülő szöveget. Bár a többi olvasási alakzatnak is vannak érdekességei, jelenleg a leginkább támogatott formát, az F-alakot bontjuk ki cikkünkben.

Honnan tudjuk, hogy mit és hogyan néz meg a látogató?

Jakob Nielsen (a webdesign és webergonómia szakértője) még 2006-ban végzett egy kutatást, melyben összesen 232 kísérleti személy szemmozgását figyelték meg (hőtérképeken megjelenítve a figyelmesebben átnézett területeket), miközben több ezer weboldalt néztek át,

A következő tapasztalatokat szűrték le:

  • A domináns olvasási minta egy F betűhöz hasonlít.
  • A néző először horizontális szemmozgással nézi át a képernyő felső részét. Ez alkotja az F-alak felső, vízszintes szárát.
  • Visszatérve a képernyő bal szélére a szem lejjebb mozdul, és megkeresi a következő hangsúlyosabb, feltűnőbb területet, ahol ismételten egy horizontális mozgást végez, de ez már jóval rövidebb időtartamú, mint az első volt. Ez alkotja az F-alak második, rövidebb vízszintes szárát.
  • Újfent visszatérve a képernyő bal szélére, a szem elkezd lefele mozogni, és az olvasó érdeklődésétől és olvasási stílusától függően vagy lassabban (de egyenletesen) mozog lefele, vagy gyorsabban (apró ugrásokkal és kihagyásokkal) halad az oldal alja felé. Ez a rész alkotja az F-alak függőleges szárát.

 

felhasznaloi_elmeny_javitasa_f_olvasas_bongeszes

 

Természetesen ez csak egy sematizált leírás, melyet befolyásol: 

  • a honlap kinézete (hány érdekes különálló egységből áll a tartalom, amelyeken a lefele pásztázó szem „megakad” és tesz egy balról jobbra irányúló mozdulatot),
  • a látogató érdeklődése a tartalom iránt (amennyiben érdekes tartalomra talált, akár a honlap közepénél is, abbahagyhatja a pásztázást és részletesen megvizsgálhatja az őt érdeklő szöveget, illetve képet.

Ilyenkor a hőtérkép inkább E betűt formáz. Ha azomban a kevésbé érdekes oldalaknál akár csak egyszer is elmozdul a szem a bal szélről, akkor ezen esetben egy fejre fordított L-formát láthatunk a majd a hőtérképen.

Amennyiben hőtérképes elemzést szeretnék csinálni, a következő szoftverek használata ajánlott:

  • Hotjar,
  • Mouseflow,
  • CrazyEgg stb.

Illetve, ha optimalizáláshoz használható A/B tesztelő szoftverek.

  • Google Analytics
  • Optimizely
  • KISSmetrics
  • Crazy Egg stb.

 

Miért így olvasunk?

 

A nyugati kultúrákban iskolás kortól fogva az a legtermészetesebb számunkra, hogy balról jobbra haladva keresünk egy lapon, könyvoldalon vagy kijelzőn. (Mindez természetesen pusztán a balról jobbra olvasó nyelvek használóira vonatkozik.) Szemünk és gondolkozásunk hozzá van szokva, hogy soronként, fésű alakzatban olvassunk. Az F-alakzat mindössze ennek a kitágított (azaz nem mindegyik sort elolvasó) formája. A pásztázó szem ismerős/érdekes/hangsúlyos elemeket keres, azokon végighalad, majd az érdeklődés erősségének megfelelő távolságban keresi a következő sort. Ha nagyon keresünk valamit (pl. egy bizonyos nevet a címlistában), akár soronként haladunk végig. Ha csak közepesen érdeklődünk, vagy nem vagyunk biztosak benne, hogy egyáltalán jó helyen járunk-e, a fésű fogai közötti távolságok megnőnek, az F-alak elnyújtott lesz.

 

Hogyan hasznosítható ez a tudás egy honlap tervezésekor?

 

A felhasználók legtöbbször (főleg, ha keresnek valamit), a klasszikus könyvolvasáshoz viszonyítva nem olvasnak az oldalakon, hanem pusztán végigfutják, „szkennelik” a szövegblokkokat, olyan kulcskifejezéseket, képelemeket keresve, melyekből leszűrhetik: érdemes-e alaposabban átnézni az oldalt. Mindössze 16%-uk olvassa el betűről-betűre a honlapokat, a többiek éppen csak átfutják az ott írottakat (az alcímeket, a kiemeléseket, a vastag betűket és a képeket). Ha nem találják meg a keresett információt, mennek is tovább egy olyan oldalra, ahol szerencsével járnak.”

Ez azt jelenti, hogy ha nem jó helyen van elhelyezve az a mező (pl. gomb), mely felé látogatót szeretnénk terelni, könnyen előfordulhat, hogy nem veszik észre, átfut rajta a szemük, vagy nem is jut el arra a területre, mert nem az F-alakzat mentén található.

f-olvasas-hoterkep

A kép forrása: https://www.nngroup.com/articles/accordions-complex-content/

 

Hogy miért fontos ez?

Nos, főleg az aktivitási szakasz miatt.

Ugyanis hiába szerzünk több látogatót, ha nem leszünk őket képesek ‘megfogni’, s így aktivitásra bíztatni (legyen az leaddé válás, felriatkozás hírlevélre, vagy vásárlás), akkor egy fabatkát sem ér a dolog

 

Hogy megkönnyítsük a tervezést, felsorolunk néhány fontos szempontot, melyet nem árt majd figyelembe venni:

  • A látogató először az oldal tetején elhelyezkedő márkajelzést és menüsort fogja elsőként észre venni
  • A tartalmi típusok (szöveg/kép/videó) közül – a videók után – a képek (fotók, ábrák) keltik a legnagyobb figyelmet
  • A következő terület, amit leginkább áttanulmányozunk, a főcím lesz a tartalom tetején
  • Magát a tartalmi szöveget már csak átfutja a látogató; csupán szkenneli és nem pedig olvassa azt.

 

Gyakorlati tanácsok a felhasználó élmény javításához a hőtérképes elemzés alapján

 

A következőkben felsorolunk néhány hasznos tippet, melyet mindenkinek érdemes megfogadnia, akik webshoppal, bloggal stb. rendelkeznek.

 

  • A cég fő üzenetét minél feljebb, közel a logóhoz helyezzük el, hogy beleférjen az F legfelső szárába, vagy minimum a második szárba.
  • A tartalmat tagoljuk jól észrevehető részekre, látványosan kiemelt alcímekkel, hogy minél több kisebb oldal-pásztára kényszerítsük a látogatót és ezáltal növeljük a feldolgozott információk mennyiségét.
  • Növeli az érzékelt adatmennyiséget, ha két oszlopra bontjuk az oldalt, és a másodlagos tartalmakat egy második oszlopba helyezzük át (pl. hírportálok, blogok oldalsó oszlopa a korábbi cikkek és egyéb listák megjelenítésével).
  • A Call-to-action területek és gombok az F-alak vízszintes szárai elejénél vagy végénél legyenek. Minél fontosabb egy hirdetés, vagy egy gomb, annál fentebb lévő, vízszintes F szárban kell, hogy elhelyezkedjen.
  • Ha az oldal túl hosszú, és a tartalmi egységek repetitív megjelenése miatt félő, hogy a látogató elunja még a szkennelést is (pl. webshop túl sok sornyi termékmegjelenítést tartalmaz), érdemes egy-egy csíknyi, egyéb tartalommal meghökkenteni a szemet és megállásra késztetni a látogatót. Ilyen lehet egy banner, egy másképp megjelenített, kiemelt termék, vagy akár csak egy statikus képelem. Egy ilyen meglepő terület felfrissítheti a látogató érdeklődését, akár elölről kezdheti az F-alakban való pásztázást. Nem jó túl sűrűn alkalmazni, de akár 1000pixelenként az oldalon görgetve előjöhetnek ilyen megszakítások.
  • Induljunk ki abból, hogy a látogató nem fogja elolvasni az oldalon található szövegeket, kivéve, amelyek az F száraiban találhatóak. Ezért a főcímek, legkiemeltebb szövegek (pl. termék neve) és a legfontosabb Call-to-action felületek kell tartalmazzák mindazt a minimális információt, mely ahhoz kell, hogy oldalunk elérje célját. Minden egyéb szövegre tekintsünk úgy, mintha csak a ‘robotoknak’ írnánk, és az már csak bónusz, ha élő ember is elolvassa.
  • Nem csupán a címsorok betűméretével és a képek méretével kell odavonzzuk a tekintetet, hanem azok érdekességével is ott kell tudnuk azt tartani. Hiába dolgozunk nagyméretű szalagcímmel, ha a tartalma tökéletesen érdektelen.

 

f-olvasas-mintazat

A kép forrása: http://webdesign.tutsplus.com/articles/understanding-the-f-layout-in-web-design–webdesign-687

 

Konklúzió

 

Vajon jó, vagy éppen rossz dolog, hogy a látogatók F-alakban (vagy bármely más betű alakjában) olvassák a tartalmakat? Talán kevésbé pozitív amiatt, hogy így sok tartalmat talán sosem fognak elolvasni. Viszont jó dolog annyiból, hogy így most már tudni fogjuk, hogyan olvas egy átlagos látogató, mivel szkennelő módban fogja átfutni oldalunkat.

Hogy mindez sikerüljön, csak a jól bevált receptet kell követnünk:

  • tervezés (a fontos tartalmak kiemelése),
  • kivitelés (az előbbiek megfelelő helyekre való pozicionálása),
  • folyamatos A/B tesztelés ( hogy meggyőződjkünk affelől, vajon helyes volt-e az elképzelés, vagy esetleg szükséges-e még javítani az elrendezésen és megjelenítésen),

Ha mindez megvan, olvasóink is megtalálják majd az általuk keresett információt (mégha pusztán csak néhány százaléknyit olvasnak majd el a weboldalon fellelhető tartalomból), ráadásul nem fognak további állni, hogy más honlapokat böngészgessenek.

 


Ha szeretnél jobban elmélyedni a felhasználói élmény és a honlaptervezés rejtelmeiben, akkor ne habozz és vedd igénybe Arculattervezés szolgáltatásunkat! >>


 

Tetszett a cikk? Akkor oszd meg, hogy másokhoz is eljusson az üzenet!

Ha van véleményed a cikkel kapcsolatban, írd le azt a lent található kommentekben!

 

Felhasznált források:

http://webdesign.tutsplus.com/articles/understanding-the-z-layout-in-web-design–webdesign-28

https://www.nngroup.com/articles/

https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

http://www.sikermarketing.hu/honlaptervezesi_hibak_webergonomia

http://webdesign.tutsplus.com/articles/understanding-the-f-layout-in-web-design–webdesign-687

Share Button

Hozzászólások