Barion Pixel
Ez itt a lifelong learning

Sosem tudhatsz eleget!

Blog

Elrendezési minták a webdesignban II. – F-pattern

2017. augusztus 16. | Dörnyei Barbara

# # # # # #

Az előző posztban az egyik leggyakoribb elrendezési mintáról, a „Z” mintáról írtam, most következzen az F-minta, vagy F-pattern.

Az F-pattern olvasási minta annyiban megegyezik a Z-vel, hogy a kiinduló pont ugyanaz, itt is a bal felső sarokban kezdjük az olvasást, elolvassuk az első sort, ami sok esetben a címsor lesz, aztán vissza a bekezdés bal oldalára, majd onnan lefelé. Elolvassuk az érdekesnek tűnő egy-két sort, aztán megint vissza balra és onnan lefelé.

Ezt a mintát igazolta a Nielsen Norman Group, immár bő egy évtizeddel ezelőtt végzett kutatása is, melyben a weboldal olvasási szokásokat vizsgálták, a vizsgálat eredményeként hőtérképeket készítettek, melyekből elemézések készültek. Azt találták, hogy az olvasó általában két sort, olvas balról jobbra, aztán halad tovább a bal oldalon lefelé, így alakul ki a leginkább F betűre hasonlító minta.

 

Mit tudunk a webdesign terén ebből hasznosítani?

Míg a Z-pattern a kevesebb szöveges tartalommal készülő oldalaknál hasznosítható jól, addig az F-patternt érdemes alkalmazni, ha több szöveges tartalmat szeretnénk megjeleníteni, mert az olvasó számára az a megszokott, hogy balról jobbra és fentről lefelé olvas. Az köztudott, hogy a weboldalak látogatói, de úgy általában a felhasználók, már nem nagyon olvasnak, hosszabb szöveget meg pláne nem, hanem inkább csak szörfölnek, és böngésznek az oldalakon. Tulajdonképpen csak átfutják a szöveget, ami valamiért megragadja a figyelmüket, azt elolvassák és mennek is tovább.

Ilyen jellegű oldalaknál tehát érdemes figyelmbe venni, hogy az igazán fontos mondanivaló, vagyis amit mindenképpen szeretnénk, hogy elolvasson a látogató az az oldal felső részére kerüljön, minél lejjebb van, annál kisebb rá az esély, hogy elolvassa. Az F formából egyértelműen kiderül, hogy a leginkább olvasott és kattintott rész a képernyő bal felső sarka és a bal oldala, ahogy lefelé haladunk, a fontosság egyre csökken.

 

 

Az F-pattern elrendezére lehet példa egy hírportál oldala, ahol az oldal tetején mindig a legfrisebb, leginkább ütős híreket teszik elénk, ahogy egyre lejjebb haladunk, kevésbé aktuális, vagy hangsúlyos témákat találunk. Az átlagos olvasó a vastag betűs részeket, címsorokat olvassa el, aztán ami érdekesnek tűnik, azt bővebben is. Az szintén nagyon jellemző, hogy a látogató cikkek rövid kivonatát sem olvassa el, hanem a címsor alapján dönti el, hogy érdekes e számára a tartalom vagy sem.

Így működik ez például a Google esetében, ahol például ezért is igyekszik mindeki az első találati helyek egyikét megszerezni, az első néhány találaton túl már csak a nagyon elszánt keresők jutnak tovább.

 

Az F-pattern alapján tervezett oldalaknál is figyelembe kell venni tehát, hogy az igazán fontos mondanivaló, vagyis amit mindenképpen szeretnénk, hogy elolvasson a látogató az az oldal felső részére kerüljön, minél lejjebb van, annál kisebb rá az esély, hogy elolvassa. Az F formából egyértelműen kiderül, hogy a leginkább olvasott és kattintott rész a képernyő bal felső sarka és a bal oldala, ahogy lefelé haladunk, a fontosság egyre csökken.

Mindig gondolni kell arra, hogy az oldal milyen jellegű, milyen tartalmat akarunk megjeleníteni és az elrendezési módot ennek megfelelően kiválasztani. Ami megfelelő lehet az egyik oldalon, nem biztos, hogy a másikon is jól működik majd.

Iratkozz fel YouTube csatornákra!

blog

Virtuális asszisztens legyél vagy webdesigner?

Virtuális asszisztens legyél vagy webdesigner?

2024. február 01.

Mindkettő fantasztikus lehetőség arra, hogy elhagyd a hagyományos kereteket, mint szoros, rugalmatlan munkaidő, helyhez kötöttség vagy akár a bérplafon. Egy ponton találkozik is a két munkakör, ahol a grafikai munka már az asszisztenciába hajlik – designerként is végezhetsz weboldal adminisztrációt, közösségi média tartalom készítést vagy felügyeletet és virtuális asszisztensként is sokszor találkozni már-már tervezői munkába […]

Tovább a cikkre
Secured By miniOrange