18 řešení pro filtrování a třídění produktů v internetovém obchodě, která zjednoduší výběr a zvýší převod

Zdravím. Jmenuji se Maxim Žukov, jsem z KISLORODU. Specializujeme se na design a vývoj projektů elektronického obchodování.

Již jsme psali o tom, jak zlepšit vyhledávání na webu a správně pracovat s výpisy produktů, abychom uživatelům pomohli a zvýšili konverzi. Dnes si povíme o implementaci pohodlné funkce pro filtrování a třídění zboží.

Aby vám neunikl další článek v sérii, přihlaste se k odběru telegramového kanálu, kde sdílíme naše zkušenosti s cíleným nárůstem konverzí v klientských projektech, výzkumech, hypotézách a postřezích.

< p>Při výběru a porovnávání produktů se uživatel nejčastěji spoléhá na informace v kategoriích se seznamem produktů – výpisy. Funkce filtrování na stránkách výpisu je navržena tak, aby zjednodušila výběr, ale obsah a logika filtrů ne vždy splňují očekávání uživatelů, což může negativně ovlivnit převod.

Filtrování a třídění produktů – jaký je rozdíl?

Filtrační produkty – schopnost zúžit sortiment na výběr s charakteristikami, které jsou nejrelevantnější pro individuální potřeby uživatele. Takovými vlastnostmi mohou být cena, velikost, značka nebo jiný parametr důležitý pro uživatele. Filtry vám pomohou rychleji najít ten správný produkt a do jisté míry nahradí asistenta prodeje. Obvykle se nachází v postranním panelu.

Pokud filtry vylučují určité produkty z výběru, seřazení produktů seřadí výsledky podle dané kritérium – například zvýšením ceny, hodnocením uživatelů nebo popularitou. Nachází se nad seznamem produktů.

Hodnota UX pro filtrování a třídění produktů

Filtry a třídění usnadňují hledání požadovaných produktů a vyhýbají se bodům výběru. Interakce uživatele s těmito nástroji zvyšuje průměrnou délku relace a hloubku zobrazení stránky.

Po filtrování přejde uživatel na stránku vytvořenou pro jeho požadavky – produkty na něm jsou nejrelevantnější pro potřeby, proto je míra okamžitého opuštění minimální a konverze maximální. Po seřazení uživatel zůstane na stejné stránce – pouze nyní jsou produkty uspořádány podle jejich priorit, což pomáhá rychleji zadávat objednávku.

18 řešení pro pohodlné filtrování produktů

Problémy s filtrováním produktů jsou obvykle spojeny s nedostatkem parametrů filtrování důležitých pro uživatele, nepochopenou logikou a rozhraními. Budeme analyzovat řešení, která pomohou zlepšit funkčnost filtrování produktů v internetovém obchodě.

1. Navrhněte vybrat kategorii a poté filtrovat

Je lepší hned zúžit možnosti, než získat seznam produktů s velkým množstvím produktů z irelevantních kategorií. Za tímto účelem je seznam kategorií umístěn na viditelném místě – například v horní části bloku filtru, jako na výše uvedeném snímku obrazovky. Nebo nad SERP, jako v příkladu níže.

2. Povolit výběr více kategorií

Stává se, že v určitých mezerách chce uživatel hledat produkty v několika kategoriích najednou. Poskytněte mu takovou příležitost, aby nemusel filtrovat v každé kategorii jeden po druhém a pamatovat si nebo vypisovat informace o produktech z různých kategorií.

3. Poskytněte pro každou kategorii jedinečnou sadu filtrů

Ačkoli existují parametry filtrování, které jsou univerzální pro všechny kategorie (cena, hodnocení atd.), Uživatelé se více zajímají o filtrování podle jedinečných parametrů filtrování v požadované kategorii. Pokud je pro televizor důležitá velikost úhlopříčky a pro neopren důležitá tloušťka neoprenu, dejte uživatelům možnost třídit produkty podle těchto parametrů. Zobrazením informací o těchto možnostech filtrování připomenete nebo ukážete uživatelům, že možnosti jsou důležité, a povzbudíte je, aby podle nich filtrovali.

< h3> 4. Umožněte filtrování podle všech charakteristik z karet náhledu

Pokud je charakteristika produktu tak důležitá, že je zobrazena v náhledu, mělo by být možné filtrovat celý seznam produktů podle této charakteristiky. Uživatelé vyhledávají parametry filtrů podle vlastností, které jsou pro ně důležité, a pokud je nenajdou, jsou zklamáni. Tento problém je obzvláště relevantní pro mobilní zařízení, kde není vždy možné rychle pochopit, že požadované vlastnosti produktu ve filtru neexistují.

Například v náhledu karty mobilního telefonu na webu ozon.ru se zobrazí následující parametry: počet SIM karet, podpora paměťových karet, funkce, účel slotů.

Pro všechny tyto parametry jsou k dispozici filtry:

5. Implementovat možnosti tematického filtrování

Definujte a navrhněte tematické parametry filtrování v závislosti na specifikách online obchodu a kontextu použití produktu. Příklady tematických filtrů – podle stylu (neformální, sváteční, romantické), sezóny, podmínek použití, parametrů výběru.

offline – V obchodě může prodejce snadno splnit tematický požadavek, jako je jarní bunda nebo sváteční košile. Prohlížení produktů podle tématu v internetovém obchodě není tak snadné – musíte produkty nebo skupiny produktů ručně označit.

Bez tematických filtrů strávili subjekty ve studii Baymardova institutu hodně času hledáním. Často také odmítli hledat, protože požadovaný produkt byl skryt ve velkém výsledku vyhledávání a uživatelé si mysleli, že se na webu nenachází.

V naší studii nákupu matrací online subjekty nenalezly na webu výrobce parametr filtrování s výběrem matrace pro páry s velkým rozdílem hmotnosti. Výsledkem bylo, že mnoho respondentů úkol nedokončilo. Tento problém lze vyřešit přidáním tematického parametru „pro páry s velkým rozdílem v hmotnosti.“

6. Přidejte do filtru parametry kompatibility produktu

Výběr některých produktů závisí na kompatibilitě s jinými produkty, které uživatel již vlastní. Příkladem takového zboží jsou náhradní díly, spotřební materiál, příslušenství. Pokud kompatibilní produkt neodpovídá originálu, pak nezáleží na tom, jak dobré jsou recenze a cena je atraktivní. U těchto produktů přichází do popředí parametr kompatibility – je třeba poskytnout uživateli příležitost získat seznam produktů, které jsou kompatibilní s tím stávajícím.

Předmět studie Baymard Institute zjistil, že je extrémně obtížné najít ten správný kompatibilní produkt – práci zvládlo pouze 35%. Téměř všechny weby měly značkový filtr, ale k určení kompatibility to nestačilo – ne všechny napájecí zdroje stejné značky se hodí pro všechny notebooky od stejného výrobce. Ne vždy jeden výrobce pro ně vyrábí jak výrobky, tak příslušenství.

V některých výklencích je prostě nutné takový filtr implementovat – například v segmentu elektroniky a domácích spotřebičů. Výběr specializovaného objektivu pro fotoaparát je mnohem obtížnější než taška. Zvláště když vše, co filtr nabízí, je určit kompatibilitu na základě speciálních charakteristik produktu z databází dodavatelů a výrobců. Můžete dát příležitost určit název a číslo původního modelu nebo velikost, kapacitu nebo výkon.

Filtr kompatibility snižuje riziko výběru nekompatibilního produktu, a tím i návratnost.

7. Postarejte se o logiku operace filtrování

Filtry by měly být jednoduché a se zřejmým nálezem určitých parametrů filtrování v určitých kategoriích.

Na webových stránkách jednoho z výrobců matrací není filtrace tvrdosti patrná. Jsou zobrazeny parametry – vysoká, střední, nízká a různá tvrdost stran. Ten je ve výchozím nastavení neaktivní. Subjekty nerozuměly tomu, že je možné je aktivovat – k tomu bylo nutné vybrat dva parametry. Věřili, že stránka prostě nemá matrace s různou boční tuhostí.

Některé filtry na stejném webu jsou implementovány ve formě posuvníků, které lze přesunout například do změnit rozsah nákladů. Zkušenosti však ukazují, že to není pro uživatele vždy výhodné – je snazší ručně zadat požadovaný rozsah do příslušných polí.

Navzdory skutečnosti, že filtr má takovou možnost, viděli jsme více než jednou, že to uživatelům není zřejmé. Důvodem je nadměrný styling polí pro zadávání hodnot.

Na webu anatomiyasna.ru je návrh polí pro zadávání hodnot Je více zřejmé – subjekty pochopily, že mohou zadávat hodnoty samy.

Názvy vlastností filtrů by také měly být předvídatelné, jasné a bez žargonu a slangu.

Důležité pravidlo: design by měl zlepšit nakupování, nikoli ho ještě zhoršit.

8. Výstup výše jsou oblíbené parametry filtrování

V některých kategoriích je vhodné filtrovat produkty podle určitých kombinací parametrů filtru nebo jednodušeji podle značky. Zobrazení těchto parametrů jednotlivě na postranním panelu filtrování vytváří riziko, že uživatelům budou buď chybět, nebo nepochopí důležitost filtrování produktů podle konkrétního seznamu parametrů.

Usnadněte zákazníkům život – zobrazte důležité parametry nad seznamem produktů. Například zvýrazněním zvláštního bloku nad filtrem, jako na citilink.ru:

3 další důležité body :

Nepoužívejte bannery pro kombinace filtrů kvůli slepotě bannerů.
Duplikujte také parametry značky v bloku filtračních prvků, jak uživatelé očekávají viz filtrování tam.
Označte vybrané hodnoty v seznamu bloku filtrování a zobrazte je nad ním v bloku použitých filtrů – aby uživatelé mohli jednoduše zrušit výběr konkrétního filtru.

9. Zkrátit dlouhé seznamy z filtrování parametrů

Dlouhé seznamy možností filtrování pro dvě nebo tři obrazovky uživatele šokují – měly by být oříznuty. Toto je nejlepší řešení, protože seznam vypadá kompaktně, ale uživatel stále vidí všechny filtry.

Jak správně ořezávat seznamy:

Dejte uživateli vědět, že je seznam oříznut – jinak si bude myslet, že vidí všechny dostupné možnosti. Přidejte tlačítko nebo odkaz na celý seznam možností filtrování, jak je znázorněno na následujícím obrázku.
Pod příslušným seznamem filtrování zobrazte odkaz „Zobrazit vše“ – není dostatečně blízko, aby si jej uživatelé pomýlili s jiným parametrem, ale dostatečně daleko na to, aby si jej uživatelé pomýlili se samostatným odkazem nebo odkazem na filtrování níže. Dobrým příkladem je snímek obrazovky výše.
Odkaz by měl být zvýrazněn, vizuálně odlišný od parametrů filtrování. Spoléhejte na styl odkazů na stránky (barevný a/nebo podtržený), použijte znaménka (plus, šipky) nebo frázi „Zobrazit/Zobrazit více“. Nastavit poslední hodnotu filtrování vizuálně méně živě než ostatní – aby uživatelé pochopili, že seznam je nefunkční a níže je odkaz na plnou verzi filtru.
V zkráceném seznamu uveďte hodnoty filtrování v pořadí podle popularity. Při prvním zobrazení filtru zobrazte důležité možnosti, abyste se ve výjimečných případech museli uchýlit k pokročilému vyhledávání.

10. Používejte vložené rolovací oblasti moudře

Někdy seznamy neřezávají, ale spíše poskytují hodnoty filtrů s vlastní rolovací oblastí, kterou lze rolovat nezávisle na zbytku stránka.

Měli byste však vědět, že toto řešení může způsobit následující problémy:

Zachyťte svitek. Někdy, pokud chcete procházet seznamem filtrování, se stránka bude posouvat a naopak. To otravuje uživatele.
Příliš citlivé posouvání. V takovém případě mohou uživatelé nevědomky přeskočit možnosti a rozhodnout se, že je web nenabízí.
Povolení oblastí posouvání. Uživatelé aktivují rolovací oblast kliknutím na rolovací oblast, přičemž často nechtěně použijí jednu z hodnot filtrování.

Pokud toto řešení implementujete, z důvodu, že máte obrovský seznam parametrů v jednom nebo jiném typu filtrování, přidejte možnost rychlého vyhledávání parametru v seznamu zadáním jeho názvu do zvláštního pole, jako v snímek obrazovky výše.

11. Povolit kombinaci více hodnot filtrování stejného typu

Hodnoty filtrů se často vzájemně vylučují – například ve filtru „Barva“ , uživatel může vybrat pouze jeden parametr. Výběr druhé možnosti vylučuje první. I když by pro uživatele mohlo být pohodlnější vyhledávat produkty v několika barvách najednou.

Ve studiích Baymardova institutu 45% subjektů vyzkoušelo více možností filtrování a bylo frustrováno, pokud neuspěly.

12. Obnovte seznam produktů na žádost uživatele

Filtrování na vyžádání je, když se stránka neobnoví okamžitě po výběru jednoho parametru, ale když uživatel klikne na tlačítko „Použít“ výběrem jednoho nebo několik parametrů, jak je uvedeno na screenshotech výše.

Okamžité filtrování otravuje uživatele, zejména pokud má web nízký výkon a uživatel musí vydržet nejen neustálou aktualizaci seznamu produktů, ale také dlouhou pauzu mezi aktualizacemi.

Filtrování na vyžádání je ideálním řešením pro komplexní katalogy s velkým sortimentem produktů. Je to také opodstatněné pomalým internetem – uživatel čeká na výsledek pouze jednou, přičemž vybere několik parametrů najednou.

Jedinou nevýhodou je vysoká pravděpodobnost získání nulového výsledku při výběru velkého počtu parametrů. Jak se tomu vyhnout, je popsáno níže.

13. Zobrazit filtry použité uživatelem

Řešení pomůže vyhnout se následujícím problémům, se kterými se uživatel může setkat bez zobrazení filtrů:

není vždy zřejmé, že byly použity filtry,
neexistuje způsob, jak rychle odstranit určité parametry filtrování,
tam neexistuje žádný kontext pro seznam produktů,
Uživatel může zapomenout, jaké parametry použil k filtrování produktů v kategorii.

Je vhodné zobrazit nejen počet vybraných parametrů filtrování, ale také samotný typ filtru spolu s použitými parametry. Použité parametry filtrování lze umístit nad seznam produktů, nad boční panel filtrování a pod horizontální panel filtrování.

Pro uživatele je pohodlnější, když jsou aplikované filtry označeny v postranním panelu a zobrazeny v horní části seznamu.

Takže uživatel pochopí, na čem byl výběr založen. Nemusí hledat zaškrtnutá políčka ve filtru, aby je odstranil. Nad problémem je stačí smazat. Pokud například uživatel mimo jiné vybral televizor určité značky a nenalezl vhodné produkty, může značku okamžitě odebrat ze seznamu parametrů a získat výběr se všemi značkami.

14. Poskytněte tlačítko pro resetování filtrů

Vybrané parametry filtrování by mělo být vždy možné resetovat. Je lepší neumísťovat tlačítko pro resetování filtru vedle tlačítka pro spuštění filtru, aby uživatelé méně pravděpodobně udělali chyby. Nejlepší je umístit jej nad seznam produktů, jako na výše uvedeném snímku obrazovky.

Pokud neexistuje žádný způsob, jak obnovit všechny hodnoty filtrování, uživatelé se uchýlí k tlačítku zpět na předchozí stránku v prohlížeči. A jsou často zklamaní, protože web nefunguje podle jejich očekávání – myslí si, že zůstanou na stejné stránce a vrátí se v době, kdy ještě neměli čas na filtrování. Ve skutečnosti se načítá nový obsah.

15. Přidat tipy

Ve výklencích, kde je důležité vybrat produkt podle určitých parametrů, ale potenciální kupující těmto parametrům nerozumí, je třeba vysvětlit jejich vlastnosti. Například pro pár s velkým rozdílem v hmotnosti musíte zvolit matraci s nezávislým pružinovým blokem, ale mnoho uživatelů o tom neví. Na webu matras.ru jsou tipy pro téměř všechny charakteristiky. Kliknutím na otazník vedle charakteristiky získáte nápovědu:

16. Sledujte rychlost filtrování

Pokud filtrování produktů podle zvolených parametrů trvá dlouho, uživatele to štve – s vysokou pravděpodobností nebude čekat a nákup neproběhne. Weby, které zpracovávají dotazy po dlouhou dobu a mají tedy nízký výkon, se uživatelům a vyhledávačům nelíbí.

17. Určete počet produktů, které odpovídají parametrům filtrování

< p> Před blokem filtrovaných produktů nebo v jejich blízkosti by se měl zobrazit celkový počet nalezených pozic, aby uživatel mohl vyhodnotit, zda potřebuje zúžit nebo rozšířit možnosti filtrování.

18. Nezobrazovat prázdný seznam produktů ve filtrované kategorii produktů

Pokud uživatel po pečlivém výběru kritérií ve filtru místo výsledků uvidí „nic nenalezeno“, je zklamaný. Frustrovaní kupující místo práce s filtry často web opouštějí.

Řešením je vyloučit parametr vedoucí k nulovým výsledkům ze seznamu dostupných vlastností produktu nebo jej zobrazit neaktivní ve fázi výběru. Možná tento parametr není pro uživatele kritický a ve výsledcích hledání najde vhodný produkt.

Když na webu ozon.ru vyberete operační systém iOS, parametry nekompatibilní se systémem se již nebudou zobrazovat – zůstanou pouze vhodná pravítka a modely, které budou zahrnuty do filtrovaného seznamu produktů.

7 možností třídění zboží na webu

1. Třídění zboží podle ceny

Uživatelé mají tendenci seřadit podle ceny. Je nezbytně nutné tuto příležitost využít – a to jak ve formátu „od levného zboží po drahé“, tak i naopak.

2. Třídění zboží podle hodnocení zákazníků

Třídění podle hodnocení – druhé nejoblíbenější třídění podle údajů Baymardova institutu. Ve většině případů se však třídění provádí podle průměrného hodnocení a nebere v úvahu počet hodnocení, které otravuje uživatele.
Hodnocení se nejčastěji věnuje pozornost, když si nejsou jisti výběrem a chtějí důvěřovat zkušenostem velkého počtu lidí. Proto je důležité při třídění zohlednit počet voličů. Počet hodnocení by se měl zobrazovat ve spojení s průměrným hodnocením.

3. Řadit produkty podle popularity

< p> Pomáhá zákazníkům, kteří se zajímají o trendy věci, nebo stejně jako v předchozím případě nerozumí tématu a chtějí vidět, co si ostatní objednávají. Popularita je určena počtem objednávek.

4. Řazení produktů podle nejnovějších

Někteří uživatelé chtějí nejprve vidět nové položky. To platí zejména pro výklenky související s oblečením.

5. Třídění produktů podle velikosti slevy

Další populární metodu třídění používají ti, kteří chtějí produkt koupit co nejziskověji.

6. Třídění zboží podle dostupnosti

Dostupnost zboží. Pokud jsou některé z produktů k dispozici pouze na objednávku, umožníte okamžité seřazení produktů, které lze zakoupit.

7. Třídění produktů podle kategorie

Toto je řazení podle parametrů, které se vztahují pouze ke konkrétním kategoriím. Například třídění kufrů podle kapacity, pevných disků podle paměti nebo tabulek podle délky, šířky a výšky – podobně jako v IKEA.

Takové třídění je ideálním řešením pro uživatele, kteří nechtějí tvrdě snižovat hodnoty pomocí filtrování, ale z nějakého důvodu je online obchody prakticky nenabízejí.

Určení, které parametry filtru je třeba při třídění podle kategorie implementovat, je snadné: vezměte 3–5 nejdůležitějších parametrů v každé kategorii a proměňte je v parametry třídění.

Několik nuancí třídění produktů :

řazení by mělo fungovat bez obnovení stránky,
výběr výchozí možnosti řazení, zvažte své potřeby.

Chcete-li se rozhodnout, které třídění použít ve výchozím nastavení, můžete dotazovat zákazníky nebo zjistit, jak většina uživatelů třídí produkty v Google Analytics.

Optimální umístění filtru na webu

Umístění filtr v postranním panelu je běžným řešením, ale horizontální filtr může fungovat lépe. Uživatelé často ignorují boční filtr kvůli slepotě bannerů a chybnému řazení jako jedinému možnému nástroji pro zúžení výběru produktů. To vede ke skutečnosti, že návštěvníci opouštějí web s prázdnými rukama.

Vodorovná lišta může kombinovat nástroje pro filtrování a třídění – to je dobré jak pro detekci nástrojů, tak pro použitelnost, protože usnadňuje uživateli soustředit se na jedno místo. Absence filtru v postranním panelu navíc vizuálně rozšiřuje seznam produktů a uvolňuje místo pro jeden další sloupec v mřížce seznamu.

Umístěním nástrojů pro filtrování a řazení vodorovně do jednoho řádku můžete implementujte vizuální rozdíl, jako na lamoda.ru:

Pro své pohodlí mají horizontální filtry nevýhody:

Je nutné používat rozevírací seznamy – velké mohou vypadnout z obrazovky a rolovat (u seznamů 10 a více bodů) nemusí fungovat správně a obtěžovat uživatele.
Omezení počtu filtrů kvůli omezení šířky obrazovky.

Horizontální filtrace a třídění je proto vhodné pro výklenky, které nevyžadují použití velkého počtu filtrů – například oblečení, interiérové předměty. U obchodů prodávajících elektroniku nebo sportovní zboží tato možnost pravděpodobně nebude fungovat.

Při použití horizontálního filtru na webu:

Povolit uživatel může v seznamu vybrat několik kritérií,
aktualizovat výstup v reálném čase,
zobrazit vybrané filtry a možnosti řazení mimo rozevírací seznamy, aby uživatel může zrušit výběr libovolného filtru,
neměňte pozici možností filtrování v seznamu,
zobrazte počet produktů s určitým parametrem filtrování,
nepoužívejte rozevírací seznam v rozevíracím seznamu.

Závěr

Správná implementace filtrování je jedním ze způsobů, jak vylepšit UX celého protože dobrý filtr pomůže uživatelům najít produkt a provést nákup.

Nyní víte, jak by mělo fungovat filtrování a třídění produktů. O neméně důležitých prvcích elektronického zboží se můžete dočíst v článcích:

Ideální produktová karta pro internetový obchod: čipy ke zvýšení konverze
23 chyb při objednávání, které zabraňují nakupování pro návštěvníky vašeho internetového obchodu
Hledání internetového obchodu: 24 prvků, které musíte mít, které zákazníkům pomohou najít to, co potřebují, a zvýšit konverzi
Jak vybudovat prodejní cesty v internetovém obchodě pro efektivní správu projektu elektronického obchodování
Seznam a náhled produktů v internetovém obchodě: 7 klíčových pravidel UX

Chcete-li zjistit, zda byly zohledněny další důležité prvky uživatelského rozhraní, stáhněte si náš interní kontrolní seznam pro zlepšení použitelnosti internetového obchodu s více než 250 body.

Příště , pojďme si promluvit o prvcích navigace pro internetový obchod, které zlepšují UX … Abyste tento článek nezmeškali, přihlaste se k odběru tohoto blogu nebo našeho telegramového kanálu.

Líbí se (+1), pokud je to užitečné.

Máte zájem o podobný design?

Další práce