Hero section
Úvodní, vizuálně dominantní sekce webu
Co je hero section
Hero section je úvodní blok stránky, který nese hlavní sdělení, obvykle nadpis, doplňující větu, vizuál a výzvu k akci. Je to první věc, kterou návštěvník po načtení přečte, a často jediné místo, kde se dozví, kam vlastně přišel.
Úkol se snadno popisuje a hůř plní: během pár vteřin sdělit, co firma nabízí a komu, a nabídnout další krok. Kde přesně končí viditelná část obrazovky a proč to není pevná hranice, řeším u pojmu above the fold.
Co v hero bloku musí být
Nadpis, který popisuje nabídku slovy zákazníka, ne interním názvoslovím. „Řešení pro moderní firmy“ nikomu neřekne nic, „Správa Google Ads pro e-shopy s potravinami“ ano. Pod ním jedna věta, která doplní kontext, a tlačítko s konkrétním slovesem. Vizuál má sdělení podpořit, nikoli ho zastoupit.
U e-shopu vypadá úvodní blok jinak než u služby. Zákazník obvykle přichází s konkrétní potřebou, takže víc než heslo ocení vyhledávání, hlavní kategorie a informaci o dopravě. Firemní web s jednou službou naopak sdělení potřebuje, protože bez něj návštěvník neví, co si má vybrat.
Karusel v úvodním bloku bývá kompromis z porady, na které se nikdo nedohodl, které sdělení je hlavní. Praxe je taková, že většina návštěvníků uvidí jen první snímek. Buď kliknou dřív, než se obrázek přepne, nebo odrolují. Zakázané to není, jen počítejte s tím, že snímky dva až pět mají malou šanci, že si jich někdo všimne. Když už karusel zůstat musí, na první pozici patří to, na čem opravdu záleží.
Čím se hero nejčastěji kazí
Fotka bez sdělení. Obrázek přes celou obrazovku, na kterém se usmívá tým u notebooku, a nikde věta, co firma dělá. Hned vedle stojí obecné heslo typu „Vaše spokojenost je náš cíl“, které by šlo přilepit na web autoservisu i pojišťovny. A pak výkon: velký nekomprimovaný obrázek na začátku stránky zdrží vykreslení a stáhne hodnocení rychlosti, protože zrovna on bývá měřeným prvkem.
Tlačítko „Zjistit více“ spadá do stejné kategorie. Neříká, co se po kliknutí stane, takže si to člověk musí zkusit. Formulace typu „Chci nezávaznou nabídku“ nebo „Zobrazit ceník“ nastavují očekávání líp; vizuální stránku téhle otázky rozebírám u designu CTA tlačítka.