BLACK FRIDAY! Slevy až 80 % jsou všude. Tak je nepropásni a přejdi do rostoucího IT oboru!
The real BF 2020

Lekce 2 - Spolupráce s uživatelem a pomůcky UX designera - Online kurz

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, proč je důležité spolupracovat s uživateli při návrhu rozhraní a jak s uživateli komunikovat. Dále se budeme zabývat pomůckami, které UX designeři využívají při návrhu rozhraní. Zkusíme si vytvořit návrh grafického rozhraní a uvedeme si, jaké pomůcky a nástroje k tomu používáme.

Spolupráce s uživatelem, pomůcky UX designera

Na vývoj aplikace 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, logiku programu a nad tímto postavené uživatelské rozhraní.

Na opačné straně stojí uživatel, který nemá znalosti v oblasti vývoje programů. Uživatel vidí grafické rozhraní programu, 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í. Pomocí společného dialogu je možné vytvořit graficky příjemné, uživatelsky přívětivé a snadno ovladatelné grafické rozhraní.

Jak spolupracovat s uživateli

Ještě před zahájením návrhu grafického rozhraní a celého programu je dobré si s uživatelem naplánovat schůzku a na ní probrat, 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 programu.

Metod, jak pracovat s uživateli 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 uživatel 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!

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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".

Pomůcky UX designera

Při návrhu rozhraní vytváří správný UX designer několik různých návrhů. Každý z těchto návrhů se zaměřuje na určitý problém a snaží se jej efektivně řešit. UX designer často není jediný, kdo na těchto návrzích pracuje. Na vývoji pracuje celý tým a to od UX a UI designerů přes grafiky až po front-end programátory, kteří rozhraní programují, a testery rozhraní.

Obvykle vytváříme celkem 3 návrhy rozhraní, které na sebe navazují a kde návrh následující staví na informacích z předchozího návrhu.

Wireframe

Wireframe, neboli česky drátěný model, je "první úrovní" návrhu 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 uživateli – dle jeho hodnocení je možné provádět změny. Změny ve wireframe jsou snadnější a levnější, než uživateli prezentovat hotové rozhraní a následně měnit některé prvky.

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

Wireframe pro e-shop s potravinami

Mockup

Mockup, neboli česky maketa, je dalším modelem, který vzniká při návrhu rozhraní. Při vytváření makety vycházíme z již existujícího drátěného modelu. Do něj vkládáme jednotlivé grafické prvky, "proškrtnuté obdélníky" nahrazujeme skutečnými obrázky a celý model získává barvu.

Účel tohoto návrhu není technický, slouží zejména pro prezentaci uživatelům. Uživatel si dokáže lépe představit finální grafické rozhraní. Při prezentaci je důležité získat od uživatelů zpětnou vazbu. Informace ze zpětné vazby nám mohou pomoci ke zlepšení celého návrhu rozhraní. Aby si uživatel dokázal opravdu dobře představit výsledek, je možné vložit náš mockup do reálného prostředí, například vložit navrhovanou webovou stránku do obrázku s monitorem:

Příklad makety v reálném prostředí

Příklad makety v reálném prostředí.

Pokračujme nyní s naším příkladem e-shopu s potravinami:

Příklad mockup vytvořený z wireframe .<> Příklad mockup vytvořený z wireframe.

Prototyp

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

I prototyp je možné vytvořit pouze pomocí tužky a papíru:

Papírový prototyp mobilní aplikace

Nástroje pro návrh

Poslední otázkou je, jak tyto návrhy vytvořit. Pokud mají návrhy sloužit pouze jako pomůcka při vývoji, vystačíme si s tužkou a papírem. Budeme-li ovšem návrh prezentovat uživateli, 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ší.


 

Předchozí článek
Úvod do UX
Všechny články v sekci
User Experience (UX)
Článek pro vás napsal Jiří Křištof
Avatar
Jak se ti líbí článek?
1 hlasů
Aktivity (2)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!