Lekce 1 - Úvod do UX

Vítejte u úvodní lekce o UX, neboli User eXperience. Seznámíme se s oborem UX designu, vysvětlíme si, proč je důležité se věnovat návrhu rozhraní a uvedeme si nejzákladnější pravidla jeho návrhu.

Co je to UX?

UX, neboli česky "Uživatelský prožitek", je obor zabývající se usnadněním používání rozhraní webů, programů, ale i strojů a dalšího. Uživatel může mít z používání, například webu, různé pocity:

• Logicky umístěné navigační prvky nebo přehledně uspořádaný obsah jsou jedním ze znaků, které uživatele zaujmou.
• Naopak, pokud je web přehlcen reklamou, která "skáče" a stránka se pomalu načítá, uživatel často web opustí.

UX je často vnímán jako synonymum UI (User Interface či uživatelské rozhraní). Oba obory se týkají procesu tvorby rozhraní, ale každý řeší různou část. Úkolem UI je tvorba rozhraní, zatímco úkolem UX je promyšlení návrhu rozhraní. V praxi se často oba obory kombinují a mluvíme tak o UX/UI designu.

Je důležitější UX, nebo UI?

UX a UI je stejně důležité a hrají svou nezastupitelnou roli. Pokud vytvoříme graficky líbivé rozhraní, například webu, se kterým ovšem nelze rychle pracovat, pak můžeme tvrdit, že takový web má dobré UI, ale špatné UX. Naopak pokud se web dobře ovládá, ale nechce se nám na něj vůbec koukat, pak máme dobré UX a špatné UI.

Proč je UX důležitý obor?

Tuto otázku si zodpovíme ukázkou několika špatných řešení rozhraní, které uživatele dokáží velmi rychle odradit od jejich používání či pořízení.

Jako první příklad si uvedeme výtahová tlačítka:

Pokud potřebuje uživatel vysvětlit, jak rozhraní funguje (v našem případě, jak si zvolit poschodí), pak je rozhraní nepřehledné a uživatele bude mást. Dobré rozhraní, nejen výtahu, ale i webu či programu, musí být na první pohled pochopitelné a použitelné.

Další příklad si uvedeme autorádio:

Velkým stříbrným kolečkem může řidič ovládat automatickou převodovku, kolečkem napravo si může upravovat hlasitost. Nepozornému řidiči by se mohlo stát, že místo zesílení rádia vyřadí převod. Rozhraní a jeho použitelnost je jedním z rozhodujících faktorů při výběru produktu, nepraktické rozhraní může tedy uživatele odradit.

Mohli bychom dále uvádět další příklady, které se vyskytují nejen v reálném světě. Nyní si ovšem zodpovíme naši otázku, proč je UX důležitý. Zásady UX designu nám totiž umožňují vytvářet rozhraní, nejen webová a programová, která jsou srozumitelná a práce s nimi je rychlá a efektivní.

Desatero UX designera

Návrh rozhraní není triviální věc. Je potřeba zohlednit velké množství aspektů. Desatero "přikázání" UX designera obsahuje ty nejdůležitější.

1. Uživatel vždy ví, co se děje

Rozhraní by mělo uživatele informovat o stavu systému. K tomuto můžeme využít potvrzovací zprávy, zvýrazňování položek, nebo ukazatel průběhu:

Ukazatel průběhu kopírování složky ve Windows 10.

2. Rozhraní využívá srozumitelný designový jazyk

Uživatel musí bez jakýchkoli dodatečných znalostí porozumět zprávám programu. Tlačítka je vhodné ilustrovat ikonkami:

Ukázka ikon programu Microsoft Excel.

3. Uživatel musí mít nad programem skrz rozhraní naprostou kontrolu

Rozhraní by mělo poskytovat uživateli veškeré dostupné možnosti programu a nic před ním neskrývat. Pokud nastane v programu chyba, pak musí program uživateli umožnit problém vyřešit, například pomocí tlačítka "Zrušit":

Hlášení Windows 10 o chybě při práci se souborem.

4. Rozhraní využívá zaběhlé a známé standardy

V dnešní době existuje mnoho standardizovaných designových jazyků, třeba Material design používaný v aplikacích operačního systému Android. Aplikace využívající tento jazyk mají stejné ovládací prvky. uživatel tak nemusí rozpoznávat nové ovládací prvky:

Ukázka aplikace používající designový jazyk Material design.

5. Rozhraní nepotřebuje vysvětlení

Rozhraní musí být pro uživatele přehledné a jeho ovládání intuitivní, nenutíme jej si pamatovat ovládání programu nebo webu. Vhodné je využívat vizuální nápovědy:

Vizuální nápověda při výběru fontu v programu Microsoft Word.

6. Rozhraní ošetřuje špatné vstupy

Rozhraní by mělo validovat vstupy, napovídat hodnoty a redukovat zbytečné kroky. Před provedením nevratné změny je vhodné se uživatele zeptat, je-li si skutečně jist. Vzorové rozhraní například ošetřuje přihlašovací e-mailovou adresu:

Ošetření přihlašovacího e-mailu na webu.

7. Rozhraní obsahuje "složitější režim" pro experty

Běžný uživatel nejpravděpodobněji využije automatické nastavení. Náš program ovšem mohou používat i "počítačově zdatní" uživatelé, kterým je vhodné poskytnout rozšířené nastavení:

Pokročilé nastavení v programu VirtualBox.

8. Rozhraní je estetické a minimalistické

Zde se dostáváme spíše do roviny UI. Vytvářené uživatelské prostředí by mělo být vzhledné či bez zbytečných funkcionalit. Uveďme si příklad z praxe. Kolik tlačítek má televizní ovladač u vás doma? A kolik tlačítek reálně využíváte?

Kolik tlačítek potřebuje ovládání televize?

9. V případě problému se uživatel má na koho obrátit

Každý program by měl obsahovat kontakt na technickou podporu. Nemusí se hned jednat o celé oddělení, menším projektům postačí e-mail pro kontaktování v případě problémů.

10. Ke složitějšímu rozhraní je uživateli dostupná nápověda

Někdy se můžeme snažit udělat co nejpřehlednější uživatelské rozhraní, ale i tak může být pro některé uživatele, zejména ze začátku, mírně matoucí. Pro ulehčení nasazení našeho programu by měla vždy existovat nápověda. Uživatel tak vždy bude mít jistotu, že bude vědět, jak pokračovat.

Touto lekcí jsme se uvedli do problematiky UX designu, vysvětlili jsme si základní myšlenku tohoto oboru a na příkladech z praxe si ukázali základní pravidla.

V příští lekci, Práce UX designéra, si ukážeme, jak může vypadat práce UX designéra s ukázkou práce s návrhy a jak probíhá jeho spolupráce s klientem a uživateli.