UX/UI návrh digitálního produktu

01

Co návrh řeší

Návrh se poptává, když má vzniknout nová webová nebo mobilní aplikace a je potřeba dříve, než začne vývoj, vyjasnit strukturu, toky a podobu obrazovek – nebo když se u existujícího produktu obrazovky navrhují za pochodu, komponenty nejsou jednotné a výsledek se obtížně předává vývoji i dále udržuje.

• ›vývoj by měl začít bez podkladů k rozhraní a struktuře
• ›obrazovky vznikají nekoordinovaně a nejsou mezi sebou konzistentní
• ›chybí popis stavů rozhraní, chybových hlášek a okrajových případů
• ›návrh nejde předat vývoji ve formě, kterou lze rovnou naprogramovat
• ›produkt nemá jednotnou knihovnu komponent a roste nekonzistentně

02

Jak návrh vzniká

Nejprve se vyjasní cílový uživatel, klíčové scénáře a rozsah funkcí, ze kterých vychází informační architektura a uživatelské toky. Na jejich základě vznikají wireframy a následně klikatelný prototyp, na kterém lze ověřit chování rozhraní ještě před finálním vizuálním designem.

Poté se navrhne vizuální podoba obrazovek včetně jednotlivých stavů (prázdný stav, chyba, načítání) a sestaví se knihovna komponent, kterou vývoj použije jako přesný podklad. Výstup se předává ve formátu a rozsahu domluveném s vývojovým týmem.

• ›informační architektura a uživatelské toky
• ›wireframy klíčových obrazovek a scénářů
• ›klikatelný prototyp pro ověření chování rozhraní
• ›vizuální design obrazovek včetně stavů a chybových hlášek
• ›knihovna komponent a design systém pro předání vývoji

03

Vymezení vůči příbuzným službám

UX/UI návrh vytváří nové řešení, nikoli hodnocení stávajícího – tím se liší od UX auditu, který diagnostikuje existující rozhraní a nenavrhuje nové obrazovky. Od pouhého grafického faceliftu se liší tím, že řeší strukturu, toky a chování rozhraní, ne jen barvy a vizuální styl na nezměněné struktuře. Návrh sám o sobě neobsahuje naprogramování produktu – vývoj webové nebo mobilní aplikace na návrh navazuje jako samostatné zadání. Testování navržených obrazovek s reálnými uživateli řeší zákaznický a uživatelský výzkum jako doplňkovou nebo navazující službu.

04

Co dostanete

• ›informační architektura a uživatelské toky
• ›wireframy klíčových obrazovek
• ›klikatelný prototyp
• ›vizuální design obrazovek včetně stavů
• ›knihovna komponent pro předání vývoji

05

Jak spolupráce probíhá

• ›Zadání: Vyjasní se cílový uživatel, klíčové scénáře a rozsah první verze.
• ›Struktura: Navrhne se informační architektura a uživatelské toky.
• ›Prototyp: Vzniknou wireframy a klikatelný prototyp k ověření chování rozhraní.
• ›Vizuální design a předání: Navrhnou se finální obrazovky a komponenty a předají se vývojovému týmu v domluveném formátu.

06

Co připravit do poptávky

• ›popis produktu, cílových uživatelů a jejich klíčových scénářů
• ›seznam funkcí zahrnutých do první verze
• ›podklady značky nebo existující design systém
• ›platformy, na kterých má produkt fungovat (web, iOS, Android)
• ›technická omezení nebo preference vývojového týmu k předání

07

Co ovlivňuje rozsah a cenu

Rozsah určuje především počet obrazovek a scénářů, počet cílových platforem a to, zda vzniká design systém od nuly, nebo se navazuje na existující.

• ›počet klíčových scénářů a obrazovek k návrhu
• ›počet platforem (web, iOS, Android) a jejich odlišnosti
• ›existence nebo absence design systému, na který lze navázat
• ›rozsah prototypování a počet iterací před finálním návrhem

08

Rizika zadání

Nejčastějším rizikem je nejasně vymezený rozsah funkcí první verze, který se mění v průběhu návrhu, a chybějící rozhodnutí o tom, kdo návrh na straně zadavatele schvaluje.

• ›rozsah funkcí se v průběhu návrhu opakovaně mění
• ›chybí jasně určená osoba nebo proces schvalování návrhu
• ›návrh se předává vývoji bez dohodnutého formátu a rozsahu podkladů

09

Další postup po odeslání poptávky

Po odeslání poptávky proběhne konzultace k uživatelům, scénářům a platformám, na jejímž základě se navrhne rozsah a etapizace návrhu.