Keresés
Header Háttér

Webshark Blog

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

2020-03-110 komment

Milyen legyen egy weboldal hajtás feletti része?

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. 

Természetesen a webdesigner is általában sok időt és kiemelt figyelmet fordítanak a weboldalak legfelső részének megtervezésére. Ami azért is fontos, mert a Google szerint a látogatók mindössze 50 ms alatt véleményt formálnak egy weboldalról, de már 17 ms alatt kialakul valamiféle elképzelésük az oldalról. Itt kezdődik tehát az ügyfelek márkával való ismerkedése. De mire figyeljünk a weboldalak fejlécének tervezéséért? A UX Planet egy bejegyzésben összeszedett néhány megfontolandó tanácsot a fejlécek kialakítására vonatkozóan.

Abból indulnak ki, hogy a fejléc a weboldalak felső részének tekinthető. Korábban csak a legfelső sávot értettük alatta, mely a logót, kapcsolati információkat tartalmazta, most már azonban a teljes hajtás feletti részt fejlécnek tekinthetjük. Már ha meg tudjuk határozni, hogy mi is esik a hajtás fölé.

Mindenesetre ez az a része a weboldalnak, amit az emberek az első másodpercekben látnak, amikor megérkeznek a weboldalra. A fejléc 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 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é. 

Mi szerepeljen a hajtás feletti részen?

A fejléc 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. Mekkora legyen az itt elhelyezkedő kép? Már persze, ha használsz képet. 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.

Nem érdemes tehát valamilyen méret mellett leragadni, 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 például 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.

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.