UX design: Klíč k úspěchu v roce 2024

User Experience (UX) se zaměřuje na interakci uživatele se značkou, produktem nebo službou a zahrnuje více disciplín, včetně interakčního designu a použitelnosti.

UX specialista musí najít rovnováhu mezi potřebami uživatelů a obchodními cíli, přičemž cílem je, aby byl web „user-friendly“ a vytvořil vztah mezi uživateli a značkou.

„Důmyslným UX dokážeme odstranit „klády pod nohama“ zákazníků, které by jinak mohly brzdit plynulý nákupní proces. Díky tomu navrhujeme kroky pro vytvoření bezproblémové a jednoduché zákaznické cesty, jejímž cílem je dokončení nákupu.”

UX jako konkurenční výhoda

Kvalitní UX design není pouze o estetice, ale také o tom, jak zákazníci vnímají a interagují s vaším produktem nebo službou. Tato důvěra, kterou zákazník získá při nakupování, je cenným aktivem, které pomáhá upevnit vaše postavení vůči konkurenci. Zlepšením UX nejenže zvyšujeme konverze, ale také získáváme věrné zákazníky.

„Významným aspektem UX designu je jeho schopnost budovat značku. Kvalitní uživatelský zážitek při nákupu není jen příjemným přídavkem, ale zároveň efektivním nástrojem pro upevnění konkurenční pozice.”

Design UX založený na datech snižuje míru okamžitých odchodů (bounce rate). Když se zákazníci na vašich stránkách snadno a intuitivně orientují, je méně pravděpodobné, že odejdou ke konkurenci. I když se jedná o jeden z mnoha rozhodovacích faktorů v nákupním procesu, kvalitní UX design pomáhá udržet zákazníky na e-shopu co nejdéle.

Úzká spolupráce s více odvětvími

UX design je multidisciplinární obor, který spolupracuje s různými disciplínami a obory s cílem vytvořit produkty a služby, které jsou efektivní a příjemné pro uživatele.

UX a UI

User Experience (UX) a User Interface (UI) jsou dva důležité aspekty při navrhování digitálních produktů nebo služeb. UX – jak jsme již zmínili – se zaměřuje spíše na uživatelský zážitek, zatímco UI se zabývá interakcí mezi uživatelem a digitálním produktem a zahrnuje vzhled, interaktivitu a intuitivnost prvků včetně ikon, tlačítek, typografie, barev, obrázků a responzivního designu.

UX a UI spolu úzce spolupracují pro vytvoření kvalitních digitálních produktů.

UX designéři zjišťují potřeby uživatelů s cílem vytvořit optimální uživatelský zážitek. Poté přicházejí na řadu UI designéři, kteří se starají o vizuální prvky, jako jsou barvy, typografie a grafické prvky. Práce UI designérů je klíčová při zprostředkování a podporování UX designu. 

UX a SEO 

V rámci SEO a UX dochází ke spolupráci na několika úrovních. Například Core Web Vitals je soubor metrik, které Google zohledňuje při hodnocení webových stránek.

Zahrnuje přitom rychlost načítání stránky, interaktivitu či vizuální stabilitu. Tyto prvky patří k nejvýznamnějším faktorům ovlivňujícím uživatelskou zkušenost, manipulaci s obrázky a dokonce i uspořádání prvků na stránce.

Jak to vypadá v konkrétním příkladu?

SEO se obecně zabývá pokrytím konkrétní stránky relevantními klíčovými slovy. Pokud vytváříme novou, SEO-friendly kategorizaci na e-shopu, vždy se snažíme o to, abychom v názvech kategorií používali hledaná klíčová slova a fráze.

Někdy se však stává, že by menu s ideální kategorizací vypadalo následovně:

Úroveň 1: Hračky pro děti

Úroveň 2: Hračky pro děti od 1 roku

Úroveň 2: Hračky pro děti od 2 let

Úroveň 2: Hračky pro děti od 3 let

Úroveň 2: Hračky pro děti od 4 let…

Tato forma kategorizace je však z uživatelského hlediska nevhodná. Ideální struktura by měla mít podobu:

Úroveň 1: Hračky pro děti

Úroveň 2: Od 1 roku

Úroveň 2: Od 2 let

Úroveň 2: Od 3 let

Úroveň 2: Od 4 let…

V takových případech dochází ke kompromisům mezi SEO aspekty a UX designem, jelikož návštěvník webu by měl být vždy na prvním místě. Koneckonců e-shop vytváříme pro něj, ne pro vyhledávače.

UX a IT

Úzká spolupráce mezi IT a UX je nezbytná pro dosažení kvalitních digitálních produktů, které splňují potřeby uživatelů a zároveň jsou technicky funkční.

Společně se podílejí na vývoji a optimalizaci samotného e-shopu. UX se zabývá návrhem uživatelského rozhraní, včetně designu, struktury webu a navigace.

IT implementuje tyto návrhy a zajišťuje, aby stránka byla bezpečná a spolehlivá. Spolupráce přináší technická řešení, díky nimž je nákup v e-shopu pohodlný, načítání a zobrazení dat bezproblémové a nedochází k matoucím momentům v důležitých situacích, jako jsou např. platební brány nebo odesílání objednávek.

UX analýza – Krok za krokem

Analýza e-shopu podle Janky

Naše UX konzultantka, Janka Polláková má několikaleté zkušenosti s UX analýzami nejrůznějších webových stránek. Věnuje se analýzám nejen prodejních e-shopů, ale také prezentačních stránek. 

Prozradila nám, jak postupuje při analýze e-shopu, kterou se můžete inspirovat i vy:

1. „U e-shopů začínám v rámci analytického procesu analýzou domovské stránky, která je jednou z nejnavštěvovanějších stránek v rámci e-shopu. Nemusí to být nutně primární landing page, na kterou kampaně odkazují (a ani by neměla být). Uživatelé se na ni však během své zákaznické cesty často vracejí, protože ji berou jako nejbezpečnější a nejjednoznačnější stránku, na kterou se vždy dostanou z jakékoliv podstránky e-shopu (nejčastěji přes odkaz na obrázku s logem). Je to něco jako starting point a zároveň safest point na e-shopu. Proto je třeba dbát i na kvalitu homepage. Důležité je jednoznačně vykomunikovat, čemu se e-shop nebo služba věnuje, jaké jsou její konkurenční výhody, jaké má kategorie, případně přidat i ukázku produktů a spoustu dalších detailů.
2. Následně pokračuji analýzou celkové navigace, hlavního menu a vyhledávacího panelu.
3. Dále obvykle přecházím ke kategoriím, kde zkoumám celou řadu aspektů včetně filtrů, zobrazení produktových karet, stránkování a možností třídění produktů.
4. Při procházení produktů se spoléhám na analýzu návštěvnosti, přičemž dbám na prohlížení více produktových stránek, s ohledem na různé varianty a podkategorie. Zvláštní pozornost věnuji údajům z Google Analytics, které mi pomohou identifikovat nejnavštěvovanější produkty.
5. Jako další podrobně zkoumám každý krok nákupního košíku, kde také provádím testovací objednávku.
6. V sekci blogu kontroluji zejména čitelnost, formu a přehlednost článků. Případně doporučuji, o co by se dalo články obohatit.
7. Pokud e-shop provozuje také vlastní sekci pro registrované uživatele, případně věrnostní systém, kriticky hodnotím, zda je program dostatečně efektivní a zda je jeho využívání přínosem pro uživatele a značku. Důležitou součástí registrace do věrnostních programů a například i přihlášení k odběru newsletteru jsou i e-mailové notifikace, kde kontroluji, zda spolehlivě dorazí. Zároveň prověřím dostupnost možností rychlé registrace prostřednictvím sociálních sítí.

"Současně s analýzou webu kontroluji i související data v trackovacích nástrojích, která mi často pomáhají rozpoznat možný problém (tzv. pain point). V jednotlivých sekcích webu si samozřejmě všímám i přístupnosti pro různé skupiny uživatelů, použití prvků, míru kontrastu, kampaňové pop-upy a další prvky, se kterými se potenciální zákazník na webu setká a mohou jej ovlivnit při jeho nákupní cestě.

Pravidelně sleduji domácí a zahraniční studie a výzkumy od relevantních institucí. Následně je přikládám k výstupu analýzy.”

Janka na závěr dodává, že každá UX analýza je specifická sama o sobě. UX specialista by si měl najít svůj vlastní postup, jak web analyzovat. Důležité je v konečném důsledku co nejkomplexněji porozumět potřebám a očekáváním uživatelů.

Jak měřit a vyhodnocovat UX?

Clarity

Clarity od společnosti Microsoft pomáhá sledovat uživatelskou zkušenost na webech a v aplikacích pomocí kliknutí, heatmap a analýzy relací. Clarity je bezplatný nástroj, který zachycuje, jak lidé používají vaši stránku.

Stránka deklaruje, že: „nastavení je jednoduché a data začnete získávat během několika minut“. Clarity se také snadno integruje s dalšími nástroji pro rozšířenou analýzu.

Hotjar

Hotjar má podobné využití jako Clarity, ale vyniká rozsáhlejšími funkcemi. I tento nástroj najdete v bezplatné verzi, ale pro jeho plné využití si musíte připlatit.

Hotjar nabízí možnost přístupu k záznamům přímo od uživatelů, díky čemuž můžete sledovat, jak komunikují s webovými stránkami a aplikacemi. Hotjar se snadno používá a rychle implementuje, což z něj činí oblíbený nástroj pro optimalizaci digitálních produktů.

„Buďte však opatrní s nástroji třetích stran, které na webech používáte. Hotjar nebo Clarity patří mezi nástroje, které dlouhodobě snižují rychlost načítání webu. Klientům vždy doporučuji zapínat měření pouze v období, kdy z něj potřebujeme výsledky. Pokud web nemonitorujeme, nástroj můžeme vypnout.“

Optimizely

Optimizely je univerzální nástroj, který hraje významnou roli v oblasti designu a optimalizace UX. Je známý zejména pro své možnosti A/B testování a experimentování.

Kromě toho podporuje multivariační testy a personalizaci. S podporou Optimizely můžete zdokonalit svůj digitální produkt a zajistit výjimečný uživatelský zážitek.

„Samotný UX design vyžaduje trpělivost. Jeho úspěch je totiž měřitelný v dlouhodobém horizontu.”

Stupnice použitelnosti systému (SUS)

Soubor komplexních otázek slouží k měření uživatelské spokojenosti a použitelnosti produktu nebo systému. 

SUS je založena na průzkumu, v němž uživatelé hodnotí různé aspekty systému a udělují hodnocení. Sestává z 10 položkového dotazníku s pěti možnostmi odpovědí pro respondenty; od Rozhodně souhlasím po Rozhodně nesouhlasím. Tento nástroj poskytuje důležité informace pro navrhování a zlepšování uživatelského prostředí.

Google Analytics

Google Analytics se používá ke sledování metrik spojených s chováním uživatelů na webových stránkách. Pomocí něj můžete sledovat mimo jiné i míru okamžitého opuštění (bounce rate), exit rate či průměrnou dobu strávenou na stránce a různé další interakce. 

Nejčastější UX chyby

Při analýze uživatelské zkušenosti se často vyskytují běžné chyby, které mohou mít významný dopad na to, jak uživatelé vnímají stránky e-shopu. Janka nám prozradila, s jakými chybami se na e-shopech setkává nejčastěji.

Sdělte zákazníkovi jasně svou konkurenční výhodu

Při prvním setkání zákazníka s webem je úvodní stránka kritickým prvkem. Informační weby to mají o něco těžší než e-shopy. V rámci prodeje produktů je zákazníkovi jasné, co na stránce najde, když při prvním prohlížení narazí na konkrétní produkty, které si na stránce můžete koupit.

Návštěvník z ní musí zjistit, jakou službu či produkt nabízíte; případně definovat identitu vaší značky.

„Na první pohled musí být jasné, zda jsou vaše webové stránky čistě informační, nabízejí služby, nebo zda se jedná o e-shop. Neočekávejte, že vám zákazník zanechá konverzi nebo lead, pokud neví, kde se nachází.“

Nebojte se komunikovat své konkurenční výhody napříč celým webem. Výhodou je také zobrazení recenzí zákazníků nebo nejprodávanějších produktů na úvodní stránce. V konečném důsledku to posílí dojem, který zanecháte v návštěvnících.

OpiTip: Podle nedávného průzkumu až 67 % značek nereaguje na negativní recenze. Recenze slouží jako přesvědčovací faktor a zákazníci si jich všímají – zejména těch negativních. Reagujte na recenze zákazníků. Nereagování na negativní recenze zanechává dvojnásobně špatný dojem.

Přehledné menu

Ideální menu pro e-shop by mělo být jednoduché a přehledné, s jasnými kategoriemi a popisy. Hierarchické uspořádání usnadňuje orientaci v podkategoriích a filtrování produktů.

„V případě e-shopu s rozsáhlou nabídkou produktů a potřebou „mega menu“ je vhodné zvážit vizuální prvky, které návštěvníkům umožní rychleji a efektivněji najít požadované informace. Mezi takové prvky mohou patřit ikony nebo například barevné zvýraznění oblíbených kategorií. Vizuální prvky umožňují rychlou orientaci a přispívají k efektivnímu procesu nakupování. Příkladem je kategorizace našeho partnera Factcool.“

Správná vizualizace produktů

Správně vizualizované produkty nebo služby na webu jsou klíčem k tomu, abychom zákazníky neuvedli v omyl. Kvalitní fotografie, případně ukázka dané služby, zvyšují důvěryhodnost a pomáhají zákazníkům lépe identifikovat, co nabízíte.

„Na hlavním obrázku produktu by měl být v centru pozornosti konkrétní produkt, aby potenciálního zákazníka nemátly žádné další rušivé prvky. Například u látek zobrazte spíše kus látky než kus oblečení ušitý z této látky. U e-shopu s módou ukazujte především detail produktu, nikoliv kompletní oblečení, které se skládá z několika kusů oblečení.“

Zvolte správnou barevnou kombinaci

Barvy a celkově to, jak sestavit vizuální a funkční web, má na starosti UI. Protože tato problematika úzce souvisí s UX a jedná se o jev, který e-shopy většinou řádně neošetřují, Janka ho nepodceňuje.

„Přesně definujte barevnou paletu a dbejte na adekvátní kontrasty, zejména v případě důležitých tlačítek. Barevná schémata by měla být dostatečně výrazná a jasně rozlišitelná, aby se zvýšila použitelnost a jasně se odlišily důležité akční prvky.“

*citácia*

Správné používání barev je důležité pro efektivní sdělování informací na webu a zajištění optimálního uživatelského zážitku.

Na světě žije přibližně 2 miliardy lidí se zrakovým postižením. Nevhodně zvolená kombinace barev pro text, případně pozadí textu může zkomplikovat čitelnost textu. Řiďte se především potřebami cílové skupiny. Při návrhu barev se můžete inspirovat psychologií barev.

Zaměřte se na doporučené velikosti prvků na webu

Správné použití prvků na webu je dalším klíčovým aspektem UX designu. Web, který se pohodlně používá, zvyšuje spokojenost uživatelů, snižuje míru opuštění (bounce rate) a zvyšuje konverze. Dobrá použitelnost webu se však nemusí týkat jen příjemné domovské stránky nebo designu produktu. Mějte na paměti i detaily:

„Nezapomínejte, že i detaily jsou rozhodující. Často se setkávám při analýze webu s takzvaným Fat Finger Syndrome. Jedná se o situaci, kdy uživatelé kvůli relativně malým velikostem on-screen prvků (tlačítka, odkazy) omylem kliknou na nesprávnou oblast nebo tlačítko na obrazovce. To může vést k nezamýšleným akcím, jako je výběr nesprávné možnosti či přesměrování uživatele na nechtěné místo. Například Apple doporučuje minimální velikost on-screen prvků 44 x 44 px. Android na druhé straně doporučuje velikost 48 x 48 dp (device-independent pixelů). Ujistěte se, že máte všechny interaktivní plochy na webu dostatečně velké.”

Jaké jsou aktuální trendy v UX?

AI ve spolupráci s UX

Umělá inteligence je dnes běžnou součástí našeho života a také práce UX designérů.

Zjednodušeně řečeno, AI je pomocníkem UX designéra při úpravách textu, například při pojmenovávání tlačítek nebo konstrukci nadpisů.

AR na výsluní

Už i e-shopy začaly využívat výhod rozšířené reality k prodeji svých produktů. Jen pomocí webové kamery si zákazník může z pohodlí domova vyzkoušet brýle nebo barvu rtěnky.

V komplexnějším pojetí je AR využitelné i ve vizualizacích v reálném čase. Například společnost Ikea nabízí jednoduché prohlížení katalogu produktů (IKEA Kreativ) a následně je kombinuje v reálných prostorech. Produkty lze podle potřeby přesouvat, otáčet a upravovat.

Uživatelé chtějí personalizované produkty

Každý máme jiné potřeby a v některých případech vyžadujeme výrobky na míru. Nabídněte zákazníkům konkrétní způsoby, jak můžete jejich potřeby splnit.

Ideálním příkladem je Netflix. Díky automatizaci je každý účet jedinečný. Algoritmus totiž navrhuje filmy a seriály na základě vaší historie sledování.

„Personalizace vyžaduje spoustu dat, na jejichž základě se algortimus rozhoduje. Tato data mohou obsahovat informace o navštívených produktech, délce sledování produktu nebo navštívených kategoriích. V rámci dat je možnost je získat i přímo od zákazníka – často již v zákaznickém profilu (po registraci) je možné požádat o další dobrovolné údaje. 

V rámci příkladů personalizace, u e-shopů s módou můžete použít velikost oblečení nebo obuvi. Online lékárny zase pracují například s daty o potravinách, kde zobrazují možné alergeny. Pro e-shop s domácími mazlíčky lze pracovat s daty o konkrétním druhu zvířete. Při získání zmíněných dat u jednotlivých e-shopů můžete pomocí různých pluginů zobrazovat personalizovanou nabídku produktů.“

Upřednostněte mobilní přístupnost

Data říkají, že až 95,8 % uživatelů používá k prohlížení internetu primárně mobilní zařízení. Otázka zaměření na mobilní zařízení je stále nejen aktuální, ale také nezbytná.

Nezapomínejte proto ani na přístupnost – Web Accessibility; na zákazníky, kteří jsou smyslově znevýhodněni a využívají k nakupování svá mobilní zařízení. Jedná se o skupinu lidí, na kterou se zejména při řešení přístupnosti zapomíná.

OpiTip: Navzdory trendu používání mobilních zařízení nezapomínejte na celkovou funkčnost napříč různými zařízeními. Přizpůsobte webové rozhraní tak, aby byl cross-device zážitek co nejlepší.

UX auditem předejte mnoha problémům

UX design se neustále vyvíjí a hraje klíčovou roli v úspěšném e-shopu. Uživatelsky přívětivý design nejen zvyšuje spokojenost zákazníka na webu, ale také budujete jejich loajalitu a úspěch produktu či značky.

Pokud máte více konkrétních otázek a výzev s vaším e-shopem, neváhejte kontaktovat naši konzultantku – Janku Pollákovou.