5 osvědčených postupů pro návrh působivého zápatí webových stránek

Naučte se, jak navrhnout zápatí webové stránky. Tipy k tomu, co byste měli přidat, co přidat, a příklady dobrých zápatí webových stránek pro inspiraci.


Osvědčené postupy zápatí webové stránky

Pokud jste zanedbali zápatí svého webu a domnívali se, že je to nejméně hodnotná část vašeho webu, mohou tato zjištění změnit názor.

  • Když uživatelské testování vylepšilo zápatí a přidalo seznam obchodních a zákaznických cílů, jejich konverzi zvýšené o 50%.
  • Když společnost Smart Insights testovala nový design zápatí pro web luxusní kabelky, prodejní konverze vzrostly o 23,77% a tržby na návštěvníka se zvýšily o 15,99%.
  • Při pohledu na údaje od 1 milionu anonymních online uživatelů na 10 webech zjistil Chartbeat, že návštěvníci utratili polovina (66%) jejich „zasnoubeného času“ pod záhybem. To se týká spodní části stránky, pod částí, kterou uživatelé okamžitě uvidí, když otevřou web.
  • Ve srovnání s návštěvníky stolních počítačů se uživatelé mobilních telefonů posouvají dále po stránce dolů a je větší pravděpodobnost interakce s zápatím.

Proč záleží na zápatí vašeho webu

Zápatí není zdaleka zbytečným strukturálním prvkem na vaší webové stránce, ale svým návštěvníkům a vaší firmě přináší více výhod.

Výhody pro návštěvníky webových stránek

  • Zápatí jim pomáhá najít potřebné informace: Existují přinejmenším dva důvody, proč čtenáři dosáhnou dolní části vaší webové stránky: Líbilo se jim váš obsah a chtěli si více prohlédnout, nebo hledají něco, co nenajdou v nabídkách záhlaví. Pro ty, kteří se zajímají o vaši společnost, můžete pomocí zápatí přivést je k dalšímu zajímavému obsahu na vašem webu. Můžete zahrnout odkazy na stránky, které nejsou uvedeny v nabídce záhlaví, například partnerství a příležitosti přidružení.
  • Zachrání je od návratu do záhlaví: Pokud se návštěvníci vašeho webu spojí s vaším obsahem a chtějí se dozvědět více, nemusí se vrátit zpět na začátek stránky. Hned poté, co je váš obsah zápatí, kde mohou najít vaše kontaktní údaje, přihlásit se k odběru novinek, sledovat vás na sociálních médiích nebo prozkoumat další produkty.

Výhody pro majitele webových stránek

  • Snižuje míru okamžitého opuštění: Pokud návštěvníky dovedou k dalším užitečným odkazům, pravděpodobněji otevřou jiné stránky a zůstanou na vašem webu déle. To snižuje míru okamžitého opuštění nebo počet lidí, kteří si prohlíží pouze jednu stránku vašeho webu. To je důležité zejména pro maloobchodní podniky, které chtějí, aby návštěvníci této stránky „nakupovali“.
  • Umožňuje vám vybudovat důvěryhodnost: Některé společnosti berou na zápatí, aby zobrazily svou akreditaci, loga klientů nebo oblíbená místa, která je uváděla jako důkaz své kompetence. Symboly autorských práv a odkazy na právní podrobnosti a zásady ochrany osobních údajů pomáhají budovat důvěru ve vaši značku. To vše ovlivňuje rozhodnutí vašich potenciálních klientů provést dotaz a případně nákup.
  • Pomáhá zvýšit konverzi:Když návštěvníci, kteří poprvé navštíví vaši stránku, uvidí v horním rohu odkazy na sociální média. V tuto chvíli na cestě kupujícího však nemusí být nuceni vás sledovat online. Jak váš obsah zvyšuje jejich zvědavost – a možná uvidí vaše certifikace a loga klientů v zápatí, mohou se cítit více nakloněni připojit se k vašim odběratelům. Umístěním přihlašovacího nebo kontaktního formuláře na zápatí je pro návštěvníky výhodné převádět na odběratele nebo možná klienty.
  • Jedná se o další příležitost k propagaci podnikání: Pokud jde o použití zápatí k upoutání pozornosti na vaši společnost, možnosti jsou nekonečné. Kromě účtů na sociálních sítích a registračních formulářů můžete zahrnovat tiskové zprávy, umístění kanceláří a nejnovější nabídky.

Příklad zápatí webové stránkyStejně jako Goodreads můžete umístit odkazy na své další firmy nebo své aplikace.

Co je prioritou v zápatí stránky

Vzhledem k výhodám, které přináší dobře naplánovaná zápatí, chcete tento vzácný prostor počítat.

Nakonec záleží na tom, co v návrhu zápatí webu určíte. Ale zde jsou některé prvky, které byste mohli chtít začlenit.

Logo společnosti

Vaše logo představuje vaši firmu a chcete, aby si jej čtenáři mohli zapamatovat a identifikovat je se svým jménem a hodnotou, kterou dodáte. Používání loga v zápatí pomáhá návštěvníkům zapamatovat si vaši společnost a přiřadit ji k vašemu obsahu a službám, čímž se zlepší rozpoznávání značky.

Kontaktní informace

Umístění fyzické adresy a telefonních čísel do spodní části stránky dokazuje, že jste legitimní firmou a budujete důvěru ve svou společnost. Navíc to potenciálním klientům usnadňuje oslovit vás a požádat o dotazy, což jim ušetří potíže s návratem do hlavního menu nebo s hloubením do vašeho webu za účelem získání kontaktních údajů..

Zde je několik dalších tipů, jak uvést vaše kontaktní údaje:

  • Fyzická adresa – Pokud chcete, aby lidé snadno našli váš fyzický obchod, zvažte přidání mapy. Adresu můžete také nastavit tak, aby na ni bylo možné kliknout, aby otevřela mapu na jiné kartě.
  • Více poboček – Pokud máte více míst, můžete pro každý web zadat kontaktní údaje. Pokud to není možné, vložte kotevní text, který se otevře na stránce se seznamem všech vašich větví.
  • Volací tlačítko – Jediným kliknutím můžete klientům snadněji kontaktovat.

autorská práva

Tím je chráněn váš obsah před plagiátorstvím webových stránek. Vysílá silný signál, že podniknete právní kroky, pokud někdo získá kredit za zveřejněné texty, obrázky nebo videa. Zatímco požadavky na autorská práva lišit se v různých zemích, přinejmenším nezapomeňte uvést symbol ©, rok vydání a jméno vlastníka autorských práv.

Zásady ochrany osobních údajů

Splnění tohoto zákonného požadavku vám pomůže navázat důvěru mezi vašimi čtenáři tím, že udržuje sběr dat transparentní. Vaše Zásady ochrany osobních údajů vysvětluje návštěvníkům, jaké osobní údaje shromažďujete, jak jsou ukládány a používány, jasné možnosti pro přihlášení nebo odhlášení a poskytovatelé služeb třetích stran, kteří mohou tato data také používat.

Pokud máte klienty v Evropské unii, podívejte se na zásady ochrany osobních údajů svých firemních míst, například na obecné nařízení o ochraně údajů (GDPR). Pokud vaše firma používá poskytovatele služeb třetích stran, například pro zpracování plateb, podívejte se také na jejich požadavky.

Příklad zápatí webové stránky WebMDNapříklad zápatí stránky WebMD umisťuje své zásady ochrany osobních údajů do sloupce s dalšími důležitými pokyny. Oni také zobrazí a TRUSTe pečeť, zajistit uživatelům, aby brali zásady ochrany osobních údajů vážně.

Podmínky použití

Poskytnutí odkazu na váš podmínky použití (dále jen „smluvní podmínky“ nebo „smluvní podmínky“) není právním požadavkem. Poskytuje však majitelům webových stránek ochranu před odpovědností a upozorněním na povinnosti uživatelů chrání jejich web před porušováním autorských práv a jinými nezákonnými činnostmi, jako je spam.

Výzva k akci (CTA)

Umístěním CTA na zápatí stránky změníte návštěvníky na odběratele nebo sledovatele, což vám pomůže zvýšit počet konverzí nebo přesunout klienty hlouběji na cestu kupujícího. Začlenění CTA, zejména odkazy na sociální média, také pomáhá malovat vaši firmu jako zavedenou společnost a umožňuje návštěvníkům sledovat vás pomocí platformy, která je pro ně nejvýhodnější.

Můžete zahrnout několik CTA, například:

  • Přihlášení k odběru novinek
  • Sleduji vás na sociálních médiích
  • Vyplňte kontaktní formulář
  • Žádám o ukázku
  • Registrace na bezplatnou zkušební verzi

Detaily společnosti

Jakmile na váš obsah zapůsobíte na čtenáře a dosáhnou dna vaší stránky, pravděpodobně budou chtít vědět více o vaší společnosti.

Využijte zápatí a zdůrazněte podrobnosti o své firmě, které možná nebudete moci zahrnout do záhlaví, například odkazy na následující stránky:

  • O nás
  • Blog
  • Kariéra nebo zaměstnání
  • Přidružené nebo partnerské příležitosti
  • Seznam produktů nebo služeb
  • tiskové zprávy
  • Recenze
  • bílé papíry
  • Události

Zákaznická podpora

Součástí návrhu zápatí stránek zaměřených na zákazníka je zajistit, aby odkazy na stránky, které čtenáři mohou potřebovat – buď jako potenciální klient, nebo jako současný zákazník – byly snadno k nalezení. Tyto odkazy na podporu mohou zahrnovat:

  • Pomoc
  • FAQs
  • Centrum znalostí
  • Výukové programy

Webové stránky elektronického obchodu mohou obsahovat i následující kotevní texty:

  • Informace o dopravě a doručení
  • Zásady vracení a výměny
  • Způsoby platby přijaty
  • Speciální nabídky

Příklad zápatí webové stránky nabízející zákaznickou podporuNamísto toho, abychom jednoduše řekli „Podpora“, zápatí Book Depository má „Jak můžeme pomoci?“ sloupec a pod ním jsou ukotvovací texty „Kde jsou moje věci?“ a „Kam doručujete?“ Styl je neformální, konverzační a pomáhá vyjádřit upřímnou touhu poskytnout pomoc.

Čtyři nedělají návrh zápatí stránky

1. Mít nabídku stejného záhlaví a zápatí

Návštěvníci webu se občas obracejí na zápatí, když v nabídce záhlaví nenaleznou nějaké podrobnosti. V takovém případě použití stejných odkazů na záhlaví a zápatí nepřináší hodnotu vašim návštěvníkům ani vaší společnosti.

Rozdělte důležité stránky mezi záhlaví a zápatí, aby návštěvníci webu nebyli ohromeni textem. Využijte záhlaví pro stránky s nejvyšší hodnotou a rezervujte zápatí pro další důležité odkazy.

Příklad zápatí webu společnosti AppleVšimněte si, jak lepkavá záhlaví Apple obsahovala pouze šest kategorií produktů. Doplňuje se to zápatí, které obsahuje delší seznam produktů (sloupec zcela vlevo) a seznam služeb.

2. Přeptimalizace

Nadměrná optimalizace, ať už ve vašem obsahu nebo zápatí, není účinným způsobem, jak zvýšit hodnocení vašich vyhledávacích stránek. Algoritmus hodnocení Google dohonil tuto techniku ​​vycpávky klíčových slov a může mít pouze negativní dopad na vaše výsledky SEO. Místo nadměrné optimalizace vyberte několik klíčových slov a zaměřte se na ně.

3. Důležité odkazy

Vaše zápatí není prostorem pro výpis všech a všech stránek na vašem webu. Návštěvníci, kteří prohledali celou vaši stránku a odhlásili vaši zápatí, se již pravděpodobně zajímají o vaše nabídky. Namísto házení do kotevních textů přeměňte zápatí na účinný navigační nástroj. Veďte je na svou stránku produktů nebo služeb nebo užitečné odkazy, jako jsou návody nebo blog vaší společnosti.

4. Přeplněné rozvržení

Může být lákavé sbírat co nejvíce, jak je to možné na spodku vašeho webu. Přeplněné zápatí však může návštěvníky vypnout a způsobit tak, že opustí stránku nebo se budou lesknout nad texty kotvy. Vyberte si základní stránky, uspořádejte je a využijte prázdné místo k vytvoření úhledného a čitelného designu zápatí.

Jak vytvořit efektivní návrh zápatí

Existuje mnoho způsobů, jak vytvořit zápatí, které je esteticky příjemné i funkční. Kromě výše uvedených tipů je zde pět nejlepších nejlepších praktik návrhu zápatí.

1. Nejprve dejte čitelnost

Protože texty zápatí jsou často malé a návštěvníci webu je často sklouzávají, potřebujete design, který zajistí, aby slova byla snadno čitelná. Chcete-li zajistit, že zápatí je čitelné, můžete:

  • Rozhodněte se pro jednoduchý typ písma, jako je bezpatkové.
  • Nepoužívejte příliš mnoho písem nebo barev.
  • Využijte prázdné místo a experimentujte s vyrovnání párů a výškou linií.

Dalším způsobem, jak zvýšit čitelnost zápatí, je použití dobrého barevného kontrastu. To umožňuje návštěvníkům pohodlně číst vaše texty kotvy, aniž by šilhali nebo napínali oči.

Standardní kombinací je použití černého textu na bílém pozadí nebo naopak. Pokud se od tohoto chcete odchýlit a experimentovat s více barvami, zde je několik tipů:

  • Vyberte si barvy, které doplňují vaši značku a celkový design vašeho webu.
  • Navrhněte s ohledem na vaše cílové publikum. Pokud vaše stránky vyhovují starším osobám, použijte odstíny, které jsou šetrné k očím. Zkombinujte to s omezeným množstvím textu a velkorysým mezerou.
  • Vyberte barvy, které vyjadřují emoce nebo osobnost, kterou chcete dát svému webu. Například zvolte červenou, pokud chcete vyjádřit naléhavost a energii. Jděte na modrou, která symbolizuje důvěryhodnost a klid, nebo zelenou, která představuje přírodu nebo zdraví.
  • Nechte své CTA vyskočit ze stránky pomocí jiné barvy, například žlutých tlačítek The Guardian na modrém pozadí.

Příklad zápatí webové stránky používající barvu

2. Zůstaňte věrní své brandingu

Váš web je hlavní součástí vaší značky. To platí zejména pro podniky elektronického obchodu, jejichž hlavní kontaktní body se zákazníky jsou online.

Silná a konzistentní značka pomáhá návštěvníkům webu zapamatovat si vás a spojit název vaší společnosti s vaším logem, službami nebo produkty, hodnotami a konkrétním pocitem nebo zážitkem.

Existuje několik způsobů, jak vytvořit design zápatí, který je v souladu s vaší značkou. Zde je několik nápadů:

  • Jak bylo uvedeno výše, vyberte barvy, které představují vaše hodnoty nebo odstíny, které jste použili ve svém logu nebo marketingových materiálech.
  • Zahrňte své logo, maskota nebo jiné prvky, které symbolizují vaši značku.
  • Přijměte podobné návrhové prvky, včetně typografie a rozvržení, které jste použili v jiných propagačních materiálech.

Příklad zápatí webové stránky používající stejnou barvu pro záhlaví a zápatíVšimněte si, jak časopis Smashing Magazine používá stejný text a barvu pozadí pro záhlaví a zápatí. Ilustrace pomáhají udržet hravou atmosféru z horního menu webu až do jeho spodní části.

3. Optimalizace pro mobilní uživatele

Vzhledem k tomu, že mobilní uživatelé s větší pravděpodobností přejdou do spodní části stránky než návštěvníci počítačů, optimalizují váš web různá zařízení zejména na mobilu je nutností. Tato strategie jde nad rámec responzivních návrhů. Chcete-li mobilním uživatelům usnadnit přístup k vám nebo prohledání vašeho webu:

  • Upravte velikost textu zápatí, aby návštěvníci mohli snadno klepnout na možnosti bez přiblížení.
  • Zahrňte tlačítko pro volání, na které lze kliknout, aby se návštěvníci snadno dostali k vám.
  • Chcete-li vyzvat uživatele, aby upadli do vaší fyzické kanceláře nebo showroomu, propojte svou adresu s mapou.
  • Pokud máte aplikace, uveďte na ně odkazy.

4. Keep It Simple

Jednoduchost v designu zápatí odkazuje na jeho styl i obsah. Udržujte zápatí čisté, držte se několika barev a typografie a vyhněte se komplikovaným pozadím. Pokud jde o obsah, udržujte kotevní texty krátké a omezte zobrazované položky. Zaplavení čtenářů ozdobnými rozvrženími nebo příliš velkým textem může upoutat jejich pozornost od vašich CTA a dalších cenných odkazů.

5. Získejte pořádek

Správně uspořádaná zápatí zlepšuje čitelnost webu, umožňuje čtenářům získat ptačí pohled na web a společnost a umožňuje návštěvníkům snadno najít podrobnosti, které potřebují.

Pokud chcete přidat několik kotevních textů, ale máte obavy, že zápatí může vypadat chaoticky, použijte následující techniky:

  • Uspořádat související nabídky do sloupců a poskytnout záhlaví sloupců.
  • Experimentujte s velikostí písma, výškou řádku nebo barvami textu a zobrazte hierarchii obsahu. Například pro záhlaví sloupců použijte mírně větší písmo a pod ním ponechte více prostoru mezi záhlavím a textem kotvy.
  • Využijte různé barvy pozadí k oddělení jedné části zápatí od ostatních.

Příklad zápatí webové stránky používající různé barevné sekceAgingCare používá tři barvy pozadí k rozdělení zápatí na sekce. Jejich CTA, zobrazený na modrém pozadí, vyniká oproti nabídkám zápatí (ve světle šedém pozadí) a dole jsou uvedena autorská práva, podmínky použití a informace o zásadách ochrany osobních údajů (tmavě šedé pozadí).

Společně to vše: Inspirace návrhu zápatí

Jedním ze způsobů, jak generovat nápady pro svůj web, je procházení dalších stránek. Všimněte si, jak ostatní designéři začleňují výše uvedené koncepty, aby poskytovali dobře vytvořená zápatí. Zde jsou čtyři návrhy, které vás inspirují.

Blue Stag

Zápatí tohoto designového studia s animovaným pozadím a logem modrého jelena zobrazuje kreativitu firmy. Zábavné pozadí na pozadí a kontrastní obrázek modrého loga se drží v paměti. Toto elegantní zápatí zdůrazňuje CTA, tj. Kontaktní číslo společnosti a e-mailovou adresu, na které lze kliknout.

Příklad inspirace zápatí webové stránky

The New York Times

Zápatí New York Times má jednoduchý, čistý design, který využívá dostatek bílého prostoru a standardní kontrast černého textu na světlém pozadí. Ukládejte texty, uspořádané do sloupců, navádějte návštěvníky na další zajímavé stránky a články a povzbuzujte je, aby prozkoumali a zůstali na webu. Design využívá typografickou hierarchii, aby více upozornil na název společnosti vlevo a možnosti předplatného napravo.

Příklad inspirace zápatí webové stránky

Sephora

Zápatí značky krásy zaujímá klasický vzhled s bílým textem na černém pozadí. Tenká čára rozděluje zápatí do dvou částí: sloupy ukotveného textu nahoře a CTA, ikony sociálních médií, autorská práva a zásady ochrany osobních údajů dole. Značka má také rozbalovací nabídku pro návštěvníky, aby si mohli vybrat svůj region nebo jazyk, a poskytnout anglickou a francouzsko-kanadskou verzi.

Kotevní texty jsou přehledně seskupeny do čtyř sloupců. Díky dostatečnému bílému prostoru je zápatí Sephory schopné začlenit spoustu informací, aniž by vypadalo nepřehledně.

Mezitím si mobilní verze společnosti zachovává záhlaví sloupců, možnost registrace a ikony sociálních médií. Přímo nad zápatím se zobrazují odkazy na App Store a Google Play, kde si mobilní uživatelé mohou stáhnout aplikaci Sephora.

Příklad inspirace zápatí webové stránky

StackSocial

StackSocial poskytuje podnětem pro nové zákazníky, aby se přihlásili k odběru novinek. Také používá modré tlačítko pro CTA, což mu umožňuje zůstat v souladu s jeho značkou. Modrá CTA také skáče ze stránky uprostřed tmavého pozadí a světlého textu. Logo Better Business Bureau (BBB) ​​vpravo dole pomáhá budovat důvěru ve značku.

Příklad inspirace zápatí webové stránky

Závěrečná slova

Existuje tolik způsobů, jak navrhnout zápatí, které může zvýšit vaši konverzi a usnadnit přístup k vašemu webu a snadnou navigaci. Pokračujte v experimentování a používání výše uvedených tipů, dokud nepřijdete s návrhem zápatí, který splňuje cíle vaší společnosti a potřeby vašich cílových klientů..

Máte tipy, triky nebo působivé návrhy zápatí, které můžete sdílet? Nechte své myšlenky níže.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map