Hero sekce — Správná architektura rozložení
Poznej, jak sestavit hero sekci, která opravdu funguje. Pokrýváme velikosti fontů, umístění obsahu a vizuální hierarchii tak, aby vašim českým návštěvníkům to dávalo smysl.
Proč je hero sekce důležitá?
Hero sekce — ta velká část nahoře vaší stránky — je první věc, kterou vidí návštěvníci. Je to jako titulka v novinách. Když se ti líbí, pokračuješ čtením. Když ne, jdeš dál.
To je důvod, proč nemůžeš ji jen tak naaranžovat. Musíš myslet na to, jak lidé čtou, kde se jejich oči zastavují, a jak rychle se rozhodují, zda ti věří nebo ne. Při testování jsme viděli, že špatně postavená hero sekce sníží engagement o 30 až 40 procent. Ale správně postavená? Ta může zdvojnásobit dobu, kterou lidé na tvé stránce stráví.
Architektura, která funguje
Správná hero sekce se skládá ze tří základních vrstev. Jsou to nadpis, který upoutá pozornost — ten by měl být velký, jasný a řekl by lidem, o čem to celé je. Pak přichází podnadpis nebo krátký popis, který vysvětluje hodnotu — ne sliby, ale konkrétní fakta.
Poslední vrstvou je call-to-action. Tlačítko, které říká: „Klikni sem.” Ale ne ve smyslu nátlaku — spíš pozvání. My jsme testovali tři pozice: napravo od textu, pod textem a v pravém dolním rohu. Zjistili jsme, že pod textem funguje nejlépe pro české uživatele — je to intuitivní a nemáš pocit, že tě tlačítko ignoruje.
Velikosti a čitelnost — čísla, která fungují
Tady to není o tom, co se ti líbí. Je to o tom, co si lidé mohou přečíst bez brýlí a bez frustrace. Nadpis by měl být mezi 48 a 72 pixely na počítači. To není malé, ale není to ani bizarně velké. Testovali jsme i větší — 88 pixelů — a lidé si mysleli, že je to tlačítko nebo banner.
Podnadpis? Ten by měl být okolo 18 až 20 pixelů. Pokud jde menší, lidé to prostě přeskakují. Pokud je větší, konkuruje nadpisu o pozornost. Řádkování je klíčové — 1,5 násobek délky písma dělá text čitelný, aniž by vypadal rozprostřený.
Barva textu? To není o barvách, které se ti líbí. Je to o kontrastu. Bílý text na tmavém pozadí funguje výborně. Tmavý text na světlém pozadí taky. Ale šedý text na bílém? To vede k vyčerpání očí. Já bych doporučil minimálně 4,5:1 poměr kontrastu — je to standard, který používají i webové aplikace pro zdravotně postižené lidi.
Obrázek nebo bez obrázku?
Když jsme dělali testy, zjistili jsme zajímavou věc: obrázek v hero sekci pomáhá — ale jen když je správný. Fotografie skutečného člověka, který se smívá? Pomáhá. Abstraktní grafika, která vypadá jako ilustrace z roku 2012? Spíš ne.
Ideální layout je: text vlevo, obrázek vpravo. Proč? Protože lidé čtou zleva doprava, takže je to přirozené. Když je obrázek vlevo, lidé si ho nejdřív prohlédnou a pak si přečtou text. To není špatně, ale není to optimální. Při testech se obrázek vpravo zvedl click-through rate o 15 procent.
Pokud nemáš obrázek? To je v pořádku. Skvělá hero sekce funguje i bez něj. Potřebuješ ale spoustu prázdného místa — to znamená že nejde tlačítko hned vedle textu. Chceš mezi nimi vzduch. Spoustu vzduchu. Vytvoří to pocit prostoru a elegance, který se bez obrázku nedá dosáhnout jinak.
Prázdné místo — váš nejlepší přátel
Slyšíš to od každého designera: „Prázdné místo je design.” A je to pravda, ale znám lidi, kteří to berou příliš doslova. Myslí si, že prázdné místo znamená, že tam nic není. To není správně.
Prázdné místo je vzduch. Je to prostor, který dělá prvky čitelnějšími. V hero sekci bys měl mít kolem 60 až 80 pixelů odsazení nahoře a dole. Mezi nadpisem a podnadpisem? 20 až 30 pixelů. Mezi podnadpisem a tlačítkem? 40 až 50 pixelů. Nejde o přesná čísla — je to o pocitu. Když si návštěvník prohlédne hero sekci a nemusí ji číst dvakrát, pak máš správný prostor.
Problém, který vidíme nejčastěji? Hero sekce, kde je všechno nahusto. Text, tlačítko, obrázek, ikony — všechno vedle sebe. To vypadá chaoticky a nikdo neví, na co se koukat. Když oddělíš prvky pomocí prázdného místa, náhle je všechno jasné.
Jak otestovat svou hero sekci
A/B test dvě varianty
Vezmi svou aktuální hero sekci a vytvoř jinou verzi — změň pozici tlačítka, velikost nadpisu nebo barvu pozadí. Testuj s reálnými uživateli po dobu minimálně 2 týdnů. Měj alespoň 100 návštěvníků v každé skupině.
Sleduj metriky
Click-through rate — kolik procent lidí kliklo na tlačítko? Čas na stránce — jak dlouho se návštěvníci zdrželi? Bounce rate — kolik jich odešlo hned na začátku? Tyhle čísla ti řeknou, jestli to funguje.
Poslouchej feedback
Spusť krátkou anketu: „Věděl jsi hned, o čem je tahle stránka?” nebo „Našel jsi, na co jsi hledal?” Jen pár otázek. Lidé ti řeknou, co není jasné — a to jsou nejcennější informace.
Iteruj pomalu
Neměň všechno najednou. Když změníš barvu i velikost i pozici, nebudeš vědět, co to vylepšilo. Měň jednu věc v čase a čekej na výsledky. Je to pomalejší, ale přesnější.
Kontrolní seznam — máš všechno?
Závěr: Hero sekce je začátek, ne konec
Hero sekce není jenom pěkná grafika. Je to první konverzace s tvojimi návštěvníky. Ty jim říkáš: „Tady je, co nabízím.” Oni se rozhodují: „Zajímá mě to?” Když to uděláš správně, rozhodnutí je snadné. Když to neuděláš, lidem nezbývá nic jiného než odejít.
Takže si vezmi tento kontrolní seznam, testuj svou stránku a dívej se na čísla. Nejde to samo od sebe — musíš to zkusit, měřit a učit se z toho. Ale když to zvládneš, tvoje stránka bude vypadat jako profesionální služba, ne jako amatérský projekt. A to je právě to, co potřebuješ, aby tvůj business rostl.
Další články, které by tě mohly zajímat
Poznámka k obsahu
Tento článek slouží pouze pro vzdělávací účely. Poskytuje obecné informace a doporučení na základě běžných praktik v designu vstupních stránek. Každá stránka je jedinečná a výsledky se mohou lišit v závislosti na vašem publiku, obsahu a cílích. Doporučujeme vždy testovat s vašimi skutečnými návštěvníky a sledovat metriky vaší konkrétní stránky. Nejsme právní poradci ani poradci pro marketing — je to jenom návod, jak lépe pochopit princip fungování hero sekcí.