UX/UI principy

Mezery a hierarchie

Prázdné místo není plýtvání plochou. Mezery říkají, co k sobě patří, a dávají textu prostor, aby se dal číst. Spolu s velikostí a barvou pak tvoří hierarchii, tedy pořadí, ve kterém si stránky všimneme.

Mezery v násobcích 8

Stejně jako u písma si ani mezery nevymýšlíme pokaždé znovu. Většina design systémů staví na základní jednotce 8 px a všechny mezery jsou její násobky: 8, 16, 24, 32, 48, 64. Na drobnosti, třeba mezeru mezi ikonou a textem, se hodí polovina, tedy 4 px.

:root {
  --space-1: 0.5rem; /* 8 px */
  --space-2: 1rem;   /* 16 px */
  --space-3: 1.5rem; /* 24 px */
  --space-4: 2rem;   /* 32 px */
  --space-6: 3rem;   /* 48 px */
  --space-8: 4rem;   /* 64 px */
}

Proč zrovna osm? Dělí se beze zbytku na polovinu i čtvrtinu a i po zvětšení na 125 %, 150 % nebo 200 %, jak to dělají displeje s vysokým rozlišením, vychází na celé pixely. Hlavně ale stačí šest čísel místo dvaceti náhodných a designér s vývojářem se snadno domluví: „tady má být trojka“.

Vnitřní a vnější mezery

Mezery mají pravidlo, které se snadno pamatuje: uvnitř skupiny menší, mezi skupinami větší. Nadpis karty je blíž k jejímu textu než k sousední kartě. Popisek formulářového políčka je blíž ke svému políčku než k tomu nad ním.

.card {
  /* uvnitř karty */
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
}

.cards {
  /* mezi kartami víc */
  display: grid;
  gap: var(--space-4);
}

Když to pravidlo porušíme, mozek si prvky seskupí po svém a špatně. Neseskupuje je totiž podle toho, co k sobě patří logicky, ale podle toho, co je u sebe.

Mezera je nejlevnější způsob, jak stránku uspořádat. Rámečky, čáry a podbarvené plochy skupiny oddělí taky, ale stránku zaplní. Často stačí upravit mezery a půlka rámečků může zmizet.

Hierarchie

Hierarchie je pořadí, ve kterém stránku čteme. Nejdřív si všimneme nadpisu, potom hlavního tlačítka, pak teprve textu. Řídí ji pět nástrojů:

1. velikost – větší přitáhne pohled dřív,
2. tloušťka – tučné vynikne nad obyčejným,
3. barva a kontrast – tmavé na světlém a akcentová barva vyniknou nad šedou,
4. poloha – co je nahoře a vlevo, čteme dřív,
5. prázdné místo – prvek s volným prostorem kolem sebe vypadá důležitěji.

Častá chyba je použít všechny nástroje najednou na všechno. Nadpis velký, tučný, červený a podtržený zároveň neříká nic víc než nadpis jen velký a tučný, jen víc křičí. Na ostatní prvky pak už nic nezbude.

Opačná chyba je hierarchie žádná: všechno stejně velké a stejně tučné. Čtenář pak neví, kde začít, a začne nejspíš úplně jinde, než jsme chtěli.

Zvýraznění funguje, jen když je ho málo. Doporučený tarif mezi třemi stejnými vynikne, ale když na stránce svítí deset červených štítků „AKCE!“, nevynikne žádný a oko je začne přeskakovat jako reklamu. A zvýraznění nemá stát jen na barvě: kdo barvy nerozlišuje, pozná ho až podle tloušťky, rámečku nebo textu štítku.

Test přimhouřených očí

Hierarchii si můžeme ověřit jednoduchým trikem. Přimhuřte oči, až se text rozmaže a přestane být čitelný. Co z rozmazané stránky pořád vystupuje? To je to, čeho si návštěvník všimne jako první.

Ve vývojářských nástrojích jde rozmazání nasimulovat přesněji. V panelu Styles přidejte prvku body deklaraci filter: blur(4px) a podívejte se, jestli z rozmazané stránky vystupuje nadpis a hlavní tlačítko, nebo třeba reklamní proužek.