UX a přístupnost

Uživatelské toky

Lidem se to často plete, ale rozlišujeme dva pojmy:

• UI = User Interface, uživatelské rozhraní. Určuje, jak aplikace vypadá.
• UX = User Experience, uživatelská zkušenost (nebo uživatelský prožitek). Určuje, jak aplikace funguje a jak dobře se používá.

Firmy často hledají UI/UX designery, čímž se obvykle myslí, že hledají někoho, kdo umí fungování webu navrhnout a potom i hezky namalovat grafiku. Ty dvě věci rozhodně nějsou totéž. Můžete mít na pohled nádherný web, který se ale strašně špatně používá. Líbivá grafika se dobře prodává klientům, ale ti zkušení vědí, že na UX záleží mnohem víc.

Když na webu nejde nakoupit, protože uživatel nepochopí, kde najde košík, je nám k ničemu, že se ztratil na opravdu pěkné stránce.

Minule jsme si povídali o UI, tedy o tom, jak rozhraní vypadá (ale z našeho pohledu front-end vývojářů). Teď přijde na řadu UX: jak se s webem pracuje a jestli se v něm člověk dostane tam, kam potřebuje.

Začneme u toho, co uživatel chce, a teprve z toho odvodíme, jaké stránky na web potřebujeme.

Cíl a úkol

Nikdo nechodí na web kina proto, že by chtěl vidět stránku Program. Chodí tam, protože chce jít ve středu večer do kina. Tomu říkáme cíl uživatele (user goal): co chce mít hotové, popsané jeho slovy, ne slovy webu.

Na webu se cíl rozpadne na úkoly (tasks), tedy konkrétní činnosti. „Jít ve středu večer do kina“ znamená:

• zjistit, co se ve středu hraje,
• vybrat film a čas,
• koupit dvě vstupenky.

Jiný cíl, třeba „vzít třídu na školní představení“, má úplně jiné úkoly, i když vede přes stejný program.

Vypadá to jako slovíčkaření, ale mění to, jak navrhujeme. Kdo začne od stránek, nakreslí menu Program, Ceník, Kontakt a doufá, že si v něm každý najde cestu. Kdo začne od cíle, ptá se, co všechno musí člověk udělat, a stránky navrhne tak, aby mu v tom pomohly. Je to jako plánovat výlet: nejdřív víme, kam jedeme, a teprve potom hledáme spoje. Jízdní řád nikdo nečte pro radost.

Uživatelský tok

Uživatelský tok (user flow) je cesta, kterou uživatel projde od vstupu na web až k cíli: jaké obrazovky uvidí, co na nich udělá a kde se rozhoduje. Kreslí se jako diagram z několika značek:

• ovál je začátek a konec toku,
• obdélník je krok, obvykle jedna obrazovka,
• kosočtverec je rozhodnutí, ze kterého vede šipka pro každou odpověď,
• šipka ukazuje, kam se jde dál.

Koupě vstupenky v kině Sever vypadá jako tok takhle:

Diagram neříká nic o tom, jak obrazovky vypadají, jen v jakém pořadí jdou a kde se cesta větví. Právě proto se tok kreslí dřív než cokoli jiného: kroky se dají spočítat a každý z nich je místo, kde musí uživatel něco udělat.

Šťastná cesta a odbočky

Cestě, na které všechno vyjde, se říká šťastná cesta (happy path). Uživatel najde film, místa jsou volná, platba projde. Navrhnout jen šťastnou cestu je lákavé a je to nejčastější chyba, protože skutečný provoz je plný odboček: představení je vyprodané, v e-mailu je překlep, platba neprojde, uživatel se chce vrátit a vybrat jiný čas.

Každá odbočka potřebuje odpověď. Z každého kosočtverce musí vést šipka pro každou možnost a žádná nesmí končit ve slepé uličce. Hláška „Vyprodáno“ bez nabídky jiného času je přesně taková slepá ulička: uživatel s cílem „jít ve středu do kina“ odejde, i když o hodinu později bylo volno.

V praxi se u každého kroku měří, kolik lidí na něm odpadne. Každý krok navíc část z nich ztratí, a proto e-shopy nabízejí nákup bez registrace: povinný účet těsně před zaplacením je přesně ten krok, na kterém lidé zavřou prohlížeč, i když už měli zboží přidané v košíku. Řeknou si, že do registrace se jim teď nechce, nákup odloží, pak si ho rozmyslí a obchod přišel o potenciální nákup.

Od toku ke struktuře

Z hotového toku se dá vyčíst, jaké obrazovky web potřebuje. Každý obdélník je kandidát na stránku nebo na její část a u každého víme, co na něm musí být: na detailu filmu popis, časy představení a výběr počtu vstupenek, na dalším kroku formulář a shrnutí objednávky.

Když vedle sebe položíme toky pro všechny hlavní cíle, začnou se obrazovky opakovat. Program potřebuje jak koupě jednotlivé vstupenky, tak hromadný nákup vstupenek pro školní představení. Ze sjednocených obrazovek vznikne mapa webu (sitemap), tedy strom všech stránek a toho, jak na sebe navazují. Menu webu je pak zjednodušenou projekcí sitemapy.

Jak jednotlivé obrazovky z toku nakreslit, si ukážeme hned v další kapitole.