UI audit webu: jak analyzujeme použitelnost, přístupnost a kvalitu rozhraní

UI audit je systematická analýza uživatelského rozhraní webu nebo aplikace. Jeho cílem je identifikovat problémy v použitelnosti, přístupnosti, vizuální hierarchii a konzistenci designu.

Na rozdíl od klasického UX auditu se UI audit zaměřuje především na kvalitu samotného rozhraní – typografii, layout, navigaci, formuláře nebo přístupnost.

V tomto článku popisujeme naši metodiku UI auditu a standardy, které při analýze používáme.

Co je UI audit

UI audit je proces, při kterém analyzujeme existující web z pohledu:

• použitelnosti (usability)

• přístupnosti (accessibility)

• konzistence designu

• vizuální hierarchie

• responzivity

Cílem je najít problémy, které mohou negativně ovlivňovat:

• orientaci uživatelů

• čitelnost obsahu

• interakci s rozhraním

• konverze

Audit se opírá o etablované standardy a design systémy používané například ve veřejné správě nebo velkých technologických firmách.

1. Audit přístupnosti podle WCAG 2.2

Základní část UI auditu tvoří kontrola přístupnosti podle standardu WCAG 2.2 (Web Content Accessibility Guidelines).

https://www.w3.org/WAI/WCAG22/understanding/

WCAG definuje pravidla pro tvorbu webu tak, aby byl přístupný i pro uživatele se zdravotním omezením.

Standard je založen na čtyřech principech:

Perceivable – obsah musí být vnímatelný

Kontrolujeme například:

• strukturu nadpisů

• alternativní texty obrázků

• kontrast textu

• čitelnost typografie

Operable – web musí být ovladatelný

Testujeme například:

• navigaci pomocí klávesnice

• viditelnost focus states

• přístupnost formulářů

Understandable – rozhraní musí být srozumitelné

Analyzujeme:

• navigační strukturu

• formuláře

• chybové hlášky

Robust – kompatibilita s technologiemi

Kontrolujeme:

• HTML semantiku

• ARIA atributy

• kompatibilitu s asistivními technologiemi

2. Responzivita a Reflow

Dalším krokem auditu je test Reflow podle W3C.

https://www.w3.org/WAI/WCAG21/Understanding/reflow

Testujeme, zda je web použitelný při zvětšení až na 400 %.

Kontrolujeme například:

• horizontální scroll

• přetečení textu

• rozpad layoutu

• nepřístupné prvky

Nejčastější problémy:

• fixed-width layout

• absolutní pozicování

• komponenty bez responzivního chování

3. Barevný kontrast

Kontrast analyzujeme podle WCAG pravidel.

https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

Minimální hodnoty kontrastu:

Kontrolujeme například:

• text vs pozadí

• tlačítka

• odkazy

• placeholder text

Nízký kontrast je jedna z nejčastějších chyb webového designu.

4. Typografie a čitelnost textu

Typografie výrazně ovlivňuje čitelnost a srozumitelnost obsahu.

Při auditu používáme doporučení U.S. Web Design System.

https://designsystem.digital.gov/components/typography/

Kontrolujeme například:

• velikost textu

• řádkování

• délku řádku

• strukturu nadpisů

Doporučené minimum:

• body text: 16 px

• line height: 1.4–1.6

• délka řádku: 60–80 znaků

5. Layout a spacing

Správné mezery mezi prvky jsou klíčové pro čitelnost rozhraní.

Pro audit spacingu používáme doporučení GOV.UK Design System.

https://design-system.service.gov.uk/styles/spacing/

Analyzujeme například:

• vertikální rytmus

• mezery mezi sekcemi

• konzistenci layoutu

Typické problémy:

• náhodný spacing

• příliš těsné komponenty

• vizuálně nevyvážený layout

6. Navigace a breadcrumbs

Navigace je klíčová pro orientaci uživatele na webu.

Používáme doporučení GOV.UK breadcrumbs komponenty.

https://design-system.service.gov.uk/components/breadcrumbs/

Kontrolujeme například:

• logiku navigační struktury

• konzistenci breadcrumbs

• soulad s URL strukturou

7. Formuláře a chybové hlášky

Formuláře jsou často kritickým místem webu.

Při auditu používáme doporučení GOV.UK Form Error Summary.

https://design-system.service.gov.uk/components/error-summary/

Analyzujeme například:

• validaci formulářů

• zobrazení chyb

• navigaci na chybné pole

• čitelnost formulářů

Časté problémy:

• chybové hlášky bez vysvětlení

• validace až po odeslání formuláře

• špatná navigace na chybný input

8. Velikost klikacích prvků

Na mobilních zařízeních kontrolujeme velikost klikacích prvků podle doporučení Material Design.

https://m1.material.io/usability/accessibility.html

Doporučená minimální velikost:

48 × 48 px

Kontrolujeme například:

• tlačítka

• odkazy

• ikony

• checkboxy

9. Vizuální hierarchie

Vizuální hierarchie pomáhá uživatelům rychle pochopit strukturu stránky.

Opíráme se o principy Nielsen Norman Group.

https://www.nngroup.com/articles/principles-visual-design/

Analyzujeme například:

• velikost nadpisů

• kontrast prvků

• layout komponent

• pořadí čtení

Dobrá vizuální hierarchie umožňuje uživatelům rychle pochopit:

• co je hlavní obsah

• kde je hlavní akce

• jak spolu prvky souvisí

10. Konzistence designu

Konzistence je jeden z nejdůležitějších UX principů.

https://www.nngroup.com/articles/consistency-and-standards/

Kontrolujeme například:

• jednotný styl tlačítek

• strukturu formulářů

• chování komponent

• navigační vzory

Velké projekty často trpí tzv. UI drift, kdy se komponenty postupně začnou lišit.

Jak vypadá výstup UI auditu

Výstupem je dokument obsahující:

• seznam nalezených problémů

• jejich závažnost

• screenshoty

• reference na standardy

• doporučená řešení

Typická struktura:

Problém
Popis
Dopad na UX
Reference na standard
Doporučené řešení

Proč UI audit dává smysl

UI audit pomáhá:

• zlepšit použitelnost webu

• zvýšit přístupnost

• snížit počet UX chyb

• sjednotit design

• připravit web na redesign

Díky použití standardů jako WCAG, GOV.UK Design System, USWDS nebo Nielsen Norman Group jsou doporučení založená na ověřených UX principech, nikoliv pouze na subjektivním názoru.

Shrnutí

UI audit je důležitý nástroj pro zlepšení kvality webu. Pomáhá odhalit problémy v designu, přístupnosti a použitelnosti ještě před tím, než negativně ovlivní uživatelskou zkušenost nebo konverze.

Díky systematickému přístupu a využití ověřených standardů lze vytvořit rozhraní, které je:

• přehlednější

• přístupnější

• konzistentnější

• jednodušší na používání