Česky
Abychom mohli říci, jak využít UX k dosažení lepších výsledků nebo jak vytvořit optimální rozvržení webu elektronického obchodu, je důležité vysvětlit, co UX je.
UX je zkratka pro User Experience, tedy celkovou uživatelskou zkušenost s jakoukoliv aplikací, a velmi často se s tímto termínem setkáváme v kombinaci se slovem design jako UX design nebo User Experience Design. Právě kvůli spojení zkratky UX a slova „design“ si lidé často myslí, že UX design je totéž co webdesign (UI) nebo design různých stránek, případně že jde o grafiku a vizuální design.
Cílem designu UX je však něco zcela jiného, a to vytvořit vztah mezi uživatelem a značkou. To znamená, že uživatel je v centru pozornosti. Je to proces, který nás provází návrhem produktu nebo služby od jeho vzniku až po uvedení na trh nebo do výroby.
Na jednoduchém příkladu lahví kečupu si vysvětlíme rozdíl mezi UX a UI designem a důvod, proč se kromě vizuálu stránky musíme starat také o její rozvržení.
Na obrázku vlevo vidíme lahve kečupu, které podléhají určitému designu. Můžeme říct, že na první pohled je design obou lahví dobrý a plní svůj účel. Na obrázku vpravo je vidět, že i přes dobrý design obou lahví je zkušenost s jejich používáním odlišná, což bude mít další vliv na rozhodování zákazníka o koupi. Proto musíme klást stejný důraz na UX jako na celkový vizuál.
Jednou z chyb, kterých se při tvorbě webových stránek, e-shopů nebo aplikací dopouštíme, je, že neznáme svého zákazníka a často se soustředíme především na kvantitativní údaje, jako je analytika a technická část řešení a specifikace funkcí, které chceme, aby e-shop obsahoval, protože tím vyřešíme naše konkrétní problémy.
Když zákazníkovi nevěnujeme dostatek prostoru, nevíme, jaké jsou jeho hlavní obavy a potřeby a jak je uspokojit, což se často odráží na ziskovosti a efektivitě e-shopu a probíhajících kampaní.
Proč je tak důležité svého zákazníka poznat, vysvětlíme na následujícím příkladu. Představte si dva lidi, kteří pocházejí ze stejné země, jsou stejně staří, mají rodinu, oba jezdí na dovolenou na stejná místa, ale rozdíl mezi nimi je např. v jejich profesi, životním stylu nebo náboženství, které ovlivňují jejich nákupní chování.
Hierarchie a rozložení obsahu v e-shopu
Představili jsme si, co UX je, s čím souvisí a proč je třeba se o něj starat. Nyní si tento termín probereme podrobněji na příkladu konkrétního webu elektronického obchodu.
Domovská stránka
Jednou z nejdůležitějších stránek e-shopu je bezpochyby domovská stránka. Je to první věc, kterou zákazník při návštěvě e-shopu uvidí. Tato stránka také hraje důležitou roli v rozhodovacím procesu návštěvníků, který lze rozdělit na 3 základní typy:
- zákazník, který přišel do e-shopu a přesně ví, co chce,
- zákazník, která má představu o tom, co chce, ale neví, co konkrétně chce,
- zákazník, který hledá inspiraci, a nemá tedy konkrétní představu o tom, co by si koupil.
Každý typ zákazníka přistupuje k nakupování jiným způsobem, a proto by rozvržení domovské stránky mělo odpovídat jeho nákupnímu chování. Je tedy klíčové vytvořit atraktivní obsah na domovské stránce, zejména pokud své zákazníky dobře znáte.
Existují obecná pravidla, jak vytvořit vhodný obsah pro zákazníky e-shopu, např. umístění bannerů pro akce a sezónní produkty. Těm byste ale neměli přidělovat zbytečně velký prostor, protože ne vždy přinesou tolik prokliků, kolik očekáváte. Výjimkou jsou sezónní slevy nebo opravdu atraktivní slevy či nabídky. Pod banner je vhodné umístit základní informace o nákupu, které uživatele zajímají, tj. možnosti platby, doba dodání produktu, doprava, reklamace apod.
Zobrazení nejoblíbenějších kategorií v kombinaci s produkty, např. oblíbené produkty v kategorii, nejoblíbenější produkty, nejlepší produkty v nabídce nebo nejoblíbenější značky, funguje pro uživatele také velmi dobře.
Doporučování produktů a upozorňování na slevy se osvědčuje zejména u zákazníků, kteří nejsou rozhodnuti, co si chtějí koupit, nebo hledají inspiraci. U nových zákazníků si často musíte získat jejich důvěru. K tomu vám mohou pomoci například recenze od zákazníků, kteří u vás již nakoupili, nebo ověření z různých recenzních portálů.
Spodní část domovské stránky slouží ke komunikaci obsahu, kterým se e-shopy snaží podpořit prodej. Ve většině případů se jedná o příspěvky na blogu nebo doporučené příspěvky ze sociálních sítí. Pokud uživatele zaujmete obsahovou částí, je možné, že bude mít větší motivaci přihlásit se k odběru newsletteru nebo sledovat vaše sociální sítě, proto je vhodné tento typ obsahu umístit právě sem.
Hlavička e-shopu
Domovská stránka musí stejně jako každá jiná stránka začínat hlavičkou, která obvykle obsahuje logo, které slouží jako odkaz na domovskou stránku, přehlednou navigaci, například v podobě mega-menu, viditelné a rozšířené vyhledávací pole a klasické náležitosti e-shopu, jako je nákupní košík s přehledem cen, možnost přihlášení/vytvoření účtu, odkaz na seznam přání apod.
Hlavička je klíčová zejména pro typ zákazníka, který ví, co chce, a ve většině případů použije vyhledávání, což znamená vysokou pravděpodobnost nákupu. Navigaci využívají hlavně zákazníci, kteří přesně nevědí, co chtějí, a potřebují víc času na rozmyšlenou.
Patička e-shopu
Každá stránka bývá zakončena patičkou, která je často neprávem podceňována. V patičce uživatelé často hledají informace o způsobech dopravy, možnostech platby, kontaktní informace, stížnosti, odkazy na sociální sítě apod. Pokud uživatel sroluje až na konec stránky, je pravděpodobné, že něco hledal nebo ho zaujal obsah e-shopu, proto je vhodné umístit do patičky kromě legislativních položek také odkazy na hlavní kategorie e-shopu, aby zákazník mohl pohodlně pokračovat v prohlížení stránek.
Navigace
Navigace a struktura e-shopů má obrovský vliv na konverze, prodeje a míru okamžitého opuštění. Má to smysl, protože pokud uživatelé nemohou zjistit, kde a jak najít to, co chtějí, nebo kde se nacházejí, jednoduše odejdou a už se nevrátí. Bez přehledné a funkční navigace totiž nezjistí, jak se orientovat v katalogu produktů, jak najít blog nebo kde se nachází vaše kancelář či obchod.
Pokud si má uživatel představit hlavní navigaci na webové stránce nebo v internetovém obchodě, obvykle si představí horizontální menu umístěné v hlavičce. Často používaným prostorem pro doplnění horní hlavní navigace je postranní panel. Když uživatel přejde do kategorie nejvyšší úrovně, zobrazí se mu v postranním panelu podkategorie. Navigační prvky v postranním panelu jsou skvělým řešením pro internetové obchody nebo webové stránky, které obsahují velké množství strukturovaných informací. Kromě podkategorií nabízí také skvělé místo pro filtrování produktů.
Standardním a efektivním řešením je již zmíněné mega menu, tj. velký navigační panel, který se zobrazí po najetí myší na položku v hlavní nabídce. Je to skvělá možnost pro umístění velkého počtu položek ve struktuře kategorie produktů nebo pro zobrazení většího počtu podstránek nižší úrovně. Takové přehledné uspořádání také nabízí více prostoru například pro zobrazení produktů nebo reklamy a zároveň více prostoru pro položky, čímž se zlepšuje uživatelský komfort.
Vyhledávání a výsledky
Vedle navigačního menu je jedním z nejdůležitějších navigačních prvků vyhledávání, protože uživatelé pravděpodobně dají přednost vyhledávání před navigačním menu, pokud vědí, že hledaný produkt nebo kategorie se v internetovém obchodě nachází.
Na základě naší studie víme, že přibližně 30 % uživatelů opustí webové stránky nebo internetový obchod, pokud nenajdou to, co hledají. To, zda uživatel upřednostní vyhledávání před navigačním menu, závisí na řadě faktorů. Hlavní roli však hraje typ uživatele, který na stránky přichází, a také segment, na který je e-shop zaměřen.
Samostatnou roli v nákupním chování uživatelů hrají také výsledky vyhledávání. Tato stránka je velmi podobná klasickému výpisu produktů v e-shopu. Typickým problémem vyhledávání však je, že není dostatečně inteligentní, aby uživateli poskytlo výsledky, které odrážejí jeho zájmy a nákupní chování. Proto se uživatelé často dostanou na stránky bez výsledku, což ve třetině případů znamená jejich okamžitý odchod z e-shopu.
Druhým častým problémem je nemožnost filtrovat produkty nalezené na stránce s výsledky nebo omezený počet dostupných filtrů. To znamená, že vyhledávání nemůže pracovat s fasetovými filtry a uživatel musí prohledávat výsledky, místo aby mohl filtrovat produkty podle svých preferencí.
Product Listing
Výpisy produktů (Product Listing) jsou nezbytnou součástí e-shopu, která uživatele nasměruje k přechodu na detail produktu. Základní rozvržení výpisů produktů, přesněji řečeno zobrazených kategorií v e-shopu, se skládá z:
Rozšířená hlavička
Rozšířená hlavička s názvem kategorie spolu s popisem produktu, který uživatel prohlíží. Uživatelům můžete pomoci také přidáním tipů pro výběr správného produktu.
Breadcrumbs
Breadcrumb neboli drobečková navigace se používá v kombinaci s vyhledáváním. Pro uživatele je pak jednodušší přesunout se do kategorie, která je zajímá, ale například přesně neví, jak se jmenuje. Pak se pomocí drobečků proklikají detailem vyhledávaného produktu až do požadované kategorie.
Možnosti řazení
Pod názvem a popisem kategorie se často zobrazují podkategorie nebo filtry produktů s možností třídění. Ve výchozím nastavení však bývají zobrazeny v postranním panelu.
Postranní panel
Postranní panel se často používá k zobrazení podkategorií, filtrů produktů v kategorii nebo zmíněných fasetových filtrů ve výsledcích. Předpokládejme, že filtr postranního panelu není dostatečně optimalizován nebo že struktura kategorie není dostatečně zpracována. V takovém případě je obsah postranního panelu výrazně delší než obsah stránky, což negativně ovlivňuje chování uživatele na vašem webu.
Obsah
Hlavní roli hraje obsah stránky, který se skládá z produktů, kde by se u každého mělo zobrazit minimálně:
- náhled obrázku,
- název produktu,
- cena nebo zobrazená původní cena,
- dostupnost produktu nebo očekávané dodání a počet produktů skladem,
- Tlačítko „přidat do košíku“ závisí především na segmentu. Pokud se jedná o oblečení, u kterého záleží na velikosti, nemá to takový význam, ale pokud se jedná například o knihy, pak by použití tlačítka smysl mělo.
- Marketingové prvky – popis novinek, sleva, výprodej, výhodné balení, poslední kusy – jsou různé formy, jak zatraktivnit výrobky pro uživatele.
- Ve výpisu můžete u produktů zobrazit cokoliv, stačí se zamyslet nad důležitým faktorem nebo faktory, podle kterých se uživatel rozhoduje, jako je počet barev nebo jiných variant apod.
Častou otázkou je, jak by mělo vypadat ideální stránkování v e-shopu a zda použít tlačítko „zobrazit více“ nebo šipky. Obě možnosti fungují dobře, ale ideální je jejich kombinace, kdy si uživatel vybere řešení, které mu nejvíce vyhovuje.
Při výpisu produktů se vyhněte nekonečnému rolování, které najde uplatnění ve zcela jiných případech prohlížení obsahu, např. na sociálních sítích, v galeriích apod. ale ne při nakupování.
Detail produktu
Detail produktu je jednou ze stránek, které přinášejí největší konverze. Tady zákazník udělá zásadní rozhodnutí o nákupu. Popis můžeme rozdělit na dvě zásadní části – nákupní a informační.
Nákupní část
Nákupní část představují základní parametry a informace, které přímo ovlivňují rozhodnutí zákazníka nakoupit. Tato část detailu produktu se ideálně skládá z:
Produktové fotografie / galerie
Vždy ukazujte co nejvíc obrázků, video nebo videorecenzi a vše v té největší kvalitě. I z obrázků a videí totiž uživatel získá mnoho informací, které nejsou v popisu. Tato sekce často zobrazuje etikety nebo informace o slevách, novinkách, nejrůznějších oceněních a certifikátech.
Značka produktu
Značku produktu, kde si po kliknutí na její detail můžete prohlédnout všechny produkty a kategorie pouze vybraných značek.
Název produktu
Ideální je, pokud název produktu obsahuje i značku nebo označení varianty – např. červená, metalická, XL apod.
Kód produktu
Je velmi důležitý, zejména v B2B e-commerce segmentu, ale také pomáhá zákazníků, kteří kupují opakovaně stále stejné produktu v B2C e-shopech.
Kategorie
Kategorie, ve které se produkt nachází, hraje zásadní roli v navigaci, zejména pokud se zákazník k produktu dostal z reklamy nebo ho objevil při hledání na internetu.
Parametry produktu
Parametry produktu – velikost, varianty, barvy apod. – hrají zásadní roli při rozhodování o nákupu. Ideálně se nacházejí blízko informace o dostupnosti a ceně a tlačítka „přidat do košíku“. Pokud uživatel změní některý z parametrů, měl by vidět změny v ceně, dostupnosti nebo jiné údaje, které ho zajímají.
Dostupnost
Dostupnost zobrazeného produktu v e-shopu a kamenných prodejnách.
Dodání
Rychlost dodání nebo očekávané datum dodání – čím přesnější odhad můžete nabídnout, tím spokojenější budou vaši zákazníci po nákupu.
Tlačítko „přidat do košíku“
Nejdůležitější tlačítko na stránce by mělo být vždy jasně definované a nezaměnitelné. Ať už se na stránce nachází kdekoli, musí být vždy jasné, že se jedná o tlačítko pro přidání do košíku. Design tlačítka závisí na segmentu podnikání, způsobu komunikace a designu samotného e-shopu. Pokud například prodáváte online luxusní elektrické motocykly, můžete klidně použít černé tlačítko s textem koupit. Pokud však prodáváte a rozvážíte potraviny, bude pravděpodobně vhodnější zelené tlačítko s textem v košíku. Tlačítko obvykle zobrazuje pole s množstvím, které uživatel může nebo chce přidat do košíku.
Cena produktu
Nejvíce rozhodující část nákupu. V e-shopech často pracujeme s akcemi a slevami, proto je důležité je umět komunikovat. Pokud produkt zlevňujete, zobrazte štítek se slevou a původní cenou. Není ale nejlepším řešením zlevňovat všechny produkty současně, protože to může narušit exkluzivitu produktu.
Další funkce
Doplňkové funkce, jako je seznam přání, sdílení nebo tabulka velikostí, jsou běžné prvky, na které je uživatel zvyklý nebo je v detailu produktu očekává. Krátký popis produktu, propojený s informační částí stránky, se obvykle umisťuje za název produktu.
Benefity e-shopu
Dárek k nákupu a informace o ceně dopravy, které se většinou přepočítají podle počtu produktů v košíku, věrnostní program nebo jednoduché vrácení zboží.
Informační část
Informační část produktu se skládá především z hlavního popisu produktu a jeho vlastností. Dále by měla obsahovat galerii, videorecenze nebo prezentace, tabulku všech parametrů výrobku, popis výrobce a různé doplňkové materiály ke stažení.
V této části je často prostor pro recenze nebo dotazy návštěvníků, jako je např. diskuse formou otázek a odpovědí. Samotné recenze jsou pro uživatele cenným zdrojem informací a zároveň zvyšují důvěryhodnost e-shopu. Čím lépe je detail produktu zpracován a čím lépe jsou produkty popsány, tím je pravděpodobnější, že uživatelé v e-shopu nakoupí.
Detail produktu je skvělým místem, kde můžeme uživatelům pomocí doporučení rychle pomoci objevit další produkty nebo kategorie v nabídce e-shopu. Doporučení je vhodné umístit přímo pod centrální nákupní část na detailu produktu, aby získala dostatek prostoru, ale zároveň zbytečně neodváděla pozornost od hlavního produktu.
Při zobrazování doporučení je nutné dbát na to, aby si je uživatel nespletl například s již zmíněnými variantami. Ty by měly být umístěny výše v blízkosti nákupního tlačítka a parametrů produktu.
Nákupní košík
Nákupní košík je vstupní branou do nákupního procesu. Košík má ve srovnání s ostatními částmi webu zjednodušené rozhraní, které má uživateli pomoci soustředit se na dokončení nákupu a zabránit opuštění nákupního košíku. Často používanou funkcí košíku je časové označení produktů, které uživatele upozorňuje, že produkty zde budou jen po určitou dobu, a motivuje je tak k rychlejšímu rozhodování a nákupu.
Ideální složení nákupního košíku se skládá z následujících částí a parametrů:
- zjednodušená hlavička bez navigace – umožňuje rychlý návrat na předchozí stránku nebo domovskou stránku a zobrazení dalších kroků v nákupním procesu, které uživatele čekají,
- informace o dopravě zdarma, případně o dárku k nákupu, fungující na stejném principu – ideálně umístěné pod hlavičkou nad přehledem produktů,
- přehled produktů v košíku – standardně by měl zobrazovat produkty s konečnou cenou a možností změnit jejich počet nebo je z košíku odstranit. U produktů je třeba zobrazit jejich vybrané parametry a možnost prokliknout se na jejich detail v e-shopu,
- konečná cena produktů – zobrazuje se ihned za přehledem produktů a místem pro kód slevového kupónu,
- doporučené produkty – košík je ideálním místem pro podporu nákupu doporučením. Místo pro umístění doporučení je těsně nad nebo pod tlačítky „vrátit se zpět“ a „dokončit nákup“. Umístění závisí na obsahu produktů v doporučení. Pokud je v bloku s produktem příliš mnoho parametrů a zabírají příliš velkou výšku, umístíme je úplně dolů, ale pokud jsou kompaktní a ne příliš vysoké, můžeme je pohodlně umístit nad zmíněná tlačítka, protože si tak získají větší pozornost uživatele. Nikdy však neukládejte doporučené produkty v přehledu košíku nad vložené produkty. Uživatele, kteří očekávají, že uvidí úplně jiné produkty, to zmate, což je může přimět k opuštění stránky.
V ideálním případě předpokládejte, že již v této části můžete uživatelům sdělit, jaké možnosti platby a dopravy jim můžete při nákupu nabídnout, aniž by museli přecházet do dalších kroků jen proto, aby se dozvěděli tyto informace. V takovém případě si zlepšíte statistiky a snížíte míru okamžitého odchodu.
Nákupní proces
Nejčastěji používaný nákupní proces je vícekrokový. Na rozdíl od alternativních řešení, jako je nákupní proces v jednom kroku/jedné stránce, přináší více výhod a možností.
Jednostupňový proces je efektivní především při použití na začátku podnikání s e-shopem nebo v jednodušších případech, například když e-shopy nenabízejí v nákupním procesu více možností platby a dopravy a uživatelé nejsou zvyklí nakupovat velký počet položek.
Nevýhodou je však měření nákupního procesu, protože je pouze jednostupňový. Každý nákup uživatele znamená opuštění celého nákupního procesu a na základě toho můžeme jen těžko odhadnout, kde byl problém.
Výhodou vícekrokového nákupního procesu je zejména přehlednost a podstatně lepší měření průchodu nákupním procesem díky rozdělení do několika kroků:
Nákupní košík nebo shrnutí košíku
Shrnutí produktů, které zákazník vložil do košíku.
Výběr platby a dopravy
Tato část nákupního procesu je jednoduchá, ale jen za předpokladu, že všechny možnosti jsou pro uživatele dostatečně popsány a obsahují všechny rozhodující informace, nejen název výběru a poplatek, ale i doplňující informace, jako je volba doručení kurýrem, které doručovací společnosti využíváte, doručení zboží pouze v pracovní dny nebo i o víkendech, datum, kdy můžete zboží očekávat apod.
Předpokládejme, že si zákazník zvolí osobní odběr. V takovém případě by měl mít možnost vybrat prodejnu a automaticky se mu zobrazí otevírací doba, konkrétní adresa prodejny, ideálně i telefon a samozřejmě datum, kdy si bude moci zboží vyzvednout. Uživatelé často navštěvují možnosti dopravy a platby, aby zjistili, jaká bude konečná cena jejich nákupu s doručením a kdy ho budou mít, i když se ještě nerozhodli nákup dokončit.
Přihlášení k účtu a zadání fakturačních a dodacích údajů
Tato část nákupu je pro uživatele často nejvíce frustrující, protože se jedná o vyplňování formulářů. I když se uživatel nepřihlásí, můžeme jeho vyplnění zjednodušit zadáním jména, telefonního čísla a e-mailové adresy. Každé pole při vyplňování potvrďte, aby uživatel věděl, že zadal správné údaje. Ptejte se uživatele na údaje postupně; pokud má zájem o registraci, zobrazí se pole pro zadání hesla až po výběru této možnosti. V následujících krocích budete potřebovat fakturační a dodací adresu.
Vyplňování adres můžete uživatelům usnadnit automatickým doplňováním, abyste mohli vyplnit fakturační nebo dodací adresu. Pokud uživatel zadá ulici a číslo popisné, nemusíte se starat o vyplňování dalších zbytečných polí. Vyplňování údajů obvykle končí udělením souhlasu. Snažte se tuto část co nejvíce zjednodušit a formulovat ji co nejjednodušeji. V části s osobními údaji bývá často možnost přidat poznámku k nákupu od zákazníka, ale pokud si nejste jisti, že vám tyto poznámky nebudou chybět, raději s nimi vůbec nepracujte, snížíte tak pravděpodobnost špatné uživatelské zkušenosti.
Shrnutí celého nákupu + kontrola zadaných údajů
Uživatel se může rozhodnout něco změnit, proto je vhodné umožnit mu dostat se k libovolnému kroku ze samotného výpisu, aniž by musel klikat přes tlačítka „zpět“ „a pokračovat“. V tomto kroku musí vidět všechny podstatné údaje pro své rozhodnutí a odeslání objednávky. Nezapomeňte je proto informovat o konečné ceně nákupu a ideálně i o co nejpřesnějším odhadu doby doručení objednávky.
Po odeslání objednávky je ideální, když se uživatel dostane rovnou na platební bránu a teprve po zaplacení na takzvanou stránku „Děkujeme“. Vyhnete se tak tomu, aby uživatel zavřel stránku před přesměrováním na platbu, což ve výsledku ztěžuje nákupní proces nejen jemu, ale i vám. Stránka „Děkujeme“ je v zásadě také součástí nákupního procesu a poskytuje především informace o úspěšném nákupu. Její velkou výhodou je, že díky jednoduchému formuláři můžete od zákazníka získat informace.
Na této stránce můžete anonymního nebo přihlášeného uživatele mimo jiné motivovat k tomu, aby se stal věrným zákazníkem a uskutečnil další nákupy prostřednictvím speciálních nabídek nebo slevových kódů, případně ho nasměrovat na další obsah e-shopu, jako jsou doporučení produktů nebo například články na blogu, případně můžete nastavit e-mailové kampaně pro rozesílání nabídek.
Nakupování v mobilu
Nakupování na mobilních zařízeních je rostoucím trendem a mobilní zařízení hrají stále důležitější roli v nákupním chování uživatelů. Běžnou praxí je provádět před samotným nákupem průzkum, na jehož základě se uživatelé později rozhodují, zda a kde si daný produkt zakoupí. Je zajímavé, že tento průzkum provádí až 69 % zákazníků na mobilu.
Rostoucí trend mobilního nakupování je ovlivněn mnoha faktory, jako je technologický pokrok, pokrytí vysokorychlostním internetem a jeho dostupnost, cenová dostupnost mobilních zařízení, mobilní platební služby, jako jsou Apple Pay a Google Pay, a také podpora e-shopů, které vyvíjejí vlastní aplikace pro elektronické obchodování a snaží se uživatelům nabídnou při nákupu co největší komfort. Jedním ze způsobů, jak dosáhnout skvělého uživatelského zážitku, je pochopit, jak uživatel mobilní zařízení ovládá.
Rozvržení stránky a teplotní mapa
Díky testování a analýze chování uživatelů můžeme pomocí heatmap určit, jak uživatelé interagují s obrazovkou displeje. To nám umožní přesně definovat, jak navrhnout rozhraní aplikace nebo webové stránky, aby s ní uživatel mohl pohodlně pracovat. Různé barvy nám ukazují, jak snadno se jednotlivé části obrazovky používají.
Tyto informace jsou pro nás důležité při navrhování uživatelského rozhraní a rozložení klíčových prvků, protože umístění těchto prvků na správná místa na obrazovce výrazně zlepšuje uživatelský zážitek. Zobrazovací prostor na mobilních zařízeních je totiž ve srovnání s tradičními obrazovkami počítačů velmi omezený.
Klíčové sekce e-shopu v mobilním zařízení:
Hlavička
V ideálním případě by měla splňovat určité parametry, aby sloužila jako efektivní navigační prvek. Měla by být také kompaktní, ne příliš vysoká, protože by uživatele připravila o místo v obsahu a ztížila mu orientaci v e-shopu. Měla by navíc obsahovat logo e-shopu s odkazem na domovskou stránku. Často se používá tzv. plovoucí záhlaví, tj. záhlaví, které se zobrazuje trvale, a to i při rolování.
Logo
Zjednodušená verze loga, která se snadno vejde do mobilního zobrazení a nezabere mnoho místa.
Hamburger menu
Klíčová část záhlaví, pod kterou se obvykle skrývá navigace a nákupní košík, která zobrazuje minimální počet vložených položek.
Vyhledávací panel
Celý vyhledávací řádek, který se ideálně neskrývá za ikonu lupy a neochuzuje tak uživatele o pohodlí při procházení e-shopu.
Vyhledávání na mobilu
Optimalizované a funkční vyhledávání na mobilních zařízeních hraje klíčovou roli při návštěvě e-shopu. Optimalizace spočívá ve správném rozložení prvků a nastavení jejich interakcí tak, aby byla navigace pro uživatele co nejjednodušší, např.:
- Kompaktní zobrazení našeptávače s vyhledávacím panelem na celé obrazovce zařízení – výrazně zvyšuje přehlednost a zjednodušuje vyhledávání.
- Našeptávač zobrazuje výsledky od prvního zadaného znaku a po otevření doporučuje kategorie, nejhledanější fráze a oblíbené produkty nebo články a další obsah.
- Při prohlížení výsledků v našeptávači se virtuální klávesnice automaticky skryje, aby měl uživatel dostatek prostoru pro prohlížení.
- Výsledky jsou uspořádány do karet podle klíčových parametrů, mezi kterými může uživatel klikat nebo je jednoduše procházet do stran.
Funkčnost vyhledávání spočívá v jeho chování při interakci s uživatelem. Efektivní vyhledávání by mělo uživatele vždy dovést k relevantnímu výsledku a mělo by zohledňovat běžné chování uživatele bez ohledu na to, jak zadává hledanou frázi, zda zadává jméno s překlepy, používá slangový nebo archaický výraz apod.
Závěr
Uživatelé víc než kdy jindy vyhledávají zážitek ušitý na míru, a proto dnešním e-shopům nestačí jen dobře vypadající webové stránky. Na webu musí všechno šlapat jako hodinky a jako prodejce musíte být schopni předvídat každý další krok zákazníka. Doufáme, že vám tento článek pomůže využít design UX ve svůj prospěch a získat více spokojených zákazníků.
Časté otázky
Jaký je rozdíl mezi UI a UX, když se obvykle uvádějí společně?
Na té nejzákladnější úrovni se uživatelské rozhraní (UI) skládá ze všech prvků, které umožňují interakci s produktem nebo službou. Uživatelský zážitek (UX) je naopak to, co si jedinec, který s tímto produktem nebo službou interaguje, z celé zkušenosti odnese. Je nezbytné odlišovat celkový uživatelský zážitek od uživatelského rozhraní (UI), ačkoliv uživatelské rozhraní je důležitou součástí návrhu. Jako příklad uveďme webové stránky s recenzemi filmů. Zatímco uživatelské rozhraní pro vyhledání filmu může být dokonalé, UX bude špatné pro takového uživatele, který chce informace o menším nezávislém filmu, pokud základní databáze obsahuje pouze filmy velkých studií.
Jak potvrdit důvěryhodnost e-shopu?
- platný certifikát SSL,
- prohlášení o ochraně osobních údajů,
- aktuální adresa a telefonní číslo,
- pozor na pravopisné a gramatické chyby,
- možnost psát recenze na e-shop,
- odkazy na sociální sítě,
- A/B testování.
Bude zájem o online nakupování růst i po pandemii?
Díky lockdownům zájem o online nakupování logicky vzrostl. Tržby z e-commerce se v zahraničí v roce 2021 zvýšily až o několik miliard dolarů a na Slovensku o více než 2 miliardy EUR. Zda bude trend pokračovat, nelze předpovědět. Přesto se během dvou let pandemie online prostor vyvinul a přizpůsobil situaci tak, aby byl celý proces online nákupu co nejrychlejší a nejpohodlnější.
Jak přilákat návštěvníky?
- hezký design,
- reklamy,
- „poznejte“ svého zákazníka,
- recenze a prokliky na sociálních sítích,
- zaměřte se také na detaily – rozvržení stránky hraje důležitou roli,
- pomoc a podpora uživatelů,
- slevy a výhodné nabídky – benefity pro registrované uživatele.
