UX a UI dizajn: Aký je medzi nimi rozdiel a ako na nich?

Čo je UX dizajn?

Pod skratkou UX sa skrýva anglické slovné spojenie User Experience, čiže používateľská skúsenosť, resp. zážitok. V praxi ide o pocit, aký majú používatelia pri interakcii s daným digitálnym produktom, čiže webovou stránkou, aplikáciou a podobne.

UX dizajn je pestrá disciplína, ktorá zahŕňa množstvo rôznych oblastí vrátane psychológie, marketingu, prieskumu trhu, dizajnu, obchodu a technológií. Všetky ich navzájom kombinuje a snaží sa vytvoriť výsledok, ktorý bude pre zákazníka lákavý, no pritom praktický.

UX dizajn sa môže týkať nielen digitálnych, ale aj fyzických produktov. Mnohokrát sa však spája s tvorbou webových stránok. Kvalitne spracovaný UX dizajn zaručí prehľadný web, na ktorom zákazník v priebehu niekoľkých minút nájde to, čo potrebuje. Je teda len malá pravdepodobnosť, že z neho odíde a nedokončí nákup.

Termín „user experience“ pochádza z 90. rokov. Vymyslel ho Donald Norman, keď pracoval pre Apple ako kognitívny vedec.

Zaujímavosťou ale je, že prvé náznaky UX môžeme sledovať už v 50. rokoch, kedy sa na scéne objavil americký priemyselný inžinier Henry Dreyfuss. Ten sa preslávil navrhovaním strojov a zlepšovaním ich použiteľnosti. Svojimi nápadmi sa snažil dosiahnuť, aby jednotlivé výrobky ľuďom dobre slúžili a ich používanie bolo čo najjednoduchšie.

O výrazný posun UX dizajnu sa postaral aj Walt Disney. Odborníci ho považujú za prvého UX dizajnéra vôbec. Pri vytváraní svojich rozprávok bol doslova posadnutý vytváraním magických, pohlcujúcich a dokonalých používateľských zážitkov.

A nesmieme zabúdať ani na 70. roky, ktoré odštartovali éru osobných počítačov. V nej sa UX dizajn začal významne rozširovať, no nemal názov. Presne ho pomenoval až Donald Norman.

Kľúčové princípy UX dizajnu

Keď sa povie „dobrý UX dizajn“, každý si predstaví niečo iné. Práve preto existuje niekoľko kľúčových princípov, ktoré ho jasne definujú.

1. Používateľ je vždy na prvom mieste

UX dizajn sa zameriava v prvom rade na používateľa. Tento bod môže znieť jednoducho a prirodzene, no kvôli rôznym faktorom, ako sú predstavy klienta, sa môže stať, že dizajnér naň zabudne.

Dobrý a kvalitný UX dizajn slúži používateľom a pomáha im vyriešiť ich problémy tým najľahším a najrýchlejším spôsobom. V prípade e-shopu ide o čistú webovú stránku, na ktorej sú produkty rozdelené do niekoľkých hlavných kategórií. Nechýba vyhľadávací panel a samozrejmosťou aj je jednoduchý proces platby.

UX dizajn nemá vytvárať ďalšie problémy. Inak môže človeka odradiť od nákupu alebo prezerania webu a spôsobiť, že o neho prídete.

2. Základom je jednoduchosť, hierarchia a konzistentnosť

Jednoduchosť, hierarchia a konzistentnosť dovoľujú používateľom nájsť všetko, čo potrebujú, v priebehu niekoľkých sekúnd, a urobiť to, pre čo prišli. Každá z týchto vlastností sa o to stará inak:

• Jednoduchosť – na to, aby sa používateľ na webe ľahko orientoval, nemusí mať neoriginálny a nezaujímavý dizajn. Práve naopak. Pokojne pracujte s animáciami a hravými grafikami. Jednoduchosť odkazuje skôr na obmedzenie zbytočných prvkov a krokov, ktoré komplikujú používateľskú skúsenosť.
• Hierarchia – vhodné umiestnenie farieb, fontov a ďalších prvkov sa postará o to, že používatelia sa budú na webe orientovať bez akýchkoľvek problémov. Veľmi rýchlo nájdu všetko, čo potrebujú, čím sa automaticky zvýši šanca, že nakúpia, prihlásia sa na odber a podobne.
• Konzistentnosť – používateľskú skúsenosť zlepšuje a podporuje aj využívanie rovnakých farieb, písma a ďalších prvkov spojených s brandingom naprieč všetkými platformami, pomocou ktorých komunikujete s používateľom.

3. Najprv funkčnosť, potom dizajn

UX dizajn sa snaží používateľom uľahčovať jednotlivé činnosti, ako je napríklad hľadanie produktov alebo nakupovanie. A síce je preň dôležité aj to, ako digitálny produkt vyzerá, na prvom mieste má vždy funkčnosť.

4. Inšpirácia má pochádzať z niečoho známeho

Mnohí UX dizajnéri často vytvárajú netradičné a prekombinované produkty, čo vedie k tomu, že ľudia nevedia, čo od nich očakávať. Takýmto spôsobom na ich strane vznikajú zbytočné prekážky, kvôli ktorým nakoniec aplikáciu alebo web opustia.

Inak povedané, kvalitný UX dizajn by mal vychádzať zo zaužívaných dizajnových rámcov. Tie používatelia poznajú a bez problémov sa v rámci nich dokážu orientovať.

Čo rieši UX dizajn?

UX dizajn pokrýva viacero oblastí, do ktorých spadajú:

• Interakčný dizajn – označuje sa aj skratkou IxD. Jeho úlohou je zistiť, ako osoba interaguje s produktom, aby tento proces zjednodušil a zaistil ten najlepší zážitok. Okrem toho je pri interakčnom dizajne dôležité sledovať aj to, ako sa produkt chová, keď ho používa druhá strana. To znamená, akú spätnú väzbu poskytuje a ako na ňu môže človek reagovať.
• Používateľský prieskum – viete pomocou neho pochopiť používateľov a zistiť, aké sú ich problémy. Na základe týchto informácií môžete navrhnúť efektívne riešenia, ktorými prispôsobíte svoj produkt tak, aby bol ľahko použiteľný a praktický.
• Informačná architektúra – slúži na to, aby používateľovi pomohla zorientovať sa v produktoch a informáciách, ktoré mu poskytujete. Zameriava sa najmä na efektívnu organizáciu a štruktúrovanie obsahu.
• Prispôsobivosť webu – zaručuje, že používateľské rozhranie sa dobre zobrazí na rôznych zariadeniach od počítača cez tablet až po mobil.
• Obsah – pre UX je dôležitý aj obsah, ktorý sa nachádza na webe. Články, popisy produktov alebo iné texty významne ovplyvňujú to, aký dojem vytvoríte u používateľa. Preto je kľúčové sledovať, či sa text na zvolené miesto hodí, či súvisí s obrázkami alebo iným vizuálom a či je relevantný.
• Vytváranie persón – UX dizajnéri môžu na základe zozbieraných informácií vytvárať persóny, pre ktoré budú následne tvoriť weby, aplikácie a iné produkty.
• Ďalšie oblasti – UX zahŕňa desiatky ďalších oblastí, ako je použiteľnosť, prístupnosť či virtuálna realita.

Rada odborníka

Persóna je v UX a UI postavou, ktorá reprezentuje potreby, ciele a správanie istej skupiny ľudí. Uľahčuje vám pochopiť používateľov a tvoriť hodnotnejší a lepší obsah.

Čo je UI dizajn?

UI predstavuje skratku pre anglický výraz „User Interface“, čo v preklade znamená používateľské rozhranie. Táto oblasti dizajnu sa zameriava na estetiku produktu a jeho grafiku. Súčasťou UI je všetko, čo môžete vidieť na webe alebo v aplikácii, ako sú napríklad obrázky, text, bannery, tlačidlá a podobne.

UI je kľúčové, pretože používateľov vie presvedčiť, aby na webe zostali a spravili nákup. Okrem toho vo veľkom ovplyvňuje UX, pretože ho dokáže zlepšiť. Pekná a funkčná stránka zanechá v ľuďoch oveľa lepší pocit ako tá chaotická, kde sa jeden prvok prelína cez druhý a vôbec nenadväzuje na celok.

História UI sa začala písať v 70. rokoch minulého storočia, keď sa na trhu objavil počítač Xerox Alto, ktorý mal ako úplne prvý prepracované užívateľské rozhranie. To je známe aj ako Graphical User Interface, čiže GUI.

Počítač Xerox mal prekrývajúce sa okná, otváracie menu a ikonu alebo tlačidlo ku každej funkcii. Mohli ho tak používať aj osoby, ktoré nemali žiadne špeciálne vzdelanie v IT oblasti.

Vďaka tomuto posunu sa počítače rozšírili medzi väčšie množstvo ľudí. Nehovoriac o tom, že sa skvalitnila celková používateľská skúsenosť.

Typy UI dizajnu

UI dizajn má niekoľko základných typov, ktorými sú:

• Graphical user interface (GUI) – grafické používateľské rozhranie je jedným z najrozšírenejších typov, ktorý sa využíva pri tvorbe webových stránok a aplikácií. Používateľom dovoľuje komunikovať prostredníctvom praktických ikon a tlačidiel, na ktoré klikajú pomocou myši alebo trackpadu. Skvelým príkladom GUI je domovská obrazovka alebo pracovná plocha.
• Voice user interface (VUI) – označuje sa aj ako hlasové používateľské rozhranie. Jeho úlohou je rozpoznať reč na pochopenie hlasových príkazov. V súčasnosti sa využíva vo veľkej miere. Príkladom VUI sú populárni hlasoví asistenti, ako je Siri, Google Home alebo Alexa od Amazonu.
• Menu-driven interface – môžeme ho označiť aj ako rozhranie riadené ponukou. Používatelia v rámci neho interagujú s programom alebo systémom prostredníctvom série ponúk. Tieto ponuky predstavujú možnosti alebo príkazy, ktoré sa vyberajú pomocou ukazovateľa, dotykovej obrazovky alebo klávesnice. S menu-driven interface sa stretnete napríklad v bankomatoch.
• Command-line interface – ide o textové rozhranie, do ktorého zadáte príkazy. Tie následne interagujú s operačným systémom. Tento typ rozhrania bol obľúbený najmä v minulosti, no stretnete sa s ním aj dnes, napríklad ak používate systém Node.js.
• Virtual reality (VR) – virtuálna realita vytvára ilúziu skutočného sveta. Aktuálne je len v začiatkoch, no napreduje pomerne rýchlo, preto sa s ňou budete ako UI dizajnér stretávať čoraz častejšie.

Vedeli ste, že… hlasové používateľské rozhranie využívali UI dizajnéri dávno predtým, ako došlo k rozmachu hlasových asistentov? Optimalizovali pomocou neho webové stránky pre hendikepované osoby.

Kľúčové zásady UI

Kvalitné a dobré UI charakterizuje niekoľko kľúčových zásad. Tými sú:

Jednoduchosť

Platí tu to isté, čo pri UX. Jednoduchý UI dizajn uľahčuje používateľom pohyb na webovej stránke alebo v aplikácii, vďaka čomu sa môžu plne sústrediť na to, kvôli čomu ju navštívili.

Výborným príkladom jednoduchého UI je domovská stránka Google. Okrem vyhľadávacieho panela, tlačidiel a zopár informácií navyše na nej nenájdete nič iné.

Konzistentnosť

Využívanie prvkov, ktoré sú rovnaké alebo v niečom podobné, uľahčuje používateľom zvyknúť si na dizajn a predvídať, čo bude na ďalšej podstránke. Táto skutočnosť výrazne urýchľuje napríklad nákup produktov či služieb.

V spojitosti s konzistentnosťou môžeme uviesť ako príklad webovú stránku Facebooku. Vrchná aj bočná lišta sú veľmi podobné a neustále prítomné. Používateľom tak poskytujú rýchly prístup k rôznym sekciám nehľadiac na to, kde sa aktuálne nachádzajú.

Vizuálna hierarchia

Aj v tomto bode sa UI prelína s UX. Správnym usporiadaním prvkov viete usmerniť pozornosť používateľov a uľahčiť im navigáciu na webe či v aplikácii. Pomocou hierarchie môžete tiež zvýrazniť niektoré informácie a uistiť sa, že návštevníkovi neuniknú. V prípade e-shopu to môže byť umiestnenie zľavnených produktov do vrchnej časti hlavnej stránky.

Spätná väzba

Pri interakcii s prvkami webu alebo aplikácie potrebujú používatelia okamžitú spätnú väzbu. Tá im poskytne pocit kontroly a uistí ich, že to, čo robia, má nejaký efekt.

Spätná väzba môže mať formu vizuálnych alebo zvukových podnetov. Dokonca niektoré aplikácie, napríklad Messenger, využívajú kombináciu oboch.

Prístupnosť

Kvalitný UI by mal zabezpečiť aj prístupnosť, vďaka ktorej bude môcť digitálny produkt používať aj osoba so zdravotným postihnutím.

Pri prístupnosti by ste mali zvážiť faktory, ako je možnosť nastavenia farebného kontrastu alebo veľkosti písma. Okrem toho do webu alebo aplikácie môžete zakomponovať aj hlasové čítanie alebo možnosť navigácie pomocou klávesnice.

Jasnosť

Ide o prezentovanie informácií zrozumiteľným spôsobom, ktorému porozumie vaša cieľová skupina. Ak vlastníte e-shop alebo webovú stránku určenú pre bežného spotrebiteľa, stavte na jednoduchý jazyk, ľahko čitateľné písmo a farby, ktoré nebudú pri prezeraní obsahu prekážať. Ideálny je bledý podklad s tmavým písmom.

Estetika a vizuálna príťažlivosť

UI sa orientuje najmä na vzhľad produktu. Ten má veľký vplyv na to, ako sa človek cíti pri jeho používaní. Ako UI dizajnér sa preto budete zaoberať vytvorením rozhrania, ktoré je pútavé, zaujímavé, príťažlivé a v súlade so značkou, resp. jej brandingom.

Prispôsobiteľnosť

Tento bod sa zameriava na prispôsobenie webovej stránky a aplikácie rôznym veľkostiam obrazovky. V súčasnosti, keď ľudia používajú veľké množstvo zariadení, od mobilov cez tablety až po počítače, ide o kľúčovú vlastnosť UI dizajnu.

Vedeli ste, že… prispôsobiteľnosť webu či aplikácie rôznym obrazovkám sa označuje aj slovom „responzivita“?

Prvky UI dizajnu

UI dizajn pracuje s viacerými prvkami. Najčastejšie sa stretnete s týmito:

• Farby – netreba to s nimi preháňať. V prípade kombinácie spájajte odtiene, ktoré sú podobné a nevytvárajú príliš agresívny kontrast.
• Písmo – musí byť čitateľné, aby ľuďom nekomplikovalo interagovanie s aplikáciou. V rámci UI dizajnu môžete pokojne využiť viac ako jedno. Uistite sa však, že všetky zvolené písma spolu ladia.
• Obrázky – môže ísť o fotky, rôzne grafické prvky alebo infografiky. Ich úlohou je skrášliť web alebo iný digitálny produkt a priniesť dodatočné informácie.
• Animácie a efekty – sú zaujímavým doplnkom webu alebo aplikácie. Vedia upriamiť pozornosť na určitú informáciu. Pri ich výbere si však dávajte pozor na to, aby nepôsobili rušivo a nepríjemne.
• Menšie grafické prvky – spadajú sem tlačidlá a formuláre, ktoré rozbíjajú text, priťahujú pozornosť a zjednodušujú orientáciu na stránke.

Na čo sa zameriava UI dizajn?

Pracovná náplň UI dizajnéra spravidla zahŕňa:

• analýzu používateľov a ich preferencií,
• zisťovanie dojmov z produktov (webu, aplikácie a pod.),
• prototypovanie používateľského rozhrania,
• vytváranie a používanie interaktívnych prvkov a animácií,
• prispôsobenie produktu pre všetky veľkosti obrazoviek,
• implementáciu dizajnových riešení.

Rozdiely medzi UX a UI dizajnom

Hlavný rozdiel medzi UX a UI dizajnom je v tom, že UX sa zameriava hlavne na celkový dojem, ktorý má používateľ pri interagovaní s produktom. Na druhej strane UI je čisto o vizuálnej prezentácii webu, aplikácie alebo iného rozhrania.

UX tiež hľadá a rieši problémy, ktoré ľudia môžu mať pri využívaní produktu. UI následne nadväzuje na riešenia od UX a snaží sa ich spraviť esteticky príjemnými, zaujímavými a intuitívnymi.

V celom dizajnovom procese býva UX spravidla na prvom mieste. Po tom ako dizajnér objaví problémy a príde s riešeniami, prichádza na rad UI.

A netreba zabúdať ani na to, že UX nemusíte používať len v digitálnej oblasti. Svoje miesto si nájde aj pri návrhu fyzických produktov. Naopak UI sa týka len digitálneho sveta, čiže webových stránok, mobilných aplikácií a podobne.

Rozdiely medzi UX a UI dizajnérom

Schopnosti, ktoré má mať UX a UI dizajnér sa líšia minimálne. Obaja musia vedieť spolupracovať, komunikovať a byť otvorení novým nápadom. Ďalej by tiež nemali mať problém so skúmaním používateľského správania a s tvorbou a testovaním prototypov.

K odlišnostiam patrí napríklad to, že UX dizajnér by mal mať kritické myslenie a mal by chápať informačnú architektúru. UI dizajnérovi zas nesmie chýbať kreatívne zmýšľanie a znalosť responzívneho dizajnu.

UX dizajnér sa tiež zameriava skôr na použiteľnosť a praktickosť, pričom UI dizajnér na interaktivitu a vlastnosti spojené s brandingom (písmo, farby a podobne).

Nástroje UX a UI dizajnu

Ako UX a UI dizajnér máte k dispozícii viaceré nástroje, ktoré urýchľujú a zefektívňujú celý proces práce a zaručujú presné výsledky. K tým najpopulárnejším patria:

• Figma – výkonný nástroj, ktorý využijete na UX aj UI. Ide o cloudovú platformu, ktorá umožňuje tímovú spoluprácu v reálnom čase a má desiatky funkcií na navrhovanie, testovanie a prototypovanie dizajnov.
• Adobe XD – poslúži vám pri tvorbe webových stránok, mobilných aplikácií a ďalších digitálnych produktov. Ideálny je na navrhovanie a prototypovanie dizajnov, pričom ho kedykoľvek viete rozšíriť o ďalšie Adobe nástroje. Jeho výhodami sú jednoduché používanie, vysoký výkon, prehľadnosť a možnosť spolupráce v reálnom čase.
• Maze – pokročilý nástroj na testovanie používateľského zážitku, vďaka ktorému môžete zbierať kvantitatívne a kvalitatívne údaje o používateľoch. Výborný je najmä vtedy, keď potrebujete rýchlu spätnú väzbu na overenie svojich návrhov, ktoré plánujete implementovať.
• Sketch – nástroj, ktorý je špeciálne vytvorený pre operačný systém macOS. Primárne sa orientuje na vektorové grafiky, no má aj desiatky ďalších funkcií. Nehovoriac o tom, že ho ľahko prepojíte s platfromami ako InVision, Zeplin alebo Abstract.
• Webflow – populárny nástroj na návrh a vývoj webových stránok. Viete pomocou neho vytvoriť responzívne a vizuálne atraktívne weby bez potreby písania kódu. K jeho najväčším výhodám patrí vizuálny editor s intuitívnou funkciou drag-and-drop, nástroje na vytváranie zaujímavých animácií a rýchly a bezpečný hosting.
• InVision – ďalší pokročilý nástroj vhodný na prototypovanie a spoluprácu. Disponuje desiatkami funkcií, vďaka čomu ho využijete počas celého procesu tvorby dizajnu – od počiatočného konceptu až po finálny produkt. InVision sa jednoducho používa, je prehľadný a dá sa prispôsobiť presne podľa vašich potrieb.

Čo je použiteľnosť?

Ide o je vlastnosť, ktorá označuje, ako môže človek použiť produkt alebo službu na dosiahnutie svojho cieľa. Mnohí si ju často mýlia s UX dizajnom, pretože doň spadá. Nejde však o to isté.

Rozdiel medzi týmito dvoma pojmami je v tom, že UX je komplexný celok, ktorý sa zameriava na úplne celú interakciu používateľa s výrobkom. Naopak použiteľnosť sa sústredí len na to, či sa výrobok osobe dobre používa a spĺňa jej predstavy.

Úroveň použiteľnosti dizajnu sa odvíja od toho, ako jeho funkcie vyhovujú potrebám ľudí. Podľa Nielsen Norman Group je táto vlastnosť druhou najdôležitejšou v rámci UX a UI hneď po užitočnosti. Nemali by ste ju preto brať na ľahkú váhu.

Základné prvky použiteľnosti

Použiteľnosť charakterizuje niekoľko základných prvkov, ako napríklad:

• Efektivita – dizajn, ktorý spĺňa podmienky použiteľnosti, dovoľuje používateľom vykonávať jednotlivé úlohy jednoducho, rýchlo a bez akýchkoľvek prekážok.
• Zapojenie – použiteľnosť motivuje ľudí k tomu, aby digitálny produkt využívali s radosťou a pravidelne sa k nemu vracali.
• Tolerancia chýb – používateľské rozhranie by malo byť jasné, aby používateľ robil čo najmenej chýb. Tie by mohli predlžovať proces nákupu alebo používania aplikácie a viesť k frustrácii.
• Zapamätateľnosť – vďaka použiteľnosti sa osoba môže ľahko a rýchlo naučiť, ako používať systém, web alebo aplikáciu. Pri opakovanej návšteve tak nebude mať problém urobiť rýchly nákup alebo využiť niektoré z funkcií.