Keresés
Header Háttér

Webshark Blog

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

2017-06-290 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 ezen minta alapján olvassák a tartalmakat a weben, amihez érdemes alkalmazkodniuk a weboldalaknak is.

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 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.

Azt találták, hogy 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 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 haladtak 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 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.

Hogyan használd ki az F-mintát a weboldaladon?

Az F-mintát figyelembe véve egy olyan webdesignt tudsz kialakítani, melynek optimális lesz a vizuális felépítése. Egy olyan designt, melyet 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.

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.

A F-formát kihasználva fel is tudod hívni a figyelmet bizonyos dolgokra a weboldaladon. 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. Mint láttuk, az emberek jellemzően vízszintesen olvasnak a tartalom felső részén, tehát ez jó hely lehet a navigációs sávnak, mely sokat elárul a weboldalad tartalmáról.

A további tartalmat sem elsősorban olvasásra, hanem átfutásra kell elrendezni. Vagyis minden új bekezdést valamilyen izgalmas kulcsszóval kell kezdeni. És mivel az emberek először a legjelentősebb elemekre tekintenek rá a weboldalon, vagyis az olyan részekre, melyeknek nagyobb a vizuális súlya, ezért érdemes nagyobb vizuális jelentőséget adni a fontosabb dolgoknak. Például lehet játszani a tipográfiával, ki lehet emelni szövegrészeket, vagy be lehet vetni bizonyos színeket.

A tartalom szempontjából fontos, hogy egy bekezdés lehetőleg egy gondolatot tartalmazzon, és a szöveg megtörése, valamint a figyelem felkeltése érdekében célszerű felsorolásokat alkalmazni.

Végül pedig figyelni kell arra, 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.

Az oldalsáv kihasználása

Az oldalsávok képesek arra, hogy a felhasználókat mélyebb szinten bevonják, ezért érdemes kihasználni őket az elköteleződés növelésére. Helyezz el ezekben olyan funkciókat, melyekre mindenképpen szeretnéd felhívni az emberek figyelmét, de nem illenek organikusan az elsődleges tartalomba. Ez lehet egy reklám a jobb oldalsávban, vagy kapcsolódó cikkek, közösségi média elem, stb.

Használhatod arra is ezt a részt, hogy az itt megjelenő funkció segítségével az emberek rátaláljanak valamilyen speciális tartalomra. Kézenfekvő példa a kategóriák felsorolása, egy tag-felhő megjelenítése, vagy egy népszerű posztok doboz elhelyezése.

Ne unatkozzon a felhasználó!

Az F-minta legnagyobb hátránya, hogy egy idő után unalmassá válik. Könnyen érdektelenné teheted az embereket, ha sorozatban ugyanazt a kialakítást ismétled a tartalomnál. Márpedig, ha elkezd unatkozni a weboldaladon a felhasználó, az nem lesz jó számodra. Ezért aztán időnként meg kell törnöd a megszokott mintát valamilyen furcsa elemmel azon a területen, melyet átfutnak az emberek az F-minta alapján. Kifejezetten hasznos lehet tehát a függőlegesen hosszan elnyúló tartalmak esetében, ha bizonyos pontokon nem felelsz meg a felhasználói várakozásoknak.

az-f-minta-megtorese

Ebből is látszik, hogy az F-forma figyelembe vétele ugyan hasznos a webdesignban, azonban nem kell mereven ragaszkodni hozzá, és minden áron követni. Lehet, hogy azzal teszel jobbat a weboldaladnak, ha időnként megtöröd a mintát.

(A szöveg ezen bejegyzés alapján készült.)

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.