Köszönjük feliratkozását!

Hamarosan megkapja heti webáruházas tippjeit.

A webáruház egyik nagy előnye az offline üzletekkel szemben, hogy a hatékony szűrési rendszernek köszönhetően másodpercek alatt megtalálhatjuk az általunk keresett terméket.

Milyen egy jó szűrési rendszer?

Ha például egy kék cipőt akarunk vásárolni, akkor egy üzlet esetében végig kell néznünk az egész cipőosztályt, ha meg akarunk győződni arról, hogy az összes szóba jöhető terméket láttuk, de még ekkor is megvan az esély arra, hogy valami elkerülte figyelmünket. Ellenben egy webáruházban nem muszáj böngésznünk a cipők között, hogy célt érjünk. Elég csak a megfelelő  szűrőket használva kilistázni a kék színű cipőket, majd azok közül kiválasztani a számunkra kívánatos darabokat. Nemcsak, hogy másodpercek alatt végrehajtható a művelet, de abban is biztosak lehetünk, hogy az összes kék cipő megjelenítésre került.

A szűrő a választás-segítés egyik legfontosabb eszköze. Egy webáruházban nagyon fontos, hogy minél kevesebb kattintással tudjunk megtalálni és kosárba tenni egy terméket. A következő példa jól szemlélteti a szűrő hasznosságát, amikor is mindössze két kattintással az 1800 találatot 18-ra csökkentettük.

Mire figyeljünk szűrési rendszerünkkel kapcsolatban?

Azt is tudni kell, hogy a vásárlók ezerféleképpen gondolkoznak, és tesznek kosárba egy terméket. Attól, hogy mi kitaláltunk egy kategóriafát, még nem biztos, hogy mindenkinek ez lesz a szimpatikus. A szűrő használata pedig erre is megoldást kínál. A lenti ábra jól ábrázolja a kategória-navigáció és a szűrés működésének logikáját.

Mire figyeljünk szűrési rendszerünkkel kapcsolatban?

Láthatjuk, hogy vásárlói szempontból milyen jó is tud lenni egy szűrési rendszer, ezért annak használata igencsak javasolt. A webáruházak döntő többségénél ez meg is történik, ugyanakkor a szűrők használhatósága már igen változékony képet mutat. Ugyanis közel sem mindegy, hogyan vannak ezek kialakítva webboltunkban.

Még mielőtt a részletekbe belemennénk, először nézzük meg, hogy kell-e egyáltalán nekünk szűrési rendszer. A szűrő - bár kétségtelenül jól mutat - plusz interakciót jelent a termékek keresésénél, tehát csak akkor használjuk, ha arra valóban szükség van. Ezek azok az esetek, amikor a kategóriában szereplő termékek nem tekinthetőek át könnyedén közvetlenül a kategóriamenüből (sok a termék), vagy nem alakítható ki olyan kategorizálás, amely minden vásárlói logika szerint lehetővé teszi, hogy eljussunk a kívánt termékhez.

Célunk az kell legyen, hogy szűrőnk a termék- és a vevőkörünkhöz tökéletesen illeszkedjen, ezáltal nyújtva maximális felhasználói élményt.
A továbbiakban nézzük meg, mire kell odafigyelnünk, amikor szűrési rendszerünket kialakítjuk.

1. Relevancia

Mikor létrehozzuk szűrőinket ne csak a termék főbb tulajdonságaira gondoljunk, hanem azokra a jellemzőkre is, amik a vásárló számára lényegesek. Az Abt.com webáruházban 13 szempont szerint szűrhetjük a televíziókat. Egy LED TV esetén a legfontosabb persze annak ára, márkája, képernyőmérete, de az Abt nem állt meg itt.  Például a beépített wi-fi alapján is listázhatjuk a tv-ket.

Relevancia

2. Sorrend

Nem minden szempont ugyanannyira lényeges, így a filtereket rangsoroljuk, hogy a felhasználó számára legfontosabbak kerüljenek felülre. Ha úgy érezzük, hogy vásárlóink ár érzékenyek, akkor az árszűrő legyen az, amit legfelül megjelenítünk. Ha a vevőink a márkákra utaznak, akkor az. Az EnglishTeaStore oldalán gyorsan belőhetjük magunknak azt a márkát és árkategóriát, amiben teákat szoktunk vásárolni.

Sorrend

3. Szűrőtípusok

A vásárlóknak többféle típusa van. A nézelődők a jó ajánlatokra hajtanak. A megoldást keresők egy problémájukra koncentrálnak. A céltudatos vásárlók pedig már konkrét elképzelésekkel rendelkeznek. Ugyanakkor pontosan soha nem tudjuk megjósolni, hogy mire fognak keresni, így annyi filtert használjunk, amennyi csak lehetséges. A Spanx jól reprezentálja, hogy miként lehet mindhárom típusnak az igényeit egyszerre kielégíteni.

Szűrőtípusok

4. Könnyen értelmezhető szűrőparaméterek

Vigyázzunk arra, hogy ha a látogató megtalálta a keresett szűrőt, annak értékei legyenek számára értelmezhetőek. Persze lehet, velünk van a baj, de nem nagyon tudjuk, hogy ezek a ruhaformák mit jelentenek az Asos oldalán.

Könnyen értelmezhető szűrőparaméterek

Vagy akár segíthetünk is értelmezni a tulajdonságokat látogatóinknak, mint ahogy idehaza az Árukereső teszi.

Könnyen értelmezhető szűrőparaméterek

Nemcsak szűrőket, de egyes tulajdonságokat is kifejthetünk:

Könnyen értelmezhető szűrőparaméterek

5. Összecsukható pontok

Ha sok szűrőnk van, és azok paraméterei ki vannak listázva, az könnyen okozhat zavarodottságot, káoszt. Ilyenkor célszerű ki-becsukható menüpontokat alkalmazni.

Ki-be csukható pontok

6. Kiválasztott paraméterek mutatása

A látogatónak folyamatosan látnia kell, hogy milyen szűrőfeltételeket választott ki. Ezért célszerű, ha azokat egy oldalelembe, ún. pathway-be gyűjtjük össze. Ezeket kétféle módon szokták megjeleníteni. Az ecipo.hu függőlegesen mutatja a kiválasztott tulajdonságokat.

Kiválasztott paraméterek mutatása

A Landsend vízszintesen helyezi el azokat.

Mindkét esetben adjunk lehetőséget a felhasználóknak arra, hogy a tulajdonság mellett megjelenített X-re kattintva törölhessék az adott filtert.

Kiválasztott paraméterek mutatása

7. Több paraméter együttes kijelölése

A címmel mindent el is mondtunk. Egy adott szűrőn belül engedjük meg, hogy a látogató akár több tulajdonságot is kiválaszthasson. Hiszen elképzelhető például, hogy valakit nemcsak a Samsung, de a Philips televíziók is érdekelnek. Akkor miért vegyük el tőle az esélyt, hogy ezeket egyszerre is megjeleníthesse?
Több paraméter kijelölése

8. Termékek száma

A vásárlónak tudnia kell, hogy az adott szűrő kiválasztásával, vagy törlésével mennyi termék marad a listában. Ezáltal szépen lassan az is tudatosul benne, hogy egyre közelebb kerül a döntéshez a vásárlási folyamatban.

Termékek száma

9. Valós idejű betöltődés

Amikor a látogató kiválaszt egy szűrőparamétert, valahogy értesülnie kell arról, hogy a szűrés megtörtént. Kevésbé jó megoldás az alábbi, mert egy kicsit lassú.

Valós idejű betöltődés
A Burton.com technikája már egy fokkal jobb. A piros szín kiválasztása (1) után eltűnnek a termékek, csak egy töltést jelző ikon marad (2), majd megjelenek a piros felsők (3). Mindez igen gyorsan történik.

1.

Valós idejű betöltődés

2.

Valós idejű betöltődés

3.

Valós idejű betöltődés

10. Terméklista frissítése

Kutatások bizonyítják, hogy minden egyes másodperc késés az oldal betöltésénél hét százalékkal ronthatja a konverziót. Ezért nem szabad, hogy a szűrés folyamán az oldal betöltésével „sok” idő menjen el.

Az AJAX technológia használata ezen sokat segít.

11. Legalább egy találat szabály

Nincs annál frusztrálóbb, mikor szűrésünk nem eredményez találatot. Ilyenkor a vásárló kicsit becsapva érzi majd magát. Ezért ennek lehetőségét mindenképp kerüljük.

Ezért célszerű inaktívvá tenni azt a szűrőparamétert, amely nem eredményez találatot, és ezt jelezni is a felhasználónak. Erre sokféle megoldás létezik. A JensonUSA például elhalványítja a nem használható paramétereket.

Legalább egy találat szabály

A Diy.com webáruházban eltűnnek azok a szűrők, amik már nem hoznának eredményt. Példánkban így néz ki az egyik terméklista szűrője, még mielőtt bármilyen tulajdonságot is kiválasztanánk:

Legalább egy találat szabály

Kiválasztjuk az ezüst színt és már csak ennyi szűrő marad.

Legalább egy találat szabály

12. Elhelyezés

A filterek elrendezése elsősorban termékkörünktől, illetve webáruházunk kialakításától függ. Ha kevés szűrhető tulajdonság van, akkor célravezetőbb a terméklista feletti elhelyezés. A Lifetimesterling konyhai eszközei tipikusan ilyen termékek. Mindössze 4 szűrője van, ezért kényelmesen elférnek egy sorban a terméklista felett.

Elhelyezés

Ellenben, ha termékeinket sok jellemzővel tudjuk leírni, akkor használjunk baloldali oldalsávos elhelyezést.

Elhelyezés

13. Káosz csökkentése

Mivel egy adott szűrőnek nagyon sok opciója is lehet, könnyen áttekinthetetlenné válhat a felület. Ennek a problémának az áthidalására három megoldás is kínálkozik.

Az elsőnél a leginkább keresett tulajdonságokat vegyük előre, a többit egy „mutasd a többit” pontba pakoljuk.

Káosz csökkentése
Második megoldásként használhatunk görgőt (itt is célszerű a leggyakrabban keresett paramétereket előre hozni). A Yebhi oldalán emellett még rá is kereshetünk a kívánt opcióra.

Káosz csökkentése

Harmadik lehetőségként a legördülő menük mintájára előugró ablakokban is elhelyezhetjük az opciókat.

Káosz csökkentése
Az Overstock oldalán kombinatív megoldással találkozunk. A „mutass többet” gombra kattintással a kinyíló ablakban görgethetjük a tulajdonságokat.
Káosz csökkentése

14.Opciók megjelenítése

Most nézzük meg, milyen módokon jeleníthetjük meg a filtereket. A Pronto a jelölőnégyzeteket használja. Ez a legjobb megoldás, mert egyértelművé teszi a látogató számára, hogy melyek azok a tulajdonságok, amiket kiválasztott. Fontos, hogy ne csak akkor történjen meg a kijelölés, mikor a felhasználó a négyzetbe kattint, hanem akkor is mikor a szövegre.

Opciók megjelenítése

A Motorcyce-supertstore szűrője is a fenti megoldáshoz hasonló, csak itt nem négyzetek vannak.

Opciók megjelenítése

A Gamestop linkeket használ. Ilyenkor figyeljünk oda, hogy mindenképp legyen pathway, hogy a felhasználó tudja, hogy miket választott ki.

Opciók megjelenítése

Terméklista feletti elhelyezésnél a legördülő menüket használjuk. Sajnos, ennek nagy hiányossága, hogy egyszerre csak egy opciót tudunk kijelölni.

Opciók megjelenítése
A Nordstrom viszont megoldotta az előbbi problémát. Legördülő ablakában több opciót is kiválaszthatunk egyszerre.

Opciók megjelenítése

15. Vizuális illusztráció

Bizonyos szűrők eseten a vizuális megjelenítés segíti a felhasználót, hogy könnyebben értelmezze az adott opciót. A legjobb példa erre a színek megjelenítése. Ha a Swimoutlet szűrőjében nem lennének kis négyzetekkel reprezentálva az adott színek, biztos lenne olyan, akik nem tudná, hogy most milyen is a burgundi szín. Ezért a színeket mindig érdemes illusztrálni.

Vizuális illusztráció

A Glassesshop a szemüvegkeretek formáinál alkalmazza a vizuális ábrázolást. Emellett a keretszélesség és a lencse szélességet is illusztrálja.

Vizuális illusztráció

16. Mennyiségek kezelése

Ha egy adott jellemző nem szöveges, hanem mennyiségi (pl. ár- vagy súlymérték), akkor annak megjelenítése többféleképpen történhet.

Például előre definiált intervallumokat állíthatunk be. Ez így olyan lesz, mintha csak szöveges tulajdonságokat kezelnénk. A Shopping.Yahoo.com oldalon lehetőségünk van manuálisan is beírni az intervallum határait.

Mennyiségek kezelése

Igen gyakori megoldás még a csúszka használata. Ezt úgy célszerű kialakítani, hogy legyen egy minimális intervallum a minimum és a maximum pont között. Ezáltal csökkentjük annak esélyét, hogy a vásárló üres terméklistához jut.

Mennyiségek kezelése

17. Termékértékelés, mint szűrő

A termékértékelések igen fontosak egy webáruházban. Ezért gyűjtsük őket szorgosan, és ha már sok van, érdemes elgondolkodnunk egy olyan filter bevezetésén, ami ez alapján szűr.

Termékértékelés, mint szűrő
Azért is lényeges, hogy minden termékünk értékelve legyen, mert ennek a funkciónak van egy hátránya. A nem értékelt termékek nem jelennek meg a listában. Erre érdemes felhívni a figyelmet, mint az alábbi példában.

Termékértékelés, mint szűrő

18. Találatok száma

A szűrés után lehetőleg a terméklista felett mutassuk meg, hogy mennyi termék maradt a listában. Ez hasznos információ lesz a felhasználónak. A Bestbuy több helyen is jelzi ezt.

Találatok száma

19. Adatok gyűjtése

Valahányszor használják szűrési rendszerünket, mi értékes adatokat gyűjthetünk. Például találjuk meg azokat a termékeket, amelyek a legnépszerűbbek a szűrőket használók körében, majd ezeket a termékeket tegyük a találati lista tetejére. Derítsük ki melyek a nem használt opciók, majd töröljük azokat. Helyettük keressünk relevánsabb tulajdonságokat.

Vizsgáljuk meg azokat a keresési feltételeket, amiket kevésbé használnak. Az ezekből nyert tapasztalatok segítenek majd szűrőnk fejlesztésében.

20. Egy példa a kiváló szűrésre

Gyűjtésünk során találtunk egy példaértékű szűrési rendszert, amit szeretnénk olvasóink figyelmébe ajánlani. A Myntra szinte minden fentebb leírt követelménynek megfelel, ráadásul igen letisztult formában teszi ezt. Röviden foglaljuk össze, mik is ezek a pontok:

  1. Egy átlagos ruházati webáruházhoz képest sokkal több szűrője van.

  2. Ezek függőlegesen és vízszintesen vannak elhelyezve a könnyebb átláthatóság és kezelhetőség kedvéért, ráadásul a függőleges filterek kinyithatók/bezárhatók.

  3. A már kijelölt tulajdonságokat egy nagy X kíséretében mutatja a pathway-ben, amelyeket így rendkívül egyszerű törölni, de lehetőségünk van egyszerre is törölni őket (reset all).

  4. A sok szűrőfeltételt egy „more”-ral oldja meg, ráadásul azt is mutatja, hogy ez alatt mennyi további opció rejtőzik.

  5. A szöveges tulajdonságokat jelölőnégyezetes megoldással jeleníti meg, de a névre kattintva is megtehető ugyanez.

  6. Egyszerre több filter is kijelölhető és mutatja a kilistázott termékek számát is.

  7. Az árszűrőhöz csúszkát használ, a színeket vizuálisan jeleníti meg.

  8. Az akciókat kereső látogatókat is kiszolgálja.

  9. Jelzi, hogy mennyi termék van a listában, és viszonylag gyorsan frissül a terméklista is.

Egy példa a kiváló szűrésre

Bónusz tipp: szűrőink ne csak a kategóriaoldalakon jelenjenek meg, hanem a keresési eredmények oldalán is. Mikor a látogató használja belső keresőnket, és a találatok száma sok, ez egy hasznos funkció lesz számára az eredmények további szűkítéséhez.

Végezetül nézzük meg, hogyan válasszuk ki saját szűrőfeltételeinket?

Alapjáraton a termékek gyártójától kapott leírásban szereplő paraméterekből választjuk az egyes opciókat. Ugyanakkor számos módja van annak, hogy eldöntsük, milyen szűrési szempontok lennének még hasznosak:

  1. Nézzük meg, hogy saját webáruházunkban milyen feltételek állnak rendelkezésre, amelyek fontosak lehetnek: például extra garancia, ingyenes házhozszállítás, új vagy akciós, ajándék, értékelés, vásárlói vélemények, raktárstátusz, házhozszállítás, vagy valamilyen szolgáltatás rendelkezésre állása, ami csak nálunk létezik. Bármi elképzelhető, ami fontos lehet vásárlóinknak, és létező, szűrhető terméktulajdonság.

  2. Saját vagy más webáruházakban, esetleg fórumokban lévő vélemények alapján meghatározzuk, hogy melyek a vásárlóink számára fontos terméktulajdonságok és keresőszavak. Ebben akár az ügyfélszolgálatunk is segíthet. Figyeljük meg az érdeklődő e-maileket és telefonokat.

  3. Termékteszteket, szakcikkeket olvasva is találhatunk ilyeneket. Ezek gyakran meghatározzák bizonyos vásárlói kör preferenciáit, vásárlói döntéseit.

  4. Kulcsszókutatást végezve képet kaphatunk a piacunkon gyakori keresési kifejezésekből, amiket aztán nem csak a keresőoptimalizáláshoz, hanem a termékinformációkhoz és szűrési paraméterekhez is használhatunk.

  5. Az oldalunkon végzett keresésekből megtudhatjuk, mire, milyen tulajdonságra kerestek látogatóink, miket tartanak ők fontosnak.

Ha szűrőink nem olyanok, mint a fentebb leírtak, gondolkodjunk el az átalakításukon. Ha nincs ötletünk arra, hogy termékeinket milyen tulajdonságok alapján szűrhetnénk, nézzünk körül versenytársaink háza táján. Még ennél is jobb ötletforrás lehet, ha külföldi konkurenseink szűrőit vizsgáljuk meg.

Összefoglalva az itt felsorolt tippeket, a szűrési rendszerünk milyensége nagyban javíthatja vagy ronthatja a felhasználói élményt. Ezért annak kialakítását nem szabad félvállról vennünk, hiszen mint minden dizájn elem, ez is jelentős hatással van a vásárlásokra.

Reméljük, hogy érdekesnek és hasznosnak találta cikkünket! Amennyiben hiányol belőle valamit, vagy csak észrevétele támadt, kérjük írja meg a hozzászólások között!


#
K. László
Alapos és hasznos cikk. Köszi.

Már osztom is meg.
#
Zoli
Emelem kalapom a cikk írójának!
Kérjük írd be a képen látható kódot
Biztonsági kód Új kódot kérek
Szeretnék e-mail értesítést kapni az új hozzászólásokról!
Ha szeretnél további webáruházas tippeket, iratkozz fel heti értesítőnkre!
Van már webáruházad?