Keresés
Header Háttér

Webshark Blog

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

2018-07-040 komment

Miért fontos a lábléc a weboldaladon? És hogyan alakítsd ki?

Talán úgy gondolsz a weboldalad legalsó részére, mint aminek nincs túl nagy jelentősége, mindenféle link vagy egyéb információ – amit máshol nem tudsz elhelyezni – belezsúfolható. Pedig a lábléc nagyon hasznos is lehet a számodra, ha a megfelelő navigációs lehetőségeket, egyéb funkciókat, információkat jól jeleníted itt meg.

Amikor a felhasználók elérkeznek egy weboldal aljára, akkor onnan vagy a weboldal egy másik oldalára navigálnának, vagy pedig egy korábban olvasott részhez térnek vissza. Ha nincs megfelelő navigációs eszköz a láblécben, akkor fel kell görgetniük a weboldal tetejéig, hogy az ott megjelenő navigációs menüt használják. Ez egy plusz erőfeszítés a felhasználók részéről.

Mi legyen a láblécben?

Ha viszont egy oldaltérképet helyezel el minden weblapod láblécében, akkor a lap aljára érkezve az emberek találkoznak egy jól használható navigációs eszközzel, melynek segítségével a weboldalad más részeire is eljuthatnak. Minél nagyobb a weboldal, annál több navigációs pontra van szüksége rajta a látogatóknak. Ha a láblécben is helyezel el navigációs linkeket, azzal némi terhet veszel le a központi navigációdról.

A láblécben olyan linkeknek kell szerepelniük, melyek minden felhasználó számára hasznosak lehetnek, tekintet nélkül arra, hogy a weboldal mely részén tartózkodnak éppen. Ez azt jelenti, hogy ugyanúgy viselkednek a láblécben szereplő linkek, mint a weboldalad központi navigációs menüje.

Segíti a weboldalad felfedezését, megmutatja a felépítését

A lábléc különösen hasznos abból a szempontból, hogy segítségével a weboldal-hierarchia különböző pontjait mutathatod meg a látogatóknak, melyek létezéséről egyébként nem is tudnának. Ha viszont javítod bizonyos navigációs pontok láthatóságát, az arra is bátorítja a felhasználókat, hogy felfedezzék a weboldalt.

Az itt elhelyezett direkt linkek révén a felhasználók mindössze egy kattintásra kerülnek attól, hogy akár egy teljesen más tartalmi kategóriával is megismerkedjenek, és új dolgokat fedezzenek fel a cégeddel vagy a termékeiddel kapcsolatban.

A lábléc segítségével megmutathatod a felhasználóknak a különféle szinteket a weboldal hierarchiáján belül. Így meghatározhatják hol található a célpont, és azonnal át tudnak lépni egy másik kategóriába vagy oldalra, ahol folytathatják a keresést. Ez különösen hasznos lehet az összetett, többszintes weboldalaknál, mivel az egyes kategóriák elhelyezkedése máshol talán nem mutatkozik meg ilyen világosan számukra.

A láblécek tehát több fontos funkciót is ellátnak: szorosabbá fűzik a kapcsolatot a kategóriák és egyes oldalak között, bátorítják a felhasználót, hogy felfedezze a kevésbé látható tartalmakat, miközben bemutatják a weboldal teljes struktúráját.

Hogyan alakítsd ki a láblécet?

Először is, döntsd el, hogy melyik funkciót szeretnéd kínálni elsősorban a felhasználóknak. A láblécben sokféle funkció megjelenhet. Mint láttuk, használható arra, hogy a weboldal fő kategóriáit felsorolja, vagy olyan különleges kategóriákat emeljen ki, melyek nincsenek jelen más navigációs részeken. Elhelyezhetők itt a kapcsolati információk, a támogatás, vagy akár a “Rólunk” rész is.

A kérdés elsősorban az, hogy melyik elem növeli leginkább a mozgás szabadságát a weboldaladon belül, anélkül, hogy feláldozná azt a teret, melyek ezen oldalak tartalmának megjelenítésére rendelkezésre áll. Fontos, hogy a lábléc az oldal teljes szélességét elfoglalja, és jelen legyen minden egyes weblapon. Győződj meg azonban arról, hogy egyik lapon sem foglal el túl nagy helyet!

Az olyan linkeket, mint a “kapcsolat” vagy a “partnereink” mindig sorold be valamilyen könnyen megérthető kategória alá. Úgy rendezed el a linkeket, hogy könnyen be lehessen azonosítani, melyik kategória alá tartoznak. Ennek érdekében bevetheted a whitespace-t vagy vonalakat, melyek által kialakíthatók a csoportok. Végül pedig elhelyezheted még a jogokkal és egyéb információkkal kapcsolatos részt a lábléc legalján.

De lássuk, hogy mire kell figyelni a kialakításánál?

Azt tedd a láblécbe, amit a felhasználóid várnak!

A legtöbb látogatónak vannak bizonyos várakozásai azzal kapcsolatban, hogy milyen információkra számíthat egy láblécnél. Ha ezeket az információkat helyezed el itt, akkor nagymértékben megkönnyítheted a weboldalad használatát. Ugyanakkor persze emiatt nem muszáj minden weboldal láblécének ugyanolyannak lennie. Mi szokott általában a láblécbe kerülni?

  • Oldaltérkép és kiterjesztett navigáció
  • Kapcsolati információk, cím, térkép
  • Közösségi média linkek és widgetek
  • E-mail és hírlevél feliratkozás
  • Kereső
  • “Rólunk” rész
  • Ajánlások
  • Hírek, friss blogbejegyzések vagy események

Emellett akad néhány olyan apró dolog, ami könnyen és elvárható módon megjelenhet a láblécben. Ilyen

  • a copyright szöveg
  • link az adatvédelmi oldalra
  • szakmai kapcsolatok, hivatkozások

Legyen egy célod vele!

Mielőtt tehát nekiállnál tervezgetni a lábléc vizuális designját, azt kell elképzelned, hogy az emberek miként és mire fogják használni a lábléced. Egy jó lábléc nem egy hulladéktároló, ahol mindenféle linkeknek és töredékinformációknak helye van – annak ellenére, hogy nagyon sok weboldalon ezt a célt szolgálja.

A jó lábléccel a weboldal tulajdonosának kell, hogy legyen egy értelmes célja, pontosan úgy, mint a weboldal többi részével. Például:

  • elhelyezhető itt egy oldaltérkép vagy a legnépszerűbb oldalak és linkek listája, vagy épp kapcsolódó tartalmak, melyekre szeretnéd terelni az embereket
  • kapcsolati információk és lehetőségek, térkép, ha az a legfontosabb, hogy megtaláljanak
  • lehet ez egy közösségi média rész is linkekkel a közösségi média csatornáidra
  • sőt még call to actiont is helyezhetsz ide, mintegy utolsó lehetőségként a felhasználók számára a konverzióra

Rendezd el gondosan a linkeket!

Azok a weboldalak, melyeken sok a tartalom, vagy nagyon különféle információk szerepelnek, érdemes megfontolniuk egy nagyobb lábléc alkalmazását, de úgy, hogy a linkek csoportosítva szerepeljenek benne. A linkek elrendezésével segítheted a felhasználókat abban, hogy megtalálják a weboldalnak azt a részét, mely a legrelevánsabb a számukra. Gondolj erre úgy, mint a mega menükre. Nem véletlen, hogy a webáruházaknál gyakran találkozni ezzel a megoldással.

Gondosan írd meg a szövegét!

Azért, mert csak a legvégén kerül rá sor, még oda kell figyelni a lábléc kialakítására. Ezért az itt megjelenő szöveg stílusa és hangneme illeszkedjen a weboldal többi részéhez. A színek és a designelemek is legyenek azonosak.

Ne fukarkodj a whitespace-szel!

A kisméretű szöveg és a zsúfolt megjelenés biztos bukás. A láblécnél se feledkezz meg a whitespace fontosságáról: hagyd lélegezni az információkat, így azok könnyebben áttekinthetők lesznek. Minél nagyobb a lábléced, ez annál fontosabb. Érdemes egyébként az analitika segítségével ellenőrizni, hogy milyen linkekre kattintanak az emberek a láblécedben.

Válaszd el a weboldal többi részétől!

Ahhoz, hogy a legtöbbet ki tudd hozni a láblécből, meg kell különböztetned a fölötte lévő résztől. Miközben úgy kell kinéznie, mint egy olyan blokknak, ami a weboldalhoz tartozik, elegendő kontrasztot kell kialakítani, hogy a felhasználó megértse: az oldal aljához ért, ahol bizonyos kulcsfontosságú információkat találhat.

Gyakori technika, hogy a kontraszt kialakítása érdekében a láblécet egy színes dobozba helyezik, mely így elkülönül a weboldalon használt háttértől. Tehát, ha a weboldalon világos hátteret használsz, akkor a lábléc lehet sötét hátterű. Ez a kontraszt jelenti a vizuális jelzést arra, hogy a weboldalnak ez a része valamiért más, mint a többi. Mivel eltér, megállítja és gondolkodásra készteti a felhasználót az ott látott információkkal kapcsolatban.

Legyen reszponzív!

Habár egy egyhasábos lábléc jól nézhet ki desktopon, zsúfolt és érthetetlen lehet mobilon. Annak érdekében, hogy ezt elkerüld, használj hasáb alapú megoldást. Így a lábléced könnyen össze tud húzódni mobilon, amikor mindössze egy hasábnyi résznek van helye. Ez annál fontosabb, minél nagyobb méretű a lábléced. Arra is figyelj, hogy ne csak a megjelenés legyen reszponzív, hanem az interakciókkal se legyen gond mobilos megjelenésnél.

Persze nem muszáj mindenféle tartalomtípust belezsúfolni csak azért, mert többhasábos elrendezést használsz. Sok esetben a nagyméretű láblécbe is mindössze egy óriási kapcsolati űrlap vagy épp egy figyelemfelkeltő call to action kerül. Az alábbi példánál a tartalmi terület olyan nagy, hogy az egy hasáb ellenére is jól mutat kisebb méretnél. Csak arról kell ilyenkor megbizonyosodnod, hogy a szöveged vagy a CTA-gombod még mindig elegendően nagy.

Milyen gondok lehetnek a láblécekkel?

A legnagyobb problémát az jelenti, amikor egyre több és több dolog kerül be egy weboldal láblécébe. Ezek egy része ráadásul felesleges, mint például a partner-oldalakra mutató linkek, vagy az ismétlődő navigációs pontok. Korlátoznod kell tehát a láblécbe kerülő elemek számát, mivel a cél az, hogy egy alternatív navigálási lehetőséget kínálj az embereknek, vagy felhívd a figyelmüket olyan lehetőségekre, melyek a weblap más részen nem jelennek meg.

A lábléc tehát ne tartalmazzon minden olyan linket, funkciót, lehetőséget, információs amit esetleg máshol nem tudsz elhelyezni! Ezek ne rakódjanak le valamiféle hordalékként az oldal aljára. Fogd fel úgy a láblécet, mint valami értékes helyet, ahol olyan linkeket és oldalakat mutathatsz meg a látogatóknak, melyek javítják a felhasználói élményt, és amelyekkel könnyebben navigálhatnak a weboldalad tartalmában.

A kategóriák és linkek elrendezése ugyanakkor egy másik lehetséges problémát is felvet. Mégpedig azt, hogy ha az elemek teljesen véletlenszerű sorrendben jelennek meg, akkor a felhasználók nem foglalkoznak a lábléc tartalmával, és inkább egy rendezettebb lehetőséget keresnek a navigálásra. Vagyis fontos a megfelelő struktúra és rendszer kialakítása itt, mivel ez segíti az embereket abban, hogy azonosítsák az érdekes és hasznos linkeket, oldalakat anélkül, hogy kattintaniuk kellene.

 

Összefoglalva tehát elmondható, hogy a lábléc képes arra, hogy minimalizálja a felhasználói erőfeszítést a weboldalon történő navigálás során. Amikor elhelyezed a megfelelően válogatott linkeket itt, akkor lehetővé teszed az embereknek, hogy felfedezzék a weboldalad további részeit, vagy közvetlenül eljussanak a számukra releváns információkhoz anélkül, hogy a weboldal tetején lévő navigációs menüt kellene használniuk. Ezáltal levehető a teher egy része a központi navigációról, elhagyhatók elemek, így pedig egy sokkal letisztultabb és vonzóbb felületet kapsz. Ha jól használod, a lábléc olyan támpontot jelent az embereknek, mely által simábbá válik a felhasználói út, ezáltal pedig javul a teljes felhasználói élmény a weboldalon.

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.