Není to tak dávno, co jsme na žádost našich čtenářů spustili řadu materiálů o mobilních rozhraních online obchodů.
Minule jsme hovořili o zvláštnostech nákupů z mobilních zařízení a zjistili jsme, proč je tak důležité věnovat pozornost dobré použitelnosti adaptivní nebo mobilní verze webu.
Dnes budeme hovořit o funkcích implementace funkcí vyhledávání a filtrování na mobilních zařízeních.
Dozvíte se:
- proč potřebujete vyhledávání podle kategorií;
- jak zjednodušit interakci s mobilním filtrováním;
- jak správně používat ovládací prvky výběru;
- jak lépe implementovat řazení.
Společnost KISLOROD se specializuje na design a vývoj projektů elektronického obchodování. Přihlaste se k odběru blogu a telegramového kanálu, aby vám neunikly nové články.
Hledání v mobilní verzi webu
O implementaci funkce vyhledávání jsme psali podrobně na desktop v tomto článku. Nebudeme duplikovat obecné zásady, ale soustředíme se na funkce vyhledávání na mobilních zařízeních.
1. Povolit vyhledávání podle kategorií
Ve studii Baymard Institute začalo 60% uživatelů procházet stránky a produkty vyhledáváním. Pro ně byla tato možnost rychlejší a pohodlnější než procházení kategorií.
Jak již bylo řečeno, v jiné studii si všimli, že více než 50% uživatelů se pokusilo vyhledávat v kategorii, ve které se aktuálně nacházejí, a nikoli na celém webu. Takovou funkčnost nepodporovalo 94% webů na chytrých telefonech, které prohledávaly celý online obchod. Vědci poznamenávají, že tento problém byl důvodem, proč návštěvníci ze stránky odcházeli.
Je zajímavé, že na ploše uživatelé méně pravděpodobně projeví touhu hledat produkty v aktuální kategorii – tento trend je typický pouze pro m-commerce. To je nejpravděpodobnější, protože zobrazení stránky je omezené a kontext je obtížné interpretovat. Baymard Institute nabízí následující řešení:
-
Zobrazení kategorie v návrzích vyhledávání při zadávání dotazu do vyhledávací lišty – je důležité, aby bylo vyhledávání v aktuální kategorii nabízeno jako první možnost. Výhodou řešení je, že nevyžaduje implementaci nového rozhraní.
-
Výběr kategorie do vyhledávacího pole v rozevíracím formátu na vyhledávací liště. Toto řešení je vhodné pro hypermarkety a tržiště.
- Samostatné pole pro vyhledávání v rámci kategorie jako součást funkce mobilního filtrování – v tomto případě však vyhledávání na velmi vysoké úrovni na webu musí být implementován engine.
2. Nezobrazovat prázdnou stránku s výsledky vyhledávání
Doporučujeme nezobrazovat stav „Nic nenalezeno“ na stránka s výsledky vyhledávání na ploše. Ale na mobilních zařízeních je to ještě důležitější kvůli problémům s navigací.
Stránka bez výsledků se pro uživatele stala slepou uličkou. Pokud návštěvník není nasměrován dále, je vysoká pravděpodobnost, že web opustí.
Chcete-li tomu zabránit, můžete uživateli nabídnout:
- alternativní vyhledávací dotazy (méně konkrétní nebo synonyma);
- přejděte na hlavní stránku nebo na stránky služeb ve vhodných kategorie, online – konzultant;
- další produkty – bestsellery, propagační nebo vybrané osobně na základě minulých nákupů.
Filtrování v mobilní verze internetového obchodu
Psali jsme o nuancích filtrování a třídění na ploše. Pokud jste to zmeškali, doporučujeme vám nejprve si tento materiál prostudovat, mnoho pravidel UX, která se vztahují na plochu, je relevantní i pro chytré telefony. Nyní se zaměřme na funkce filtrování a třídění na mobilních zařízeních.
1. Zjednodušte interakci s mobilním filtrováním
Uživatelsky přívětivé funkce filtrování na ploše jsou také jednoduché ovládací prvky jako simultánní zobrazení filtrů a výsledků na jedné obrazovce.
V mobilních verzích je obtížné zobrazit možnosti filtrování a výsledky filtrování současně. K zobrazení filtrů můžete použít modální okno.
Zvažte vymazání všech nebo jednotlivých parametrů filtrování najednou.
Je lepší nepoužívat dynamické změny obsahu, aby prvky na obrazovce „neskočily“ a neobtěžovaly uživatele . U vybraných parametrů je důležité poskytnout potvrzovací tlačítko.
3. Zobrazit použité možnosti filtrování
Testování použitelnosti v mobilních zařízeních ukázalo, že pokud se použité možnosti filtrování nezobrazí, budou uživatelé nejste si jisti, zda byl seznam produktů filtrován. Subjekty musely znovu otevřít rozhraní filtrování, aby se ujistily, že zvolily správný parametr.
Uživatelé také nemohli rychle resetovat vybrané parametry, když to bylo nutné – museli otevřít rozhraní filtrování, procházet seznam parametrů, aby našli dříve vybrané a odstranit je. Z tohoto důvodu mnozí odmítli používat funkci filtrování mobilních zařízení.
Pokud tyto nuance ignorujeme, uživatelé mohou:
- chybně interpretovat typ i rozsah produktů, pokud přehlédnou alespoň jeden použitý filtr;
- zapomeňte na to, které možnosti filtrování byly vybrány, zvláště pokud se neustále pohybovaly mezi seznamem a produktovými kartami. Blok s použitými filtry je často stejně důležitý jako název stránky nebo strouhanka, která informuje uživatele o tom, kde se nacházejí a jaké kategorie produktů si prohlížejí.
Existují dvě řešení těchto problémů. Vzhledem k velikosti obrazovky se na jeden řádek vejde jen několik použitých filtrů. Pokud uživatelé zvolí více možností filtrování, než kolik se vejde na jeden řádek, mohou být zobrazeni buď jako vodorovně posuvný seznam, nebo jako svislý seznam.
1. Výstup na kolotoč
Uživatelé mají tendenci rolovat karusel na mobilních zařízeních. Aby byla interakce s tímto prvkem rozhraní zřejmá, můžete odříznout parametr extrémního filtrování, aby bylo jasné, že to není celá sada – existuje pokračování. Z informačních důvodů byste měli nad filtračním blokem určit počet použitých parametrů.
2. Zobrazení seznamu v několika řádcích
Tímto způsobem uživatelé uvidí všechny použité filtry bez vodorovného posouvání – ale posune seznam produktů dolů. Případně můžete skrýt některé z vybraných parametrů a zobrazit pouze jeden nebo dva řádky a zobrazit další tlačítko pro zobrazení všech vybraných parametrů filtru.
3. Správně používejte ovládací prvky výběru
Přepínač je navržen tak, aby vybral jeden ze dvou protilehlých parametrů a používá princip přepínače (například zapnutí/vypnutí).
Pokud používáte přepínač, označte jej tak, aby bylo jasné, co po přepnutí se změní. V aktivním stavu by měl přepínač změnit polohu. Tato změna by měla být vizuálně patrná, proto používejte jasné barvy.
Studie Baymardova institutu zjistila, že 45% subjektů se pokouší použít více hodnot stejného filtru. Například při výběru sukně v červené nebo modré barvě uživatelé očekávají, že filtr v seznamu produktů zobrazí červené i modré sukně.
Proto je důležité povolit kombinaci různých hodnot stejný filtr. U této úlohy použijte zaškrtávací políčka.
Podle Baymardova institutu je jedním z nejobtížnějších prvků mobilního filtrování pro uživatele posuvníky:
- Více než polovina subjektů nesprávně interpretuje posuvníky s dvojitým rozsahem parametrů a mýlí si je pro posuvníky s jeden parametr;
- posuvníky jsou velmi citlivé a brání vám v nastavení požadované hodnoty – trvá to několik pokusů.
To neznamená, že je třeba se posuvníkům vyhnout. Aby však byly pro kupující užitečné, je důležité:
- u konstrukčních prvků ukázat, že lze nastavit různé hodnoty;
- u posuvníků s jedním parametrem by se při klepnutí měla značka přesunout na požadovanou hodnotu;
- dát příležitost zadat číselné hodnoty (u posuvníků cena, velikost atd.) ve speciálních polích pod posuvníky, přičemž do nich vložíte minimální a maximální hodnoty.
4. Při řazení použijte rozevírací seznamy
Již jsme napsali, jak se řazení liší od filtrování. Úkolem třídění je distribuovat produkty na stránce takovým způsobem, aby nejvhodnější pozice pro uživatele byly nahoře. K tomu se používá několik parametrů: abecedně, zvyšováním ceny, popularitou nákupů, hodnocením zboží atd. Ve většině případů je řazení na všech stránkách produktů stejné, ale můžete přidat samostatné parametry (vyberte 3–5 významných filtrů) pro různé kategorie produktů.
Funkce třídění by měla být zřejmá. Nejlepším řešením je tlačítko označené „Seřadit“ nebo rozevírací seznam se stejným názvem. Nestojí za to přidávat ikony nebo piktogramy, protože mohou být pro uživatele matoucí.
Na mezery mezi možnostmi řazení nebo samotným písmem by mělo být možné klikat.
Závěr
Implementace uživatelsky přívětivého vyhledávání a filtrování na mobilním webu není snadný úkol na první pohled. Na druhou stranu, v prostředí, kde mobilní provoz ve většině segmentů elektronického obchodování převyšuje provoz na počítačích, se investice do zlepšení uživatelské zkušenosti vždy vyplatí a stane se významným příspěvkem k růstu konverzí.
Brzy bude k dispozici další článek. Pojďme si promluvit o tom, co je důležité vzít v úvahu při navigaci v online obchodě na mobilních zařízeních. Přihlaste se k odběru tohoto blogu nebo našeho telegramového kanálu, aby vám článek neunikl.
Nezapomeňte lajknout (+1), pokud se vám materiál líbil. A jsme také otevřeni otázky – zeptejte se v komentářích.
