Design UI a design UX: jaký je mezi nimi rozdíl?

Co je to design UX

Na úvod je třeba říct, že neexistuje žádná obecně přijímaná definice UX.

‍

UX je zkratka pro user experience – uživatelský zážitek, tedy⁠ zážitek, který mohou mít uživatelé při interakci s digitálními nebo fyzickými produkty.

‍

User Experience Design je proces navrhování digitálních a fyzických produktů, které jsou užitečné, snadno se používají, příjemně se s nimi interaguje a mají pro uživatele hodnotu. Jedná se o vylepšení uživatelské zkušenosti při interakci s produktem.

UX je multidisciplinární

UX je široký pojem zahrnující mnoho oborů. Zaměříme se na 4 nejdůležitější:

‍

• Experience strategy (ExS) –⁠ UX se nezaměřuje pouze na koncové uživatele, ale přináší hodnotu firmě, která produkt poskytuje. Experience strategy spočívá v návrhu ucelené obchodní strategie, která zahrnuje potřeby zákazníka i společnosti.
• Interaction design (IxD) –⁠ interaktivní design se zaměřuje na to, jak uživatel s produktem interaguje, a zohledňuje všechny interaktivní prvky, jako jsou tlačítka, přechody mezi stránkami a animace, aby bylo dosaženo požadovaného uživatelského zážitku.
• User research (UR) – pochopení stávajících a potenciálních uživatelů má v oblasti UX velký význam. Při uživatelském průzkumu používají výzkumní designéři celou řadu metod, jako jsou průzkumy, rešerše od stolu, testování použitelnosti a mnoho dalších. Cílem je získat co nejcennější poznatky o uživatelích, aby bylo možné identifikovat problémy a navrhnout možnosti jejich řešení.
• Information architecture (IA) – IA má zásadní význam, pomáhá uživateli při orientaci v produktech. Zaměřuje se na organizaci, strukturování a označování obsahu efektivním a udržitelným způsobem. Cílem je navigovat uživatele v rámci produktu, a tedy získat užitečné informace pro úspěšné dokončení úkolu.

Pokud vás zajímá, na co se mohou designéři UX specializovat, je to počítačová interakce HCI – člověk, zvukový design, prostorový design, UX writing, computer science, pohybový design, naváděcí systémy a mnoho dalších.

Rozlišujte mezi UX a použitelností

Řada lidí má za to, že použitelnost a uživatelská zkušenost jsou jedno a totéž. Anebo když se jich někdo zeptá, co je to UX, odpoví „použitelnost produktu“. To není pravda. Zčásti. Použitelnost je významnou součástí UX. Její definice říká, že se jedná o atribut kvality uživatelského rozhraní, který zahrnuje, zda je systém snadný na naučení, efektivní k používání, zda je příjemný atd. Ale to je i UX, ne? Ano, i když se použitelnost zaměřuje na samotný produkt, UX pokrývá celou interakci uživatele s produktem od přemýšlení o produktu přes jeho nákup, rozbalení, instalaci, používání atd.

Co je to design UI

UI znamená „uživatelské rozhraní“. Jde o estetiku a grafické rozvržení rozhraní na různých zařízeních. Skládá se ze všeho, co uživatel vidí – z bannerů, obrázků, textu, který si může přečíst, tlačítek, na která může kliknout, posuvníků, vstupních polí atd. Je to i o rozvržení obrazovky, přechodech, různých vizuálních prvcích, interakci nebo všech animacích, které musí být navrženy.

UI hraje v uživatelské zkušenosti velkou roli. Atraktivní rozhraní může posunout zážitek na zcela novou úroveň, na druhou stranu ale nepříjemné rozhraní může uživatelskou zkušenost zničit.‍

Jde o víc než jen estetiku

I když to vypadá, že jediným účelem uživatelského rozhraní je vizuálně atraktivní rozhraní, jde o mnohem víc. Designéři UI musí pracovat nad rámec estetiky a vytvářet rozhraní, která odpovídají účelu/osobnosti aplikace. Je na nich, aby zajistili, že každý vizuální prvek bude jednotný jak z estetického hlediska, tak z hlediska účelu.

Tři formáty UI

Designéři uživatelského rozhraní vytvářejí klíčové body, v nichž uživatelé interagují s produktem. Tyto body mohou mít jeden z těchto formátů:

• Grafické uživatelské rozhraní (GUI) – uživatelé interagují s vizuálními prezentacemi produktu – obrazovkami
• Rozhraní ovládaná hlasem (VUI) – uživatelé interagují s produktem prostřednictvím hlasu – Siri, Alexa, Asistent Google
• Rozhraní založená na gestech – pohyby těla slouží k interakci s produktem – hry VR

‍

6 klíčových zásad UI

• Přehlednost – nezbytná součást skvělého uživatelského rozhraní. Jak efektivně vizuální design prioritizuje a přenáší informace
• Známost – využití principů a vzorů uživatelského rozhraní, ale i zajištění synchronizace všech prvků
• Uživatelské ovládání – ukažte uživateli ovládací prvky. Má pocit, že si může dělat, co chce. Zajistěte, aby se mohl v procesu vždycky posunout dál, ale aby se kdykoli mohl vrátit na stránku, na které byl naposledy.
• Hierarchie – uspořádání vizuálních prvků způsobem, který vysvětluje úroveň důležitosti jednotlivých prvků a vede uživatele k požadované akci. Negativní prostor – negativní prostor vytváří důraz na váš obsah a usnadňuje jeho rozpoznání.

Přístupnost – navrhujte produkt pro VŠECHNY uživatele. Myslete na uživatele, kteří mají zrakové nebo jiné postižení, z různých úhlů.

‍

Design UX vs. UI – rozdíly

Shrneme-li všechny dříve uvedené informace, hlavní rozdíl mezi designem UX a UI spočívá v tom, že design UX je o celkovém dojmu z interakce s produktem, zatímco design UI je o vizuální reprezentaci rozhraní.

‍

Cílem designéra UX je identifikovat a řešit problémy uživatelů, designér UI hledá způsoby, jak tato řešení udělat esteticky příjemná a intuitivní.

‍

Design UX je obvykle v procesu designu prvořadý, po něm pak následuje UI. Designér UX zmapuje produkt, který dokonale funguje, a designér UI k němu doplní vizuály a interakce.

‍

V neposlední řadě je možné UX aplikovat na jakýkoli druh produktu, nejen digitální, ale i fyzický, servisní, prostorový atd., zatímco UI je specifické pro digitální produkty a zkušenosti s nimi.

Design UX a UI – spolupráce

Zatímco designéři UX rozhodují o tom, jak se bude rozhraní chovat, designéři uživatelského rozhraní rozhodují o tom, jak bude rozhraní vypadat. Designéři UX a UI pracují pevně ruku v ruce a jejich spolupráce je velmi těsná.

Designéři UX pracují na výzkumu, musí rozhodnout, které funkce by měly mít nejvyšší prioritu, a musí zmapovat tok uživatelů produktem. Obvykle vytvoří klikatelné wireframy a testují design s uživateli, aby odhalili případné chyby a pain pointy.

Tento prototyp je předán designérům UI, kteří mu vdechnou život vytvořením atraktivní vizuální reprezentace všech jednotlivých obrazovek a styčných bodů, s nimiž se uživatel může setkat. S ohledem na účel produktu musí rozhodnout, který styl je vizuálně nejpříjemnější, jak budou prvky vypadat v celém produktu, jak se budou chovat při klepnutí, posouvání nebo přejetí prstem.

‍

Co ale dělat, pokud potřebujeme něco změnit, ale design uživatelského rozhraní je už hotový?

V mnoha případech se první vydání zaměřuje na MVP – minimální životaschopný produkt – a pak se přidávají další funkce. Spolupráce mezi designéry UX a UI musí být ještě těsnější a neustálá komunikace je naprostý základ.

Představme si tedy, že potřebujeme na obrazovku přidat ještě jedno tlačítko.

Designéři UX určí, jak je třeba obrazovku se všemi prvky přeorganizovat, což může vést ke změně velikosti nebo tvaru prvku. Designéři UI se musí těmto změnám přizpůsobit a vymyslet nejlepší způsob, jak je vizuálně zobrazit, aby rozhraní vypadalo dobře a zároveň fungovalo efektivně a intuitivně.

V menších firmách bývá ale obvykle k dispozici pouze jeden člověk, který je zodpovědný jak za UI, tak za UX. Díky znalostem UX a UI může být celý proces rychlejší, protože některé kroky je možné vynechat. Ale na druhou stranu spolupráce lidí s různými nápady a odlišným myšlením může přinášet užitečné poznatky, bez nichž pak může být uživatelská zkušenost nedostatečná.

Jaká je vaše cesta? 

Pokud přemýšlíte, jaká cesta je pro vás ta pravá, přiblížíme vám jednotlivé klíčové odpovědnosti a role a taky dovednosti potřebné pro každou pozici.

Co je náplní práce designéra UX

Vzhledem k tomu, že se UX točí kolem uživatele, musí mít designér UX velkou dávku empatie, zvědavosti, analytického myšlení a musí být otevřený, aby dokázal držet krok s osobnostmi různých uživatelů.

Designéři UX se snaží, aby byly každodenní produkty, služby a technologie pro uživatele co nejpřívětivější a nejpřístupnější, přičemž pracují na každém kroku procesu návrhu. Designér UX musí najít rovnováhu mezi naplněním potřeb uživatelů, požadavků klientů a zároveň myslet na generování zisků pro firmu.

‍

Požadované schopnosti:

Abyste se stali skvělým designérem UX, musíte mít vášeň pro uživatelský výzkum, analytiku a hodiny strávené sběrem dat o uživateli, ale i produktu. Designér UX musí být schopný identifikovat a přeložit nejvýznamnější potřeby a požadavky uživatelů. Transformace poznatků do produktu začíná vytvořením informační architektury, tedy uspořádáním informací v rámci digitálního produktu. Dobrá znalost wireframingu a prototypování je nutností, stejně jako schopnost testovat prototyp v rámci cílové skupiny, abyste získali zásadní přehled o uživatelské zkušenosti s vaším produktem.

‍

Tipy na nástroje:

Pro každý krok procesu designu je zapotřebí široká škála nástrojů. Pokud nejste příznivci skicování prvního prototypu na papír, můžete pomocí Balsamiqu vytvářet ručně kreslené wireframy digitálně. Pokud chcete vytvářet vývojové nebo jakékoli jiné diagramy, měli byste si vyzkoušet Lucidchart. Pokud pracujete na redesignu, s prototypem/výrobkem vám na dálku pomůže UXTweak.

‍

Nástrojem číslo 1 v GoodRequest je Figma, online platforma pro navrhování, která nám umožňuje rychleji vytvářet, testovat a odesílat návrhy, protože na nich může spolupracovat celý tým najednou. Navíc existuje řada doplňků, které celý proces urychlují a zefektivňují. Pokud nejste fanoušky Figmy, můžete zkusit program AdobeXD nebo Sketch (k dispozici pouze pro macOS).

Co je náplní práce designéra UI

Pokud se považujete spíše za vizuálního člověka, možná vás bude zajímat spíš dráha designéra UI. Vytvoření vizuálního designu pro různé produkty je základním bodem interakce zákazníka s produktem. Zákazník se během prvních 8 sekund interakce rozhodne, zda se mu produkt líbí, nebo ne, a je na vás, abyste si ho udrželi.

Požadované schopnosti: Pokud mluvíme o schopnostech potřebných pro práci designéra uživatelského rozhraní, na prvním místě je grafický design, potom následuje vizuální značka, designér UI musí taky disponovat znalostmi v oblasti teorie barev, designu ikon, typografie a responzivního designu, aby mohl zajistit, že všechna zařízení budou mít stejnou vizuální identitu. Z davu návrhářů uživatelského rozhraní vás může odlišit schopnost vytvářet animace, design pohybu nebo schopnost ilustrovat.

Nástroje: Aby mohl designér navázat na kroky designéra UX, musí umět navrhovat a vytvářet prototypy v programech Figma, AdobeXD nebo Sketch. Aby bylo rozhraní estetičtější, je nezbytná znalost práce s programy Photoshop, Illustrator nebo InVision. Pro budoucího zaměstnavatele můžete být zajímavější i díky znalosti práce v programech AfterEffects, Animate nebo Axure.

‍

Jak se stát designérem UX a UI

Vzdělávejte se

I když existuje řada institucí, které nabízejí kurzy vizuálního, interaktivního nebo grafického designu, mnoho nabídek pro oblast uživatelské zkušenosti nenajdete. Pokud se chcete stát designérem UI nebo UX, budete to muset z větší části odmakat sami.

Měli byste se vzdělávat každý den. Nejjednodušší je poslouchat podcasty, rozhovory, číst blogy nebo sledovat lidi na Linkedinu. Můžete se přihlásit na online kurzy na platformách, jako je Nielsen Norman Group, Interaction Design Foundation nebo Udemy. Tyhle my v Goodrequest preferujeme, protože je máme jako jeden z benefitů.

Akce/workshopy/hackathony/komunita UX

Poohlédněte se ve svém okolí po komunitě designérů UX, která pořádá akce, kterých se můžete zúčastnit, kde můžete poznat nové lidi z oboru, navázat nové kontakty pro svou budoucí kariéru, ale především se s vámi podělí o svoje zkušenosti.

Jestli se akcí nemůžete zúčastnit fyzicky, na tom už zase tak nesejde. Většiny akcí se můžete zúčastnit z pohodlí domova, proto vám doporučujeme sledovat komunitu Friends of Figma – na Slovensku jsme lídrem této komunity a 4× ročně pořádáme akce Figma se zajímavými lidmi z různých oborů.

Pokud si myslíte, že už nějaké dovednosti máte, chtěli byste začít svou kariéru, ale máte problém udělat první krok, zapojte se do hackathonu. Můžete se přihlásit jako tým, nebo se k týmu připojit. Sami nebo společnými silami můžete na výzvě pracovat 24 nebo 48 hodin v kuse, a co víc, pokud bude vaše řešení dostatečně dobré, máte velkou šanci, že na jeho realizaci získáte finanční prostředky.

Stáže

Hledáte první práci, ale štěstí se zatím neusmálo? Horste, máme řešení. :D Zkuste si najít stáž! Možná nebudete mít takový plat (anebo nebudete mít vůbec žádný), ale zkušenosti a znalosti, které získáte, budou neocenitelné. Budete pracovat jako plnohodnotná součást společnosti, připojíte se k týmu designérů a budete pracovat na projektu nebo úkolu, a navíc budete mít k dispozici mentora, který se o vás postará a provede vás každým krokem vaší práce. Právě teď se k našemu týmu designérů na letní stáž připojila středoškolačka Paula, která pracuje na aplikaci pro jedno z nejposlouchanějších rádií na Slovensku.

‍

Závěr

Doufáme, že vám jsou po přečtení našeho článku pojmy designu UI a UX jasnější a že jsme vám pomohli ujasnit si, jakým směrem chcete ve své kariéře pokračovat.

Pamatujte, že i když tyto dva pojmy zahrnují různé sady dovedností a jeden může vypadat důležitější, pravdou je, že jeden nemůže existovat bez druhého. Nepříjemné rozhraní nezachrání skvělá UX, ale k ničemu je i krásné rozhraní, ve kterém se člověk nezvládá orientovat.