Když návštěvník přijde na váš web, jeho oči nečtou stránku popořadě shora dolů. Prolétají ji a skáčou mezi prvky, které vynikají. Vizuální hierarchie je designový princip, který řídí, čeho si všimnou jako prvního, druhého a třetího. Bez ní se ztratí i dobře napsaný obsah, protože nic nevede oko k tomu, na čem záleží nejvíc.
Vizuální hierarchie na webu je záměrné uspořádání prvků podle velikosti, barvy, kontrastu, odsazení a umístění tak, aby se návštěvníci přirozeně soustředili nejdřív na nejdůležitější informace. Rozhoduje o tom, zda někdo pochopí vaši hodnotu během několika vteřin, nebo odejde zmatený, co vaše firma nabízí. Správné nastavení hierarchie patří mezi designová rozhodnutí s největším dopadem.
Proč je vizuální hierarchie důležitá?
Návštěvníci se v průměru několik vteřin rozhodují, zda na stránce zůstanou. V té době nečtou odstavce. Prolétají nadpisy, obrázky a tlačítka, aby zjistili, zda je stránka relevantní. Stránka se silnou vizuální hierarchií svůj účel sdělí okamžitě. Stránka bez ní nutí návštěvníky vynaložit víc úsilí a většina se nebude namáhat.
Hierarchie také pohání akci. Když je hlavní výzva k akci vizuálně dominantní, klikne na ni víc návštěvníků. Když splyne s okolním obsahem, konverze klesají. Vztah mezi vizuální hierarchií a obchodními výsledky je přímý: jasná hierarchie vytváří jasnější cesty k akcím, které chcete, aby návštěvníci udělali.
Jaké nástroje vytvářejí vizuální hierarchii?
Designéři používají stálou sadu vizuálních vlastností k určení priority. Každou lze upravovat samostatně nebo je kombinovat pro silnější efekt.
Velikost
Větší prvky přitahují pozornost jako první. Hlavní nadpis o velikosti 36 pixelů zaujme oko dřív než běžný text o velikosti 16 pixelů. Rozdíly ve velikosti mezi úrovněmi nadpisů vytvářejí jasné pořadí čtení. Když je všechno na stránce zhruba stejně velké, nic nevyniká a návštěvníci nemají vstupní bod.
Barva a kontrast
Vysoce kontrastní prvky na neutrálním pozadí si žádají pozornost. Jasné tlačítko na bílé stránce nelze přehlédnout. Prvky s nízkým kontrastem ustupují do pozadí. Hlavní barvu značky používejte střídmě na prvky, na kterých záleží nejvíc: hlavní nadpis, hlavní výzvu k akci a klíčové statistiky nebo reference. Okolní obsah by měl používat neutrální tóny, které podporují, a ne konkurují.
Odsazení a prázdný prostor
Prvky obklopené prázdným prostorem působí důležitěji než prvky namačkané těsně k sobě. Štědré odsazení kolem tlačítka výzvy k akci signalizuje, že si zaslouží pozornost. Stísněná rozvržení způsobují, že všechno působí stejně naléhavě, což znamená, že nic nepůsobí naléhavě. Článek o tom, jak používat prázdný prostor na webu, tento princip popisuje prakticky a podrobně.
Umístění
Návštěvníci procházejí webové stránky podle předvídatelných vzorců, obvykle začínají vlevo nahoře a pohybují se dolů. Nejdůležitější obsah patří na začátek stránky a na mobilu do viditelné části před rolováním.
Jak uplatnit vizuální hierarchii na firemním webu
Silná hierarchie sleduje stejný vzorec na každém typu stránky. Konkrétní podoba se mění, ale struktura zůstává stejná.
Hierarchie domovské stránky
Domovská stránka potřebuje nejjasnější hierarchii na celém webu, protože slouží nejširšímu publiku. Hlavní nadpis říká, co firma dělá. Hlavní tlačítko výzvy k akci je nápadně umístěno pod ním. Článek o tom, jak udělat, aby váš web vypadal profesionálně, popisuje, jak hierarchie zapadá do širšího cíle vypiplaného vzhledu. Článek o tom, co je UX design, vysvětluje, jak hierarchie souvisí s celkovým zážitkem návštěvníka.
Jak vizuální hierarchii řeší WEMASY
Šablony WEMASY jsou vytvořeny s vizuální hierarchií jako základním designovým principem. Velikosti nadpisů, styl tlačítek, výchozí odsazení a rozvržení obsahových bloků jsou strukturovány tak, aby nejdůležitější prvky přirozeně vynikly. Vizuální editor umožňuje upravovat hierarchii změnou úrovní nadpisů, stylů tlačítek a odsazení sekcí, přičemž základní struktura zůstává zachovaná na počítači i mobilu.
Co je zahrnuto, zjistíte na stránce tvůrce webů WEMASY, a balíčky najdete na stránce s ceníkem.
Často kladené otázky
Co je vizuální hierarchie na webu?
Vizuální hierarchie je uspořádání prvků stránky tak, aby si návštěvníci všimli nejdůležitějších informací jako prvních. K vytvoření tohoto pořadí přispívají velikost, barva, kontrast, odsazení a umístění. S tvůrcem webů WEMASY si to můžete nastavit přímo na svém webu.
Proč je vizuální hierarchie důležitá pro konverze?
Jasná hierarchie vede návštěvníky k akci, kterou od nich chcete. Když je výzva k akci vizuálně dominantní a hodnota nabídky je okamžitě vidět, víc návštěvníků pochopí, co mají dělat, a dotáhne to do konce. Bez hierarchie se výzvy k akci ztrácejí mezi konkurujícími si prvky.
Jak poznám, že má moje stránka dobrou vizuální hierarchii?
Přimhouřte oči nebo se na stránku podívejte z dálky. Prvek, který vyniká nejvíc, by měl být váš hlavní nadpis nebo hlavní výzva k akci. Pokud nic nevyniká, nebo dominuje špatný prvek, je třeba hierarchii upravit. Požádejte někoho, kdo váš web nezná, aby do pěti vteřin určil hlavní sdělení.
Jaký je rozdíl mezi vizuální hierarchií a rozvržením?
Rozvržení určuje, kde jsou prvky na stránce umístěny: sloupce, mřížky a pořadí sekcí. Vizuální hierarchie určuje, který z těchto prvků přitáhne pozornost jako první, a to velikostí, barvou a kontrastem. Stránka může mít logické rozvržení, ale špatnou hierarchii, pokud o pozornost soutěží všechny prvky stejně.
Funguje vizuální hierarchie na mobilu stejně?
Principy jsou stejné, ale uplatnění se liší. Mobilní obrazovky zobrazují najednou méně obsahu, takže hierarchie musí být přísnější. Prvky skládejte svisle v pořadí podle priority. Zajistěte, aby se hlavní nadpis a hlavní výzva k akci objevily dřív, než návštěvník začne rolovat. Oproti verzi pro počítač omezte počet konkurujících si prvků.
Mohou šablony poskytnout dobrou vizuální hierarchii?
Ano. Dobře navržené šablony vytvářejí hierarchii strukturou nadpisů, stylem tlačítek a výchozím odsazením. Úpravy by měly fungovat v rámci této struktury, a ne ji přebíjet. Zvětšení jednoho nadpisu na mnohem větší velikost nebo přidání několika jasně barevných tlačítek může hierarchii, kterou šablona poskytuje, narušit.