Az adatvizualiz\u00e1ci\u00f3s eszk\u00f6z\u00f6k vil\u00e1goss\u00e1 teszik, hogy egy weboldalnak mely r\u00e9sze kelti fel legink\u00e1bb a felhaszn\u00e1l\u00f3k figyelm\u00e9t, \u00e9s melyik az, amelyre r\u00e1 sem heder\u00edtenek. Egy weboldal m\u0171k\u00f6d\u00e9s\u00e9r\u0151l \u00e9s hat\u00e9konys\u00e1g\u00e1r\u00f3l sokat el\u00e1rulnak az \u00fagynevezett h\u0151t\u00e9rk\u00e9pek, melyekhez nem kell felhaszn\u00e1l\u00f3i teszteket v\u00e9gezni, mind\u00f6ssze egy szoftverre van sz\u00fcks\u00e9g, mely vizsg\u00e1lja \u00e9s \u00e1br\u00e1zolja a l\u00e1togat\u00f3k tev\u00e9kenys\u00e9g\u00e9t a weboldalon. Az adatok alapj\u00e1n pedig levonhat\u00f3k a k\u00f6vetkeztet\u00e9sek arra vonatkoz\u00f3an, hogy hol kellene optimaliz\u00e1lni a sz\u00f6veget vagy a vizu\u00e1lis designt. <\/p>\n\n\n\n
Mi az a h\u0151t\u00e9rk\u00e9p?<\/h2>\n\n\n\n
A h\u0151t\u00e9rk\u00e9p a weboldalon mutatott felhaszn\u00e1l\u00f3i aktivit\u00e1s vizu\u00e1lis megjelen\u00edt\u00e9se. A h\u0151t\u00e9rk\u00e9pek k\u00fcl\u00f6nb\u00f6z\u0151 sz\u00edneket haszn\u00e1lnak annak \u00e9rdek\u00e9ben, hogy megfelel\u0151en prezent\u00e1lj\u00e1k a felhaszn\u00e1l\u00f3 sz\u00e1m\u00e1ra, hogy a weboldal mely r\u00e9szei keltik fel legink\u00e1bb a felhaszn\u00e1l\u00f3k figyelm\u00e9t, \u00e9s melyek nem: a pirossal jelzett, \u201cforr\u00f3\u201d r\u00e9szek k\u00f6tik le a l\u00e1togat\u00f3k figyelm\u00e9t, m\u00edg a k\u00e9k sz\u00edn\u0171, \u201chideg\u201d ter\u00fcletekkel nem foglalkoznak.<\/p>\n\n\n\n H\u0151t\u00e9rk\u00e9pb\u0151l t\u00f6bbf\u00e9le l\u00e9tezik, ez\u00e1ltal pontosabban m\u00e9rhet\u0151 a tartalom figyelemfelkelt\u0151 k\u00e9pess\u00e9ge, hiszen k\u00fcl\u00f6nb\u00f6z\u0151 adatok nyerhet\u0151k ki \u00e1ltaluk. Alapvet\u0151en h\u00e1romf\u00e9le h\u0151t\u00e9rk\u00e9pr\u0151l besz\u00e9lhet\u00fcnk: g\u00f6rget\u00e9si t\u00e9rk\u00e9p, kattint\u00e1si t\u00e9rk\u00e9p \u00e9s hover t\u00e9rk\u00e9p.<\/p>\n\n\n\n A g\u00f6rget\u00e9si h\u0151t\u00e9rk\u00e9p azt mutatja meg, hogy a l\u00e1togat\u00f3k h\u00e1ny sz\u00e1zal\u00e9ka g\u00f6rgetett le a weboldal egy bizonyos r\u00e9sz\u00e9hez. Min\u00e9l melegebb sz\u00ednnel van \u00e1br\u00e1zolva egy r\u00e9sz, ann\u00e1l t\u00f6bb l\u00e1togat\u00f3 pillantott r\u00e1. Az adatok teh\u00e1t megmutatj\u00e1k, hogy hov\u00e1 \u00e9rdemes elhelyezni egy call to actiont (CTA) vagy m\u00e1s fontos inform\u00e1ci\u00f3kat. A sz\u00ednekben t\u00f6rt\u00e9n\u0151 v\u00e1ltoz\u00e1s jelzi azt, hogy hol vesz\u00edtik el az \u00e9rdekl\u0151d\u00e9s\u00fcket a l\u00e1togat\u00f3k.<\/p>\n\n\n\n A kattint\u00e1si h\u0151t\u00e9rk\u00e9p azt mutatja meg, hogy a weboldalon hova kattintanak a l\u00e1togat\u00f3k. Ezekn\u00e9l is az jelenik meg, hogy min\u00e9l melegebb sz\u00ednnel jelzett egy r\u00e9sz, ann\u00e1l t\u00f6bbet kattintottak r\u00e1 az emberek. Az adatok teh\u00e1t els\u0151sorban azt mutatj\u00e1k meg, hogy a felhaszn\u00e1l\u00f3k foglalkoznak-e azokkal a CTA vagy egy\u00e9b gombokkal, melyek egy eltervezett cselekv\u00e9st visznek tov\u00e1bb. Azt is megmutatj\u00e1k, hogy akadnak-e olyan nem kattinthat\u00f3 elemek, melyek elt\u00e9r\u00edtik \u0151ket, azaz kattintanak r\u00e1juk annak ellen\u00e9re, hogy nem kattinthat\u00f3k. Ez komoly hib\u00e1t jelent a webdesignt tekintve.<\/p>\n\n\n\n A hover h\u0151t\u00e9rk\u00e9pek azt jelzik, hogy merre j\u00e1r a l\u00e1togat\u00f3k eg\u00e9rmutat\u00f3ja, mik\u00f6zben olvasnak a weboldalon. Min\u00e9l melegebb sz\u00ednnel van jel\u00f6lve egy ter\u00fclet, ann\u00e1l hosszabb ideig id\u0151zik azon a felhaszn\u00e1l\u00f3 kurzora. Az adat seg\u00edt meghat\u00e1rozni azt, hogy a l\u00e1togat\u00f3k mik\u00e9nt navig\u00e1lnak a weboldalon. Ennek f\u00e9ny\u00e9ben pedig a fontos elemek olyan helyre helyezhet\u0151k, amelyre egy\u00e9bk\u00e9nt a legnagyobb figyelem ir\u00e1nyul. Az is meg\u00e1llap\u00edthat\u00f3, hogy melyek azok a felesleges elemek, melyek elvonj\u00e1k a l\u00e1togat\u00f3k figyelm\u00e9t a fontos elemekr\u0151l. <\/p>\n\n\n\n Nyilv\u00e1n az ide\u00e1lis az lenne, ha a weboldalad valamennyi oldal\u00e1n haszn\u00e1ln\u00e1l h\u0151t\u00e9rk\u00e9peket, ez azonban nem igaz\u00e1n hat\u00e9kony megold\u00e1s: sok id\u0151 megy el vele feleslegesen. Elegend\u0151 az, ha azon oldalaidat vizsg\u00e1lod csak h\u0151t\u00e9rk\u00e9pek haszn\u00e1lat\u00e1val, melyek a konverzi\u00f3k szempontj\u00e1b\u00f3l a legfontosabbak: ilyen p\u00e9ld\u00e1ul a f\u0151oldalad, a c\u00e9loldalaid (landing page-ek), \u00e9s a konverzi\u00f3kat hoz\u00f3 blogbejegyz\u00e9sek. Emellett azonban b\u00e1rmely m\u00e1s oldalad is lehet az elemz\u00e9s t\u00e1rgya, ak\u00e1r egy \u201cr\u00f3lunk oldal\u201d, ak\u00e1r egy kapcsolati oldal \u00e9s \u0171rlap. N\u00e9zz\u00fck ezeket r\u00e9szletesen!<\/p>\n\n\n\n A f\u0151oldalad az, amely els\u0151 k\u00f6rben bemutatja a c\u00e9gedet, sokan \u00e9rkeznek erre az oldalra p\u00e9ld\u00e1ul egy m\u00e1rkakeres\u00e9sre vagy egy\u00e9b, a weben elhelyezett linkekr\u0151l. Ha folyamatosan elemzed, melyik r\u00e9szeken g\u00f6rgetnek \u00e1t a felhaszn\u00e1l\u00f3k, a kulcsfontoss\u00e1g\u00fa inform\u00e1ci\u00f3k f\u00f6l\u00e9 mozgatj\u00e1k-e az egeret \u00e9s hogy kattintanak-e az itt elhelyezz CTA-ra, akkor pontosan l\u00e1tni fogod, hogy <\/p>\n\n\n\n A c\u00e9loldalak jelentik<\/a> az utols\u00f3 l\u00e9p\u00e9st abban a folyamatban, amikor a l\u00e1togat\u00f3k leadekk\u00e9 vagy megrendel\u0151kk\u00e9 v\u00e1lnak. Ha elemzed ezeket az oldalakat h\u0151t\u00e9rk\u00e9pek seg\u00edts\u00e9g\u00e9vel, akkor kialak\u00edthatod a t\u00f6k\u00e9letes, neked megfelel\u0151 c\u00e9loldal-designt, mely a lehet\u0151 legt\u00f6bb vev\u0151t hozza a c\u00e9ged sz\u00e1m\u00e1ra. <\/p>\n\n\n\n Egy-egy CTA elhelyez\u00e9se a blogposztjaidban szint\u00e9n meghat\u00e1rozza a konverzi\u00f3s ar\u00e1nyt. Ezek a CTA-k elhelyezhet\u0151 a sz\u00f6vegben vagy a poszt v\u00e9g\u00e9n egy k\u00fcl\u00f6n hirdet\u00e9sben. \u00c1ltal\u00e1ban a sz\u00f6veg elej\u00e9n, a hajt\u00e1s felett elhelyezett CTA-k teljes\u00edtenek jobban, \u00e9rdemes lehet azonban a pontos elhelyezked\u00e9s\u00fcket h\u0151t\u00e9rk\u00e9pek (\u00e9s A\/B tesztek) seg\u00edts\u00e9g\u00e9vel optimaliz\u00e1lni.<\/p>\n\n\n\n Teh\u00e1t ak\u00e1r a weboldalad designj\u00e1nak A\/B tesztjein\u00e9l<\/a> haszn\u00e1lod a h\u0151t\u00e9rk\u00e9peket, ak\u00e1r csak megpr\u00f3b\u00e1lod meghat\u00e1rozni a seg\u00edts\u00e9g\u00e9vel, hogy mi lenne a megfelel\u0151 helye egy CTA-nak valamely oldaladon, sokat seg\u00edtenek egy hat\u00e9konyabb weboldal kialak\u00edt\u00e1s\u00e1ban. A legjobb eszk\u00f6zt jelentik arra, hogy m\u00e9rd a felhaszn\u00e1l\u00f3i figyelem alakul\u00e1s\u00e1t, \u00e9s seg\u00edt kialak\u00edtani egy olyan weboldal-tartalmat, melynek r\u00e9v\u00e9n konverzi\u00f3kat hoz\u00f3 kapcsolatot hozhatsz l\u00e9tre a l\u00e1togat\u00f3kkal.<\/p>\n\n\n\n A CTA szinte minden weboldal legfontosabb r\u00e9sze. Ez az a pont, ahol a felhaszn\u00e1l\u00f3k konvert\u00e1lnak, \u00e9s megrendelik a term\u00e9ked vagy szolg\u00e1ltat\u00e1sod. Ez\u00e9rt nagyon sok m\u00falik a CTA megtervez\u00e9s\u00e9n: a megfelel\u0151 sz\u00f3v\u00e1laszt\u00e1son, vizu\u00e1lis designon. <\/p>\n\n\n\n Egy CTA hat\u00e1s\u00e1t vizsg\u00e1lhatod h\u0151t\u00e9rk\u00e9p seg\u00edts\u00e9g\u00e9vel is, hiszen megmutatja, hogy mennyire h\u00edvja fel mag\u00e1ra a figyelmet, j\u00f3 helyen tal\u00e1lhat\u00f3-e az oldalon. Ha valami elvonja r\u00f3la a figyelmet, akkor az az elem m\u00f3dos\u00edthat\u00f3, ha rossz utat j\u00e1rnak be a felhaszn\u00e1l\u00f3k, akkor v\u00e1ltoztatni kell az elemeken, melyek a figyelm\u00fck ir\u00e1ny\u00edt\u00e1s\u00e1ban j\u00e1tszanak szerepet. V\u00e9g\u00fcl pedig maga a CTA gomb is hangs\u00falyosabb\u00e1 tehet\u0151, a weboldal m\u00e1s pontj\u00e1ra helyezhet\u0151. A h\u0151t\u00e9rk\u00e9p pedig megmutatja, hogy javult-e vagy romlott a helyzet.<\/p>\n\n\n\n Ha a k\u00f6vetkez\u0151 k\u00e9pnek megn\u00e9zed a bal oldali r\u00e9sz\u00e9t, akkor azt l\u00e1tod, hogy rossz az elrendez\u00e9se az els\u0151dleges \u00e9s a m\u00e1sodlagos CTA-nak, \u00edgy az els\u0151dleges CTA-ra m\u00e1r kev\u00e9s figyelem jut. Ez\u00e9rt \u00e9rdemes megcser\u00e9lni a kett\u0151t, \u00e9s az els\u0151dleges CTA-t olyan helyre tenni, amelyre komolyabb figyelem ir\u00e1nyul. Ennek eredm\u00e9nyek\u00e9nt l\u00e1that\u00f3, hogy a jobb oldali k\u00e9pen az els\u0151dleges CTA v\u00e1lt a legforgalmasabb pontt\u00e1.<\/p>\n\n\n\n Az \u00e1tlagos weboldal-felhaszn\u00e1l\u00f3 ritk\u00e1n g\u00f6rget le egy weboldal alj\u00e1ig. Ez\u00e9rt is olyan fontos, hogy mi ker\u00fcl a hajt\u00e1s f\u00f6l\u00e9<\/a>. Ha \u00e9rdekli egy weboldal, akkor g\u00f6rget, ha nem, akkor otthagyja \u00fagy, hogy csak a hajt\u00e1s feletti r\u00e9szt l\u00e1tta. Ugyanakkor a hajt\u00e1s ma m\u00e1r minden eszk\u00f6z\u00f6n egy kicsit m\u00e1shov\u00e1 ker\u00fcl.<\/p>\n\n\n\n Egy g\u00f6rget\u00e9si t\u00e9rk\u00e9ppel j\u00f3 k\u00e9pet kaphatsz arr\u00f3l, hogy egyes eszk\u00f6z\u00f6k\u00f6n hol is van a hajt\u00e1s, meddig g\u00f6rgetnek le a felhaszn\u00e1l\u00f3k, ez pedig jelzi, hogy hov\u00e1 kellene elhelyezned a legfontosabb inform\u00e1ci\u00f3kat \u00e9s a CTA-d. \u00cdgy biztos\u00edthatod, hogy ezeket val\u00f3ban minden l\u00e1togat\u00f3 l\u00e1ssa.<\/p>\n\n\n\n Az el\u0151bbihez kapcsol\u00f3dik, hogy ha hozz\u00e1adsz valamilyen tartalmat a weboldaladhoz, akkor tal\u00e1n nem csak azt szeretn\u00e9d tudni, hogy h\u00e1ny felhaszn\u00e1l\u00f3 l\u00e1tta azt, de tal\u00e1n azt is, hogy elolvast\u00e1k-e. Lehet, hogy csak k\u00e9t sort olvastak el, azt\u00e1n m\u00e1r t\u00e1voztak is. De az is lehet, hogy lek\u00f6t\u00f6tte \u0151ket, \u00e9s eljutottak az oldal v\u00e9g\u00e9re. <\/p>\n\n\n\n A g\u00f6rget\u00e9si h\u0151t\u00e9rk\u00e9p remek\u00fcl megmutatja, hogy meddig jutnak le a l\u00e1togat\u00f3k egy oldalon, vagyis meg tudja mondani, hogy mennyit is n\u00e9ztek meg a tartalomb\u00f3l. De m\u00e9g azt is jelzi egy h\u0151t\u00e9rk\u00e9p, hogy mely r\u00e9sz nem volt sz\u00e1mukra \u00e9rdekes. <\/p>\n\n\n\n Ha pedig ezt tudod, akkor sokkal jobb tartalmat tudsz k\u00e9sz\u00edteni a l\u00e1togat\u00f3knak az \u00e9rdektelen r\u00e9szek elhagy\u00e1s\u00e1val vagy lecser\u00e9l\u00e9s\u00e9vel, illetve betehetsz valami izgalmasat sz\u00e1mukra azon a ponton, ahol \u00e1ltal\u00e1ban elhagyj\u00e1k az oldalt. <\/p>\n\n\n\n A kattinthat\u00f3 elemek minden weboldalon egy kicsit m\u00e1shogy n\u00e9znek ki. Amikor az emberek olyan elemekre kattintanak a weboldaladon, melyek nem csin\u00e1lnak semmit, mert nem kattinthat\u00f3ak, akkor az probl\u00e9m\u00e1t jelent webdesign szempontb\u00f3l. <\/p>\n\n\n\n Egy h\u0151t\u00e9rk\u00e9p seg\u00edthet abban, hogy megtal\u00e1ld a hib\u00e1s kattint\u00e1sokat \u00e9s jav\u00edtsd az \u00e9rintett elemeket. Kicser\u00e9lheted \u0151ket relev\u00e1ns elemekre, vagy megv\u00e1ltoztathatod, illetve elt\u00e1vol\u00edthatod a zavart okoz\u00f3 elemeket.<\/p>\n\n\n\n Egy h\u0151t\u00e9rk\u00e9p azt is meg tudja mutatni, hogy melyek a legjobb helyek, ahov\u00e1 elhelyezhetsz egy k\u00e9pet, illetve milyen k\u00e9pet tegy\u00e9l oda. Erre itt egy klasszikus p\u00e9lda, ahol annyi t\u00f6rt\u00e9nt, hogy v\u00e1ltoztattak a fot\u00f3n: a m\u00e1sodik k\u00e9pen a sz\u00f6vegre n\u00e9z a fot\u00f3n szerepl\u0151 gyerek. Ennek hat\u00e1s\u00e1ra pedig a l\u00e1togat\u00f3k figyelme is j\u00f3val nagyobb ar\u00e1nyban mozdul a sz\u00f6veg ir\u00e1ny\u00e1ba.<\/p>\n\n\n\n A megv\u00e1ltoztatott fot\u00f3 hat\u00e1sa:<\/p>\n\n\n\n Egy h\u0151t\u00e9rk\u00e9p abban is seg\u00edtsd, hogy jav\u00edtsd a weboldalad haszn\u00e1lhat\u00f3s\u00e1g\u00e1t \u00e9s felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny\u00e9t. P\u00e9ld\u00e1ul, amikor egy web\u00e1ruh\u00e1z azzal tal\u00e1lkozik, hogy nagyon sok l\u00e1togat\u00f3 berak valamit a kos\u00e1rba, azonban a tranzakci\u00f3ig m\u00e1r nem jutnak el.<\/p>\n\n\n\n A h\u0151t\u00e9rk\u00e9pen ugyanis l\u00e1that\u00f3, hogy mire kattintanak az emberek \u00e9s mire nem. Lehet olyan egyszer\u0171 oka is a dolognak, hogy nem tal\u00e1lj\u00e1k a kosarat, vagy nem tudj\u00e1k azt haszn\u00e1lni, mert rosszul van fel\u00e9p\u00edtve, rossz helyen van valamilyen gomb, \u00e9s elakadnak.<\/p>\n\n\n\n De az is lehet, hogy valami elvonja a figyelm\u00fcket a v\u00e1s\u00e1rl\u00e1sr\u00f3l, \u00e9s nem tudnak ny\u00edlegyenesen t\u00f6rni a c\u00e9l fel\u00e9. P\u00e9ld\u00e1ul egy izgalmas navig\u00e1ci\u00f3s s\u00e1v, vagy valamilyen sz\u00ednes, felbukkan\u00f3 elem, hirdet\u00e9s, popup ablak. De ak\u00e1r az is el\u0151fordulhat, hogy nem kattinthat\u00f3 elemekre pr\u00f3b\u00e1lnak kattintani, \u00e9s mivel ez nem j\u00f6n \u00f6ssze, csal\u00f3dottak lesznek.<\/p>\n\n\n\n Ez persze felhaszn\u00e1l\u00f3i tesztekkel is meg\u00e1llap\u00edthat\u00f3, illetve, ha v\u00e1ltoz\u00e1s t\u00f6rt\u00e9nt, akkor \u00e9rdemes A\/B tesztelni, hogy hat\u00e9konyabb lett-e az oldal. <\/p>\n\n\n\n A bels\u0151 linkel\u00e9s az egyes aloldalak hierarchi\u00e1j\u00e1nak kialak\u00edt\u00e1s\u00e1ban fontos t\u00e9nyez\u0151. Ha azt szeretn\u00e9d, hogy egy-egy tartalmon bel\u00fcl szerepl\u0151 linkre t\u00f6bben kattintsanak, akkor figyelni kell arra, hogy mi annak a linknek a horgonysz\u00f6vege, megfelel\u0151-e a vizu\u00e1lis megjelen\u00e9se, nem tereli-e el r\u00f3la valami a figyelmet. Egy h\u0151t\u00e9rk\u00e9p seg\u00edts\u00e9g\u00e9vel l\u00e1thatod, hogy a link m\u00e1s elemekhez k\u00e9pest mennyire \u00e9rdekes a l\u00e1togat\u00f3k sz\u00e1m\u00e1ra, majd v\u00e1ltoztathatsz rajta, hogy t\u00f6bben kattintsanak r\u00e1.<\/p>\n\n\n\n Az F-mint\u00e1val azt a mozg\u00e1st \u00edrhatjuk le, melyet a felhaszn\u00e1l\u00f3k tekintete bej\u00e1r, amikor meg\u00e9rkeznek egy weboldalra, \u00e9s r\u00e1tekintenek a tartalomra. Az emberek sokszor ezen minta alapj\u00e1n olvass\u00e1k a tartalmakat a weben, amire \u00e9rdemes odafigyelni, ha weboldalad van.<\/p>\n\n\n\n A felhaszn\u00e1l\u00f3k tekintete egy weboldalon m\u00e1sodpercek alatt bej\u00e1rja az F-form\u00e1t, \u00e9s fogadja be, illetve futja \u00e1t ezen minta alapj\u00e1n a tartalm\u00e1t. Az F-minta l\u00e9tez\u00e9s\u00e9re m\u00e9g t\u00f6bb mint 10 \u00e9vvel ezel\u0151tt az NNGroup egy kutat\u00e1sa h\u00edvta fel a figyelmet<\/a>. Ebben t\u00f6bb mint 200 felhaszn\u00e1l\u00f3 szemmozg\u00e1s\u00e1t figyelt\u00e9k t\u00f6bb ezer weboldal megl\u00e1togat\u00e1sa sor\u00e1n. Az F-forma azonban most is \u00e9rv\u00e9nyes, hiszen leg\u00fajabb kutat\u00e1saik<\/a> is ugyanezt a mint\u00e1t t\u00e1rt\u00e1k fel.<\/p>\n\n\n\n Mint megfigyelt\u00e9k, az emberek olvas\u00e1si viselked\u00e9se nagyj\u00e1b\u00f3l azonos volt a k\u00fcl\u00f6nf\u00e9le weboldalakon vagy \u00e9ppen feladatok v\u00e9grehajt\u00e1sa sor\u00e1n. \u00c9s a legink\u00e1bb az F-form\u00e1ra hasonl\u00edtott. H\u00e1rom fontos t\u00e9nyez\u0151 rajzol\u00f3dott ki a kutat\u00e1s alapj\u00e1n:<\/p>\n\n\n\n Ez \u00edgy n\u00e9z ki \u00e1br\u00e1zolva:<\/p>\n\n\n\n \u00c9s \u00edgy mutat h\u0151t\u00e9rk\u00e9pen:<\/p>\n\n\n\n Term\u00e9szetesen a felhaszn\u00e1l\u00f3k tekintete nem mindig ezt az utat j\u00e1rja be<\/strong>. Hiszen p\u00e9ld\u00e1ul, ha m\u00e1r az oldal elej\u00e9n tal\u00e1lnak valami sz\u00e1mukra hasznos inform\u00e1ci\u00f3t, akkor norm\u00e1l olvas\u00e1sra v\u00e1ltanak, azaz v\u00edzszintes vonalak rajzol\u00f3dnak ki a h\u0151t\u00e9rk\u00e9pen.<\/p>\n\n\n\n A F-forma mellett teh\u00e1t t\u00f6bb m\u00e1s olvas\u00e1si minta is felfedezhet\u0151. Az egyik ilyen, amikor csak a c\u00edmsort \u00e9s az alc\u00edmeket olvass\u00e1k el<\/strong> az emberek. El\u0151fordul azonban olyan is, amikor nagy sz\u00f6vegr\u00e9szeket ugrik \u00e1t<\/strong> a tekintet\u00fck, mert valami specifikus dolgot keresnek, p\u00e9ld\u00e1ul egy linket, egy bizonyos sz\u00f3t, vagy szavak egy csoportj\u00e1t, mint p\u00e9ld\u00e1ul egy c\u00edm.<\/p>\n\n\n\n Mobilokn\u00e1l az is gyakran el\u0151fordul, hogy a tekintet egy pontra mered<\/strong>, mik\u00f6zben a h\u00fcvelykujj folyamatosan g\u00f6rget. Ez olyan, mint amikor a balett t\u00e1ncosok egy pontra figyelnek, hogy megtarts\u00e1k az egyens\u00falyt, ne sz\u00e9d\u00fcljenek el.<\/p>\n\n\n\n Azzal is lehet tal\u00e1lkozni, hogy az emberek sz\u00e1nd\u00e9kosan \u00e1tugorj\u00e1k<\/strong> a sorok els\u0151 szavait, amikor p\u00e9ld\u00e1ul egy list\u00e1ban a sorok ugyanazzal a sz\u00f3val kezd\u0151dnek. V\u00e9g\u00fcl pedig az is el\u0151fordul, hogy mindenre figyelnek, mindent elolvasnak<\/strong> a felhaszn\u00e1l\u00f3k a weboldalon. Jellemz\u0151en akkor, ha nagyon fontos \u00e9s \u00e9rdekes sz\u00e1mukra a tartalom. Erre a viselked\u00e9sre azonban nem \u00e9rdemes t\u00fal gyakran sz\u00e1m\u00edtani, a legt\u00f6bb felhaszn\u00e1l\u00f3 csak \u00e1tfutja az oldalt.<\/p>\n\n\n\n A felhaszn\u00e1l\u00f3k r\u00e9sz\u00e9r\u0151l alapvet\u0151en az F-mint\u00e1ra lehet sz\u00e1m\u00edtani, akkor, ha<\/p>\n\n\n\n Az utols\u00f3 k\u00e9t pont arra mutat r\u00e1, hogy mik\u00e9nt haszn\u00e1lj\u00e1k az emberek a webet. A t\u00f6bbs\u00e9g\u00fck arra t\u00f6rekszik, hogy min\u00e9l el\u0151tt befejezze a feladat\u00e1t a lehet\u0151 legkevesebb er\u0151fesz\u00edt\u00e9st megt\u00e9ve<\/strong>. Az\u00e9rt l\u00e1togatj\u00e1k meg az oldalt, mert gyors v\u00e1laszokat akarnak.<\/p>\n\n\n\n Egy\u00e9bk\u00e9nt pedig az l\u00e1that\u00f3, hogy ha a designerek nem tesznek meg mindent az\u00e9rt, hogy a felhaszn\u00e1l\u00f3kat a legfontosabb, leg\u00e9rdekesebb inform\u00e1ci\u00f3k fel\u00e9 terelj\u00e9k, akkor azok kialak\u00edtj\u00e1k maguknak a saj\u00e1t \u00f6sv\u00e9nyeiket. Ha hi\u00e1nyoznak a jelz\u00e9sek, melyek vezetik a tekintetet, akkor azt az utat fogj\u00e1k megtal\u00e1lni, mely minim\u00e1lis er\u0151fesz\u00edt\u00e9st k\u00f6vetel, \u00e9s \u00edgy a legt\u00f6bb id\u0151t ott fogj\u00e1k t\u00f6lteni, ahol elkezdik az olvas\u00e1st, ami legt\u00f6bbsz\u00f6r a bal fels\u0151 sarok. Az F-forma teh\u00e1t akkor alapvet\u0151 minta a weboldalon, amikor nincsenek er\u0151s jelz\u00e9sek, melyek vezetik a tekintetet a fontos inform\u00e1ci\u00f3k fel\u00e9<\/strong>. Ez jelenti az alapvet\u0151 gondot az F-form\u00e1val kapcsolatban.<\/p>\n\n\n\n Ha a Te weboldaladon is vannak jelent\u0151s mennyis\u00e9gben form\u00e1zatlan sz\u00f6vegek, akkor az emberek azt az F-minta alapj\u00e1n fogj\u00e1k bej\u00e1rni a szem\u00fckkel. Ilyenkor \u00e1tugranak szavakat \u00e9s mondatokat, gyakran a fontosakat is<\/strong>. El\u0151fordul, hogy pont a fontosabb r\u00e9szeket ugorj\u00e1k \u00e1t, \u00e9s a l\u00e9nyegtelen r\u00e9szeket olvass\u00e1k el. Erre azonban nem j\u00f6nnek r\u00e1, mivel \u0151k – veled ellent\u00e9tben – nem tudj\u00e1k, hogy mi az, amit nem vesznek \u00e9szre<\/strong> az oldalon.<\/p>\n\n\n\n R\u00e1ad\u00e1sul egy reszponz\u00edv designnal k\u00e9sz\u00fcl oldalon a sz\u00f6veg kialak\u00edt\u00e1sa mindig az adott ablak-m\u00e9rett\u0151l f\u00fcgg. Ez azt jelenti, hogy a felhaszn\u00e1l\u00f3k tekintete nem ugyanazokon a szavakon \u00e1llapodik meg. \u00cdgy teh\u00e1t nem is tudod az F-minta alapj\u00e1n elrendezni a legfontosabb dolgokat. Vagyis egy j\u00f3 webdesign<\/strong> ink\u00e1bb m\u00e9rs\u00e9kelni igyekszik az F-minta hat\u00e1s\u00e1t<\/strong>.<\/p>\n\n\n\n Fontos meg\u00e9rteni, hogy a felhaszn\u00e1l\u00f3k a k\u00f6lts\u00e9g-el\u0151ny ar\u00e1nyt az eg\u00e9sz webet tekintve igyekeznek maximaliz\u00e1lni. Ha az internet egy tengerpart, akkor a Te weboldalad egy homokszem benne. M\u00e1rpedig, amikor az emberek egy homokv\u00e1rat akarnak \u00e9p\u00edteni, akkor nem keresg\u00e9lnek a legszebb homokszemek ut\u00e1n, hanem egy v\u00f6d\u00f6rbe szedik a homokot. Ezt azt jelenti, hogy az emberek csek\u00e9ly er\u0151fesz\u00edt\u00e9st tesznek egy-egy weboldal megismer\u00e9s\u00e9re.<\/p>\n\n\n\n Az F-mint\u00e1t teh\u00e1t figyelembe kell venned, ugyanakkor meg kell pr\u00f3b\u00e1lnod ir\u00e1ny\u00edtani a felhaszn\u00e1l\u00f3kat. Egy olyan designt kell kialak\u00edtanod, ahol a megfelel\u0151 f\u00f3kuszpontokba ker\u00fclnek a legfontosabb dolgok, \u00e9s amelyet az emberek k\u00f6nnyen \u00e1ttekintenek. Az F-forma ment\u00e9n a tartalom a legt\u00f6bb nyugati ember sz\u00e1m\u00e1ra k\u00e9nyelmesen befogadhat\u00f3, hiszen fentr\u0151l lefel\u00e9 \u00e9s balr\u00f3l jobbra olvasunk, ugyanakkor a l\u00e9nyeges elemekre k\u00fcl\u00f6n fel kell h\u00edvnod a figyelmet a megfelel\u0151 form\u00e1z\u00e1ssal.<\/p>\n\n\n\n Azt ne felejtsd, hogy az F-forma mindig a weboldalak tartalmi r\u00e9sz\u00e9re vonatkozik, vagyis azt \u00edrja le, hogy az emberek mik\u00e9nt ker\u00fclnek kapcsolatba egy weboldal tartalmi r\u00e9sz\u00e9vel, \u00e9s nem arra, hogy hogyan tanulm\u00e1nyozz\u00e1k p\u00e9ld\u00e1ul a navig\u00e1ci\u00f3s s\u00e1vot, amikor el akarj\u00e1k d\u00f6nteni, hova kattintsanak. Az F-mint\u00e1t a legjobban a sok sz\u00f6veget tartalmaz\u00f3 weboldalak, mint a blogok vagy a h\u00edroldalak tudj\u00e1k kihaszn\u00e1lni. Teh\u00e1t ha sok tartalom – k\u00fcl\u00f6n\u00f6sen sz\u00f6veg – van az oldaladon, akkor a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra jobb, ha a term\u00e9szetes szemmozg\u00e1sukat figyelembe v\u00e9ve \u00e9p\u00fcl fel az a tartalom.<\/p>\n\n\n\n Ehhez el\u0151sz\u00f6r meg kell hat\u00e1roznod a tartalom elemeinek fontoss\u00e1gi sorrendj\u00e9t<\/strong>. Ha ez megvan, akkor a legfontosabb dolgokat a f\u00f3kuszpontokba kell helyezni, teh\u00e1t olyan helyekre, melyeken biztos \u00e1t fog haladni az emberek tekintete. Ilyen szempontb\u00f3l az els\u0151 k\u00e9t bekezd\u00e9s a legl\u00e9nyegesebb, azaz a legfontosabb tartalmi r\u00e9szt a weboldal tetej\u00e9nek k\u00f6zel\u00e9be kell helyezni, hogy gyorsan \u00e9s hat\u00e9konyan kommunik\u00e1lja a weboldal sz\u00e1nd\u00e9k\u00e1t.<\/p>\n\n\n\n A legfontosabb k\u00f6vetkeztet\u00e9sek, melyek levonhat\u00f3k az NNG vizsg\u00e1lata alapj\u00e1n:<\/p>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/05\/hoterkep.png\")
<\/figure>\n\n\n\nG\u00f6rget\u00e9si h\u0151t\u00e9rk\u00e9p<\/h3>\n\n\n\n
![\"G\u00f6rget\u00e9si](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/02\/gorgetesi-hoterkep.png\")
<\/figure><\/div>\n\n\n\nKattint\u00e1si h\u0151t\u00e9rk\u00e9p<\/h3>\n\n\n\n
Hover h\u0151t\u00e9rk\u00e9p<\/h3>\n\n\n\n
![\"Hover](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/02\/hover-hoterkep.jpg\")
<\/figure><\/div>\n\n\n\nMilyen t\u00edpus\u00fa oldalakn\u00e1l haszn\u00e1lhatod a h\u0151t\u00e9rk\u00e9peket?<\/h2>\n\n\n\n
F\u0151oldal<\/h4>\n\n\n\n
C\u00e9loldalak<\/h4>\n\n\n\n
J\u00f3l konvert\u00e1l\u00f3 blogposztok<\/h4>\n\n\n\n
Mire haszn\u00e1lhatod a h\u0151t\u00e9rk\u00e9pet a weboldaladon?<\/h2>\n\n\n\n
Megtal\u00e1lhatod vele azt a CTA-t, ami hat\u00e9kony<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/01\/hoterkep-cta-valtoztatas.png\")
<\/figure><\/div>\n\n\n\nMegmutatja a g\u00f6rget\u00e9si t\u00e1vols\u00e1got<\/h4>\n\n\n\n
Megtal\u00e1lhatsz hi\u00e1nyz\u00f3 lehet\u0151s\u00e9geket<\/h4>\n\n\n\n
\u00c9szreveheted a f\u00e9lrekattint\u00e1sokat<\/h4>\n\n\n\n
Optimaliz\u00e1lhatod a k\u00e9peket, hogy ir\u00e1ny\u00edtsd a figyelmet<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/01\/az-elso-verzio.jpg\")
<\/figure><\/div>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/01\/modositott-kep.jpg\")
<\/figure><\/div>\n\n\n\nMegtal\u00e1lhatod az ok\u00e1t a kos\u00e1relhagy\u00e1soknak<\/h4>\n\n\n\n
Jav\u00edthatod vele a linkek hat\u00e9konys\u00e1g\u00e1t<\/h4>\n\n\n\n
Mi az az F-minta a h\u0151t\u00e9rk\u00e9pen? \u00c9s hogyan haszn\u00e1lhatod ki?<\/h2>\n\n\n\n
![\"F-forma](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/06\/F-forma-a-webdesignban.jpeg\")
<\/figure><\/div>\n\n\n\n![\"hoterkep\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/01\/hoterkep.jpg\")
<\/figure><\/div>\n\n\n\nAz F-minta nem az egyetlen lehet\u0151s\u00e9g<\/h4>\n\n\n\n
Mi\u00e9rt F-form\u00e1ban tekintik \u00e1t a tartalmat az emberek?<\/h4>\n\n\n\n
Mi a gond az F-form\u00e1val?<\/h4>\n\n\n\n
Hogyan vedd a kezedbe az ir\u00e1ny\u00edt\u00e1st?<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/07\/hotjar_heatmaps.png\")
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/07\/attention_insight.png\")
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/07\/crazyegg.png\")