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

Hamarosan megkapja heti webáruházas tippjeit.

Egy webáruházban a kategóriaoldal olyan, mint egy közlekedési csomópont. Az ide érkező látogatónak ugyanis számos választási lehetősége van, hogy merre menjen tovább. Ezért maximálisan törekednünk kell arra, hogy oldalunk segítse a látogatót a továbblépésben.

25 tipp a hatékony kategóriaoldalért

Ha nagyon le kellene egyszerűsíteni a mondandónkat, a kategóriaoldalainknak a látogató szemszögéből releváns termékeket és ösztönző ajánlatokat kell tartalmaznia, mindezt a megfelelő elrendezésben, kiegészítve a felhasználói élményt növelő funkciókkal.

Az elmúlt egy évben több olyan cikkünk is megjelent, amelyek számos gyakorlati tippet tartalmaztak egy webáruház kialakításával kapcsolatban.

Ezekkel célunk az volt, hogy segítsünk olvasóinknak egy olyan webáruházat megalkotni, amely funkcionalitásában megfelel a vásárlók elvárásainak, s ennek köszönhetően az oldalra érkező látogatók minél nagyobb arányban váljanak azonnal vagy a későbbiek során vásárlóvá.

Írtunk a fő- , termék-, kosár- és pénztároldal hatékony kialakításáról. Ezek a vásárlási folyamat tipikus oldalai, és a felsorolásból is kitűnik, hogy a kategóriaoldalakkal még adósok maradtunk. Nézzük meg ezt az oldaltípust is.

A hatékony kategóriaoldal fő ismérvei

Egy optimálisan felépített kategórioldalnak egyetlen célja van: segítse a látogatót abban, hogy kiválaszthassa a számára megfelelő terméket. Tehát nem elsősorban a termék megvásárlása a cél, hiszen arra ott lesz a termékoldal, ahol minden lényeges információt fel tudunk sorolni, ami a vásárláshoz szükséges.

A kategóriaoldal céljának eléréséhez pedig egyrészt arra lesz szükségünk, hogy a lehető legjobb módon prezentáljuk a termékeinket (elegendő információval, ami a továbblépéshez szükséges), másrészt segítsük a látogatót, hogy a kilistázott termékekből pár kattintással megtalálja a számára megfelelőt (amihez jól jön többek között a szűrési rendszer).

Tehát meg kell vizsgálnunk a látogatóink szemszögéből, hogy milyen információkra van szükség ahhoz, hogy eldöntsük, az A, B és C termék közül számunkra melyik az érdekes. Elegendő-e a termékkép, terméknév, ár hármas mondjuk, vagy szükségünk van egyéb információkra is? Például rövid leírásra, méretre, anyagösszetételre stb.

Továbbá arra is lehetőséget kell biztosítanunk a látogatóinknak, hogy maximum 2-3 kattintás után a megfelelő termékoldalon találhassák magukat.

Itt azért zárójelben megjegyeznénk, hogy előfordulhatnak olyan webáruházak, ahol minimális információ elegendő ahhoz, hogy egy terméket a kosárba tegyünk. Például, ha a vevőkörünk szakképzett, visszatérő vásárlókból áll, úgy ők adott esetben egy kategóriaoldalról is eljuthatnak a pénztár és kosár oldalakra. Tehát az esetek kis részében előfordulhat, hogy a látogatók egyszerűen kihagyják a termékoldalt a vásárlási folyamatból. Viszont ez a webáruházak többségére nem feltétlenül jellemző.

A következőkben azt mutatjuk meg, hogy hogyan tehetjük hatékonyabbá a kategóriaoldalakat.

1. Szűrők használata

Korábbi cikkünkben részletesen írtunk a szűrők megfelelő használatáról, ezért itt csak említés szintjén foglalkozunk vele. Fontos, hogy a felhasználók rá tudjanak szűrni egy terméklistára. Ezzel meggyorsítjuk a keresési folyamatot, így téve könnyebbé a vásárlás keresési fázisát.

A szűrési lehetőségeket hagyományosan a webáruház bal oldalán, függőlegesen helyezik el, de ma már egyre többször látunk példát a vízszintes elhelyezésre (kevés terméktulajdonság esetén érdemes), vagy a kettő kombinálására.

A Buyakilt.com webáruháznál mielőtt végleg bevezették volna a termékszűrőket, lefutattak egy A/B tesztet. Ebben 76%-os bevétel növekedést tapasztaltak a szűrési rendszernek köszönhetően, így adta magát, hogy változtatni kell az oldalon.

Ugyanakkor figyeljünk oda, hogy a szűrőt ne helyezzük el olyan kategóriáknál, ahol csak megzavarja a termék megjelenítését, és plusz segítséget nem nyújt a kereséshez. Ez ugyanis a konverziós ráta csökkenéséhez is vezethet.

Példa erre az UKToolCentre webshop, ahol egy tesztben éppen, hogy a szűrők törlésével értek el 27 százalékkal több kattintást a termékoldalak felé.

A szűrők a legtöbb esetben biztosan hasznunkra lesznek, de mint látható, lesz olyan eset is, amikor nincs rájuk szükség. Ezért, ha nem vagyunk biztosak a létjogosultságunkban, mindenképp végezzünk teszteket. Íme néhány példa:

Hagyományos baloldali elhelyezés:

Musiciansfriend függőleges szűrő

MusiciansFriend.com

Terméklista fölötti elhelyezés:

Nordstrom vízszintes szűrő

Nordstrom.com

2. Kategória-specifikus sorba rendezési lehetőségek

Először is fontos, hogy a hagyományos sorba rendezési elveket mindenképp szerepeltessük. Ezek általában a következőek: ár, listához adás dátuma, legnépszerűbb termékek, abc, vásárlói értékelések, vagy akár a megtakarítás mértéke szerinti sorba rendezés.

Emellett hagyjuk, hogy a látogató maga döntse el, hogy csökkenő vagy növekvő sorrendben jelenítse meg a tételeket. Ez lehet egy külön gomb (fel-le nyíl), amelyre rá kell nyomnunk a sorba rendezés után, vagy tartalmazhatja egy külön választásként maga a funkció, mint az alábbi példában.

Srugstore sorba rendezés

Drugstore.com

Szeretnénk felhívni rá a figyelmet, hogy sokkal több lehetőség rejlik ebben a funkcióban, mint az elsőre gondolnánk. A webáruházak használhatóságával foglalkozó intézet, a Baymard Institute egy a közelmúltban megjelent cikkében felvetette, hogy az áruházaknak érdemes lehet kategória-specifikus sorba rendezési lehetőségeket is biztosítania. Ennek ellenére kutatásukban azt tapasztalták, hogy az általuk vizsgált 50 legnagyobb webáruház egyike sem használ ilyet.

A funkció hasznosságát a következő példával szemlélteti:

Képzeljük, el hogy valaki venni akar egy könnyű országúti kerékpárt, amelyre maximum 2000 dollárt szán. Miután kilistázza az országúti kerékpárokat egy olyan boltban, ahol a termékoldalon jelzik a kerékpárok súlyát, a következőt látja:

Baymard sorba rendezés

Szűrheti és sorba rendezheti a termékeket, de mivel csak a szokásos sorba rendezési lehetőségek vannak, a látogató csak a szűrőkre hagyatkozhat, hogy megtalálja a számára leginkább megfelelő terméket.

Rászűr a 2000 dollár alatti biciklikre, és a filterek közül kiválasztja a legalacsonyabb súlykategóriát. Ekkor 18 biciklit kap, és ezután egyenként kell végignéznie a kapott találatokat ahhoz, hogy megkeresse a legkönnyebb kerékpárt.

De mi lenne, ha a felhasználó súly szerint is sorba tudná rendezni a bicikliket? Ekkor a vásárlónak lenne egy súly szerint sorba rakott listája azokról az országúti kerékpárokról, melyeknek az ára 2000 dollár alatt van, és ezek közül pillanatok alatt megtalálhatná a legkönnyebb biciklit, majd a második legkönnyebbet, a harmadikat és így tovább.

Baymard kategória-specifikus sorba rendezés

Szóval látható, hogy a kategória-specifikus sorba rendezési lehetőség tényleg hasznos funkció, ráadásul szinte senki sem alkalmazza még. Ezért a bevezetése esetén egy olyan plusz funkcióra tehetünk szert, amely jó eséllyel a versenytársaknál még nem érhető el.

3. Sorba rendezési funkció elhelyezése

Apróság, de a használhatóságot növeli, ha a terméklista alján is van lehetőségünk rendezési szempontot állítani.

Costco sorba rendezés

Costco.com

4. Alapértelmezett sorba rendezés

Amikor egy webáruház kilistázza nekünk a termékeket, azt egy alapértelmezett sorba rendezési szempont szerint teszi.

Célszerű ezt úgy beállítanunk, hogy alapértelmezettként a kiemelt vagy a legnépszerűbb termékek legyenek beállítva, így egy adott kategóriában ezek a termékek lesznek a legjobb helyeken. Ez azért fontos, mert jó eséllyel a látogatók is ezeket a termékeket keresik.

Officemax Homedepot

OfficeMax.com                                    HomeDepot.com

5. Sorba rendezési és megjelenítés beállítások elmentése

Mikor a látogató átnavigál egy másik kategóriaoldalra, vagy csak visszatér oda egy termékoldalról, célszerű ugyanazokat a megjelenítési és sorba rendezési szempontokat használni, amelyeket már előzőleg beállított. Ez nagyban megkönnyíti a böngészést.

6. Terméklisták kezelhetősége

Nézzünk pár apró, de hasznos funkciót, amelyek javítják a használhatóságot.

  • Hasznos, ha a felhasználó tisztában van azzal, hogy mennyi termék van a listában.

Walmart termékszám Pcconnection termékszám

Walmart.com                                                PCConnection.com

  • Nem szabad az összes terméket egy oldalon kilistáznunk, mert az csökkenti az oldalbetöltődést. Válasszunk egy adott elemszámot, amelyet megjelenítünk, de ettől függetlenül hagyjunk pár választási lehetőséget, hogy a látogató döntse el, hogy mennyi terméket akar látni egy oldalon.

Grainger adott elemszám

Grainger.com

  • Vannak webáruházak, amelyeknél az összes terméket kilistázhatjuk egy oldalra.

Officemax összes elem egy oldalon

OfficeMax.com

  • Jelezhetjük azt is, hogy mennyi oldalból áll az adott terméklista

Macys oldalszám kijelzése

Macys.com

  • Könnyítsük meg a terméklista oldalai közötti navigációt úgy, hogy nemcsak egy „előző” „következő” gombot teszünk ki, de a közeli oldalak számozását is feltüntetjük.

CDW számozás

CDW.com

Newegg számozás

Newegg.com

7. Rács vagy listanézet?

Mikor kategóriaoldalunk kinézetén gondolkodunk, az elsők között kell eldöntenünk, hogy milyen megjelenítési mód illik a legjobban termékeinkhez. Ez lehet rács- vagy listanézet.

Rácsnézet

Sony rácsnézet

Sony.com

A rácsos elrendezés általában jól működik akkor, mikor egy jó minőségű kép segítségével szinte az összes fontos kérdést megválaszolhatjuk, ami a látogatókban felmerül, és emiatt csak egy minimális szöveg elhelyezése szükséges.

Előnye, hogy a képek megadhatják az összes olyan információt, amely a termékek megkülönböztetéséhez szükséges. Mivel így több terméket jeleníthetünk meg egy oldalon, a látogatónak nem kell olyan sok oldalt végigböngésznie, amivel időt és energiát takarít meg.

Hátránya, hogy ha képeink nem a legjobb minőségűek, torzulhat a látogatók véleménye a termékről. Ezért, ha rácsnézetet használunk, a jó minőségű képek kritikus fontosságúak.

Listanézet

Sony listanézet

Sony.com

A listák akkor tűnnek jobb választásnak, amikor több információra van szüksége a látogatónak ahhoz, hogy különbséget tegyen a termékek között.

Előnye, hogy mikor a képek nem elegendőek ahhoz, hogy a vevő megkülönböztesse a termékeket egymástól, a listanézet lehetőséget ad arra, hogy több részletet jelenítsünk meg a termékről. Ugyanakkor még mindig van hely egy képnek is.

Hátránya, hogy egy oldalon nem lehet olyan sok termék, különben túlzsúfolnánk kategóriaoldalainkat. A felhasználóknak emiatt általában szűrniük és sorba rendezniük kell, hogy megtalálják a keresett terméket. Ráadásul a részletes leírások létrehozása a teljes termékkínálatunkra, sok időt vehet igénybe.

A két nézet közötti választást persze segítheti, ha mindkettőt használjuk, azaz a látogató tudja szabályozni, hogy milyen módon szeretné látni a kategóriában szereplő termékeket.

8. Termékek kiemelése

Egyes webáruházak szívesen emelnek ki termékeket a kategóriaoldalon. Az LLBean egy nagyobb képpel és egy részletesebb leírással emeli ki az első terméket a tömegből.

LLBean termékek kiemelése

A Newegg a terméklista fölé helyez ki egy terméket.

Newegg termékek kiemelése

Akár több terméket is helyezhetünk a lista fölé.

Costco termékek kiemelése

Costco.com

9. Banner a terméklista fölött

Sok webáruház használja a terméklista és a főmenü közötti területet egy termék vagy termékkör kiemelésére. Sokszor dinamikus bannerekkel valósítják meg ezt, hogy többféle terméket bemutathassanak a látogatóknak.

Bestbuy banner a terméklista felett

Bestbuy.com

10. Utoljára megtekintett termékek

Megkönnyíthetjük a navigációt, ha ezt a funkciót többek között a kategóriaoldalra is kihelyezzük.

Cabelas utoljára megtekintett termékek

Cabelas.com

11. Kategória leírások

Ha a kategóriáink magyarázatra szorulnak, vagy csak mi magunk szeretnénk több vágyat ébreszteni a termékeink iránt, használhatunk kategória leírásokat. Ráadásul ez besegít a kategóriaoldalak keresőoptimalizációjába is.

Drugstore kategória leírás

Drugstore.com

Ha a leírás túl hosszú, és úgy érezzük, hogy ez rontja a oldal átláthatóságát (érdemes letesztelni), rejtsük el a szöveg nagy részét, és csináljuk úgy, mint a Staples. Ők elhelyeztek egy „Read more” gombot a hosszú termékleírásokhoz, így nem zavarják azokat, akiket a leírás nem érdekel.

Staples kategória leírás

Kibontva az oldalt, így néz ki:

Staples kibonott kategória leírás

12. Visszajelzés

A visszajelzés mindig fontos. A PCM.com a terméklistáinak az alján a következő kérdést helyezte el azért, hogy egy egyszerű visszajelzést kérjen a felhasználóitól: "Megtalálta, amit keresett?"

Visszajelzés

13. Mindig látható kereső mező

Ha a látogató nem találja meg, amit keres, fontos, hogy oldalunk keresője mindig szem előtt legyen. Ez természetesen a kategóriaoldalra is vonatkozik.

Toysrus belső kereső

ToysRus.com

14. Címkék használata

Bizonyos termékek esetén a képeket megcímkézhetjük, így adva hangsúlyt egy termék többitől eltérő jellemzőjének.

Példák az akciós termékek címkézésére:

Crumpler akciót jelző termékcímke

Crumpler.com

Wayfair napi akció

Wayfair.com

Új termékek:

Új terméket jelző címke

Wayfair.com

Legnépszerűbb termékek:

Legjobban fogyó termékek

Walmart.com

15. Ár- és készletinformációk mutatása

A következő alapinformációkat ne csak a termékoldalon jelenítsük meg, hanem lehetőleg már itt is.

  • Termékárak

Ne kelljen a látogatóknak csak azért bemennie a termékoldalra, hogy tisztában legyen egy termék árával. Ha egy terméknek több ára van, akkor adjunk meg legalább egy intervallumot.

  • Készletinformáció

Jelezzük, hogy raktáron van-e az adott termék.

Készletinformáció

CDW.com

Ha a fentinél részletesebb készletinformációnk vannak, de nem szeretnénk túlzsúfolni az oldalt, a részletek megjelenhetnek akkor is, mikor a kurzort a szöveg fölé visszük.

Evancycles részletes készletinformáció

Evancycles.com

A ruházati termékek tipikusan többféle mérettel rendelkeznek. Ilyenkor egy „raktáron” megjegyzés félrevezető lehet, hiszen ettől még nem biztos, hogy a megfelelő méret is a rendelkezésünkre áll.

Ezért ne csak azt jelezzük, hogy van-e raktáron az adott termékből, hanem azt is, hogy milyen méretekkel tudunk szolgálni. Ezt is célszerű egy kurzorra felugró ablakkal megoldani.

Snowandrock részletes készletinformáció

SnowandRock.com

16. Alacsony készletszint jelzése

A Fugitivetoys azzal, hogy piros színnel jelzi, már csak egy darab van az adott termékből, nemcsak egy hasznos információt szolgáltat, de hatékonyan felkelti a sürgősség érzetet is a látogatóban.

Fugitivetoys alacsony készletszint kijelzése

Címkékkel is megoldhatjuk.

Promgirl alacsony készletszint jelzése címkével

Promgirl.com

17. Termék-összehasonlítás

Ha van oldal, ahol a legkönnyebben használható ez a funkció, akkor az a kategóriaoldal lesz. A Staples checkbox-okat használ a termékképek mellett.

Termék-összehasonlítás

18. Kívánságlista

Ha használunk kívánságlistát, miért ne engednénk már a kategóriaoldalról a listába tenni a terméket? A Victoriassecret ötletesen oldja ezt meg.

Kívánságlista

19. Kosárhoz adás gomb

Ha már itt elhelyezzük, azzal teljes egészében kikerülhető a termékoldal, és lerövidíthetjük a vásárlói folyamatot.

Kosárhoz adás gomb listanézet

PCM.com

Hayneedle kosárhoz adás gomb rácsnézet

Hayneedle.com

20. Ingyenes szállítás

Mindenképen jelezzük, ha egy terméket ingyenesen szállítunk. Ez egy igen jó vásárlás-ösztönző. Nem engedhetjük meg magunknak, hogy csak a termékoldalon hívjuk fel rá a figyelmet.

Ez különösen igaz akkor, mikor nem az összes terméket szállítjuk ingyen, hanem egy minimum rendelési értékhez kötjük a szolgáltatást. Ez az összeg persze összejöhet több kisebb értékű tételből is, de azoknál a termékeknél, ahol a termék ára átlépi az ingyenes szállításhoz szükséges minimum rendelési értéket, jelezzük ezt valahogy.

Ingyenes szállítás listanézet

Build.com

Ingyenes szállítás rácsnézet

Rakuten.com

21. Akciós ár kiemelése

Ha a termék akciós, írjuk ki az eredeti és az akciós árat is. Az eredeti árat célszerű áthúznunk.

Walgreens akciós ár kiemelése

Walgreens.com

A megtakarítás mértékét is megmutathatjuk százalékban vagy fix összegben kifejezve. Ez az elemző típusú látogatóink számára lesz egy jó kis ösztönző.

Drugstore megtakarítás mértékének jelzése

Drugstore.com

22. Vásárlói értékelések

Köztudott, hogy más vásárlók értékelései nagy szerepet játszanak a vásárlói döntésben. Ezért, ha arra nincs is helyünk, hogy megjelenítsük szöveges értékeléseket, egy csillagos értékelés azért itt is elférhet.

Nordstrom vásárlói értékelés

Nordstrom.com

23. Villámnézet (gyorsnézet)

A navigációt megkönnyítő elem, mikor egy villámnézet funkciót építünk be a kategóriaoldalba. Ilyenkor gyakorlatilag egy kis „termékoldal” ugrik fel nekünk, ahonnan kosárba tehetjük a terméket.

A villámnézet lehetősége sok webáruházban csak akkor jelenik meg, ha az egeret a termékkép fölé mozgatjuk.

Villámnézet

Gap.com

Van, amikor mindig látható:

LLBean gyorsnézet

LLBean.com

A felugró ablakban sokszor további képeket, méret- és színválasztót és további leírásokat is találunk.

HSN villámnézet felugró ablaka

HSN.com

24. Képek váltakozása

A kategóriaoldal azoknál a termékeknél, ahol egyetlen kép nem elegendő a megfelelő bemutatáshoz, a legtöbbször tényleg csak egy navigációs pont lesz. Ilyenkor a látogató egyből továbblép a termékoldalra, hogy megnézze a további képeket, majd egyből vissza is navigál, ha nem teszik, amit ott lát. Ez az oda-vissza lépegetés viszont eltarthat egy darabig.

Ilyenkor megkönnyíthetjük a vásárlóink dolgát, ha több képet is megjelenítünk a kategóriaoldalon. Mindezt persze úgy, hogy ne foglaljanak el plusz helyet a további képek.

Ezt legegyszerűbben úgy oldhatjuk meg, ha ezek a plusz képek, csak akkor jelennek meg, mikor az egeret a termékkép fölé visszük.

AE több kép váltakozása  AE több kép váltakozása

AE.com

Változtatható színek

Egy kicsit hasonló az előzőhöz, csak ennek nem a több aspektusból való bemutatás a célja, hanem a több színben való megjelenítés. A cél itt is az, hogy a látogatónak ne kelljen a termékoldalra lépnie csak emiatt.

RalphLauren változtatható színek  RalphLauren változtatható színek

RalphLauren.com

25. További információs doboz

Ha szeretnénk több információt megjeleníteni, de nem akarjuk túlzsúfolni az oldalt, használjunk felugró információs ablakokat, amelyek akkor jelennek meg, ha egy adott rész fölé visszük az egeret, vagy rákattintunk a megfelelő gombra.

CDW további információk

CDW.com

A Skechers webáruház megmutatja nekünk, milyen színekkel kapható még a termék.

Skechers további színek

Zárszó

Ha fenti gyakorlati tippekből megfogadjuk azokat, amelyek illenek a termékkörünkhöz, akkor a kategóriaoldalaink úgy fognak működni, mint egy közlekedési tábla, amely továbbtereli a látogatót a vásárlási folyamatban.

Végezetül szeretnénk megjegyezni, hogy mindig érdemes letesztelni egy adott funkció hatásosságát, mert, ahogy az a termékszűrős esettanulmányokból is látszik, ami az egyik webáruházban csodákra képes, az a másikban még ronthatja is a konverziót.

A tesztelést végezhetjük az A/B tesztes módszerrel, vagy csinálhatunk úgynevezett használhatósági teszteléseket is, valódi felhasználókkal.

Egy biztos, a kategóriaoldalunk optimalizálásával nagyban segítjük a vásárlók navigációját. Így jelentősen csökkenthetjük azoknak az oldalelhagyásoknak a számát, mikor a látogatók egyszerűen csak azért állnak tovább, mert nem találják meg a keresett terméket.

Természetesen a vásárlási folyamat összes oldalát érdemes optimalizálni, és akkor a várt javulás sem fog elmaradni. Ehhez pedig reméljük, hogy nem csak a korábbi, de a jövőbeli cikkeink is segítséget nyújtanak majd.

#
Péter
A kategória-specifikus sorba rendezés érdekes ötlet.

Köszi.
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?