Lekce 2 - Práce UX designéra

V minulé lekci, Úvod do UX, jsme si uvedli termíny UX a vysvětlili si, proč je důležité se zabývat návrhem uživatelského rozhraní.

V dnešní lekci si ukážeme, jak může vypadat práce UX designéra. Dozvíme se, proč je důležité spolupracovat s klientem a uživateli při návrhu rozhraní a jak s nimi komunikovat. Dále si jednoduše nastíníme základní postupy práce UX designéra a zkusíme si vytvořit grafický návrh rozhraní.

Práce UX designéra

Na vývoj uživatelského rozhraní lze pohlédnout ze dvou různých stran. Na jedné straně stojí programátoři, kteří při vývoji vidí technické záležitosti. Jimi jsou například výběr programovacího jazyka, cílová platforma, způsoby uložení dat, logika programu a nad tímto postavené uživatelské rozhraní.

Na opačné straně stojí uživatel, který nemá znalosti v oblasti vývoje a programování. Uživatel vidí grafické rozhraní, se kterým dokáže pracovat. Vše za rozhraním je pro něj "magie". A stejně, jako se liší pohledy programátorů a uživatelů, se mohou lišit jejich požadavky na rozhraní. Uživatelé mohou mít požadavky, které programátora často ani nemusí napadnout!

Proto je důležité se zabývat požadavky uživatelů a plnit jejich přání. A od toho je tu UX designér. Pomocí společného dialogu je možné vytvořit graficky příjemné, uživatelsky přívětivé a snadno ovladatelné rozhraní. Neméně důležitá je další osoba v celém procesu, a to náš klient, který nám práci zadává.

Jak spolupracovat s klienty a uživateli

Ještě před zahájením návrhu grafického rozhraní a celého projektu, je dobré si s klientem naplánovat schůzku a na ní probrat, co si přeje a co od systému očekává. Můžeme získat cenné informace využitelné nejen při návrhu rozhraní, ale i při dalších krocích ve vývoji.

Metod, jak pracovat s klienty je samozřejmě více než jenom schůzka. Má-li například náš vyvíjený systém nahradit jiný existující program, pak je velmi vhodné využít tohoto systému a zjistit, proč jej chce klient nahradit. Můžeme se tak poučit z chyb rozhraní předešlého programu a vyvarovat se jich, stejně jako můžeme vypozorovat návyky uživatelů, které bychom měli zakomponovat do vznikajícího systému. Vyšším stupněm této metody je pouze nepozorovat práci uživatelů, ale do práce se sám zapojit!

Pracujeme-li na velkém systému, který má používat velké množství lidí, pak se těchto budoucích uživatelů můžeme zeptat na jejich požadavky prostřednictvím hromadného dotazníku nebo ankety.

Ať už při komunikaci s budoucími uživateli našeho systému zvolíme libovolnou metodu, vždy je vhodné se řídit heslem "Uživatel má vždy pravdu".

Kroky práce UX designéra

Při návrhu rozhraní má UX designér na práci hodně různých úkolů. Na začátku sbírá a analyzuje informace. Může využívat analytické nástroje a marketingové techniky, aby zmapoval základy pro svou další práci. Poté vytváří postupně několik různých návrhů uživatelských rozhraní. Každý z těchto návrhů se zaměřuje na určitý problém a snaží se jej efektivně řešit. UX designér často není jediný, kdo na těchto návrzích pracuje. Na vývoji pracuje celý tým a to od UX a UI designérů přes grafiky až po front-end programátory, kteří rozhraní programují, a testery.

Obvykle postupujeme standardně přes několik kroků k tvorbě ideálního uživatelského rozhraní, které na sebe navazují a kde návrh následující staví na informacích z předchozího návrhu. Naši práci začínáme skicováním, díky kterému si vizualizujeme myšlenky, které nás k našemu projektu napadají. Dále postupujeme k wireframu.

Wireframe

Wireframe, neboli česky drátěný model, je základní kostra konkrétního rozhraní. Neobsahuje žádné grafické prvky, jako loga nebo obrázky a ideálně neobsahuje ani žádné barvy, které by mohly rozptylovat oko. Čím nám wireframe pomůže? Díky tomuto modelu rozhraní budeme mít jasnou představu o rozložení jednotlivých grafických prvků, navigaci v systému a celkové struktuře grafického rozhraní.

Typicky nevytváříme pouze jeden jediný drátěný model, ale celou sadu modelů. Rozhraní se mění podle toho, co je potřeba uživateli prezentovat. Uveďme si příklad: jinak bude vypadat úvodní stránka e-shopu, jinak bude vypadat stránka s detailem produktu a úplně jinak bude vypadat stránka nákupního košíku.

Wireframe dále používáme při návrhu designu rozhraní. Po jeho vytvoření je také vhodné jej prezentovat klientovi a uživatelům a dle jejich hodnocení je možné provádět změny. Změny ve wireframe jsou snadnější a levnější, než klientovi prezentovat hotové rozhraní a následně měnit některé prvky.

Vyzkoušejme si nyní vytvořit wireframe. Vezměme si tužku a papír a vytvořme wireframe pro e-shop nabízející potraviny. Pro začátek pár rad: obrázky nahraďme proškrtnutými obdélníky. Výsledek může vypadat nějak takto:

Pro ukázku našeho wireframu a ještě lepší možnost představy, jak bude moci naše rozhraní vypadat, můžeme pro klienta wireframe vylepšit tak, že částečně některé prvky vizualizujeme. "Proškrtnuté obdélníky" nahrazujeme skutečnými obrázky a celý model získává barvu.

Ukážeme si to na našem příkladu e-shopu s potravinami:

Prototyp

Dalším krokem při návrhu rozhraní je prototyp, neboli funkční maketa rozhraní. Prototyp vytváříme jak pro klienta, který si tak může vyzkoušet aplikaci a její rozhraní dřív, než je dokončena, tak pro fázi testování reálnými uživateli. Na základě interakce uživatele s prototypem lze vyladit ovládání a samotné zobrazení.

Většinou se prototypy vytvářejí ve speciálních programech, ale ukážeme si, že i prototyp je možné vytvořit pouze pomocí tužky a papíru:

Proto, abychom mohli náš finální vizuál uživatelského rozhraní prezentovat klientovi, můžeme využít tzv. mockupu. Jedná se o grafický výstup, vizualizaci našeho uživatelského rozhraní na reálných obrazovkách uživatelových zařízení:

Jak tvořit návrhy

Poslední otázkou je, jak tyto návrhy vytvořit, jaké mají mít konkrétní náležitosti a postupy, jaký software máme používat. Pokud mají návrhy sloužit pouze jako pomůcka při vývoji, vystačíme si někdy i s tužkou a papírem. Budeme-li ovšem návrh prezentovat klientovi či uživatelů, pak je vhodné jej vytvořit digitálně. K tomu můžeme použít jak běžné grafické programy, tak specializovaný software. Mezi nejznámější programy patří například Microsoft Visio, Pencil2D, Axure a mnohé další. Všechny kroky práce při tvoření uživatelských rozhraní si detailně rozebereme později v lekci – Návrh uživatelského rozhraní v UX, kde ke každému kroku uvádíme vhodné programy.

Nezbytným krokem po vytvoření návrhů je testování uživateli. Můžeme ho zahrnout i v procesu tvorby návrhů a otestovat již například wireframe. Testování nám totiž umožní odhalit chyby a nepřesnosti dříve než po finálním naprogramování.

Práce UX designéra je však mnohem komplexnější, než jak jsme si tu v úvod do přehledu práce UX designéra ukázali. Je třeba znát hodně principů tvorby a používat různé přístupy. Před návrhem je třeba analyzovat pole, kde budeme působit, poznat naše uživatele, můžeme si vytvořit přehled díky základní analýze, kterou popisujeme v lekci Jak si udělat základní analýzu v UX. Musíme také znát principy informační architektury, o které si více povíme v lekci Informační architektura v UX a další znalosti.

Dnes jsme si tedy v krátkosti ukázali, jak může práce UX designéra vypadat a čím vším si při své práci prochází. Další lekce tohoto kurzu nás povedou tak, abychom i my mohli být dobrými UX designéry.

V následujícím kvízu, Kvíz - Úvod do UX a práce UX designéra, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.