UX/UI principy

Zarovnání a konzistence

Stránka může mít dobré písmo, hezkou paletu i mezery v násobcích 8 a pořád působit neuklizeně. Dvě nejčastější příčiny jsou prvky, které nestojí na společné hraně, a stejné věci, které pokaždé vypadají jinak.

Společná hrana

Každý prvek na stránce by měl být zarovnaný s něčím jiným. Nadpis sekce, text pod ním i karty začínají na stejné svislé linii. Oko tu linii vidí, i když na stránce nakreslená není, a stránka díky ní působí jako jeden celek.

Nejčastěji hranu rozbije padding, který má každá sekce jiný. Nadpis v jedné sekci odsadíme o 13 px, v další o 20 px a v kartě o 21 px, a levý okraj je najednou zubatý. Pomůže, když vodorovné odsazení nastavíme na jednom místě:

:root {
  --page-gutter: var(--space-3);
}

/* všechny sekce mají stejný vodorovný okraj */
main > section {
  padding-inline: var(--page-gutter);
}

S centrováním opatrně. Na krátký nadpis nebo jedno tlačítko se hodí, ale odstavec zarovnaný na střed se čte špatně, protože každý řádek začíná jinde. Delší text proto zarovnáváme vlevo. Zarovnání do bloku (text-align: justify) na webu nepoužíváme: prohlížeč neumí dělit slova tak dobře jako sazební program a v textu vznikají široké mezery.

Mřížka

Společných hran může být víc než jedna. Mřížka (grid) je soustava sloupců, do kterých se prvky stránky skládají. Dvanáct sloupců je oblíbených, protože se dělí na polovinu, třetiny, čtvrtiny i šestiny:

.layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-3);
}

.main {
  grid-column: span 8;
}

.sidebar {
  grid-column: span 4;
}

Gridu jsme se v prvním modulu věnovali do hloubky. Tady nám jde o to, že sloupce nejsou jen technika rozvržení, ale i nástroj designu: co stojí ve stejném sloupci, má stejnou hranu.

Konzistence

Stejná věc má na celém webu vypadat stejně. Když je hlavní tlačítko jednou oranžové a hranaté a podruhé modré a kulaté, návštěvník se musí pokaždé znovu učit, co je tlačítko. A když vypadá odkaz jako nadpis, nikdo na něj neklikne.

/* chyba, každé tlačítko má vlastní pravidla */
.buy { color: #0077b6; font-size: 11px; }
.form button { padding: 1px 5px; background: #e0e0e0; }

/* správně, jedno tlačítko a jedna varianta */
.button { padding: var(--space-1) var(--space-3); border-radius: 4px; }
.button--primary { color: var(--color-paper); background: var(--color-accent); }

Konzistenci drží stejné nástroje, které už známe: tokeny pro barvy, velikosti a mezery a jedna třída pro každý druh prvku. Rozdíl mezi prvky má mít důvod. Hlavní tlačítko se od vedlejšího liší barvou, protože je důležitější, ne proto, že ho kreslil někdo jiný.

Konzistentní musí být i stavy. Odkaz, na který najedeme myší, by se měl měnit všude stejně, a stejně tak tlačítko, které má fokus z klávesnice.