Čo je to UX design, UI design a ako s nimi začať

Nájdite s nami odpovede na otázky UX a UI dizajnu, spoznajte aký je medzi nimi rozdiel, ako postupujú ich dizajnéri a ako sa stať jedným z nich.

5
1688
Zdroj: Jakub Goda
Autor: Jakub Goda

User experience (UX) – preložené do slovenčiny užívateľská skúsenosť. Je to oblasť dizajnu, ktorá sa zaoberá pocitmi a zážitkami človeka pri interakcii so systémom, či už ide o webovú stránku, aplikáciu alebo softvér. UX sa zaoberá výskumom cieľovej skupiny užívateľov, interakčným dizajnom, tvorbou prototypov a wireframov alebo scenármi.

User Interface (UI) v preklade znamená užívateľské rozhranie. Je to oblasť dizajnu, ktorá sa sústredí na vývoj rozhrania systému, či už ide o aplikácie, webové stránky alebo softvéry. UI sa zaoberá farebnou škálou, typografickými prvkami, vizuálnym dizajnom alebo rozložením prvkov.

rozdiel UX a UI

Oba druhy dizajnu majú podobný cieľ, a to vždy uspokojiť zákazníka a vždy sa zamerať na potreby a schopnosti používateľa. Ich snahou je vytvoriť dizajn, ktorý zabezpečí čo najjednoduchšie a najefektívnejšie používanie produktu. Dizajn musí byť vyvážený – rovnováha dizajnu medzi jeho technickou a vizuálnou stránkou je veľmi krehká. Svojím spracovaním musí prilákať užívateľa naspäť a ten sa k produktu potom rád vráti. Dizajn umožňuje užívateľovi vykonať vopred stanovenú činnosť bez akýchkoľvek problémov, a zároveň v ňom vyvoláva pozitívne pocity pri užívaní produktu.

Ak by sme mali skratky UX a UI vysvetliť na príklade z reálneho sveta, môžeme si predstaviť fotografiu z detstva, pri ktorej UI predstavuje samotnú fotku, jej veľkosť, farbu a UX zasa emócie, ktoré v nás fotka vyvoláva.

Sklenená fľaša kečupu je prevažne dizajn, ale plastová fľaša je prevažne skúsenosť - pocit vytláčania kečupu je silnejší zážitok ako vylievanie zo sklenenej fľaše.
Sklenená fľaša kečupu je prevažne dizajn, ale plastová fľaša je prevažne skúsenosť – pocit vytláčania kečupu je silnejší zážitok ako vylievanie zo sklenenej fľaše.

Veľmi zjednodušene môžeme povedať, že UX sa zaoberá otázkami, ako človek používa produkt, aké sú jeho potreby a aký má dojem z produktu, pričom UI sa zaoberá otázkami, ako daný produkt vyzerá a akým spôsobom funguje. Preto nastávajú rozdiely vo vzhľade UX a UI dizajnu. Aj keď ide o dve rozdielne oblasti dizajnu, faktom je, že jedna bez druhej by nemohla fungovať, keďže sa navzájom prelínajú.

UI dizajnér: Akej farby by malo byť tlačidlo, aby zaujalo užívateľa?

UX dizajnér: Potrebujeme tu vôbec toto tlačidlo?

Ako postupuje UX dizajnér?

ui-ux-animation

UX dizajnér by mal prejsť pri riešení konkrétneho projektu týmito krokmi:

  1. Skúmanie správania používateľov individuálnymi rozhovormi, využívaním online výskumov, prieskumov a dotazníkov.
  2. Vytváranie tzv. Personas alebo osôb, ktoré predstavujú fiktívne konkrétne osoby reprezentujúce určitú skupinu používateľov.
  3. Určovanie užívateľských príbehov a užívateľských tokov – na základe Persony sa určia potreby danej skupiny používateľov, na základe ktorej sa dá predpokladať jej správanie pri používaní konkrétneho systému.
  4. Navrhovanie Informačnej schémy alebo architektúry (IA). Ide o proces, ktorého výsledkom je vytvorenie logickej štruktúry a vzájomnej nadväznosti obsahu celého produktu, či už ide o web-stránku, aplikáciu a pod.
  5. Kreslenie wireframov a tvorba interaktívnych prototypov. Wireframe alebo „drôtený model“ je akýmsi vizuálnym návodom pri tvorbe dizajnu, ktorý pomáha v lepšej orientácii. Reprezentuje skicu alebo grafický návrh produktu, ktorý slúži na definíciu funkcií, obsah produktu a pre lepšie pochopenie. Interaktívne prototypy sú takmer totožné s wireframami, no navyše dokážu znázorňovať fungovanie interaktívnych prvkov (vysúvacie menu, posuvníky, tlačidlá a pod.).

    Príklad wireframe mobilnej aplikácie od CCSAuthor.com
    Príklad wireframe mobilnej aplikácie od CCSAuthor.com
  6. Testovanie použiteľnosti, pretože ak daný produkt nebude fungovať správne, ľudia odídu a už sa nevrátia.
    Úspešné testovanie môžeme rozdeliť na tri základné kroky:
    a) získanie reprezentatívnej skupiny používateľov,
    b) príprava úloh súvisiacich s testovanou aplikáciou,
    c) sledovanie používateľov, ako vykonávajú jednotlivé úlohy a kde majú problémy s používateľským rozhraním.

Postup tvorby UX dizajnu možno neznie až tak zložito, no nesmieme zabúdať na to, že používateľovi stačí pár sekúnd na to, aby sa rozhodol, či ostane na vašej stránke alebo nie (či bude využívať váš produkt). Práve preto je potrebné poznať používateľskú základňu, na ktorú sa zameriavate, a taktiež zladiť obchodné ciele s požiadavkami vašich zákazníkov. Ak teda chcete zanechať pozitívnu používateľskú skúsenosť, nesmiete zabudnúť na vizualitu produktu, ale aj na jeho jednoduché pochopenie.

Výhody:
• kladné hodnotenie
• spokojní užívatelia
• ľudia neprechádzajú k iným službám

Nevýhody:
• časovo náročné
• zložité postupy
• finančne nákladné (záleží od zvoleného postupu)

Ako postupuje UI dizajnér?

UI-Design

UI dizajnér by mal prejsť pri riešení konkrétneho projektu týmito krokmi:

  1. Tvorba funkčnej špecifikácie, pri ktorej sa zadefinujú funkcie systému.
  2. Užívateľská analýza – oboznámenie sa s užívateľskou skupinou, ako bude užívateľ používať aplikáciu, ako doplní aplikácia zaužívaný pracovný tok, ako je užívateľ technicky zdatný, aký vizuál by bol najvhodnejší.
  3. Definovanie informačnej architektúry (IA).
  4. Grafický dizajn rozhrania. Vytvorí sa návrh vizuálneho spracovania aplikácie.
  5. Užívateľské testovanie, pri ktorom sa overí a otestuje samotný produkt.

Keďže hlavnou úlohou dizajnu a architektúry užívateľského rozhrania je jednoduchosť a pohodlie používania vášho produktu, pri navrhovaní je potrebné dbať na niekoľko princípov:

1. zadefinovanie koncového užívateľa,
2. jednoduché a jednoznačné zobrazenie funkcií,
3. rýchle zorientovanie sa návštevníka,
4. pocit bezpečnosti,
5. estetickosť návrhu.

Na nasledujúcich obrázkoch môžeme vidieť, ako to vyzerá, keď sa (ne)dodržia dané princípy:

najhorsia stranka priklad dobreho UI dizajnuVšeobecne môžeme tieto princípy zhrnúť tak, že užívateľské prostredie by malo byť čo najčistejšie, intuitívne a efektívne.

Kde a ako sa stať UX/UI dizajnérom?

1. Čítajte UX/UI dizajn články, kde sa len dá.

Začnite vyhľadávačom, sústreďte sa na kľúčové slová. Nájdite články (začali by sme článkami “So you want to be a user experience designer” od Whitney Hess, no skúsiť môžete aj slovenské zdroje – sketcher alebo napríklad wezeo). Na začiatku budete musieť veľa čítať a vyhľadávať informácie.

2. Zoznámte sa so softvérmi.

Adobe Photoshop alebo Illustrator tvoria už dlhú dobu akýsi základ dizajnérskych nástrojov, ale na scénu pribudol takisto softvér Sketch. Čo sa týka tvorby prototypov, je tu JustInMind Prototyper alebo skvelá aplikácia na mobil POP – Prototyping on Paper. Všetky tieto nástroje majú extrémne intuitívne prostredie. Pokiaľ sa chcete naučiť pracovať v jednom z nich, napíšte nám do komentárov a my pre vás pripravíme návody podľa vašich predstáv.

3. Nechajte sa inšpirovať.

Počúvajte obľúbenú hudbu, prezentácie ľudí z praxe, pozrite si nejaké dizajnové práce. Postavte inšpiráciu na prvé miesto, pretože to vám pomôže lepšie pochopiť UX/UI vzory, vizuálny dizajn a nabije vás to energiou.

4. Pracujte na vymyslených projektoch.

Pokiaľ je vaším snom začať pracovať na pozícii junior UX/UI dizajnér a neskôr sa prepracovať a zdokonaliť, budete musieť klientom ukázať nejakú prácu. Je to jeden z najťažších krokov, pretože si možno budete myslieť, že na projekty ešte nie ste pripravený, ale aj tak to urobte. Pokúste sa navrhnúť si portfólio v programe Sketch alebo Illustrator. Začnite napríklad s interakciami, tvorbou wireframov, navrhnite prototyp novej aplikácie alebo zmeňte dizajn stránky z hľadiska použiteľnosti. Publikujte, zbierajte kritiku, ktorá vás posunie vpred. Dobrým príkladom sú fotografi – ak si pozriete ich portfólio, vždy sú najkvalitnejšími fotkami tie, ktoré sú najnovšie, a naopak.

Záver

V článku sme vás stručne previedli základnými rozdielmi UX a UI dizajnu. Ak Vás zaujímajú trendy v oblasti UX/UI dizajnu na tento rok, kliknite si na náš článok. Budeme radi, ak nám napíšete, ktorá časť článku vás dnes zaujala a chceli by ste si o nej podrobnejšie prečítať nabudúce.

Autor: Dominika Straková

Chceli by ste, aby Dominika písala pre náš web?

  • Áno (96%, 43 hlasov)
  • Nie (2%, 1 hlasov)
  • Ešte neviem (2%, 1 hlasov)

Celkom hlasujúcich: 45

Loading ... Loading ...