Keresés
Header Háttér

Webshark Blog

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

2019-02-270 komment

Mi az a “hajtás felett” a webdesignban? És milyen legyen a weboldalad hajtás feletti része?

Tartalomjegyzék
Bővített tartalomjegyzék

A “hajtás felett” fogalma örök téma a webdesignban. Egy weboldal hajtás feletti része minden weboldal esetében kulcsszerepet játszik, különösen most, a minimalista weboldalak időszakában, amikor néha ez az egyetlen része a weboldalaknak, ami meg tudja fogni a látogató tekintetét. (2020.06.16. – Új fejezetekkel bővítettünk: Mi jelenjen meg a hajtás feletti részen a weboldaladon? És mire figyelj a tervezésnél?)

Még mindig gyakran hangzik el weboldalak tervezésekor, elemzésekor, hogy mennyire lényeges az a tartalom, ami a hajtás fölé kerül. Elviekben, ha az olvasó itt nem találja meg, amit keres, akkor rendkívül gyorsan továbbáll weboldalról. Ezt persze árnyalják az újabb tanulmányok, melyekből az is látszik, hogy ha nem is olyan fontos, mint jó pár éve volt, még mindig megfontolást érdemel, csak kicsit másként kell megközelíteni.

Mit jelent a “hajtás felett”?

A hajtás fogalma még a nyomtatott sajtó korából származik, amikor kettéhajtották a lapokat, és így szállították, így helyezték ki az újságosok a standra. Nyilván ilyenkor látszania kellett a lényegnek, a leghúzósabb sztorinak, hogy a hírekre éhes közönség bevásároljon a lapból. Nyilván nem álltak neki forgatni, hogy mégis mi van a lap alsó felén, hanem a szembeötlő információ alapján döntöttek.

Hajtás felett a nyomtatott sajtó korában

A weben ugyanez a megjelenés lett a sztenderd a digitális tartalmaknál, mivel a monitorok képaránya hasonló volt egy félbehajtott újságéhoz, és kinyitva, illetve legörgetve előbukkantak a további tartalmak. Így tehát a weben a hajtás feletti tartalomnak az számított, amit a felhasználók görgetés nélkül láthattak egy adott weboldalon. Nem is volt ezzel sokáig gond, két okból is.

Az egyik, hogy amikor még új volt az online világ az emberek számára, és idegen a számítógép, meglehetősen bizonytalanul kezelték azt. Ekkor még nem állt rá a felhasználók keze a görgetésre, vagyis nem nem volt rutincselekvés a scrollozás. Így nagyobb arányban maradtak a hajtás felett.

A másik ok pedig az, hogy sokáig alig volt variációja a képernyőfelbontásoknak. Vagy mindenki a 640×480-as felbontást használta, vagy a következő lépésben a 800×600-ast, majd 1024×768-ast. Ezután elkezdett bonyolódni a dolog, sok lett a képernyőméret, sokféle a felbontás, majd megjelent az okostelefonok, a tabletek számtalan variációja.

Emlékszünk még?

Hamarosan pedig felbukkant a reszponzív design is. Ilyenkor minden képernyőfelbontásnál máshogy néz ki az oldal, minden eszközön kicsit más mennyiségű információ kerül a hajtás fölé és alá, attól is függően, hogy éppen hogy forgatjuk az eszközt, vagyis vertikálisan vagy horizontálisan tartjuk.

Mindez azt jelenti, hogy a sokféle kijelzőméret és -felbontás korában felmerül nem csak a létjogosultságra vonatkozó kérdés, hanem az is, hogy mégis milyen eszközön kell a fontos tartalomnak a hajtás fölé kerülnie? Milyen képernyőfelbontás számít ilyenkor?

Igaz ugyan, hogy a Google Analytics adatai alapján bármely weboldal esetén gyorsan meg tudjuk határozni, hogy a legtöbben milyen felbontás mellett és milyen eszközön érik el az oldalunkat, de ez nem sokat jelent. Ha jobban megnézzük az adatokat, akkor azt látjuk, hogy számtalan a variáció, és a legnagyobb csoport is csak egy töredéke a teljes látogatószámnak.

Miért fontos még mindig a hajtás felett? És mit mutatnak a vizsgálatok?

Míg a web hajnalán a felhasználókra egyáltalán nem volt jellemző, hogy görgetnének a weboldalakon. 1997-ben kezdődött egy változás, amikor a hosszabb weboldalak gyakoribbá váltak, így az emberek kénytelen voltak megtanulni görgetni. Ugyanakkor továbbra is a hajtás feletti információk kapták a legnagyobb figyelmet: még a 2010-es vizsgálatok is azt mutatták, hogy a felhasználók tekintete a weboldalon eltöltött idő 80 százalékában a hajtás felett mozog.

2010-től kezdődően – vagyis a reszponzív design és a minimalizmus terjedésének hatására – még hosszabbá váltak a weboldalak. Ezért a Nielsen Norman Group 2018-ban elérkezettnek látta az időt egy újabb szemkövetéses vizsgálatra.

A kutatásban 1920×1080-as kijelzők használatával 120 személy vizsgáltak, illetve több ezer oldalt, köztük híroldalakat, webáruházakat, blogokat, stb. Ezeken kellett a legkülönfélébb feladatokat elvégezni. A cél nem az volt, hogy az egyes oldalakat elemezzék, hanem az, hogy a felhasználói viselkedést jellemezni tudják. Majd az adatokat összevetették a korábbi vizsgálatuk eredményeivel is.

Alapvetően két változás lehetett hatással az emberek viselkedésére: az egyik a nagyobb kijelzők, a másik pedig az új webdesign trendek. Ezekhez ugyanis valószínűleg alkalmazkodtak a felhasználók. A kettő hatását ugyanakkor nem lehet egymástól elkülöníteni, de úgy vélték, hogy ez nem is olyan fontos, hiszen egyiket sem lehet már “visszacsinálni”, még akkor se, ha akarnánk.

Mint kiderült, a legújabb kutatásban az emberek a weboldalon eltöltött idő 57 százalékát a hajtás fölött töltötték. 74 százalékot pedig az első két kijelzőnyi területen, vagyis 2160 pixelig görgettek le. Az elemzés egyébként nem vette figyelembe a weboldalak hosszát, így a kapott értéket torzíthatták a rövid oldalak, és nem csak annak az eredménye, hogy 2160 pixel után feladták az emberek a görgetést.

Mindenesetre a számok jelentős mértékben különböznek a 2010-es eredményektől. Akkor még az emberek az idejük 80 százalékát töltötték a hajtás felett. Miközben persze a figyelem nagymértékű csökkenése a hajtás után korábban és most is megfigyelhető volt. Ez itt látszik jól a grafikonon:

A weboldalakon, a hajtás felett eltöltött idő aránya

Fontos azonban, hogy nem minden oldal azonos hosszúságú. Ezért, hogy megállapítsák, miként oszlik meg a felhasználók figyelme egy oldalon – attól függetlenül, hogy az milyen hosszú -, felosztották 20 százaléknyi részekre az oldalakat. Ez alapján megállapították, hogy a felhasználók idejük 42 százalékát a felső húsz százalék böngészésével töltötték, illetve 65 százalékban a felső 40 százalékkal foglalkoztak. (A keresőben a találati oldalakon ezek az arányok még nagyobbak voltak, vagyis az embereket elsősorban az első találatok érdekelték).

De ha a hajtás feletti területet nézzük, azon belül is inkább a felső részen lévő információk keltették fel a figyelmet: 65 százaléknyi időt a hajtás feletti rész felső felén töltöttek az emberek.

A lényeg tehát az, hogy míg 57 százaléknyi idő jutott az oldal hajtás feletti részére, már csak 17 százalék a második kijelzőnyi részre, míg a maradék 26 százalék az összes többire. Ez azt jelenti, hogy minél közelebb van egy információ az oldal tetejéhez, annál nagyobb az esélye annak, hogy az emberek el fogják olvasni.

Ezt megerősítették az olvasási minták is. A legtöbb felhasználó az úgynevezett F-mintát használta – amit akkor szoktak, ha egy weboldal nincs megfelelően strukturálva -, vagyis gyakrabban néztek a weboldalak felső részére, és kevésbé érdekelte őket az oldal alsó része. De még akkor is, ha a tartalom kellően strukturált volt, inkább az oldalak felső része érdekelte a felhasználókat. Egyébként pedig nagyon hatékonyan megtalálták az oldalon azokat az információkat, melyek fontosak voltak a feladatuk végrehajtása szempontjából, így ez sem eredményezte azt, hogy az oldal alján körülnézzenek.

Ennek ellenére az is látszik, hogy a 2010-es vizsgálatokhoz képest csökkent a hajtás felett eltöltött idő. Milyen következtetéseket lehet ebből levonni? Az NNG szerint először is azt, hogy a designerek jó munkát végeztek, és sikerült rávenni arra az embereket, hogy görgessenek. Vagyis bár tisztában voltak a hosszú weboldalak hátrányaival, ezt sikerült bizonyos mértékben mérsékelni. Másrészt pedig az emberek egyre inkább rá lettek szoktatva a görgetésre azáltal, hogy több lett a görgetést igénylő oldal.

Legalábbis bizonyos mértékig. Még mindig kijelenthető ugyanis, hogy az emberek nem szeretnek sokat görgetni, és ritkán jutnak tovább három kijelzőnyi hosszúságnál. Míg 8 éve még a hajtás felett töltötték az idejük 80 százalékot, most a három kijelzőnyi területen töltenek 81 százalékot. Az emberek tehát csak akkor görgetnek lefelé, ha erre van okuk. A figyelem továbbra is elsősorban a weboldalak felső részére irányul. Ez az a rész, mely a leginkább felfedezhető, és a legtöbben megtekintik.

Érdekes ugyanakkor, hogy a felbontás növekedése nem eredményezte a görgetési hajlandóság csökkenését. Ennek oka talán az lehet, hogy a designerek nem kihasználják a nagyobb felbontás nyújtotta előnyöket, hanem a tartalmakat nagyobb távolságra helyezik egymástól. Az információsűrűség tehát valószínűleg túl nagy volt korábban, ezért alakultak ki zsúfolt, zavaros oldalak.

Mi jelenjen meg a hajtás feletti részen a weboldaladon?

A hajtás feletti rész az a része a weboldalnak, amit az emberek az első másodpercekben látnak, amikor megérkeznek a weboldalra. Ez a rész valamiféle meghívóként működik, és arra próbálja rávenni a felhasználókat, hogy nézzenek jobban körül a weboldalon. Ezért a legalapvetőbb információkat kínálja a weboldalról, így az emberek pillanatok alatt képeset felfogni az oldal lényegét. 

A szervezőelv alapvetően az, hogy felülre kerülnek a fontos dolgok. Minél lényegesebb egy információ a weboldaladon, annál feljebb kerüljön. Az, hogy mi a fontos, eszköztől is függhet: mobilon fontosabb lehet a telefonszám vagy az elérhetőség és térkép, mint desktopon, így ezek más pozícióba csúszhatnak. Minden eszközön látható lesz a logó, a menü, a címsor, a felső és legfontosabb kép, azonban, hogy a szövegből és esetleg a többi képből mennyi látszik, az eszközönként eltérő lehet.

A fejlécek oldalanként eltérhetnek, vagyis jellemző, hogy a főoldal egy kicsit nagyobb, míg az aloldalak szinte csíkká keskenyedő fejlécet kapnak. Ilyenkor arra kell figyelni, hogy a csökkentett méretű fejlécek is viseljék a főoldali fejléc tulajdonságait, de azt mintegy rövidítve tegyék közzé. 

A hajtás feletti rész feladata az, hogy a felhasználók legalapvetőbb kérdéseire választ adjon: mit képvisel a márka, milyen termékeket, szolgáltatásokat kínál, hogyan lehet kapcsolatba lépni vele. Mindezek mellett megmutatja a weboldal minőségét és identitását is. Amennyiben pozitív érzelmi reakciót vált ki a felhasználóból, akkor ő azt érzi, hogy valami értékesbe futott bele, így a weboldal fejléce teljesítette feladatát. 

Fő elemei:

  • logó vagy bármilyen márkaazonosító
  • call to action
  • valamilyen szöveg vagy címsor
  • navigációs elemek
  • kereső

Nem kell persze minden felsorolt elemnek kötelező jelleggel szerepelnie rajta, illetve meg kell találni az egyensúlyt az információk és a harmonikus elrendezés között. Vagyis csak annyi információt helyezz el itt, amennyi feltétlenül szükséges. Ha túlzsúfolod, az rontani fog rajta. Ugyanakkor a legfontosabb linkek már itt jelenjenek meg. 

Szintén nem jó túlságosan üresre tervezni a fejlécet, hiszen, ha a felhasználó a weboldaladra megérkezve nem tudja a fejléc alapján kitalálni, hogy miről szól az oldal, mit kínálhat neki, akkor nem biztos, hogy nekiáll a weboldalad más részein ez után nyomozni. A minimalista fejlécek a logón kívül jellemzően csak a legfontosabb linkeket tartalmazzák a weboldalak fő részeire. 

Mire figyelj a tervezésénél?

Az első fontos kérdés a méretre vonatkozik. Akadnak, akik megpróbálnak erre precíz számokat meghatározni, azonban manapság a legnagyobb kihívást inkább az jelenti, hogy elfogadhatóan jelenjen meg mindenféle kijelzőn a weboldal. Mert még ha két kijelző mérete azonos is, a felbontásuk különbözhet, így a felhasználók mást és mást látnak a weboldaladból.

Mivel pontosan nem mindig lehet tudni, hogy kinek mekkora rész jelenik meg a kijelzőjén az oldaladból görgetés nélkül, ezért fontos, hogy megpróbáld rávenni a felhasználókat a görgetésre. Arra kell bátorítanod őket, hogy fedezzék fel a weboldal többi részét. Tartalmi szempontból ez azt jelenti, hogy a weboldal felső részén valamiféle ízelítőt nyújtasz a tartalomból, mely a weboldalon található. Olyannak kell lennie az itt megjelenő tartalomnak, hogy az emberek érezzék a késztetést a folytatásra. Az igényes tartalommal – akár történetmeséléssel, azaz egy “történet” elkezdésével – is segítheted ezt, de egyes designelemekkel is:

Annak megítélésében, hogy az emberek mennyire hajlandóak a weboldaladon a görgetésre, a hőtérképek segítenek. Egy görgetési hőtérkép például elárulja, hogy a látogatók meddig görgettek le, sikerült-e rávenned őket, hogy tovább tekintsenek az oldal tetejénél.

Nem érdemes tehát valamilyen méret mellett leragadni a hajtás feletti részt tekintve, inkább néhány egyszerű szabályt tanácsos követni. Például, hogy olyan magasságú legyen, ami nem akadályozza a tartalom befogadását. Ha egy információ-központú oldalról van szó, akkor szerencsés lehet egy keskenyebb fejléc, ugyanakkor landing oldalak esetében meggyőzőbb lehet egy nagyobb fejléc. Nem árt egyébként, ha még a hajtás felett látszik valamennyi a fejléc alatti tartalomból, mert így a felhasználó könnyebben elkezd görgetni.

A vizuális hierarchiát tekintve figyelembe kell venni az úgynevezett F-mintát, melyet a felhasználók tekintete általában bejár a weboldalakon. Az emberek tekintete a bal felső sarokból indul egy ismeretlen weboldalon. Ezért kell itt megjelennie a logónak, amivel a logókról szóló anyagunk egy külön fejezetében foglalkoztunk. 

A mellette elhelyezkedő navigációs sáv megtervezésénél figyelned kell arra, hogy ne tedd azt túlzsúfolttá, mert a túl sok link nyomasztóan hat a felhasználóra. Néha az egész weboldal struktúráját át kell alakítani annak érdekében, hogy ne nőjön túl nagyra a navigációs menü. Elterjedt az elmúlt években az úgynevezett hamburger menü is, melynek előnye lehet, hogy segíti a fő elemekre történő összpontosítást, azaz nem vonja el a felhasználó figyelmét a lényegről. Ugyanakkor webáruházaknál nem praktikus a használata. 

A további tartalom attól függ, hogy milyen típusú a weboldal. Ha egy terméket akar eladni, akkor a linkek mellett megjelenhet egy hero image, hiszen a cél itt a termék hatékony bemutatása. Ugyanakkor egy webáruháznál vagy egy üzleti weboldalnál az a cél, hogy a felhasználó könnyen navigáljon, találkozzon a legújabb ajánlatokkal, vagy akár, hogy lássa a korábbi rendeléseit. A fejléc által kommunikált dolog tehát aszerint változik, hogy mi a fő célja a weboldalnak. 

Ha kép jelenik meg itt, akkor talán mondani sem kell, hogy a jó minőségen túl el kellene mondania egy történetet (a cégről, a termékről), érzéseket kell kiváltani, motiválnia a felhasználót, hogy az oldalon maradjon. Fotó helyett manapság elég népszerűek a rajzolt illusztrációk, melyek sokkal maradandóbb nyomot képesek hagyni a látogatóban, mint egy sablonos fotó. Szintén használható valamilyen videó vagy animáció. 

Végül, általában szerepel a fejlécben valamilyen call to action is, még ha ez talán nem is az oldal fő CTA-ja. Itt az egyik fontos tényező annak jó elhelyezése, mely képes kattintásra ösztönözni a felhasználót. Emellett persze a CTA-knál számos más szabályt is figyelembe kell venni, ezekről itt írtunk bővebben

Fontosak még a választott betűtípusok, hiszen bár lehet, hogy csábít egy egyedi betűtípus vizuális megjelenése, szükséges, hogy jól olvasható legyen az itt megjelenő szöveg. A nagyobb fejléceknél használható látványosabb tipográfia is, mely képes felkelteni a látogatók érdeklődését, azonban általában mégis érdemesebb a könnyen olvasható, egyszerűbb betűknél maradni.

Arra azonban figyelj, hogy ne próbálj meg mindent az oldal tetejére zsúfolni! Ez többet árthat, mint amennyi előnnyel jár. Szerinted mi a hatékonyabb: ha egy kijelzőnyi területen látható egy CTA és egy hozzá tartozó gomb, vagy ha ezen kívül még 4-5 üzenetet vagy más információt elhelyezel mellette? Ezzel csak összezavarod a látogatókat, akik a zsúfoltságban nem találják meg a legfontosabb elemet.

Összefoglalva tehát következtetéseket lehet mindebből levonni a weboldalad designjára nézve?

  • A weboldalad felső részét tartsd meg a legfontosabb tartalmak, vagyis a lényeges üzleti célok számára. Az alsóbb részekre pedig kerülhetnek a másodlagos vagy kapcsolódó információk. Mindenesetre a fő CTA-nak a hajtás felett kellene lennie.
  • Használj megfelelő formázást annak érdekében, hogy a fontos tartalomra irányítsd a figyelmet. Az emberek számára fontosak az olyan jelzések, mint egy címsor vagy egy vastagon szedett szöveg. Ez jelzi számukra, hogy mi a fontos, és megmutatja a tartalom új szegmenseit. Ezeket a jelzéseket az egész weboldaladon következetesen használd!
  • Mivel fontos, hogy tovább görgessenek, ezért figyelj arra, hogy az emberek ne higgyék azt az oldal közepén, hogy az már véget is ért. Ha valahol arra utaló jelzéseket találnak, hogy az oldal véget ért, akkor nem görgetnek tovább. Legyenek tehát olyan jelzések, melyek azt mutatják, hogy a tartalom folytatódik.
  • Végül érdemes azt is tesztekkel meghatározni, hogy mekkora az ideális oldalhossz, és hogy az az információ, mely érdekli őket, könnyen elérhető-e számukra.
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.

Comments are closed.