Zpět na seznam článků

Filtrování produktů na e-shopu

Správně udělaný filtr umožňuje snadno najít přesně to, co potřebujete. Podle Baymard Institutu jen 16 % velkých e-shopů má rozumně navržené filtrování produktů.

Zlatokop1

Filtry produktů jsou věc, které jsou často pod rozlišovací schopnost designérů a přitom hodně e-shopům lámou vaz. Podle Baymard Institutu jen 16 % velkých e-shopů má rozumně navržené filtrování produktů. A produkt, který nenajdete, si nekoupíte.

Správně udělaný filtr umožňuje snadno najít přesně to, co potřebujete. Je to ekvivalent toho, když přijdete do obchodu a prodavačky se zeptáte: potřeboval bych hnědou koženou bundu ve velikosti L. Filtr by na to byl pak: muž – bunda – kůže – hnědá – velikost L. A ano, znamená to mít hodně filtrů a různé filtry pro různé kategorie zboží.

Pojďme se podívat, jak to udělat pořádně. Protože jinak se uživatelé změní v Kinterovo Prevíta. Nebo minimálně ve zlatokopa, co musí prohledávat hlušinu, aby našel zrnko zlata.

Zlatokop

Oddělte filtry a řazení produktů

Filtrování a řazení jsou prvky, které byste neměli míchat. Řazení produktů z logiky věci neomezuje výběr, jen podle určitého parametru řadí stávající výpis produktů.

Do řazení produktů patří:

  1. podle ceny, hodnocení, prodejnosti, nejnovějších a abecedně (ojediněle i podle důležité vlastnosti – například uhlopříčka u TV),
  2. řádkový nebo tabulkový výpis,
  3. počet zboží na stránce.

Řazení produktu bývá obvykle nad výpisem produktu.

Filtr na czc

Naopak filtrování omezuje počet ukázaných produktů na základě preferovaných vlastností, stylu, typu či výrobce (filtry budou hodně záviset na druhu zboží, takže tohle neberte jako konečný seznam).

Takže sem dejte:

  1. akce, sleva, novinka, doprava zdarma, skladem
  2. velikost, materiál, barva, tvar
  3. cena (posuvník od-do, možnost zadat hodnoty ručně), poměr cena-výkon
  4. výrobce, kolekce, sezóna, příležitost
  5. další důležité vlastnosti (kapacita paměti, závěrka, uhlopříčka, nároky na vláhu, věk dítěte, symptomy nemoci atd.)

Filtrování produktů bývá nejčastěji v levém sloupci.

Různé filtry pro různé kategorie zboží

Každá kategorie by měla mít své vlastní specifické filtry zboží. Dobré pravidlo je – pokud byste tuto vlastnost dali do popisu produktu, tak by na to měl být filtr. Takže pro myčky – počet lidí, jejichž špinavé nádobí najednou umyje, rozlišení fotky u foťáků, šířka pojezdu u sekačky, průměr kmene u sekery atd.

Pokud si nejste jistí, prolezte si recenze u produktů dané kategorie. Otevře vám to oči ve smyslu, co vám chybí v popisu zboží a co je pro zákazníky důležité.

Dobrý příklad je například filtrace foťáků u MegaPixelu. Špatný příklad je Bonami, kde mají stejný filtr pro všechny kategorie – od jídelních stolů po ponožky.

Bonami ponoå¾ky

Chcete ukázat na Bonami ponožky jen vaší velikosti? Smůla. Musíte si projít celý sortiment a číst si to v popisu zboží. A to nemluvím o materiálu.

Tematické filtry (jarní kolekce)

Filtr foťáků

Vedle specifických filtrů kategorií doporučuji se též zamyslet na tematickými filtry. To jsou ty mírně neuchopitelné kategorie jako koktejlové šaty, moderní hodinky, jarní kolekce nebo kompaktní foťák. Jsou to opět vlastnosti nebo funkce, o kterých běžně přemýšlí zákazníci. A vy byste o nich měli vědět z uživatelského testování, dotazníků, analýzy rešerší a zpětné vazby.

Takže blejzr není sako, balkónovka není pushupka a vlna není kašmír.

Tematické filtry budou hodně důležité u věcí, které souvisí se subjektivním dojmem. Tzn. móda, design, vybavení domácnosti, nábytek atp. Zkuste přemýšlet nad slovy jako styl, použití nebo pocit.

Nejužitečnější filtry dejte nahoru

Nastavte si sledování, podle čeho lidi jednotlivé kategorie zboží filtrují. A po dostatečném množství dat dejte nejoblíbenější filtry nahoru. Pravděpodobně se totiž dostanete do situace, kdy bude seznam filtrů delší, než je výška obrazovky. A co uživatel nevidí, to neexistuje (je pro to zkratka WYSIATI – tady o tom mluví Kahneman).

Hledáte film na večer? Asi pro vás bude důležitější, zda jde o drama nebo horor nebo jaké to má hodnocení/ocenění. A ne to, jestli to má 100 nebo 140 minut. Nedělejte to ale slepě, filtr by měl být opravdu hodně užitečný. Proto až na výjimky to nebude cena, byť většina lidí tento filr použije.

A nebojte se ty filtry i kombinovat, byť to nemusí mít úplně logiku. Walmart má například u notebooků dotykové, chromebooky a 11-14 uhlopříčku.

Umožněte použití více filtrů najednou

Nesvazujte příliš uživatele tím, že ho budete nutit výběrem buď anebo.

Novinky v akci

Chcete novinky v akci? Čeká vás dost peklo… musíte udělat následující kroky:

  1. vyfiltrovat podle první vlastnosti (novinky),
  2. prohlédnout si a zapamatovat výpis produktů,
  3. odstranit první vlastnost ve filtrech,
  4. vyfiltrovat podle druhé vlastnosti (akce),
  5. prohlédnout si výpis a zjistit, zda se tam neobjevil produkt z bodu 2,
  6. kliknout na produkt, který má obě vlastnosti a zkontrolovat, zda tomu tak opravdu je v popisu.

A to – upřímně – je úkol pro autistické masochisty. Kterým se tímto za všechny UXáky omlouvám.

Pokud chytře namítnete, že si můžu zaškrtnout akce a seřadit podle nejnovějších, tak v tomhle konkrétním případě nemůžu.

Ukažte množství zboží odpovídající zadaným filtrům

Množství odpovídajícího zboží a 0

Při filtrování zboží je důležité mít u každé vlastnosti i počet zboží, který všem použitým filtrům odpovídá. Pokud je nějaká vlastnost s 0 produkty, tak je lepší ji ukázat, ale udělat ji neklikací respektive zašedlou. Pokud byste tuhle vlastnost schovali, tak uživatelům můžete znepříjemnit život. Protože to zrovna může být pro ně důležitější funkce, než které si před tím vybrali.

Použité filtry ukažte i nad výpisem zboží

Uživatelé jsou zvyklí filtrovat v levém sloupečku. Nicméně část použitých filtrů může být mimo aktuální obrazovku. A navíc po použití filtrů uživatelé často přechází k řazení. Je proto vhodné ukázat použité filtry i nad výpisem zboží. Tady to má Megapixel například blbě, protože ukazuje použité filtry jen v levém sloupci. Naopak velmi dobře to má CZC.

Ideální je mít i možnost tyto použité filtry odstanit pomocí křížku (a zrušit je všechny), jak je vidět níže.

Použité filtry na czc

Seznamy vlastností o více než 10 hodnotách usekněte

Pokud máte filtr, kde je výpis vlastností větší než cca 10 položek, tak ho po těch 10 utněte. A buďto tam dejte posuvník nebo lépe odkaz na X dalších položek. Klasicky se to děje u výrobců/značek. Naopak nedoporučuji usekávat filtr u velikostí a barev. Oba jsou natolik důležité, že je potřeba je ukázat všechny.

Na typu filtru bude záviset řazení vlastností. U rozlišení obrazovky, velikosti bot nebo značky je abeceda/vzrůstající hodnota v pořádku. U typu podprsenky nebo nejbližší pobočky (geolokace nebo vyhledání pomocí PSČ) už tak moc ne.

Pro extra dlouhé seznamy se hodí našeptávač – jedná se třeba o značky nebo země původu.

Kompatibilní produkty jako filtr

Extra špek jsou kompatibilní produkty. Zní to jako legrace, ale zkuste si vyhledat nabíječku na notebook od jiného výrobce (protože je levnější), repráky, které si budou povídat s vaší televizí nebo brašnu na foťák. Klasické je to u:

  • příslušenství (brašny, ochranné fólie),
  • dodatečné produkty (stereo soustavy),
  • náhradní díly (kabely, nabíječky),
  • a spotřební produkty (náplně do tiskáry).

Podle Baymardů má tento úkol úspěšnost jen 35 %. To znamená, že část lidí ten produkt nenajde, a část si koupí nekompatibilní produkt. A ten pak (ne)vrací a je otrávená.

A ne, tím, že budete nabízet jen kompatibilní produkty od stejného výrobce, to nevyřešíte.

Vyřešíte to tím, že se zeptáte na typ a model produktu a nabídnete kompatibilní zboží. Problém je ve chvíli, kdy uživatel neví, co má za produkt (tiskárna, telefon). Ale kdo říkal, že tenhle svět je dokonalý?

Extra tip: Ukažte jako filtr produkty kompatibilní s obsahem košíku

Takový můj – teď už ne – tajný tip je následující: zjistěte, co má uživatel v košíku. A do filtru produktů mu přidejte položku: kompatibilní s (produkt v košíku). Je to boží. Protože jedinou další možností, jak zjistit kompatibilní zboží je dostat se do detailu produktu a modlit se, že v upsellu a cross-sellu nebudou hovadiny.

A pokud jste extra mazaní, tak si budete pamatovat nákupní historii a nabízet i produkty kompatibilní s předchozími nákupy (nepotřebujete sáčky do vysavače, který jste si u nás před 6 měsíci koupili).

A poslední tip: změny ve filtrech a řazení by měly být jednotlivé kroky v historii prohlížení. Takže když se vrátíte zpět, tak si nesmažete všechny filtry, ale dostanete se do předposledního kroku. A změny dělejte okamžitě, ne pomocí tlačítka přepočítat. Prosím.

Závěr

Na závěr jedna případová studie, kdy přidáním filtrace produktů došlo k nárůstu obratu o 76 %. Nechcete si koupit kilt?

 

Související články

Success

10 věcí, které musí mít kvalitní web

Checkout-behaviour

Na co (ne)koukat v Google Analytics

Jak využít kognitivní zkreslení ke zvýšení konverzí

Alza-registrace

Registrace a přihlášení

Smysluplná debata

  • Achh…UX.

    Vo Vasom clanku:
    A změny dělejte okamžitě, ne pomocí tlačítka přepočítat. Prosím.

    V inom clanku:
    Make sure filter changes are separate events in the browser
    https://uxdesign.cc/crafting-a-kickass-filtering-ux-beea1798d64b

    • Ondřej Ilinčev
      Ondřej Ilinčev

      Tlačítko přepočítat je hlavně v košíku, kde to nedává smysl. U aplikace filtru dává smysl to udělat jako semostatný event / stránku včetně funkčního tlačítka zpět.

  • Dobrý den, když mám seznam vlastností ve filtru ve dvou sloupcích vedle sebe a řadím je podle abecedy, jaký směr řazení je podle vás nebo průzkumů lepší? V řádcích nebo sloupcích? Ve filtrech je většinou větší počet parametrů, takže je navíc ještě použitý posuvník.
    Moc díky

    • Ondřej Ilinčev
      Ondřej Ilinčev

      Intuitivnější je podle mého dva sloupce. Ideálně oddělené nějakým vizuálním prvkem, třeba svislou linkou – aby bylo jasné, jakým směrem číst. Optimální je samozřejmě nemít dva sloupce :).