Návrh uživatelského rozhraní

Pomůžeme vám navrhnout webovou či mobilní aplikaci, eshop nebo web.

Návrh rozhraní, neboli interakční design, pomáhá vizualizovat základní rozložení, textace a cestu webem či aplikací. Zároveň poslouží jako podklad pro testování s uživateli či zadání pro grafiky a vývojáře.

Mám zájem

Pro koho služba je a jak pomůže

Webové stránky

 

Mobilní aplikace

 

Eshopy

 

Nápady

 

Návrh uživatelského rozhraní je důležitou součástí vývoje každého produktu. Výsledná skica, wireframe či prototyp popisuje rozložení, typografii, hlavní prvky, cestu po webu či v aplikaci a podobně. Postupuje se vždy od nejjednodušších nákresů ke složitějším. Díky tomu jsme schopní při zjištění problému rychle udělat změnu. Pokud by k těmto změnám docházelo v pozdější fázích, bylo by to mnohem složitější a nákladnější. 

Co získáte návrhem uživatelského rozhraní?

  • Získáte profesionální wireframe či prototyp vaší aplikace, webu, eshopu či jiného produktu.
  • Definujete si cíle, představy a nápady, na jejichž základě můžete rozhodovat o dalším směřování produktu.
  • Dozvíte se, 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.
  • Můžete ověřit správnost řešení součástí produktu s vašimi uživateli ještě před drahým vývojem, a to díky uživatelskému testování, které můžete provést již na wireframu či prototypu.

Co služba návrh uživatelského rozhraní obsahuje

Vytváříme jak jednoduché low-fidelity wireframe, tak i velmi komplexní prototypy pro uživatele takřka nerozeznatelné od reálného produktu či služby. Tyto prototypy často slouží pro uživatelské testování, pro které je používáme. Rádi vám poradíme, jaký způsob návrhu pro vás bude nejvhodnější.

Uživatelské rozhraní

cena dle dohody

Náklady na uživatelské rozhraní se odvíjí od toho, jaký rozsah práce budete potřebovat. Ozvěte se nám a společně probereme, jaká metoda je nejvhodnější pro to, čeho chcete dosáhnout.

  •  setkání nad současným produktem a definice požadovaného stavu
  • návrh uživatelského rozhraní
  • validace návrhu srkze komentáře
  • konečný výstup v předem dohodnuté formě
Mám zájem
* Odhad časové náročnosti je přibližný a může se lišit podle vlastností každého projektu a rychlosti komunikace.

Co umíme provést a proč navrhovat s námi

Máme za sebou mnoho různorodých projektů, jak pro malé, tak pro velké klienty, ze kterých čerpáme naše zkušenosti.


Náš tým odborníků má dohromady velké know-how, které můžete využít pro váš projekt. Máme v týmu specialisty, kteří navrhují webové stránky, katalogy, eshopy nebo velké i malé mobilní aplikace pro platformy iOS, Android a zvládáme i hybridní aplikace.  

Co o nás
říkají klienti
a kolegové

Průvodce návrhem uživatelského rozhraní

Zajímá vás, jak vzniká návrh uživatelských rozhraní, proč je návrh důležitou součástí vývoje produktů nebo se jednoduše chcete dozvědět o uživatelských rozhraní více?

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ýzkumuž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.

Kdo bude na uživatelském rozhraní pracovat

Michal Voják Product Design Lead

Vedu návrhové oddělení v Designdev, propaguji zavádění Product Discovery do firem a vedu interní startup s názvem userUP, který má za cíl pomoc firmám s Product discovery.

Kateřina Mičková UI designer

Mou prací i mým koníčkem je tvorba grafiky. Pracuju na návrzích grafických prvků pro UI aplikací i návrhu webů. Ve volném čase navrhuji trika nebo ilustruji knihy.

Máte zájem o návrh uživatelského rozhraní?

Napište nám nezávaznou poptávku

Ochrana proti spamu, napište číslo ctyřicet dva.
Tato položka je povinná. E-mail není zadán ve správném formátu.
Tato položka je povinná. Zadání neodpovídá formátu telefonního čísla (např. +420 123 456 789)
×

Co jsme napsali k tématu uživatelských rozhraní

Článek
16. 12. 2019 UX

Co nás naučil redesign aplikace Mobilní banka

Už skoro půl roku pracujeme na redesignu aplikace Mobilní banka pro zařízení od Apple. Jako UX designéři spolupracujeme se všemi ostatními rolemi v projektu.
číst více

Soustřeďte se na pochopení problému, nikoliv na…

Stává se vám, že sedíte s vaším klientem či na týmové poradě a řešíte, že uživatelé mají nějaký problém či potřebu a vám se rovnou v hlavě začne rýsovat…
číst více

Neumorphism & UX

Zbavíme se po letech Material designu?
číst více