UI (User Interface) a UX (User Experience) patří mezi pojmy, které se v zadáních objevují skoro vždy a skoro vždy se přitom zaměňují. Rozdíl je přitom praktický a měřitelný: UI rozhoduje o tom, jestli člověk pochopí, co má udělat. UX rozhoduje o tom, jestli to udělá.
Tenhle článek vysvětluje UI — co to je, z čeho se skládá a kde se na e-shopech nejčastěji láme. UX rozebíráme podrobně v druhém dílu.
UI a UX: v čem je rozdíl
Nejkratší možná definice:
- UI je rozhraní. Co uživatel vidí a na co klikne — layout, barvy, písmo, tlačítka, formuláře, ikony.
- UX je zkušenost. Jestli se dostane tam, kam chtěl, jak rychle a s jakým pocitem.
Příklad z e-shopu. Tlačítko Do košíku je UI: jeho velikost, kontrast vůči pozadí, umístění vůči ceně, to, jak zareaguje na klik. Ale jestli ho uživatel najde na mobilu bez scrollování, jestli mu je v ten moment jasné, kolik zaplatí za dopravu, a jestli po kliknutí ví, co se stalo — to už je UX.
Obě vrstvy se navrhují současně a jedna bez druhé nefunguje. Rozhraní, které vypadá skvěle a nedá se přes něj nakoupit, je drahá dekorace. Rozhraní, které funguje a působí nedůvěryhodně, přijde o zákazníky dřív, než se dostanou do košíku.
Co je UI (User Interface), uživatelské rozhraní
UI je vrstva, přes kterou člověk komunikuje s produktem. U webu a e-shopu jde o všechno viditelné a interaktivní na displeji — od rozložení kategorií po to, jak se chová vyhledávací lišta při scrollování.
Představte si, že stavíte mobilní aplikaci pro svůj e-shop. UI odpovídá na otázky:
- Jak jsou produkty zobrazené? Jsou fotky dost velké na to, aby bylo vidět, co se prodává?
- Jaké barvy a písma se používají a drží se stejný styl napříč aplikací?
- Je navigace do kategorií přehledná a dá se ovládat palcem jednou rukou?
- Funguje vyhledávání a nepřekáží při scrollování nabídkou?
- Je na první pohled jasné, co je tlačítko a co jen text?
„UI vidíte na první pohled – je to souhrnný návrh prvků, animací, interakcí, zkrátka veškerý vizuální průvodce uživatele po webu, čím lepší, srozumitelnější a přehlednější UI, tím lepší bude UX," uvádí Marketingový slovník.
Z čeho se UI design skládá
UI design není „vybrat barvy". Je to sada rozhodnutí, která se pak opakují na stovkách stránek. V praxi obsahuje:
Layout a grid. Kolik sloupců, jaké odsazení, jak se stránka chová na mobilu, tabletu a desktopu. Grid je důvod, proč web působí uspořádaně — nebo neuspořádaně.
Typografii. Výběr fontů, velikostní škála, řádkování, délka řádku. Na e-shopu je klíčová čitelnost popisů a cen, ne originalita písma.
Barvy a kontrast. Barevná paleta, ale hlavně kontrastní poměry. Šedý text na bílém pozadí je oblíbený a zároveň jeden z nejčastějších důvodů, proč lidé přehlédnou důležitou informaci.
Komponenty a jejich stavy. Tlačítko není jeden obrázek. Má stav základní, hover, aktivní, neaktivní, chybový a načítací. Když chybí stav „načítá se", uživatel klikne na objednávku třikrát.
Ikonografii a mikrointerakce. Ikony musí být srozumitelné bez popisku, nebo mít popisek. Mikrointerakce — potvrzení vložení do košíku, animace načtení — dávají zpětnou vazbu, že systém zareagoval.
Design systém. Knihovna komponent a pravidel, díky které vypadá desátá nová stránka stejně jako první. Bez něj se e-shop během dvou let rozpadne na deset různých stylů tlačítek.
Kde se UI na e-shopech nejčastěji láme
Z auditů, které děláme, se opakují čtyři věci:
- Tlačítko do košíku pod ohybem na mobilu. Uživatel musí scrollovat, aby vůbec zjistil, že produkt jde koupit. Na mobilu, kde dnes chodí většina návštěvnosti, jde o přímou ztrátu.
- Cena dopravy odhalená až v posledním kroku. Formálně jde o UX problém, ale řeší se UI prostředky — informací zobrazenou dřív, na kartě produktu nebo v košíku.
- Formuláře, které nepoznají chybu včas. Validace až po odeslání znamená, že uživatel vyplní osm polí a pak se dozví, že první bylo špatně.
- Nekonzistentní komponenty. Tři různé styly tlačítek na jedné stránce a člověk přestane rozeznávat, co je hlavní akce.
Žádná z těch věcí není otázka vkusu. Všechny se dají změřit na konverzním poměru.
Co je UX (User Experience), uživatelská zkušenost
UX je celkový zážitek z používání produktu. Neptá se, jestli tlačítko vypadá dobře, ale jestli uživatel dokončil, co chtěl — a jestli se kvůli tomu nemusel nikde zastavit a přemýšlet.
Otázky, které UX řeší:
- Je nákup snadný na dokončení, nebo někde odpadne polovina lidí?
- Najde uživatel to, co hledá, během několika sekund?
- Neodradí ho něco při vyplňování údajů?
- Ví po odeslání objednávky, co bude dál?
UX pracuje s daty: s nahrávkami relací, heatmapami, uživatelským testováním a hlavně s čísly z analytiky. Proto se dá zlepšovat iterativně — změníte jeden krok v košíku a změříte dopad.
Detailně UX rozebíráme ve druhém dílu.
Jak UI a UX fungují dohromady
Nejjednodušší způsob, jak si vztah zapamatovat: UX je rozhodnutí, UI je jeho provedení.
UX řekne, že cena dopravy musí být vidět dřív, protože ji lidé hledají a při jejím pozdním odhalení opouštějí košík. UI rozhodne, kde přesně se zobrazí, jak velkým písmem a jestli dostane ikonu.
Proto nemá smysl ptát se, co je důležitější. V praxi se navrhují společně a špatné rozhodnutí v jedné vrstvě zruší dobrou práci v druhé.
Zdroj obrázku: Applify.com
Kdy se do UI a UX vyplatí investovat
Redesign je drahý a ne vždy je to správná první věc. Vyplatí se, když:
- Máte návštěvnost, ale konverzní poměr zaostává. Když na e-shop chodí lidé a nekupují, je úprava rozhraní levnější než přikupování další návštěvnosti.
- Mobilní konverze výrazně zaostává za desktopem. To je skoro vždy problém rozhraní, ne nabídky.
- Rozšiřujete sortiment. Navigace navržená pro 200 produktů nezvládne 2 000.
- Přecházíte na novou platformu. Migrace je jediný moment, kdy je redesign relativně levný, protože se stejně sahá do všeho.
Naopak: při pár stech návštěvách měsíčně nemá smysl ladit odstíny tlačítek. Nejdřív návštěvnost, pak optimalizace rozhraní.
Shrnutí
UI je rozhraní — vizuální a interaktivní vrstva, přes kterou uživatel produkt ovládá. UX je zkušenost — jestli se přes to rozhraní dostal k cíli. UI se dá posoudit pohledem, UX jen daty. A na e-shopu se obojí projeví na jednom čísle: na konverzním poměru.
