Jak vytvořit nejlepší úvodní stránku (homepage)

29.11.2021
Design úvodní stránky

Úvodní stránka vašeho webu (homepage) je jako výloha. Je tím místem, které má upoutat pozornost vašich návštěvníků a proměnit je v zákazníky. S našimi tipy svou úvodní (nebo také domovskou) stránku snadno vyšperkujete. Obsah i design vám pomůžou zaujmout návštěvníky.

Někteří návštěvníci už vás znají, když na stránky přijdou. Vědí přesně, kam kliknout a jaké stránky chtějí navštívit. Tráví na vašich stránkách čas a procházejí i skrytá místa.

Pak je tu další skupina návštěvníků – přišli z výsledků vyhledávání, snaží se rychle zorientovat. Rychle si prohlédnou hlavní nadpisy a odkazy. Nepřišli si pročítat stránky s příběhem, hledají konkrétní informaci. Pokud nenajdou důležité a relevantní informace po rychlé prohlídce, pravděpodobně stránky opustí a budou hledat u konkurence.

Rychlému prohledávání stránky a zaměření pozornosti na důležité prvky se říká skenování. Na to, abyste takové čtenáře zaujali, máte jen několik vteřin.

Jakmile sestavíte perfektní úvodní stránku, vylepšíte tím výkon vašich stránek i výkon vaší společnosti. Pojďme začít!

Výhody perfektně navržené úvodní stránky

1. Skvělý design úvodní stránky rychle odhalí vašim návštěvníkům, kdo jste a jak jim můžete pomoci.

Přivítejte čtenáře tím, že se jim představíte, vysvětlíte jim, co pro ně můžete udělat a odhalíte jim své zvláštní schopnosti.

V online světě existuje známý termín Unique Selling Proposition – USP. Jde o jedinečný prodejní argument. Ve zkratce dokáže zákazníkovi říct, čím jste právě vy jedineční, v čem spočívá vaše originalita. Zkrátka a dobře, proč by si měl vybrat právě vás. Dobře svůj hlavní argument promyslete a hlavně ho dobře prodejte.

Čím je vaše homepage přehlednější, tím lépe vám čtenáři porozumí. Tím jednodušší pro vás pak bude přeměnit je v platící zákazníky.

2. Správně postavená homepage vám pomůže vybudovat vlastní brand.

Domovská stránka může přímo ovlivňovat váš obchod. Vyplatí se vám investovat do ní čas i energii. Profesionálně působící úvodní stránka přesvědčí návštěvníky, že přišli na to pravé místo a právě vy jste tím pravým řešením jejich problému.

Pravděpodobně už máte svou firemní identitu – logo, barevné schéma, slogan a jiné vizuální prvky. Nezapomeňte je přidat na vaše stránky, aby vás zákazníci snadno poznali. Pokud je ještě nemáte, nastal ten pravý čas k jejich vytvoření. Konzistentní používání stejných prvků zajistí, že vaši společnost čtenáři snadno rozpoznají na internetu i mimo něj.

3. Dobrý design domovské stránky navede návštěvníka ke konverzi.

Přehledná úvodní stránka servíruje návštěvníkovi ty správné informace, navádí ho výzvami k akci a vizuálními navigačními prvky přesně tam, kam chcete vy.

Návštěvníka zavede hlouběji do webových stránek a on si zapamatuje pozitivní zkušenost, kterou na vašich stránkách zažil. Dokáže z návštěvníka udělat zákazníka.

Přemýšlejte nad cestou vašich zákazníků

Cesta zákazníka webem je série kroků, kterými projde od úvodní stránky k nákupu, registraci, nebo jiné akci.

Tím, že si tuto cestu projdete a uděláte všechno pro to, aby dávala smysl, vylepšíte nejen svou úvodní stránku, ale i ostatní stránky vaší webové prezentace.

Zkuste si představit svého běžného zákazníka

  • Kdo to je?
  • Čeho potřebuje dosáhnout?
  • Co hledá na vašem webu?
  • Jak mu můžete pomoci?

Jak mu můžete pomoci co nejefektivněji? Bez toho, aby musel procházet složitými kroky a vynakládat energii, když hledá odpovědi?

Jakmile máte jasnou představu o tom, jaký je váš běžný zákazník, vytvořili jste tzv. personu – zosobnění průměrného zákazníka. Pomůže vám s designem vaší úvodní stránky. Pojmenujte ho a vytvořte pro něj podobiznu, aby vám připadal ještě skutečnější.

Ukázka persony

Persona – vaše běžná zákaznice

Teď, když máte nachystanou personu, zkuste si představit její cestu vašimi stránkami, jako kdyby procházela kamenným obchodem.

Doprovoďte ji od vchodu až k pokladně.

Nabídněte odpovědi na všechny její otázky.

Ujistěte se, že domovská stránka je dostatečně velká, aby nabídla všechno, co je potřeba. Zároveň ale není potřeba uvádět všechny detaily a stránku zahltit informacemi. Skvěle vám poslouží základní shrnutí a tlačítko „číst dále“, které personu zavede na stránku se všemi podrobnostmi.

Důležité je, aby návštěva u vás byla přínosná a příjemná a zákazníci se rádi vraceli.

Tip: Na stránky přidejte live chat a dejte tak zákazníkům možnost zeptat se vás v reálném čase na všechno, co potřebují vědět.

Poradíme vám, jak okénko chatu na web přidat.

Jak na úvodní stránce rozložit obsah co nejefektivněji?

Většinou je internetová stránka rozdělená do dvou oblastí – nad ohybem a pod ohybem.

Jde o termíny z dob papírových novin – ten nejdůležitější obsah byl vždy umístěný nahoře na stránce, tam, kde je snadno vidět, i když jsou noviny přeložené a položené na novinovém stánku. Nad ohyb tedy umístěte ty nejdůležitější a nejzajímavější informace, aby byl čtenář ochotný scrollovat a přečíst si i obsah, umístěný níže.

Obsah nad ohybem, obsah pod ohybem

Rozložení nad a pod ohybem

Které prvky umístit nad ohyb

Právě jsme si řekli, že ten nejdůležitější obsah je potřeba umístit nad ohybem původní stránky. Které prvky sem tedy patří?

Jasná navigace

Při vytváření průchodu stránkami buďte co nejefektivnější. Čím vyšší počet kliků k cíli, tím delší cesta ke konverzi – a větší šance, že zákazník proces nedokončí.

Do hlavního menu přidejte nejdůležitější stránky a ty ostatní, jako například Podmínky použití nebo Pravidla ochrany osobních údajů.

Produkty nebo služby, které nabízíte, vložte do jasně pojmenované kategorie – neschovávejte je pod obecný popisek.

Zákazníky nezahlcujte příliš velkým počtem možností.

Zkusme si představit tyto příklady. Sháníte nové kaktusy, které by doplnily vaši sbírku. V kterém případě naleznete ty nové rychleji a snadněji?

nepřehledná navigace a složité menu

Ukázka nejasné navigace

přehledné menu

Ukázka přehledné navigace

Úvodní sekce – silné designové prvky

Důležitým prvkem je úvodní sekce vaší homepage. Nejčastěji se používá velký výrazný banner (obrázek) na vrchu stránky.

Tady je to pravé místo, kde uvedete svůj prodejní argument – kdo jste, co nabízíte a jak můžete návštěvníkovi pomoci.

Vyhněte se obecným frázím a uvádějte konkrétní informace.

Používejte krátké texty, jděte přímo k věci.

Úvodní sekci si představte jako billboard u dálnice. Potřebujete zaujmout řidiče aut, kteří kolem projíždějí vysokou rychlostí a na předání informace máte jen několik vteřin.

Vyberte i obrázky a vizuál, které jsou kvalitní, propracované a zaujmou na první pohled. Lidé rychleji reagují na vizuální podněty než na prostý text.

Nepodrývejte svůj obsah lacinými obrázky z fotobanky. Vložte svou energii do výběru toho nejlepšího a co nejkvalitnějšího obrázku.

Příliš mnoho prvků v úvodní sekci

Přeplněná úvodní sekce

Atraktivní tlačítko s výzvou k akci (CTA)

Přesvědčení zákazníci jsou již prakticky rozhodnutí pro koupi vašeho produktu nebo služeb a potřebují jen poslední pobídnutí. Dobrá výzva k akci zvýší šanci, že se rozhodnou nakoupit.

Tlačítka s komplikovanou výzvou k akci

Nejasná výzva k akci

Stručný text v tlačítkách s výzvou k akci

Tlačítko s jasnou výzvou k akci

Zákazníci, kteří ještě nejsou úplně rozhodnutí, budou potřebovat informace v dalším kroku nákupu a další výzvu k akci, která je přesvědčí.

Zkuste si znovu projít zákazníkovu cestu k cíli. Správná výzva k akci vám může pomoci na místě, kde má zákazník už dost informací o produktu a obsah ho přesvědčil o tom, že je na tom správném místě. Tušíte správně – dospěli jsme k oblasti pod ohybem.

Jaký obsah umístit pod ohyb

Zascrollovali jsme obsahem a jsme v oblasti pod ohybem stránky. Ani tady návštěvníci nečtou váš obsah důkladně.

Lidé na internetu obsah nečtou, spíše ho „skenují“ a přeskakují z jedné části na druhou podle toho, co je na obsahu zaujme. Jak se s tímto vypořádat?

Zbytek stránky navrhněte jako kontrolní panel pro zbytek webu.

Z úvodní stránky udělejte kontrolní panel. Navigujte návštěvníky na ostatní stránky, kde najdou konkrétní detaily a důležité informace, po kterých pátrají. Nesnažte se všechny informace vmáčknout na jedno místo.

Z obsahu na ostatních stránkách vytvořte stručné ukázky, vložte je na úvodní stránku a vložte odkaz, který návštěvníka nasměruje na konkrétní obsah. Tam se dozví více o vás, vašich službách a produktech, jak vás kontaktovat…

Úvodní stránka jako ovládací panel

Vytvořte na úvodní stránce kontrolní panel

Přidejte zkušenosti ostatních

Sbírejte a sdílejte zpětnou vazbu od spokojených zákazníků. Jestli se vaše společnost objevila v odborném časopise, neváhejte článek sdílet. Ukažte, jaké projekty jste již úspěšně dokončili.

Zpětná vazba od zákazníků - testimonials

Sdílejte zpětnou vazbu od zákazníků

Nejlepší praktiky pro úvodní stránku

Zavedené prvky fungují, proto je využívají ty nejúspěšnější stránky.

Lidé mají rádi, když vědí, co očekávat. Všechny dobré a úspěšné stránky jsou postavené velmi podobně, nechte se jimi inspirovat.

Lidé očekávají v levé horní části stránky logo společnosti, které je po kliknutí zavede zpět na úvodní stránku. Čím dál častěji očekávají i stručné kontaktní informace vpravo nahoře, nebo alespoň informaci o tom, kde své služby nabízíte.

Pokud tyto prvky najdou, cítí se na webu bezpečně a procházejí obsah bez toho, aby se museli zabývat úvahami nad tím, jak se na webu zorientovat. Pak mají dost prostoru přemýšlet o vašem produktu a ne o práci s vašimi stránkami.

Klasické rozložení úvodní stránky

Tradiční rozvržení obsahu na úvodní stránce

Nic nepřehánějte

Coco Chanel říkala: „Předtím, než vyrazíte na party, vraťte se k zrcadlu a sundejte jeden šperk.“ Tímto pravidlem se řiďte i u obsahu vašich stránek. Nepřehánějte to s tlačítky, textem, videi, ani nadpisy.

Přidejte jen ten nejdůležitější obsah. Další informace přidejte na ostatní stránky.

Přeplněná a nepřehledná úvodní stránka

Úvodní stránka přeplněná zbytečným obsahem

Přidejte atraktivní a jasnou výzvu k akci

Přidejte tlačítko v barvě, která oproti pozadí vynikne. Použijte krátký, jasný text. Nedávejte čtenáři žádný prostor pro pochyby, co bude tlačítko dělat, když na něj klikne.

Méně je více

Znovu připomínáme, že lidé nečtou. Vybírají si zajímavé informace a skáčou očima z jedné sekce na druhou. Vymyslete co nejstručnější, ale zároveň výstižné sdělení.

Zákazníky zajímá i váš příběh, ale je efektivnější jej sepsat do několika vět místo několika odstavců.

Přidávejte kvalitní obrázky a videa

U vizuálních prvků jde o kvalitu. Máte šanci okamžitě zaujmout zákazníka a vyniknout mezi konkurencí. Myslete ale na velikost souborů, které na stránky přidáváte. Ovlivňují totiž spotřebu dat i rychlost načítání stránky.

Pro úvodní obrázek doporučujeme nepřekračovat 600 kB u ostatních obrázků je dobré držet se pod 250 kB.

Nastavte správnou vizuální hierarchii

V textech na internetu se používají nadpisy, podnadpisy, odstavce a tlačítka. Podle důležitosti textu zvolte odpovídající formátování a čtenář snadno odliší důležité informace od těch méně důležitých.

Vizuální peklo

Nejhorší web na internetu?

Vyhněte se falešným patičkám

Když čtenáři vidí na stránce tmavou sekci, mají tendenci ji považovat za konec obsahu. Může se stát, že už nebudou scrollovat dále a tím pádem si nepřečtou informace, které jste vložili do spodní části stránky.

Sekce s černým pozadím uprostřed stránky působí jako patička

Sekce s černým pozadím uprostřed stránky působí jako patička

Nejdůležitější body – jak má vypadat úvodní stránka webu

  • Njevíc záleží na prvním dojmu. Tvořte profesionální obsah, používejte kvalitní obrázky a příjemné barvy.

  • Návštěvník hledá konkrétní informaci. Nečte celý obsah, skenuje důležité sekce. Obsah udržujte stručný a přehledný.

  • Výzva k akci musí být atraktivní. Zákazník musí toužit na ní kliknout. Pomůžou ta správná slova i barvy.

  • Jasně sdělte kdo jste a co nabízíte. Nejlepším místem je úvodní sekce.

  • Držte se tradic. Většina webů má podobnou základní strukturu – funguje spolehlivě a zákazníci ji očekávají. Nesnažte se být za každou cenu originální.

  • Nic nepřehánějte. Sdílejte jen to, co je důležité.

Homepage jste již vyšperkovali a rádi byste vylepšili i ostatní stránky vašeho webu? Přečtěte si článek o principech dobrého web designu