Návrh uživatelského rozhraní

Díky návrhu rozhraní přenesete vaše představy o produktu do vizuální podoby. Pomůže vám zorientovat se v tom, jaké funkcionality má produkt obsahovat a na které z nich je nutné dávat důraz a které naopak můžou zůstat v pozadí.

Dále se také dozvíte, jak bude váš produkt kompletně vypadat ještě před samotným vývojem, což vám při případných změnách ušetří hromadu času i financí.

V neposlední řade máte možnost takto zhotovený návrh otestovat s vašimi uživateli a vychytat tak všechny mouchy.

Na základě zadání, poznání cílové skupiny a seznámení se s projektem začneme navrhovat základní cesty a tzv. informační architekturu produktu. Tyto zdroje pak procházíme společně a validujeme si, že to, co kreslíme, koresponduje s určenými cíli, zadáním a znalostmi cílové skupiny. Takto v interakcích vytvoříme celý projekt.

Pro zlepšení výstupu doporučujeme na projektech použít i uživatelský výzkum a uživatelské testování.

Většinou začínáme s návrhem uživatelského rozhraní na papíru. To nám dává základní představu o produktu a jeho funkcích.

Nasleduje tzv. wireframe. Jako wireframe nazýváme jednoduchý návrh produktu již v elektronické podobe – obsahuje základní informační architekturu, textový obsah a rozložení prvků, ty ale častokrát nejsou graficky upravené a návrh jako takový není pohyblivý a nezobrazuje to, jak budou jednotlivé prvky navzájem interagovat.

Třetí kategorii tvoří prototyp. Ten častokrát obsahuje prvky v grafice, detailněji promyšlené texty a ve většině případů se prototyp pomocí specializovaných nástrojů uvádí i do pohybu. Na základě toho je pak možné vidět návrh produktu, který je téměř k nerozeznání od finální naimplementované verze. Tato verze se nejlépe testuje na uživatelském testování.

Díky návrhu si zadefinujete cíle, představy a nápady, na jejichž základě můžete rozhodovat o dalším směřování produktu. Dále se dozvíte, jak bude vše vypadat a fungovat ještě v ranné fázi projektu, čímž získáte širší představu o produktu a jeho velikosti. Dokážete si specifikovat informační architekturu, rozložení prvků a to, na které z nich má být kladen důraz a ověříte si, zda máte do návrhu zařazené všechny požadované funkcionality.

Takto navržené rozhraní můžete s pomocí vašich uživatelů otestovat a zjistit jeho případné nedokonalosti ještě před drahým vývojem.

Podrobnost návrhu závisí od fáze designu produktu, ve které se v současnosti nacházíte i to, pro jaký účel chcete návrh použít. V prvních fázích je postačující, pokud se používá jednoduchý nepohyblivý wireframe bez grafiky. Už zde přemýšlíme nad obsahem produktu a využívame první návrhy textů místo často užívaného lorem ipsum. To nám dá představu o tom, co bude obsahem jednotlivých stránek a zda nepotřebujeme pozměnit rozložení prvků.

V dalších fázích se již počítá s tím, že návrh rozhraní je podrobný, obsahuje specifické textace i grafiku a je připraven jako podklad pro testování použitelnosti a pro další práci vývojářů.

Návrhem uživatelského rozhraní je nutné se zabývat, když potřebujete navrhnout novou funkčnost či obrazovku v produkut. Ideální začít po tom, co si přejdete tzv. discovery fází, kdy zjišťujete potřeby, přání a obavy vašich uživatelů a to, zda je pro váš potenciální produkt místo na trhu.

Je vhodné začít s papírovým návrhem, který vám pomůže ujasnit si základní představu o produktu a jeho informační architekturu. Úpravy takového návrhu vás stojí nejméně času i financí. Nasleduje wireframe a prototyp. Tyto návrhy jsou poměrně detailní, což ovlivňuje jejich nákladovost, ale nejlépe vám dokážou přiblížit to, jak bude váš produkt vypadat a jak s ním bude uživatel interagovat. Čím lépe zpracujete návrh rozhraní, tím míň bude ve vývojové fázi docházet k nedorozumění ohledně vzhledu či fungování produktu.

Pro testování s uživateli nepotřebujete mít plně funkčný prototyp v grafice. Testovat můžete i jednoduchý wireframe, kde si s pomocí respondentů ozřejmujete svou představu o navržené informační architektuře a rozložení jednotlivých prvků.

Pokud máte k dispozici pohyblivý prototyp, můžete přímo otestovat situace, které budou vaši uživatelé řešit i ve skutečnosti. Dotazované uživatele pak necháváte situacemi projít bez vašeho zásahu a sledujete, na které tlačítka klikají, jak vnímají textace a obrázky, zda si všímají upozorňující hlášky a podobně. Zde pak vidíte, jak by s produktem vaši zákazníci skutečně interagovali, pokud by šel do vývoje v současné podobě.

Při návrhu uživatelského rozhraní dokážete zjistit, zda je informační architektura skutečně správná. Specificky na to, zda máte například správně rozdělené produkty do kategorií, jednotlivé kategorie dobře nazvané a zda nemáte důležité části vizuálně potlačené kvůli míň důležitým.

Zadefinujete si také obsah jednotlivých stránek a to, z jakého důvodu by na ně měl uživatel chodit. Určíte si cesty, kterými budou vaši zákazníci napříč produktem procházet a ověříte si to, zda jsou tyto cesty navržené jednoduše a přívětivě.

V zásadě rozlišujeme 4 typy prototypů. V prvním případě je rozdělujeme podle pokročilosti použité grafiky na high fidelity a low fidelity. V druhém případě je to podle pokročilosti používání a interaktivity také na high fidelity a low fidelity. Prototypem je tedy možné nazvat kteroukoliv fázi návrhu produktu.

Wireframe je specifické pojmenování prototypu, u kterého ještě není rozvinutá grafika ani interaktivita. Příkladem takového wireframu je jednoduchý návrh na papír, kde je účelem zjistit základní rozložení prvků a doladění informační architektury.