UX vs UI dizajn: v čom je rozdiel a čo z toho potrebuje vaša firma
Rozdiel UX a UI na príklade reštaurácie: UX je zážitok a logika, UI vzhľad a ovládacie prvky. Tabuľka rozdielov, kto čo robí, kedy stačí šablóna a ako poznať dobrého dizajnéra.
Ten artykuł jest na razie dostępny tylko po słowacku.
- UX je zážitok a logika (ako ľahko človek na webe nájde, čo potrebuje, a dokončí, čo chce), UI je vzhľad a ovládacie prvky (farby, písmo, tlačidlá, ikony).
- Oboje potrebuje každý web, ale firme s jednoduchým webom často stačí šablóna s úpravami, dizajn na mieru sa oplatí pri viackrokových procesoch, ako sú rezervácie, e-shop alebo aplikácia.
- Dobrého dizajnéra poznáte podľa portfólia, ktoré vysvetľuje riešený problém, podľa jasného procesu (najprv nákres, potom vzhľad) a podľa toho, že návrh overí s niekoľkými skutočnými ľuďmi.
Rozdiel UX a UI je jednoduchý: UX (user experience, používateľská skúsenosť) je zážitok a logika, teda či človek na webe rýchlo nájde, čo hľadá, a dokončí, čo chce urobiť. UI (user interface, používateľské rozhranie) je vzhľad a ovládacie prvky, teda farby, písmo, tlačidlá a ikony. Každý web potrebuje oboje, ale firma nemusí hneď platiť dvoch ľudí ani dizajn na mieru. Tento článok ukazuje rozdiel na príklade z reštaurácie, dáva tabuľku, vysvetľuje, kto čo robí, a pomáha rozhodnúť, kedy stačí šablóna a ako poznať dobrého dizajnéra.
Rozdiel UX a UI v dvoch vetách
UX (používateľská skúsenosť) odpovedá na otázku, či sa web dá použiť: nájdem rýchlo, čo potrebujem, rozumiem tomu a dokončím objednávku, rezerváciu alebo dopyt bez zaváhania? UI dizajn odpovedá na otázku, ako web vyzerá a z čoho sa ovláda: aké má farby a písmo, ako vyzerajú tlačidlá, polia formulárov a ikony a či sú na každej stránke rovnaké.
Web môže byť pekný a zároveň zmätočný, alebo jednoduchý a zároveň škaredý. Prvý stráca ľudí v polovici cesty, druhý pôsobí nedôveryhodne. Cieľom je, aby bol web použiteľný a aby vyzeral tak, že mu človek verí.
Príklad z reštaurácie: jedálny lístok
Predstavte si reštauráciu a jej jedálny lístok. UX je to, ako ľahko sa z neho dá objednať. Sú jedlá rozdelené na polievky, hlavné jedlá a dezerty? Stojí cena pri každom jedle? Je jasné, ktoré jedlo je bezmäsité alebo obsahuje alergény? A príde čašník, keď ste pripravení? UI je to, ako lístok vyzerá: aký má papier, písmo, farby, fotky a ikonky.
- Pekný lístok, ťažká objednávka: ozdobné písmo, tenké sivé písmo na krémovom papieri, jedlá bez kategórií. Vyzerá dobre (UI), ale hosť sa v ňom stráca (UX).
- Škaredý lístok, ľahká objednávka: obyčajný papier, jasné kategórie, ceny pri jedlách. Nie je ozdobný, ale hosť objedná za minútu. UX je dobré, UI slabé.
- Dobrý lístok: prehľadný, čitateľný a pekný. To je cieľ.
Na webe reštaurácie to znamená to isté. UX je rezervácia stola na pár ťuknutí, jedálny lístok ako text (nie ako sken, ktorý sa na telefóne nedá prečítať) a telefónne číslo, ktoré sa dá z mobilu vytočiť ťuknutím. UI je písmo, farby, fotky jedál a vzhľad tlačidla „Rezervovať“.
Chcete to mať hotové bez starostí? Pošlite nám pár viet o zadaní a cenovú ponuku dostanete do 48 hodín, zadarmo a bez záväzkov.
Rovnaký rozdiel na webe kaderníctva
Predstavte si kaderníctvo, ktoré má web s krásnymi fotkami a elegantným písmom, takže UI je v poriadku. Rezervácia je však schovaná v menu pod názvom „Kontaktujte nás“, formulár má osem polí a po odoslaní sa nič nezobrazí. Zákazníčka na telefóne to vzdá a zavolá, alebo ide ku konkurencii. Oprava nie je nový vzhľad. Oprava je v UX: tlačidlo „Rezervovať termín“ na prvej obrazovke, tri polia (služba, termín, telefón) a potvrdenie po odoslaní. Vzhľad zostane rovnaký.
Z našej praxe: na webe reborncreative.sk je prepínač svetlého a tmavého režimu v hlavičke. Jeho vzhľad a miesto sú UI. Pravidlá za ním sú UX: bez uloženej voľby sa web riadi časom (7:00 až 19:00 svetlý, inak tmavý) a ručná voľba platí 7 dní. Návštevník tak nemusí voľbu robiť pri každej návšteve.
Tabuľka rozdielov UX a UI
| Hľadisko | UX | UI |
|---|---|---|
| Hlavná otázka | Dá sa web ľahko použiť a dosiahnem cieľ? | Ako web vyzerá a ako sa ovláda? |
| Čo rieši | štruktúru stránok, poradie krokov, názvy v menu, texty tlačidiel, formuláre | farby, písmo, veľkosti, ikony, vzhľad tlačidiel a polí |
| Príklad v reštaurácii | kategórie jedál, ceny pri jedlách, rýchla objednávka | papier, písmo, farby a fotky lístka |
| Príklad na webe kaderníctva | rezervácia termínu na tri kroky | vzhľad kalendára a tlačidla „Rezervovať“ |
| Čo z toho vzniká | mapa stránok, cesta používateľa, nákres rozloženia | návrhy obrazoviek, farebná paleta, súbor ovládacích prvkov |
| Ako sa overuje | test s ľuďmi: dokážu splniť úlohu? | kontrola čitateľnosti, kontrastu a jednotného vzhľadu |
| Typická chyba | zmätočné menu, zbytočne dlhý formulár | slabo čitateľné písmo, tlačidlá, ktoré vyzerajú na každej stránke inak |
Dva časté omyly
- „UX sú iba prieskumy a grafy.“ Nie. V malom projekte je UX hlavne zdravý rozum a skúška: prejsť web očami zákazníka, skrátiť cestu k cieľu a overiť ju s niekoľkými ľuďmi.
- „UI je iba zdobenie.“ Nie. UI rozhoduje o čitateľnosti, o tom, či je tlačidlo vidieť a či sa dá trafiť palcom, a o dôvere. Čitateľnosť a kontrast sú časť UI, ktorá priamo ovplyvňuje použiteľnosť.
Kto čo robí a v akom poradí
UX dizajnér zisťuje, kto web používa a čo potrebuje, navrhne štruktúru stránok a cestu používateľa (kroky od vstupu na web po splnený cieľ) a nakreslí wireframe (jednoduchý nákres rozloženia stránky bez farieb). UI dizajnér z nákresu spraví vzhľad: farby, písmo, tlačidlá, ikony a stavy prvkov (ako vyzerá tlačidlo, keď naň ukážete myšou). Programátor to preloží do fungujúceho webu.
UI dizajnér často zapíše vzhľad ako pravidlá, aby bol všade rovnaký. V našej appke Renna je to písmo DM Sans, limetkový akcent, zaoblené karty s polomerom 24 px, tlačidlá v tvare pilulky a farby cez CSS tokeny (pomenované hodnoty farieb namiesto pevných kódov), a to v tmavom aj svetlom režime.
Poradie je dôležité: najprv UX, potom UI. Ak sa kreslí vzhľad bez logiky, často sa prekresľuje, keď sa zistí, že na stránke nie je miesto pre formulár alebo cenník. V malých projektoch obe úlohy bežne robí jeden človek. Rozdiel je v tom, či si na UX časť vyhradí čas a overí ju s ľuďmi.
Kedy firma potrebuje UX aj UI poriadne
Pri jednoduchom webe s kontaktom stačí zvládnuť základy oboch. Dôkladnú prácu na UX aj UI potrebujete, keď návštevník musí niečo urobiť, nie len prečítať:
- kaderníctvo alebo ordinácia s online rezerváciou termínu,
- e-shop s oblečením, kde sa rieši veľkosť, doprava, platba a vrátenie,
- web s viackrokovým formulárom alebo kalkulačkou ceny,
- webová alebo mobilná aplikácia, klientsky portál,
- web, ktorý má návštevnosť, ale neprináša dopyty.
Pri poslednom bode býva príčina často v UX, nie vo vzhľade: nový kabát starý problém nevyrieši.
Šablóna s úpravami alebo dizajn na mieru
Dizajn na mieru nie je automaticky lepší. Rozhoduje, aké zložité je to, čo majú ľudia na webe robiť.
Stačí šablóna s úpravami, keď:
- web slúži ako vizitka (kaderníctvo, účtovníčka, remeselník) a človek má zavolať alebo napísať,
- proces je jednoduchý: prečítať si ponuku, zavolať, vyplniť krátky formulár,
- rozpočet je malý a dôležité je začať rýchlo.
Aj šablóna potrebuje UX úpravy: názvy v menu, poradie sekcií, texty tlačidiel a formulár. Väčšina šablón je navrhnutá všeobecne, nie pre vašich zákazníkov.
Dizajn na mieru sa oplatí, keď:
- proces má viac krokov (rezervácia s výberom služby a času, objednávka s konfigurátorom, kalkulačka),
- web používajú ľudia so špecifickými potrebami (starší pacienti, firemní zákazníci s dlhým rozhodovaním),
- šablóna by vás nútila ku kompromisom v štruktúre,
- robíte aplikáciu alebo klientsky portál,
- sa potrebujete od konkurencie jasne odlíšiť.
Weby aj webové a mobilné aplikácie robíme v službe Web a aplikácie. Cena závisí od rozsahu, ponuku pošleme do 48 hodín, základný prehľad je v cenníku.
Ako poznať dobrého dizajnéra
Podľa odpovedí na pár otázok poznáte, či dizajnér rozumie UX aj UI, alebo len kreslí obrázky.
Portfólio. Pozrite sa, či práce vysvetľujú problém, nie len výsledok.
- Vie pri každej práci povedať, aký problém riešil, a nie len ukázať, ako vyzerá?
- Vie ukázať stav pred a po a povedať, čo sa zmenilo a prečo?
- Sú ukážky živé weby alebo aplikácie, ktoré si môžete vyskúšať, a nie len obrázky?
- Ak uvádza čísla (napríklad nárast dopytov), vie povedať, odkiaľ sú?
Proces. Zistite, v akom poradí pracuje.
- Pýta sa na vašich zákazníkov a cieľ webu skôr, než ukáže prvý návrh?
- Začína nákresom a až potom vzhľadom?
- Vie vysvetliť, prečo je tlačidlo alebo sekcia práve tam, kde je?
Test s ľuďmi. Dobrý dizajnér navrhne overiť návrh s niekoľkými skutočnými ľuďmi. Podľa Nielsena odhalí test použiteľnosti s piatimi ľuďmi väčšinu najčastejších problémov (v jeho modeli cca 85 %). Nemusí to byť laboratórium: stačí dať piatim ľuďom úlohu a sledovať, kde zaváhajú.
Varovné znamenia: sľub presného nárastu predaja, ponuka „pekného dizajnu“ bez jedinej otázky o vašich zákazníkoch a návrh, ktorý nikto okrem autora nevidel pred spustením.
Čo urobiť ako prvé
- Napíšte jednu vetu: čo má návštevník na webe urobiť (zavolať, rezervovať, objednať). Ak ju neviete napísať, nemá ju ani web.
- Prejdite web na telefóne ako cudzí človek a zapíšte si miesta, kde ste zaváhali. To je váš zoznam UX problémov.
- Dajte rovnakú úlohu trom až piatim ľuďom mimo firmy a sledujte ich bez rady.
- Až potom riešte vzhľad: písmo, farby, fotky.
Čo pripraviť, než oslovíte dizajnéra, ukazuje myšlienková mapa Ako zadať UX a UI dizajn a podrobnejšie ju rozoberá článok Ako zadať UX a UI dizajn.
Časté otázky
Aký je rozdiel UX a UI v jednej vete?
UX rieši, či sa web dá ľahko použiť a človek splní svoj cieľ, UI rieši vzhľad a ovládacie prvky. Spolu tvoria jeden návrh, ale odpovedajú na dve rôzne otázky.
Potrebujem UX dizajnéra aj UI dizajnéra?
Pri malom webe zvládne obe časti jeden človek, dôležité je, aby si na UX vyhradil čas a overil ho s ľuďmi. Dvoch špecialistov oceníte pri väčšom e-shope, aplikácii alebo portáli.
Čo je dôležitejšie, UX alebo UI?
Stoja spolu. Pekný, ale nepoužiteľný web stráca ľudí v polovici cesty, použiteľný, ale nedôveryhodne vyzerajúci web ich odradí hneď na začiatku. Ak musíte začať jedným, začnite UX.
Koľko stojí UX a UI dizajn?
Cena závisí od rozsahu: počtu stránok, zložitosti krokov a toho, či sa návrh testuje s ľuďmi. Ponuku pošleme do 48 hodín.
Nie ste si istí, čo váš web potrebuje?
Napíšte nám, čo má web robiť a kde sa ľudia zasekávajú. Povieme vám, či stačí úprava šablóny, alebo sa oplatí návrh na mieru, a ponuku pošleme do 48 hodín. Stačí kontaktný formulár.
Chcą Państwo tego samego dla swojej marki?
Wystarczy kilka zdań o planach, a w ciągu kilku godzin w dzień roboczy odezwiemy się z propozycją działania.