Rozdiel medzi UX a UI dizajnom: jednoducho a na príkladoch
Aktualizované na September 28, 20264 minúty čítania
Predstavte si appku na objednávanie jedla. Keď premýšľate, koľko klikov trvá dostať sa od otvorenia po „objednávka odoslaná", riešite UX. Keď riešite, akú farbu má mať tlačidlo „Objednať" a ako veľký font pod cenou, riešite UI. Dve písmenkové skratky, ktoré ľudia neustále miešajú dokopy, pritom pomenúvajú dve odlišné práce.
Rozdiel medzi UX a UI dizajnom je jedna z prvých vecí, ktorú si treba vyjasniť, ak uvažujete o kariére v tejto oblasti. A oplatí sa to vyjasniť poriadne, lebo od toho závisí, čo sa vlastne budete učiť a akú prácu budete hľadať.
Čo je UX dizajn
UX (user experience, teda používateľská skúsenosť) je o tom, ako sa produkt používa. UX dizajnér sa pýta: čo tu človek chce spraviť, čo mu v tom bráni a ako mu to uľahčiť.
Práca je z veľkej časti výskumná a analytická. Robíte rozhovory s používateľmi, kreslíte tzv. user flow (cestu človeka cez appku), staviate wireframy — hrubé čiernobiele náčrty obrazoviek, kde ešte nejde o krásu, ale o logiku. Potom testujete: dáte prototyp piatim ľuďom a sledujete, kde sa zaseknú.
Konkrétny príklad. Máte e-shop a ľudia hromadne opúšťajú košík. UX dizajnér zistí, že registrácia je povinná ešte pred zaplatením a väčšina ľudí sa v tom kroku otočí a odíde. Riešenie? Umožniť nákup ako hosť. Žiadna nová farba, žiadny nový font — len iné poradie krokov. To je UX.
Čo je UI dizajn
UI (user interface, teda používateľské rozhranie) je vizuálna a interaktívna vrstva. UI dizajnér rozhoduje o farbách, typografii, rozostupoch, ikonkách, o tom, ako vyzerá tlačidlo, keď naň prejdete myšou.
Nadväzuje to na UX. Keď je jasné, čo má obrazovka robiť a v akom poradí idú kroky, UI dizajnér tomu dá tvár. Stavia dizajnový systém — knižnicu opakovateľných prvkov, aby celý produkt pôsobil jednotne a aby vývojári vedeli, čo majú postaviť.
Späť k e-shopu: keď už vieme, že nákup ako hosť má byť možný, UI dizajnér navrhne, ako bude to tlačidlo „Pokračovať bez registrácie" vyzerať, aby ho bolo vidno, ale neprebíjalo hlavnú akciu. Rieši kontrast, veľkosť, umiestnenie.
Rozdiel medzi UX a UI dizajnom v tabuľke
Najrýchlejšie to pochopíte vedľa seba:
| UX dizajn | UI dizajn | |
|---|---|---|
| Otázka, ktorú rieši | Funguje to a dáva to zmysel? | Vyzerá to dobre a je to čitateľné? |
| Hlavná náplň | výskum, user flow, wireframy, testovanie | farby, typografia, dizajnové systémy, vizuál |
| Výstup | prototypy, mapy ciest, závery z testov | hotové obrazovky pripravené pre vývoj |
| Bližšie k | psychológii a analýze | grafickému dizajnu |
| Kedy vstupuje | na začiatku projektu | keď je jasná štruktúra |
Tabuľka to zjednodušuje, no v praxi sa obe roly prelínajú. Malá firma v Košiciach či Žiline často hľadá jedného človeka, ktorý zvládne oboje. Vo väčších tímoch v Bratislave sa role delia jasnejšie.
Prečo sa to stále pletie
Skratky vyzerajú podobne, píšu sa spolu ako „UX/UI" a v inzerátoch sa často používajú zameniteľne. Realita je taká, že veľa firiem na Slovensku hľadá „UX/UI dizajnéra" ako jednu pozíciu — od toho človeka čakajú aj výskum, aj pekný výsledok.
To neznamená, že rozdiel neexistuje. Znamená to, že na začiatku sa oplatí vedieť oboje, a časom sa prípadne vyprofilovať tam, čo vás baví viac. Ak vás priťahuje pochopiť, ako ľudia rozmýšľajú, pôjdete skôr do UX. Ak máte cit pre vizuál a detail, sadne vám UI.
Potrebujem vedieť programovať?
Toto je asi najčastejšia obava. Krátka odpoveď: na samotný dizajn kód nepotrebujete. UX aj UI dizajnér pracujú v grafických a prototypovacích nástrojoch, nie v editore kódu.
Základná znalosť toho, ako HTML a CSS fungujú, vám ale pomôže. Budete lepšie rozumieť, čo je pre vývojárov ľahké a čo drahé, a komunikácia s tímom bude hladšia. Rozpísali sme to podrobnejšie v článku o tom, či UX/UI dizajn vyžaduje kódovanie, ak vás to zaujíma hlbšie.
Aké nástroje sa dnes používajú
Dominuje Figma — jeden nástroj, v ktorom sa robia wireframy, hotové vizuály aj klikacie prototypy, a v ktorom môže naraz pracovať celý tím. Je to prvá vec, ktorú by ste sa mali naučiť. Doplnkovo sa hodí FigJam alebo Miro na brainstorming a mapovanie ciest, prípadne nástroje na online testovanie s používateľmi.
Dobrá správa je, že Figma má bezplatnú verziu, takže sa v nej dá začať cvičiť ešte predtým, než do toho investujete čas či peniaze.
Ako začať na Slovensku
Cesta do UX/UI dizajnu nemá jednu správnu trasu. Niekto príde z grafiky, niekto z marketingu, niekto úplne od nuly. Spája ich portfólio — dve-tri konkrétne ukážky, na ktorých vidno vaše rozmýšľanie, nie len pekné obrázky.
Praktický postup vyzerá takto. Naučte sa základy UX aj UI. Ovládnite Figmu. Spravte si dva-tri projekty (pokojne aj redizajn appky, ktorú sami používate) a zdokumentujte, prečo ste robili aké rozhodnutia. Práve to „prečo" zaujíma zamestnávateľa najviac.
Ak chcete štruktúrovaný postup s mentorom namiesto skladania kurzov po internete, pozrite si bootcamp UX/UI dizajnu v Code Labs Academy, kde prejdete výskumom, prototypovaním aj budovaním portfólia. A ak si najprv chcete porovnať možnosti, prehľad všetkých kurzov vám ukáže, čo k dizajnu ešte sadne.
Zhrnuté do jednej vety: UX rieši, či produkt funguje a dáva zmysel, UI rieši, ako vyzerá a či sa dobre číta. Ak vás oboje láka, začnite tým, že si otvoríte Figmu a redizajnujete jednu obrazovku appky, ktorú denne používate — a keď zistíte, že vás to chytilo, pozrite si možnosti štúdia UX/UI dizajnu a posuňte to ďalej.
