Keresés
Header Háttér

Webshark Blog

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

2017-11-150 komment

Mi az az F-forma a webdesignban? És hogyan használhatod ki?

Az F-formá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.