UI (User Interface) a UX (User Experience) patria medzi pojmy, ktoré sa v zadaniach objavujú skoro vždy a skoro vždy sa pritom zamieňajú. Rozdiel je pritom praktický a merateľný: UI rozhoduje o tom, či človek pochopí, čo má urobiť. UX rozhoduje o tom, či to urobí.
Tento článok vysvetľuje UI — čo to je, z čoho sa skladá a kde sa na e-shopoch najčastejšie láme. UX rozoberáme podrobne v druhom dieli.
UI a UX: v čom je rozdiel
Najkratšia možná definícia:
- UI je rozhranie. Čo používateľ vidí a na čo klikne — layout, farby, písmo, tlačidlá, formuláre, ikony.
- UX je skúsenosť. Či sa dostane tam, kam chcel, ako rýchlo a s akým pocitom.
Príklad z e-shopu. Tlačidlo Do košíka je UI: jeho veľkosť, kontrast voči pozadiu, umiestnenie voči cene, to, ako zareaguje na klik. Ale či ho používateľ nájde na mobile bez scrollovania, či mu je v tej chvíli jasné, koľko zaplatí za dopravu, a či po kliknutí vie, čo sa stalo — to už je UX.
Obe vrstvy sa navrhujú súčasne a jedna bez druhej nefunguje. Rozhranie, ktoré vyzerá skvele a nedá sa cez neho nakúpiť, je drahá dekorácia. Rozhranie, ktoré funguje a pôsobí nedôveryhodne, príde o zákazníkov skôr, než sa dostanú do košíka.
Čo je UI (User Interface), používateľské rozhranie
UI je vrstva, cez ktorú človek komunikuje s produktom. Pri webe a e-shope ide o všetko viditeľné a interaktívne na displeji — od rozloženia kategórií po to, ako sa správa vyhľadávacia lišta pri scrollovaní.
Predstavte si, že staviate mobilnú aplikáciu pre svoj e-shop. UI odpovedá na otázky:
- Ako sú produkty zobrazené? Sú fotky dosť veľké na to, aby bolo vidieť, čo sa predáva?
- Aké farby a písma sa používajú a drží sa rovnaký štýl naprieč aplikáciou?
- Je navigácia do kategórií prehľadná a dá sa ovládať palcom jednou rukou?
- Funguje vyhľadávanie a neprekáža pri scrollovaní ponukou?
- Je na prvý pohľad jasné, čo je tlačidlo a čo len text?
„UI vidíte na prvý pohľad – je to súhrnný návrh prvkov, animácií, interakcií, skrátka všetok vizuálny sprievodca používateľa po webe, čím lepšie, zrozumiteľnejšie a prehľadnejšie UI, tým lepšie bude UX," uvádza Marketingový slovník.
Z čoho sa UI dizajn skladá
UI dizajn nie je „vybrať farby". Je to sada rozhodnutí, ktoré sa potom opakujú na stovkách stránok. V praxi obsahuje:
Layout a grid. Koľko stĺpcov, aké odsadenie, ako sa stránka správa na mobile, tablete a desktope. Grid je dôvod, prečo web pôsobí usporiadane — alebo neusporiadane.
Typografiu. Výber fontov, veľkostná škála, riadkovanie, dĺžka riadku. Pri e-shope je kľúčová čitateľnosť popisov a cien, nie originalita písma.
Farby a kontrast. Farebná paleta, ale hlavne kontrastné pomery. Sivý text na bielom pozadí je obľúbený a zároveň jeden z najčastejších dôvodov, prečo ľudia prehliadnu dôležitú informáciu.
Komponenty a ich stavy. Tlačidlo nie je jeden obrázok. Má stav základný, hover, aktívny, neaktívny, chybový a načítací. Keď chýba stav „načítava sa", používateľ klikne na objednávku trikrát.
Ikonografiu a mikrointerakcie. Ikony musia byť zrozumiteľné bez popisku, alebo mať popisok. Mikrointerakcie — potvrdenie vloženia do košíka, animácia načítania — dávajú spätnú väzbu, že systém zareagoval.
Dizajnový systém. Knižnica komponentov a pravidiel, vďaka ktorej vyzerá desiata nová stránka rovnako ako prvá. Bez neho sa e-shop počas dvoch rokov rozpadne na desať rôznych štýlov tlačidiel.
Kde sa UI na e-shopoch najčastejšie láme
Z auditov, ktoré robíme, sa opakujú štyri veci:
- Tlačidlo do košíka pod ohybom na mobile. Používateľ musí scrollovať, aby vôbec zistil, že produkt sa dá kúpiť. Na mobile, kde dnes chodí väčšina návštevnosti, ide o priamu stratu.
- Cena dopravy odhalená až v poslednom kroku. Formálne ide o UX problém, ale rieši sa UI prostriedkami — informáciou zobrazenou skôr, na karte produktu alebo v košíku.
- Formuláre, ktoré nespoznajú chybu včas. Validácia až po odoslaní znamená, že používateľ vyplní osem polí a potom sa dozvie, že prvé bolo zlé.
- Nekonzistentné komponenty. Tri rôzne štýly tlačidiel na jednej stránke a človek prestane rozoznávať, čo je hlavná akcia.
Žiadna z tých vecí nie je otázka vkusu. Všetky sa dajú zmerať na konverznom pomere.
Čo je UX (User Experience), používateľská skúsenosť
UX je celkový zážitok z používania produktu. Nepýta sa, či tlačidlo vyzerá dobre, ale či používateľ dokončil, čo chcel — a či sa kvôli tomu nemusel nikde zastaviť a premýšľať.
Otázky, ktoré UX rieši:
- Je nákup ľahký na dokončenie, alebo niekde odpadne polovica ľudí?
- Nájde používateľ to, čo hľadá, počas niekoľkých sekúnd?
- Neodradí ho niečo pri vypĺňaní údajov?
- Vie po odoslaní objednávky, čo bude ďalej?
UX pracuje s dátami: s nahrávkami relácií, heatmapami, používateľským testovaním a hlavne s číslami z analytiky. Preto sa dá zlepšovať iteratívne — zmeníte jeden krok v košíku a zmeriate dopad.
Detailne UX rozoberáme v druhom dieli.
Ako UI a UX fungujú dohromady
Najjednoduchší spôsob, ako si vzťah zapamätať: UX je rozhodnutie, UI je jeho prevedenie.
UX povie, že cena dopravy musí byť vidieť skôr, pretože ju ľudia hľadajú a pri jej neskorom odhalení opúšťajú košík. UI rozhodne, kde presne sa zobrazí, akým veľkým písmom a či dostane ikonu.
Preto nemá zmysel pýtať sa, čo je dôležitejšie. V praxi sa navrhujú spoločne a zlé rozhodnutie v jednej vrstve zruší dobrú prácu v druhej.
Zdroj obrázka: Applify.com
Kedy sa do UI a UX oplatí investovať
Redizajn je drahý a nie vždy je to správna prvá vec. Oplatí sa, keď:
- Máte návštevnosť, ale konverzný pomer zaostáva. Keď na e-shop chodia ľudia a nekupujú, je úprava rozhrania lacnejšia než prikupovanie ďalšej návštevnosti.
- Mobilná konverzia výrazne zaostáva za desktopom. To je skoro vždy problém rozhrania, nie ponuky.
- Rozširujete sortiment. Navigácia navrhnutá pre 200 produktov nezvládne 2 000.
- Prechádzate na novú platformu. Migrácia je jediný moment, kedy je redizajn relatívne lacný, pretože sa aj tak siaha do všetkého.
Naopak: pri pár stovkách návštev mesačne nemá zmysel ladiť odtiene tlačidiel. Najprv návštevnosť, potom optimalizácia rozhrania.
Zhrnutie
UI je rozhranie — vizuálna a interaktívna vrstva, cez ktorú používateľ produkt ovláda. UX je skúsenosť — či sa cez to rozhranie dostal k cieľu. UI sa dá posúdiť pohľadom, UX len dátami. A pri e-shope sa oboje prejaví na jednom čísle: na konverznom pomere.
