Značná část nákupů se přesunula na internet. Pro obchody a podnikatele to znamená, že musí změnit i své prodejní taktiky – místo ve výkladní skříni začít prodávat prostřednictvím webu. A aby byl web plně funkční, neobejde se bez UX a UI designu. Jaký je mezi nimi rozdíl a jak na ně?
UI, UX… Jaký je mezi nimi rozdíl?
UI a UX jsou nepostradatelnou součástí webu, přičemž ani jeden se neobejde bez druhého. UX je zkratka slov user experience, v překladu uživatelský zážitek. UI znamená user interface – uživatelské rozhraní. Jaký je mezi nimi ale rozdíl v praxi?
Co je UX design
UX design se, velmi zjednodušeně řečeno, zabývá tím, jak web funguje. Řeší například:
- strukturu hlavní nabídky
- rozvržení prvků na stránce
- responzivní design webu
- rychlost načítání
Cílem UX designu je vytvořit takový web, který bude pro uživatele jednoduchý a intuitivní a poskytne jim příjemný uživatelský zážitek.
V praxi řeší UX designér například to, jestli uživatel ví, na co má kliknout, když chce nakoupit, jestli se návštěvníci dokážou na stránce zorientovat a najít vše, co potřebují, nebo jestli bude hlavní prodejní tlačítko lépe fungovat nahoře uprostřed nebo vpravo dole.
Nezbytnou součástí celkového uživatelského zážitku je UX writing. Jeho cílem je psát jasné a srozumitelné texty, které povedou uživatele správným směrem a usnadní mu orientaci na webu. Díky tomu ví, co má dělat, a nic ho nepřekvapí, protože dokáže předvídat, co se stane.
Co je UI design
Pokud UX design řeší, jak web funguje, pak UI design řeší, jak web vypadá (zabývá se tedy designem webu). Poté, co UX designér navrhne strukturu webu a rozmístění jednotlivých sekcí, dá jim UI designér konkrétní grafickou podobu. Stará se například o to, aby:
-
byl dostatečný barevný kontrast mezi textem a pozadím,
-
tlačítka měla správný tvar, barvu i velikost,
-
tlačítka přitahovala pozornost, vybízela k akci a měla vizuální zpětnou vazbu (např. po najetí myši),
-
fotky byly příjemné na pohled,
-
web používal firemní barvy ve správných odstínech,
-
velikost a styl písma byl konzistentní napříč webem a mezi řádky byly dostatečné mezery,
-
ikony a grafické prvky pomáhaly uživatelům s orientací na webu a byly v souladu s celkovým stylem,
-
web byl responzivní na mobilu, tabletu a větším monitoru – navrhne, jak se prvky na jednotlivých zařízeních mají poskládat.
Chcete konkrétní příklad z praxe? Vybavte si tlačítko přidat do košíku. Pokud je UI design špatný, po kliknutí na tlačítko se na první pohled nic nestane a vy nevíte, zda přidání do košíku skutečně proběhlo. Proto na něj začnete klikat znovu a znovu, až máte zboží nakonec v košíku desetkrát. S dobrým UI designem dá tlačítko po kliknutí najevo, že akce skutečně proběhla, například bliknutím.
Jak na UX design
Úplně prvním krokem při tvorbě UX designu by mělo být zamyšlení, pro koho web vytváříte. S tím vám mohou pomoci zákaznické persony. Každá cílová skupina se totiž bude na webových stránkách chovat trochu jinak.
Jakmile budete mít jasno o cílové skupině, musíte web navrhnout tak, aby pro ni byl přehledný a intuitivní a zároveň vedl k vašemu cíli (kterým je nejčastěji prodej, může jím ale být i edukace nebo třeba stažení e-knihy).
Tip: Přečtěte si článek UX design a wireframe: Jak mít uživatelsky přívětivý web, kde jsme se o UX rozepsali více. Zjistíte například, jak UX děláme v myTimi.
UX designér by měl předvídat, na co uživatel pravděpodobně klikne a kam se tím chce dostat. Zlaté pravidlo praví, že z hlavní stránky by k uskutečnění cíle (například nákupu) měla vést maximálně tří kliknutí.
Dalším významným úkolem je zajistit, aby se web dostatečně rychle načítal. Desetivteřinové načítání blogového článku k uživatelské spokojenosti pravděpodobně nepovede. A vy chcete, aby se lidé na váš web vraceli.
Jak na stoprocentně funkční web: UI design
UI design, který je především o vizuálu, se na první pohled může zdát zbytečný. Chcete ale znát tajemství? Je to právě vizuál, který často rozhoduje o tom, zda se z návštěvníků stanou platící zákazníci. Až 75 % uživatelů totiž hodnotí důvěryhodnost webu na základě jeho designu.
Právě vzhled hraje významnou roli v tom, jak na zákazníka váš web působí. Chytrou volbou barev můžete vyvolat přesně takové pocity, jaké potřebujete. Stejnou důležitost je třeba přikládat i výběru tvarů a fontů.
Design webu by měl být také v souladu s brandem vaší společnosti. Před tvorbou webdesignu je dobré, když znáte:
- své cíle,
- cílovou skupinu,
- barevnou paletu,
- preferovaný styl
- a požadavky na funkčnost.
Takovou přípravu pak můžete dodat i grafikovi, se kterým na webdesignu budete pracovat.
Tip: Zajímá vás, jak barvy, tvary a fonty působí na zákazníky? Přečtěte si článek o tvorbě loga.
I tak ale moderní design webu mnohdy sám o sobě nestačí. I když bude váš web vypadat moderně, nezaručí vám to, že si na něm udržíte zákazníky. Zaměřte se proto také na už zmíněné UX.
Jak si ověříte, že UX a UI design fungují?
Jako vše ostatní ve světě obchodu a marketingu, i funkčnost UX a UI je třeba měřit. Jak se lidé na všem webu chovají, odhalíte pomocí UX testování. Tyto poznatky vám pomůžou vytvořit uživatelsky přívětivé prostředí, které povede k dosažení požadovaných konverzí.
Existuje několik způsobů, jak na to:
1. Uživatelské testování
Nejběžnější formou testů je moderované uživatelské testování webu, při kterém uživatel plní úkoly podle pokynů moderátora. Jde o například o pokyny „Najděte na webu kontakt“ nebo „Objednejte si produkt“. Uživatel při tom popisuje své kroky a upozorňuje na případné problémy s navigací či designem. Moderátor zároveň sleduje jeho chování a na závěr se zeptá na celkový dojem.
Tento typ testování vám poskytne autentické informace o tom, jak se zákazníci na vašich webových stránkách nebo v aplikacích chovají.
2. A/B testy
A/B test neboli split test možná už znáte z e-mail marketingu. Jedná se o to, že vytvoříte více variant téže webové stránky a testujete, která funguje lépe.
Testovat můžete:
- umístění konverzního tlačítka
- styl nadpisů
- velikost fotografií
- barvu pozadí
- v podstatě cokoliv, co vás napadne
Hlavní pravidlo však zní: Při jednom split testu vždy měňte jen jeden parametr. Pokud se stránka bude lišit umístěním tlačítek i barvou textu, nikdy neodhalíte, která konkrétní změna vedla k zvýšení prodejů.
3. Analytické nástroje
To, jak se zákazníci na vašem webu chovají, vám pomůžou odhalit i analytické nástroje jako třeba Google Analytics. Napoví vám údaje o tom, kolik času zákazníci na vašich stránkách stráví, jak vysoká je okamžitá míra opuštění nebo odkud zákazníci na danou stránku nejčastěji přichází. Zkušený UX designér dokáže z takových údajů vyvodit, co je na webu potřeba změnit, aby lépe fungoval.
Jaký další analytický nástroj vám pomůže zjistit, zda máte dobrý UX design? Software Microsoft Clarity vám umožňuje podívat se na vizuální záznamy interakcí uživatelů s vaší webovou stránkou nebo aplikací. Jedná se o tzv. heat mapy, pomocí nichž zjistíte, kam uživatelé klikají, jak pohybují myší i kam se na stránce posouvají.
Další metody testování webu jsme více popisovali v článku Uživatelské testování: Odhalte, co na zákazníky funguje.
Speciální nástroje nevyužijete jenom u UX, i UI software se vám bude hodit. Pro tvorbu digitálního designu můžete využít například Sketch, Adobe XD, Figma UXPin, Uizard a další).
Tip: Co dalšího vám analytické nástroje o vašem webu prozradí? Přečtěte si, jak na analýzu webu ve 13 krocích.
Chcete maximálně funkční web?
Prostřednictvím uživatelského testování prozkoumáme vaši cílovou skupinu a pomůžeme vám zvýšit přívětivost a výkon webu i konverzní poměr. Navrhneme pro vás web, který je maximálně funkční z hlediska UX i UI designu, napíšeme konkrétní a jasné texty, kterým porozumí každý, a vytvoříme design webu v souladu s vaším brandem. Přivedeme k vám zákazníky a provedeme je po vašich stránkách až k vámi vytyčenému cíli.
