Jaký je rozdíl mezi UX a UI designem? Jak se liší a co mají společného? Potřebujete zvlášť designéra UX a designéra UI? Kdo dělá co? Měli by být odděleni? Jak mají spolupracovat? Toto jsou otázky, které zaměstnávají mnoho lidí, kteří plánují tvorbu nového, nebo redesign starého webu.

Zmatek vzniká proto, že většina institucí vyučuje návrh uživatelského rozhraní jako součást učebních osnov UX designu. Uživatelské rozhraní je přece součástí uživatelského zážitku, tak proč jsou odděleny?

►V malých firmách a start-upech spadá UI pod UX. Ale jak se organizace a produkty rozšiřují, oddělení uživatelského prostředí se rozdělí na návrháře UX, designéry UI, copywritery, architekty UX a další specialisty na UX.

I když jsou tyto role oddělené, všechny se zaměřují na design zaměřený na uživatele a jejich cílem je vytvořit fantastickou zákaznickou zkušenost. Za tímto účelem musí týmy UX spolupracovat na řešení uživatelských problémů v rámci rozpočtových, produktových a technických omezení. Pokud se vám podaří vše skloubit, zlepšíte celkové vnímání webu zákazníky a samozřejmě také konverzní poměr.

Co je to design zaměřený na uživatele?

Design zaměřený na uživatele je lepidlo, které drží UX a UI pohromadě. Aby mohli návrháři UX a UI efektivně vykonávat svou práci, musí používat přístup designu zaměřeného na uživatele.

Design zaměřený na uživatele je proces navrhování digitálního produktu, jehož ústředním bodem je zákazník. Úkolem návrhářů uživatelského prostředí (UX a UI) je vyřešit problém, který lidé mají, a přizpůsobit produkt tak, aby eliminoval omezení uživatele.

Co je to návrh UX?

Návrh UX zahrnuje širší uživatelskou zkušenost a to, jak se lidé cítí při interakci s internetovou stránkou – včetně uživatelských rozhraní. Návrháři UX se také více zaměřují na navigaci a toky návštěvníků, aby tak optimalizovali zážitek z návštěvy webu a učinili jej příjemnějším a uživatelsky přívětivějším.

Úkoly designéra UX

• Struktura webu: navigace, uživatelské cesty
• Výzkum: analýza uživatelů, konkurence a trhu
• Testování: vytváření prototypů v nízké a vysoké věrnosti (low-fidelity a high-fidelity)
• Návrh: wireframy, hierarchie, rozvržení obsahu

Kvality a dovednosti designéra UX

• Kritické myšlení
• Řešení problémů
• Orientace v datech a analytice
• Znalost struktury
• Funkční design
• Řízení projektů

Co je návrh uživatelského rozhraní (UI)?

Návrháři uživatelského rozhraní vytvářejí vizuální prvky, s nimiž uživatelé komunikují v digitálním produktu nebo na webových stránkách – tlačítka, barvy, ikony, typografie, obrázky, formuláře a další prvky a komponenty.

Kromě toho se návrh uživatelského rozhraní zabývá interaktivitou, jako jsou animace a mikro interakce. Návrh uživatelského rozhraní je v podstatě specializovanou pozicí v rámci designu uživatelského prostředí.

Úkoly návrháře uživatelského rozhraní

• Estetika produktu: branding, vizuální design
• Výzkum: výzkum designu, analýza uživatelů
• Testování: vytváření prototypů uživatelského rozhraní (high-fidelity prototyping)
• Návrh: makety, design interakcí, animace, rozvržení viewportů (responzivní design)

Kvality a dovednosti návrháře uživatelského rozhraní

• Vizuální kreativita
• Grafický design
• Zájem o vizuální design
• Estetika
• Vyváženost formy a funkce
• Porozumění interakci a chování uživatelů
• Orientace na úkoly

Rozdíly mezi designem UX a UI

Jak je vidět z odpovědností, návrháři uživatelského rozhraní se zaměřují na estetiku a interaktivitu, zatímco návrháři UX se zaměřují na celkový zážitek, strukturu a navigaci.

Návrháři UX mají široký pohled na zkušenost s webem, zatímco návrháři uživatelského rozhraní se zaměřují na to, co se děje v rámci jednotlivých obrazovek.

Návrháři UX se obvykle hlouběji zabývají výzkumem a hledí i mimo uživatele, na konkurenci a analýzu trhu. Návrháři uživatelského rozhraní také studují uživatele a zároveň zkoumají trendy ve vizuálním designu.

Zde je několik klíčových rozdílů mezi UX a UI designem.

Potřeby uživatelů

• Návrhář UX: zaměřuje se na bolestivé body, potřeby a emoce uživatelů.
• Návrhář uživatelského rozhraní: zaměřuje se na prostředí, pohyby a akce uživatele.

Cíle uživatelů

• Návrhář UX: definuje problémy uživatele a cíle, kterých se snaží dosáhnout.
• Návrhář uživatelského rozhraní: zaměřuje se na jednotlivé kroky, které uživatelé musí udělat, aby dosáhli svých cílů.

Informační architektura

• Návrhář UX: zabývá se informační architekturou a navigací, která řeší problémy uživatelů.
• Návrhář uživatelského rozhraní: věnuje se prvkům a komponentám, které budou uživatelé potřebovat k navigaci v produktu.

Testování produktu

• Návrhář UX: testuje celkový uživatelský zážitek a chce vědět, jak uživatelé přemýšlejí a cítí se při používání produktu.
• Návrhář uživatelského rozhraní: testuje, jak uživatelé interagují s produktem, a klade praktické otázky.

Podobnosti mezi UX a UI

Návrháři UX i návrháři uživatelského rozhraní se zaměřují na návrh cílený na uživatele a řídí se zásadami co nejlepší uživatelské přívětivosti. Návrháři UX definují cíle uživatelů a návrháři uživatelského rozhraní jim pomáhají těchto cílů dosáhnout. Oba se snaží optimalizovat uživatelský zážitek a řešit problémy s použitelností.

►Je důležité vnímat UI a UX jako jeden celek, nikoli jako dvě oddělené profese. Oba jsou návrháři uživatelského prostředí – jen se v rámci návrhu UX zaměřují na jiné úkoly.

Pokud návrháři jeden z těchto úkolů provedou špatně, selže celý uživatelský zážitek a produkt – bez ohledu na to, jak je kvalitní, může být odsouzen k neúspěchu.

Návrháři UX i UI musí brát ohled na přístupnost. Designér UX se zaměřuje na použitelnost produktu, jako je rozvržení, hierarchie a umístění, zatímco designér uživatelského rozhraní se zabývá přístupností uživatelského rozhraní, včetně barev, písem, velikosti a interakcí.

UX a UI v procesu návrhu produktu

Zde je uveden typický scénář návrhu produktu a rozdělení odpovědnosti mezi UX a UI.

• Designér UX / výzkumník UX provádí průzkum uživatelů, trhu a konkurence.
• Návrháři UX spolupracují s produktovým manažerem a zainteresovanými stranami na vývoji nápadu v rámci produktových a rozpočtových omezení.
• Návrháři UX vytvářejí informační architekturu, počáteční náčrty, wireframy a první jednoduché prototypy.
• Návrháři UX provádějí počáteční testování s cílem zdokonalit navigaci a uživatelské toky.
• Návrháři uživatelského rozhraní převedou wireframy na makety s použitím barev, ikon, tlačítek a typografie. Návrhář uživatelského rozhraní přidává interaktivitu a vytváří prototypy s vysokou věrností.
• Výzkumníci UX testují pokročilejší prototypy, posílají je návrhářům uživatelského rozhraní k úpravám a dále je upravují.
• Týmy designérů spolupracují s inženýry během předávání návrhů, aby mohl být zahájen proces vývoje.

Návrháři UX a UI budou úzce spolupracovat v průběhu celého procesu návrhu. Návrh UX vždy předchází návrhu uživatelského rozhraní. Nelze navrhnout rozhraní produktu bez podpůrné struktury a architektury. Návrhář UX vytváří základy, zatímco návrhář uživatelského rozhraní se zaměřuje na interakci a estetiku. Pro splnění těchto úkolů si oba designéři musí být vědomi potřeb uživatele, aby vytvořili příjemný uživatelský zážitek.

Nástroje pro návrh UX a UI

Návrháři UX a UI obvykle používají stejný návrhový nástroj, ale pro různé úkoly a cíle. Designér UX vytvoří wireframy a propojí jednotlivé obrazovky se základními interakcemi kliknutím/poklepáním, aby vytvořil základní jednoduché prototypy webu. Vytvoří strukturu každé stránky a navigaci.

Po dokončení wireframingu přidá návrhář uživatelského rozhraní barvy, interaktivitu, přechody mezi stránkami, typografii animací a další prvky, aby vytvořil pokročilé prototypy stránky, které jsou následně dále upravovány.

Cílem návrhářů UX i návrhářů UI je co nejlepší uživatelská přívětivost. Návrháři UX definují cíle uživatelů a návrháři uživatelského rozhraní jim pomáhají těchto cílů dosáhnout. Jak návrhář UX, tak i návrhář uživatelského rozhraní se snaží optimalizovat uživatelský zážitek a zajistit skvělou použitelnost a přístupnost webu.

Zdroj: marketingland.com, facebook.com, cpcstrategy.com

Autor: Vlastimil Malík

Foto zdroj: pixabay.com