TakéHierarchie prvků v rozhraní, Informační hierarchie rozhraníZákladní
Definice
Vizuální hierarchie je uspořádání prvků rozhraní tak, aby oko čtenáře vnímalo jejich důležitost ve zvoleném pořadí. Designér ji vytváří velikostí, kontrastem, barvou, tučností, prázdným místem a umístěním na stránce. Cílem je, aby uživatel bez čtení celého obsahu poznal, co je nadpis, co hlavní akce a co doplněk.
Proč oko potřebuje pořadí
Vizuální hierarchie řeší situaci, kdy na jedné obrazovce soupeří o pozornost deset prvků najednou. Člověk stránku nejdřív skenuje periferním viděním a teprve pak čte. Pokud mají všechny prvky podobnou velikost i kontrast, mozek nemá podle čeho vybrat vstupní bod a uživatel musí obsah procházet lineárně, což trvá výrazně déle a zvyšuje pravděpodobnost odchodu.
Čím se hierarchie tvoří
Nástrojů je několik a působí společně, ne izolovaně:
- Velikost a váha písma: nejrychleji čitelný signál rozdílu mezi nadpisem, perexem a běžným textem.
- Kontrast: tmavý text na světlém pozadí vystoupí dřív než šedý na šedém, i když má stejnou velikost.
- Barva a sytost: sytá barva primárního tlačítka funguje jen tehdy, když se na obrazovce neopakuje u pěti dalších prvků.
- Prázdné místo: odsazení kolem prvku ho izoluje a tím zvýrazní; hierarchii lze tvořit i bez jediné změny barvy.
- Pozice a zarovnání: v levo-pravých písmech se pohled obvykle drží horního levého rohu a postupuje dolů.
- Seskupení: prvky blízko sebe čte oko jako jeden celek, což popisují gestalt principy blízkosti a podobnosti.
Kde se hierarchie nejčastěji rozbije
Typickým selháním je inflace důrazu: každý stakeholder chce svůj blok „výrazný“, vznikne pět stejně křiklavých bannerů a výsledek nemá žádný vrchol. Druhým případem je hierarchie postavená jen na barvě, kterou nerozliší uživatel s poruchou barvocitu ani člověk v ostrém slunci. Třetí je rozpad na malých displejích: co v desktopovém layoutu drží pořadí díky sloupcům, po zalomení do jednoho sloupce ztratí smysl, pokud se nezmění i velikosti. Proto hierarchii vždy ověřuj v kontextu responzivního designu.
Vztah k HTML a čtečkám obrazovky
Vizuální pořadí není totéž co pořadí v kódu. Odečítač obrazovky i vyhledávač čtou strukturu dokumentu: úrovně nadpisů, pořadí prvků v DOM, sémantiku tlačítek a odkazů. Když se vizuálně nejdůležitější prvek zapíše jako <div> se zvětšeným písmem, pro uživatele klávesnice ani pro asistivní technologie žádný vrchol hierarchie neexistuje. Správný postup je držet obě hierarchie v souladu: sémantické nadpisy h1 až h3 pro strukturu, CSS pro vzhled, a vizuální přeskupení řešit tak, aby nevznikl rozpor s pořadím fokusu. Detailům se věnuje heslo přístupnost.
Jak hierarchii udržet v čase
Jednorázově navržená stránka hierarchii drží snadno, produkt se stovkami obrazovek ne. Pomáhá typografická škála s pevným počtem stupňů, definované varianty tlačítek (primární, sekundární, textové) a pravidlo, že na jedné obrazovce je nejvýš jedna primární akce. Tato pravidla patří do design systému, aby je nemusel každý designér a vývojář znovu odvozovat.
Příklady z praxe
Landing page se dvěma stejně silnými tlačítky
Na stránce s předplatným byla tlačítka „Vyzkoušet zdarma“ a „Domluvit demo“ obě v syté firemní barvě, stejně velká, vedle sebe. Uživatelé se rozhodovali pomaleji a část klikala na demo omylem. Po převedení druhého tlačítka do sekundární varianty (obrys místo výplně) zůstal na obrazovce jediný vrchol hierarchie a rozhodnutí se zjednodušilo.
Typografická škála místo náhodných velikostí
V rozsáhlé aplikaci vzniklo časem jedenáct různých velikostí písma mezi 13 a 19 pixely, takže rozdíl mezi nadpisem sekce a popiskem nebyl na první pohled patrný. Zavedení pevné škály tokenů se čtyřmi stupni a jasným určením, kde se který používá, obnovilo čitelné pořadí bez jediné změny barev.
:root { --font-body: 1rem; /* 16px, běžný text */ --font-lead: 1.125rem; /* perex */ --font-h3: 1.5rem; --font-h2: 2rem; } h2 { font-size: var(--font-h2); font-weight: 700; } h3 { font-size: var(--font-h3); font-weight: 600; } .lead { font-size: var(--font-lead); color: #333; }
Časté omyly
- MýtusDůležité prvky stačí zvětšit a zvýraznit barvou.
- Ve skutečnostiZvýraznění funguje jen relativně vůči okolí. Když se zvýrazní většina prvků, zmizí kontrast a hierarchie se vyruší. Často je účinnější okolní prvky ztlumit nebo přidat prázdné místo než hlavní prvek dál zvětšovat.
- MýtusVizuální hierarchie je estetika, ne funkce.
- Ve skutečnostiVizuální hierarchie určuje, jak rychle uživatel najde vstupní bod a hlavní akci. Projeví se v měřitelných věcech: čase do prvního kliknutí, dokončení formuláře i konverzním poměru.
- MýtusKdyž prvek vypadá jako nadpis, je to nadpis.
- Ve skutečnostiOdečítače obrazovky i vyhledávače čtou sémantiku kódu, ne velikost písma. Zvětšený div zůstává odstavcem textu a ve struktuře dokumentu žádnou úroveň nadpisu nevytvoří.
Časté dotazy
- Jak poznám, že má stránka slabou vizuální hierarchii?
- Slabou vizuální hierarchii odhalí jednoduchý test: rozostřete snímek obrazovky nebo se na něj podívejte tři vteřiny a pak jej zavřete. Pokud si nevybavíte, co bylo hlavní sdělení a kde byla hlavní akce, hierarchie nefunguje. Další signál je, že při čtení musíte obsah procházet řádek po řádku, protože nic nevystupuje. Pomáhá i test s uživateli, kdy měříte čas do prvního kliknutí; dlouhé váhání nad úvodní obrazovkou obvykle znamená příliš mnoho stejně silných prvků.
- Kolik primárních tlačítek může být na jedné obrazovce?
- Na jedné obrazovce by mělo být zpravidla jedno primární tlačítko, tedy jediná akce zvýrazněná nejsilnějším stylem. Ostatní akce dostávají sekundární nebo textovou variantu. Výjimkou jsou dlouhé stránky, kde se stejná primární akce opakuje na začátku a na konci; to je stále jedna akce, jen zopakovaná. Pokud rozhraní potřebuje dvě rovnocenné volby, je lepší je odlišit obsahem a umístěním než dát oběma stejnou sytou barvu, protože jinak uživatel ztrácí čas rozhodováním.
- Jak souvisí vizuální hierarchie s přístupností?
- Vizuální hierarchie musí odpovídat hierarchii v kódu, jinak vzniká rozpor mezi tím, co vidí vidoucí uživatel, a tím, co dostane uživatel odečítače obrazovky. Nadpisy je proto potřeba zapisovat sémanticky, tlačítka jako button a odkazy jako a. Zároveň nesmí hierarchie stát pouze na barvě: kombinace barvy s velikostí, váhou písma nebo ikonou zajistí, že rozdíl vnímá i člověk s poruchou barvocitu. Kontrast textu vůči pozadí má splňovat minimální poměry podle WCAG.
- Funguje vizuální hierarchie stejně na mobilu jako na desktopu?
- Vizuální hierarchie se na mobilu chová jinak, protože layout se obvykle zalomí do jednoho sloupce a mizí rozdíl daný šířkou nebo pozicí ve mřížce. Prvek, který byl na desktopu v pravém sloupci jako doplněk, se na mobilu ocitne přímo pod hlavním obsahem a získá váhu, kterou mít nemá. Řešením je upravit s breakpointy i typografickou škálu, odsazení a pořadí bloků, případně méně důležitý obsah skrýt do rozbalovacího prvku.
Zdroje
- Web Content Accessibility Guidelines (WCAG) 2.2(otevře se v novém okně)
- HTML Standard(otevře se v novém okně)
- CSS font-size(otevře se v novém okně)
- Gestalt psychology(otevře se v novém okně)
Související pojmy
