Vizuální hierarchie
Vizuální hierarchie (visual hierarchy) je princip uspořádání prvků na stránce tak, aby přirozeně naváděly pohled uživatele a komunikovaly relativní důležitost obsahu. Pracuje s velikostí, barvou, kontrastem, odsazením a pozicí prvků. Dobře nastavená vizuální hierarchie umožňuje návštěvníkovi okamžitě pochopit strukturu stránky a najít to, co hledá.
Vizuální hierarchie přímo ovlivňuje, jak uživatelé stránku čtou, jak dlouho na ní zůstávají a zda provedou požadovanou akci. Její dopady jsou podloženy rozsáhlým výzkumem:
- Uživatelé stránku nečtou, ale skenují. Studie Nielsen Norman Group sledující 232 uživatelů pomocí eye-trackingu na tisících webových stránek identifikovala tzv. F-pattern: pohled se nejprve pohybuje horizontálně po horní části obsahu, pak o kus níže opakuje kratší horizontální pohyb a nakonec skenuje levou stranu vertikálně. Prvky mimo tuto trasu zůstávají bez pozornosti (NNGroup – F-Shaped Pattern, 2006)
- Obsah nahoře dostává většinu pozornosti. Novější eye-trackingová studie NNGroup analyzující 130 000+ fixací od 120 účastníků na tisících webů ukázala, že uživatelé tráví 57 % času prohlížením obsahu nad zlomem stránky (above the fold) a 74 % času v prvních dvou obrazovkách (NNGroup – Scrolling and Attention, 2018)
- Neatraktivní layout odrazuje. Průzkum Adobe zjistil, že 38 % uživatelů přestane se stránkou interagovat, pokud je obsah nebo layout vizuálně neatraktivní. Naopak 66 % lidí preferuje krásně navržený obsah před prostým a jednoduchým (Adobe – The State of Content, 2015)
- Kontrast a prostor zvyšují konverze. Případová studie CXL dokumentuje, že Open Mile zvýšil konverze o 232 % pouhým odstraněním rušivých prvků a přidáním prázdného prostoru kolem CTA tlačítka. SmartWool zaznamenal 17% nárůst tržeb na návštěvníka poté, co sjednotil velikost obrázků a zjednodušil vizuální hierarchii stránky (CXL – Visual Hierarchy & Conversions)
Časté dotazy
Jak vizuální hierarchie souvisí s Gestalt principy?
Gestalt principy (blízkost, podobnost, kontinuita, uzavřenost) tvoří psychologický základ vizuální hierarchie. Studie Baymard Institute (eye-tracking testy s 236 účastníky na produktových stránkách 60 e-shopů) potvrzuje, že 82 % e-commerce webů má závažné problémy s uspořádáním prvků na produktových stránkách, což přímo snižuje konverze (Baymard Institute – Product Page UX).
Stačí pro dobrou vizuální hierarchii zvětšit nadpisy a CTA tlačítka?
Velikost je jen jeden z nástrojů. NNGroup ve své studii eye-trackingových vzorců (232 účastníků) ukázala, že uživatelé reagují na kombinaci velikosti, kontrastu, barvy a pozice. Například horizontální pozornost se silně kloní doleva – 80 % fixací připadá na levou polovinu stránky a jen 20 % na pravou (NNGroup – Horizontal Attention Leans Left).
Jak vizuální hierarchii otestovat bez eye-trackingu?
Nejrychlejší metodou je tzv. squint test (test přimhouřením): přimhouřte oči a podívejte se na stránku. Prvky, které zůstanou viditelné, tvoří vaši skutečnou vizuální hierarchii. Pokud nejdůležitější informace (hodnota nabídky, CTA) nevyniknou, je třeba hierarchii upravit. Dalším přístupem je A/B testování různých variant layoutu – CXL dokumentuje případy, kdy pouhá změna vizuálního uspořádání přinesla dvouciferný nárůst konverzí bez úpravy textu.
Zdroje:
- NNGroup – F-Shaped Pattern For Reading Web Content (2006) – eye-trackingová studie 232 uživatelů na tisících webových stránek
- NNGroup – Scrolling and Attention (2018) – analýza 130 000+ fixací od 120 účastníků
- NNGroup – Horizontal Attention Leans Left – eye-trackingová studie distribuce horizontální pozornosti
- Adobe – The State of Content (2015) – průzkum uživatelských preferencí
- CXL – Visual Hierarchy & Conversions – případové studie dopadu vizuální hierarchie na konverze
- Baymard Institute – Product Page UX – eye-tracking testy 236 účastníků na 60 e-shopech
%201.webp)