UI
Uživatelské rozhraní – vizuální a interaktivní prvky webu
Co je UI
UI (User Interface) je vrstva rozhraní, přes kterou člověk pracuje s webem nebo aplikací: tlačítka, formulářová pole, navigace, filtry, ikony, hlášky. Všechno, na co jde kliknout, co se dá vyplnit nebo přečíst jako pokyn.
Barvy, písmo a mřížku sem taky počítám, ovšem jako materiál, ne jako téma. Jak se navrhuje samotný vizuál, patří do kategorie design a grafika, třeba k pojmu typografie.
UX, nebo UI?
UI je součást UX, nikoli jeho synonymum. Rozhraní je to, co vidíte a čeho se dotýkáte. UX je výsledný dojem z celé cesty, do kterého se počítá i rychlost serveru, obsah, možnosti dopravy nebo potvrzovací e-mail. Web může mít nádherně nakreslené rozhraní a být přitom nepoužitelný, protože v něm hledaný produkt nejde najít.
Stavy prvků
Každý interaktivní prvek má víc podob než jednu. Hotové šablony vyřeší obvykle dvě a na zbytek se vykašlou, takže se to pozná až v ostrém provozu.
- výchozí stav
- hover, tedy najetí myší, který na dotykových zařízeních neexistuje a nesmí nést informaci
- stisknutý stav, který dá zpětnou vazbu, že klik dorazil
- zakázaný prvek, u kterého by mělo být poznat, proč nejde použít; šedé tlačítko bez vysvětlení patří k tomu, na co si lidé při testování stěžují nejhlasitěji
- chybový stav pole s hláškou u toho pole, ne někde nahoře nad formulářem
Konzistence je levnější než originalita
Když má stejná akce na pěti stránkách pět různých tlačítek, uživatel se pokaždé učí znovu. Proto vznikají designové systémy, tedy sady prvků s pevnými pravidly použití. U menšího webu bohatě stačí, když se drží jedna barva pro hlavní akci, jedna pro vedlejší a nikdo si k tomu nepřidává vlastní odstín podle nálady. Formulační stránku tlačítek řeším jinde; tady jde o to, aby se prvek choval všude stejně.
Praktická zkouška při přebírání cizí šablony: otevřete objednávkový formulář na mobilu, vyplňte ho schválně špatně a sledujte, co se stane. Rozhraní se láme skoro vždycky tady, protože chybové a zakázané stavy nikdo neprochází. Pokud hláška zůstane schovaná nad formulářem mimo obrazovku, máte co opravovat dřív, než dojde na barvy.