5 legjobb gyakorlat a lenyűgöző weboldalláb tervezéséhez

Tanulja meg, hogyan kell megtervezni egy weboldal láblécét. Tippek arra, mit kell hozzáadni, mit nem kell hozzáadni, és példák a jó weboldal láblécére az inspirációhoz.


A weboldal láblécének legjobb gyakorlatai

Ha elhanyagolta webhelyének láblécét, és úgy gondolja, hogy ez a webhely legkevésbé értékes része, akkor ezek a megállapítások meggondolhatják.

  • Amikor a felhasználói tesztelés megjavította a láblécét, hozzáadva egy listát az üzleti és ügyfél-egyeztetett célokról, azok átalakításáról 50% -kal nőtt.
  • Amikor a Smart Insights egy új lábléc-mintát tesztelt egy luxus kézitáska webhelyén, az értékesítési konverziók 23,77% -kal nőtt a látogatónkénti bevétel 15,99% -kal nőtt.
  • 10 weboldalon egymillió névtelen online felhasználó adatait vizsgálva a Chartbeat megállapította, hogy a látogatók többet költenek „foglalkoztatott idejük” fele (66%) a hajtás alatt. Ez az oldal alsó szakaszára utal, azon rész alatt, amelyet a felhasználók azonnal látnak, amikor egy webhelyet nyitnak meg.
  • Az asztali látogatókkal összehasonlítva a mobil felhasználók tovább görgetnek egy oldalt, és valószínűbb, hogy kölcsönhatásba lépnek a lábléccel.

Miért számít a weboldal lábléce?

A láblécek nem csupán felesleges szerkezeti elemként jelennek meg az Ön weboldalán, de valójában számos előnnyel járnak a látogatók és az üzleti vállalkozások számára.

Előnyök a webhely látogatói számára

  • A láblécek segítenek nekik megtalálni a szükséges információkat: Legalább két ok miatt lehet, hogy az olvasók eljutnak weblapjának aljára: Tetszett nekik a tartalom, és többet szeretnének böngészni, vagy valami olyat keresnek, amelyet nem találnak a fejléc menükön. Azok számára, akik érdeklődnek a vállalata iránt, a láblécek segítségével más érdekes tartalomhoz vezetheti őket webhelyén. Megadhat linkeket olyan oldalakhoz, amelyek nem szerepelnek a fejléc menüben, például partnerségi és társult lehetőségeket.
  • Ez menti őket attól, hogy visszatérjenek a fejléchez: Ha az internetes látogatók elkapták a tartalmat, és többet szeretnének tudni, akkor nem kell visszamenniük az oldal tetejére. Közvetlenül azután, hogy a tartalma láblécben található, ahol megtalálja elérhetőségét, feliratkozhat hírlevelére, követhet téged a közösségi médiában, vagy felfedezheti más termékeit.

Előnyök a webhelytulajdonosok számára

  • Csökkenti a visszafordulási arányt: Ha a látogatókat más hasznos linkekhez irányítja, akkor valószínűbb, hogy más oldalakat nyitnak meg, és hosszabb ideig maradnak az Ön webhelyén. Ez csökkenti a visszafordulási arányt, vagy azon emberek számát, akik a webhelyed csak egy oldalát tekintik meg. Ez különösen fontos a kiskereskedelmi vállalkozások számára, akik azt akarják, hogy látogatóik folyamatosan „körülvásárolják” az oldalt.
  • Ez lehetővé teszi a hitelesség növelését: Egyes vállalatok az láblécbe mutatják akkreditációjukat, ügyféllogóikat vagy népszerű webhelyeket, amelyek bemutatták őket kompetenciájuk igazolására. Eközben a szerzői jogi szimbólumok, valamint a jogi részletekre mutató hivatkozások és az adatvédelmi irányelvek elősegítik a márkádba vetett bizalmat. Mindez segít befolyásolni a potenciális ügyfelek döntését, hogy érdeklődjön és végül vásároljon.
  • Segít fokozni az átalakulást:Amikor az első látogatók felszállnak az oldalára, akkor a felső sarokban láthatják a közösségi média linkeket. De a vásárló útjának ezen a pontján lehet, hogy nem érzik magukat arra, hogy online kövessenek téged. Mivel a tartalom megkönnyebbíti kíváncsiságát – és talán látják a tanúsítványokat és az ügyféllogót a láblécben, valószínűleg hajlamosabbak lesznek az előfizetőkhöz való csatlakozásra. Ha feliratkozási vagy kapcsolatfelvételi űrlapot helyez fel a láblécbe, megkönnyíti a látogatók számára, hogy előfizetővé vagy esetleg ügyféllé váljanak..
  • Ez egy további üzleti promóciós lehetőség: Amikor a lábléc segítségével felhívjuk a figyelmet a cégre, a lehetőségek végtelenek. A közösségi médiafiókokon és a feliratkozási űrlapokon kívül sajtóközleményeket, irodai helyszíneket és legújabb ajánlatait is tartalmazhatja.

Példa a weboldal láblécéreMég linkeket is elhelyezhet más vállalkozásaival vagy alkalmazásaival, ahogy a Goodreads teszi.

Mit kell prioritássá tenni az oldal láblécében?

Tekintettel a jól megtervezett lábléc előnyeire, ezt az értékes helyet számba kell venni.

Végső soron az, hogy mit priorizál a webhely láblécének kialakításában, rajtad múlik. De itt van néhány elem, amelyeket érdemes beépíteni.

Logója képviseli vállalkozását, és azt szeretné, hogy az olvasók emlékezzenek rá, és azonosítsák a nevével és az Ön által szolgáltatott értékkel. A logó használata a láblécben segít a látogatóknak, hogy emlékezzenek a cégre, és társítsák azt a tartalmához és a szolgáltatásaihoz, ezáltal javítva a márka elismerését.

Elérhetőség

A fizikai cím és a telefonszámoknak az oldal aljára helyezése bizonyítja, hogy törvényes vállalkozás vagy, és bizalmat teremt vállalata iránt. Ezenkívül ez megkönnyíti a leendő ügyfelek számára, hogy kérdéseivel forduljanak hozzá Önnek, megtakarítva számukra a főmenübe való visszatérés vagy a webhelyére való mélyebb bejutás problémáit..

Íme néhány további tipp a kapcsolattartási adatok felvételéhez:

  • Valódi cím – Ha azt szeretné, hogy az emberek könnyen megtalálják a fizikai áruházát, fontolja meg a térkép hozzáadását. Alternatívaként a címet kattinthatóvá teheti, így egy másik lapon megnyílik egy térkép.
  • Több ág – Ha több helyszíne van, akkor minden webhelyhez felveheti a kapcsolattartási adatokat. Ha ez nem lehetséges, illesszen be egy horgonyszöveget, amely megnyílik egy oldalhoz, ahol az összes ág található.
  • Hívógomb – Ha egy kattintásnyira van, megkönnyíti az ügyfelek számára a kapcsolatfelvételt.

szerzői jog

Ez megóvja tartalmát a webhely plagizációjától. Erõs jelzést ad arról, hogy jogi lépéseket tesz, ha valaki jóváírja az Ön által közzétett szövegeket, képeket vagy videókat. Míg szerzői jogi követelmények legalább országonként eltérőek, feltétlenül adja meg a © szimbólumot, a megjelenési évet és a szerzői jog tulajdonosának nevét.

Adatvédelmi irányelvek

E jogi követelmény betartása elősegíti az olvasók közötti bizalom kialakítását azáltal, hogy az adatgyűjtés átlátható. A ti Adatvédelmi irányelvek elmagyarázza a látogatóknak, hogy milyen személyes információkat gyűjt, hogyan tárolják és használják, egyértelmű lehetőségeket kínál a be- és kikapcsolódásra, valamint a harmadik fél szolgáltatóinak, akik esetleg ezeket az adatokat is használják.

Nézze meg üzleti helyének adatvédelmi politikáját, például az általános adatvédelmi rendeletet (GDPR), ha ügyfelei vannak az Európai Unióban. Ha vállalkozása harmadik fél szolgáltatóit használja, például a fizetés feldolgozására, akkor nézd meg követelményeiket is.

WebMD weboldallábléc példaPéldául a WebMD oldallábléte az adatvédelmi irányelveit egy oszlopba helyezi, amelyen más fontos iránymutatások találhatók. Megjelenítik a BIZONYOS pecsét, annak biztosítása, hogy a felhasználók komolyan veszik az adatvédelmi gyakorlatokat.

Használati feltételek

Link biztosítása a használati feltételek oldal (amelyre „szerződési feltételeknek” vagy „szolgáltatási feltételeknek” is hivatkoznak) nem jogi követelmény. Ugyanakkor védelmet nyújt a webhelytulajdonosoknak a felelősséggel szemben, és a felhasználók felelősségének felvázolásával megóvja webhelyét a szerzői jogok megsértése és más illegális cselekedetek, például a spam küldése ellen.

Cselekvésre hívás (CTA)

A CTA-k elhelyezése az oldal láblécében előfizetővé vagy követővé teszi a látogatókat, elősegítve ezzel a konverziók számát vagy az ügyfelek elmélyítését a vásárló utazásában. A CTA-k, különösen a közösségi média linkek beépítése szintén hozzájárul vállalkozásának mint egy megalapozott vállalkozásnak a festéséhez, és lehetővé teszi a látogatók számára, hogy kövessék Önt egy számára legmegfelelőbb platformon..

Számos CTA-t tartalmazhat, például:

  • Feliratkozás hírlevelére
  • Követek téged a közösségi médiában
  • A kapcsolatfelvételi űrlap kitöltése
  • Demó kérése
  • Regisztráció ingyenes próbaverzióra

cég Részletek

Miután lenyűgözte az olvasókat a tartalommal, és elérték az oldal alját, valószínűleg többet szeretnének tudni a cégéről.

Használja a láblécet annak hangsúlyozására, hogy vállalkozásának részletei, amelyeket esetleg nem tud beilleszteni a fejlécbe, például a következő oldalak linkjei:

  • Rólunk
  • blog
  • Karrier vagy munka
  • Partner- vagy partnerségi lehetőségek
  • Termékek vagy szolgáltatások felsorolása
  • sajtóközlemények
  • Vélemények
  • fehér papírok
  • Események

Vevőszolgálat

Az ügyfél-központú oldalláb-tervezés része annak biztosítása, hogy az olvasók számára esetlegesen igénybe vehető linkek – akár potenciális ügyfelekként, akár jelenlegi ügyfelekként – könnyen megtalálhatók.Ezek a támogatási hivatkozások tartalmazhatnak:

  • Segítség
  • GYIK
  • Tudásközpont
  • oktatóanyagok

Az e-kereskedelmi webhelyek a következő horgonyszövegeket is tartalmazhatják:

  • Szállítási és szállítási információk
  • Visszatérési és cserepolitikák
  • Fizetési módok elfogadva
  • Különleges ajánlatok

Példa a weboldal láblécére az ügyfélszolgálat nyújtásárólAhelyett, hogy egyszerűen mondaná a „Támogatás” kifejezést, a Könyvtár-kezelő láblécében szerepel a „Hogyan tudunk segíteni?” oszlop, és alatta a „Hol vannak a dolgaim?” horgonyszövegek és „hová szállítasz?” A stílus informális, beszélgető jellegű és segíti az őszinte segítségnyújtási vágyt.

Az oldallábléc kialakításának négy, melyet nem kell

1. Ugyanaz a fejléc és a lábléc menü

Időnként az internetes látogatók a lábléchez fordulnak, amikor nem találnak részleteket a fejléc menüben. Ebben az esetben az, hogy pontosan ugyanazokat a linkeket használja a fejlécben és a láblécben, nem ad hozzáadott értéket a látogatók vagy a vállalat számára.

Ossza meg a fontos oldalakat a fejléc és a lábléc között, hogy a webes látogatókat ne kerülje a szöveg. Használja a fejlécet a legmagasabb értékű oldalak számára, és a láblécet tartson fenn más fontos linkek számára.

Az Apple weboldalláblécének példájaVegye figyelembe, hogy az Apple ragadós fejlécében csak hat termékkategória szerepelt. Ezt kiegészítve egy lábléc tartalmaz hosszabb terméklistát (a bal szélső oszlop), valamint a szolgáltatások listáját.

2. Over-optimalizálása

A túl optimalizálás, akár a tartalomban, akár a láblécben van, nem hatékony módszer a keresési oldal rangsorolásának javítására. A Google rangsoroló algoritmusa felzárkózott ehhez a kulcsszó-kitöltési technikához, és ennek csak negatív hatása lehet a SEO eredményeire. A túlzott optimalizálás helyett válasszon egy maroknyi kulcsszót, és összpontosítson ezekre.

3. Nem fontos linkek

A lábléc nem megfelelő hely a webhely összes oldalának felsorolására. Azok a látogatók, akik az egész oldalt átvizsgálták és meglátták a láblécét, valószínűleg már érdeklődnek az Ön ajánlatai iránt. Ahelyett, hogy horgonyszövegeket dobna be, cserélje a láblécet hatékony navigációs eszközre. Vezesse őket a termék- vagy szolgáltatásoldalra, vagy hasznos linkekre, például oktatóanyagokra vagy a cég blogjára.

4. Zsúfolt elrendezések

Csábító lehet, hogy minél többet csomagoljon a webhely aljára. De egy zsúfolt lábléc kikapcsolhatja a látogatókat, és ezzel elhagyhatja az oldalt, vagy átvilágíthatja a horgonyszövegeket. Válassza ki a lényeges oldalakat, rendezze el ezeket, és használja ki a fehér teret a tiszta, olvasható lábléc kialakításához.

Hogyan készítsünk hatékony lábléc kialakítást?

Olyan sok módszer van a lábléc elkészítésére, amely esztétikai szempontból is kiváló és funkcionális. A fenti tippeken kívül az alábbiakban bemutatjuk az öt legjobb lábléc-tervezési gyakorlatot.

1. Tegye elsőként az olvashatóságot

Mivel a lábléc szövegek gyakran kicsik és az internetes látogatók hajlamosak ezeket lefojtani, olyan kialakításra van szüksége, amely biztosítja a szavak könnyű olvashatóságát. Annak érdekében, hogy a lábléc olvasható legyen:

  • Válaszd az egyszerű betűtípusokat, például a sans serif.
  • Kerülje a túl sok betűtípus vagy szín használatát.
  • Használja ki a fehér hely előnyeit, és kísérletezzen a bevágással és a vonalmagassággal.

A lábléc olvashatóságának növelésének másik módja a jó színkontraszt használata. Ez lehetővé teszi a látogatók számára, hogy kényelmesen elolvassák a horgonyszövegeket anélkül, hogy összehúzódnának vagy megfeszítenék a szemüket.

A szokásos kombináció a fekete szöveg használata fehér alapon vagy fordítva. Ha eltérni szeretne ettől és kísérletezni szeretne több színnel, íme néhány tipp:

  • Válasszon olyan színeket, amelyek kiegészítik márkanevét és webhelyének általános kialakítását.
  • Tervezze meg a célközönség szem előtt tartásával. Ha webhelye idős embereknek szól, használjon enyhén a szemét. Kombinálja ezt korlátozott mennyiségű szöveggel és nagyvonalú szóközzel.
  • Válasszon olyan színeket, amelyek közvetítik az érzelmeket vagy a személyiséget, amelyeket a webhelyéhez szeretne adni. Például válassza a vörös színt, ha sürgősséget és energiát szeretne közvetíteni. A kék szín jelképezi a megbízhatóságot és a nyugalmat, vagy a zöld jelképezi a természet vagy az egészség jelképeit.
  • Másik szín, például a The Guardian sárga gombjai kék háttérrel tegyék ki a CTA-kat az oldalból..

Példa a weboldal láblécére színes használatával

2. Maradj hűséges a márkáddal kapcsolatban

Az Ön weboldala a márkaépítés egyik fő alkotóeleme. Ez különösen igaz az e-kereskedelem vállalkozásaira, amelyek fő érintkezési pontjai az ügyfelekkel online.

Az erős, következetes márkajelzés segít az internetes látogatóknak, hogy emlékezzenek rád, és társítsák a cég nevét a logóval, a szolgáltatásokkal vagy termékekkel, az értékekkel és a sajátos érzéssel vagy élménnyel..

A lábléc kialakításának többféle módon készíthető, amely összhangban van a márkáddal. Íme néhány ötlet:

  • Mint fentebb említettük, válasszon olyan színeket, amelyek képviselik az értékeit vagy árnyalatait, amelyeket a logójában vagy a marketing anyagokban használtak.
  • Helyezze be logóját, kabaláját vagy más elemeket, amelyek a márkáját szimbolizálják.
  • Hasonló tervezési elemeket fogadjon el, ideértve a tipográfiát és az elrendezést, amelyeket más promóciós anyagokban használt.

Példa a weboldal láblécére, ugyanazt a színt használva a fejlécre és a láblécreFigyelem, hogyan használja a Smashing Magazine ugyanazt a szöveget és a háttér színét a fejlécében és a láblécében. Az ábrák segítenek fenntartani a játék hangulatát a webhely legfelsõ menüjébõl az alsó részig.

3. Optimalizálja a mobil felhasználók számára

Mivel a mobil felhasználók inkább az oldal aljára görgetenek, mint az asztali látogatók, optimalizálva az Ön webhelyét különböző eszközök különösen a mobiltelefonon kötelező. Ez a stratégia túlmutat a reagáló tervezésen. Hogy megkönnyítsük a mobil felhasználók számára az Ön elérését vagy webhelyének beolvasását:

  • Állítsa be a lábléc szövegét, hogy a látogatók nagyítás nélkül könnyen megérintsék az opciókat.
  • Tartalmazzon egy kattintható hívógombot, így a látogatók könnyen elérhetik Önt.
  • Ha arra akarja ösztönözni a felhasználókat, hogy hagyják el az irodáját vagy a bemutatótermet, kapcsolja össze a címét egy térképpel.
  • Ha van alkalmazásod, adja meg ezekre mutató hivatkozásokat.

4. Tartsd egyszerűen

A lábléc egyszerűsítése a stílusára és a tartalmára egyaránt vonatkozik. Tartsa tiszta lábát, tartson be néhány színt és tipográfiát, és kerülje a kifinomult hátteret. Tartalom szempontjából tartsa a horgonyszövegeket rövidnek és korlátozza a megjelenített elemeket. Az olvasók félelmetes elrendezéssel vagy túl sok szöveggel való megtévesztése csak akkor vonhatja el figyelmét a CTA-któl és más értékes linkektől..

5. Szerveződjön meg

A jól szervezett lábléc javítja a webhely olvashatóságát, lehetővé teszi az olvasók számára, hogy madártávlatból megtekintsék a webhelyet és a társaságot, és lehetővé teszik a látogatók számára, hogy könnyen megtalálják a szükséges részleteket..

Ha több horgonyszöveget szeretne hozzáadni, de attól tart, hogy a lábléc rendetlennek tűnik, akkor használja a következő technikákat:

  • Rendezzük a kapcsolódó menüket oszlopokba, és adjunk meg egy oszlopfejlécet.
  • Kísérletezzen betűmérettel, sormagassággal vagy szöveges színekkel a tartalmi hierarchia megjelenítéséhez. Például, használjon valamivel nagyobb betűtípust az oszlopfejlécekhez, és hagyjon több helyet a fejléc és alatta lévő horgonyszöveg között.
  • Használjon különféle háttérszíneket, hogy elválasztja a lábléc egyik részét a többitől.

Példa a weboldal láblécére különböző színű szakaszok felhasználásávalAz AgingCare három háttérszínt használ fel a lábléc szakaszokra bontására. A kék háttérrel ábrázolt CTA-k kiemelkednek a lábléc menükkel (világosszürke háttérrel), alul a szerzői jogokkal, a használati feltételekkel és az adatvédelmi irányelvekkel kapcsolatos információkkal (sötét szürke háttér)..

Összerakva: Lábak tervezési inspirációk

Az egyik módszer a webhelyére ötletek generálására más oldalak böngészése. Figyelje meg, hogy más tervezők miként illesztik be a fent említett fogalmakat a jól kidolgozott láblécek szállításához. Íme négy dizájn inspirál.

Blue Stag

Ez a dizájner stúdió lábléce animált háttérrel és futó kék szarvas logóval jelzi a cég kreativitását. A doboz nélküli háttér szórakoztat, és a kék logó kontrasztos képe ragaszkodik az emlékezetéhez. Ez az ügyes lábléc kiemeli a CTA-t, azaz a cég elérhetőségi számát és e-mail címét, amelyek mind kattinthatók.

Példa a weboldal láblécére

A New York Times

A New York Times láblécének egyszerű, tiszta kialakítása van, bőséges fehér teret és a fekete szöveg normál kontrasztját használva a világos háttérhez viszonyítva. Az oszlopokban elrendezett horgonyszövegek más érdekes oldalakhoz és cikkekhez vezetik a látogatókat, ösztönözve őket a webhely felfedezésére és maradására. A formatervezés kihasználja a tipográfiai hierarchiát, hogy jobban felhívja a figyelmet a bal oldalon található cégnévre és a jobb oldalon az előfizetési lehetőségekre..

Példa a weboldal láblécére

Sephora

A kozmetikai márka láblécének klasszikus megjelenése van, fehér szöveggel, fekete háttérrel. A vékony vonal a lábléget két részre osztja: a tetején az oszlopban levő horgonyszövegek, a alján pedig a CTA, a szociális média ikonok, a szerzői jogok és az adatvédelmi irányelvek. A márka rendelkezik egy legördülő menüvel is, amellyel a látogatók kiválaszthatják a régiójukat vagy a nyelvüket, angol és francia-kanadai változatot biztosítva.

A horgonyszövegek szépen négy oszlopba vannak csoportosítva. Elegendő fehér hely felhasználásával a Sephora láblécje sok információt képes beilleszteni anélkül, hogy rendetlennek tűnne.

Eközben a vállalat mobil verziója megtartja az oszlopok címeit, a regisztrációs lehetőséget és a közösségi média ikonjait. A lábléc felett közvetlenül az App Store-ra és a Google Playre mutató linkek találhatók, ahol a mobil felhasználók letölthetik a Sephora alkalmazást.

Példa a weboldal láblécére

StackSocial

A StackSocial arra ösztönzi az új ügyfeleket, hogy feliratkozzanak hírlevelükre. Ezenkívül egy kék gombot is használ a CTA számára, lehetővé téve, hogy konzisztens maradjon márkanevével. A kék CTA a sötét háttér és a világos szöveg közepette is leugrik az oldalról. A jobb alsó sarokban található Better Business Bureau (BBB) ​​logója elősegíti a márka iránti bizalom kiépítését.

Példa a weboldal láblécére

Záró szavak

A lábléc tervezésének oly sok módja van, amely növeli a konverziót, és a webhelyet hozzáférhetővé és könnyen navigálhatóvá teszi. Addig kísérletezzen és alkalmazza a fenti tippeket, amíg olyan lábléc-kialakítással nem találkozik, amely megfelel a vállalati céloknak és a megcélzott ügyfelek igényeinek.

Van tippeket, trükköket vagy lenyűgöző láblécmintákat megosztani? Hagyja alább a gondolatait.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me