40 legjobb HTML bevásárlókosár weboldal dizájn sablon

Ebben az összeállításban be szeretnénk mutatni, az online kereskedők hogyan közelítették meg bevásárlókosaruk oldalainak elrendezését. Az ilyen oldalak rendkívül kritikusak az ügyfél vásárlási folyamatához, mégis, gyakran úgy érezzük, a legtöbbet mintha csak összedobták volna. Igen, a bevásárlókosár oldalt nagyon nehéz megtervezni.

Ideális esetben tartalmaznia kell a termékösszefoglalást, a promóciós mezőt, a többszörös fizetési lehetőségeket, a szállítási módokat, a végső árképzést, az adatvédelmi és visszatérítési szabályzatot, a kiegészítő termékeket, a vásárlás folytatását vagy a fizetéshez kapcsolódó linkeket.

A bevásárlókosarat alaposan át kell gondolni a tervezési folyamat során, mert a munkád jövőbeni sikere attól függ, hogy sikerül-e az ügyfeleket a fizetési folyamathoz irányítanod.

Az egyes bevásárlókosarák fő célja, hogy az ügyfelet a fizetéshez vezessék, de hogyan tudod ezt hatékonyabban megvalósítani?

Ez a cikk először 2011-ben jelent meg, amikor 42 jól ismert online áruházat választottunk ki elemzésre és a kosarak használati statisztikájának bemutatására. De az idők változnak, és a bevásárlókosár-dizájn megközelítése is megváltozott. Ezért úgy döntöttünk, ismét megnézzük ugyanazokat az online áruházakat, hogy ellenőrizzük a bevásárlókosár oldalain végrehajtott változtatásokat az elmúlt 4 évben. Meglepő módon a legtöbb oldal egyszerűbbé és minimalistabbá vált. Nem fogsz látni nyilakat és további ikonokat még a legnagyobb e-kereskedelmi boltok gombjain sem, lakonikus "Fizetés" parancsot gyakrabban használnak. A mai példák azt mutatják, hogy az online kiskereskedők többnyire:

• színessel jelölik a fizetés gombot (26 alkalommal);
• néha vizuális kiegészítő nyilakat építenek be (4 alkalommal);
• vagy bevásárlókosár ikonokat adnak hozzá (1 alkalommal) a cselekvésre hívó szöveghez

Néha a fizetés gombok felirata eltérő lehet.

• az esetek többségében a "fizetés" szót látjuk (24 alkalommal);
• más népszerű kifejezések "tovább a fizetéshez" (10 alkalommal);
• "tovább a vásárláshoz" (2 alkalommal);
• "tovább a megrendeléshez" (1 alkalommal);
• "irány a fizetés" (1 alkalommal);
• "tovább" (2 alkalommal);
• "vásároljon most" (2 alkalommal);
• "vásárlás megkezdése" (1 alkalommal)

A biztonsági pecsétek különösen népszerűvé váltak, hiszen a vásárlókban 50%-kal növelik a bolt iránti bizalmat és az áruház hitelességét. Egy frissen végzett Baymard felmérés szerint a Norton a legmegbízhatóbb a maga 35,6% -val, a McAffee 22,9% -kal a második helyezett. Mégis, a listánkon szereplő mindössze 12 áruház használja ezeket a pecséteket.

Amikor a felhasználók úgy döntenek, hogy fizetnek, egy sor végleges listát kell bemutatni a megrendeléshez tartozó elemekről, valamint a fizetési módokról. Láthatod, hogy a listában szereplő nem minden bevásárlókosár oldal tartalmazza a fizetési lehetőség mellett a hitelkártya logóját; azonban ez az apró kiegészítés felettébb kényelmes lehet. Plusz, jegyezd meg - egy jó bevásárlókosárnak biztonságos pecsétekkel kell rendelkeznie a biztonságos tranzakciók és a megfelelő biztonsági előírások biztosítása érdekében.

Ezen szempontok betartásával bevásárlókosarad sokkal kecsegtetőbb lesz az ügyfelek számára, ezért feltétlenül fontold meg ennek az oldalnak a következő szintre emelését. Most szerezhetsz néhány hasznos elképzelést ezeknek a kosaraknak a megtekintésével. Összegyűjtöttük a 40 legjobb bevásárlókosár dizájnt. Kétségtelen, hogy az ügyfeleknek kellemes bevásárlási élményt nyújtanak. A blogbejegyzés angol verziója itt olvasható: 40+ Best Shopping Cart Page Design Templates

1. Yoox.com

***

2. AE.com

***

3. FaucetFace.com

***

4. DeathWishCoffee.com

***

5. Store.Apple.com

***

6. Gucci.com

***

7. Skinny-Teatox.com

***

8. SurfDome.com

***

9. MarcJacobs.com

***

10. Shop.AcneStudios.com

***

11. Shop.Guess.com

***

12. JuicyCouture.com

***

13. Shop.Puma.com

***

14. TopShop.com

***

15. NoonCopenhagen.com

***

16. FlatSpot.com

***

17. UO.com.au

***

18. US.Burberry.com

***

19. Store.DolceGabbana.com

***

20. Triangl.com

***

21. NeedaBump.com

***

22. ShopAdidas.com

***

23. Crocs.com

***

24. Case-Mate.com

***

25. JCrew.com

***

26. CardinalCase.com

***

27. Zappos.com

***

28. Shop.Mango.com

***

29. NeimanMarcus.com

***

30. Fossil.com

***

31. Tiffany.com

***

32. US.Faconnable-Store.com

***

33. Store-US.HugoBoss.com

***

34. USA.Tommy.com

***

35. ShopBop.com

***

36. FredPerry.com

***

37. CharlotteRusse.com

***

38. ShopAdam.com

***

39. BobbiBrownCosmetics.com

***

40. TheGreetingFarm.com

***

A bevásárlókosár dizájn minden szempontja fontos. A rendelkezésedre bocsájtunk egy listát, amelynek segítségével ellenőrizheted, bevásárlókosarad megfelelő-e.

1. Termék összefoglaló - a termékről, annak nevéről, további leírásairól (méret, szín stb.). A termékek mennyiségéről, áráról, a tétel eltávolításának lehetősége a bevásárlókosárban vagy olyan tulajdonságoké, mint például a méret, szín, vagy ár.

2. Szállítási módok - feltüntetted ezeket, megemlítetted a különbségeket a lehetőségek között, jelezted az árakat?

3. Promóciós kód mező - ha engedélyezed a promóciós kódok használatát, győződj meg róla, hogy van egy rész a bevásárlókosár oldalán ezeknek fenntartva. Mivel a promóció csökkenti az árat - ez pozitívan befolyásolja az ügyfél vásárlási döntését.

4. Végső árképzés - függetlenül attól, hogy van-e vagy sem, tartalmazza a kosárban lévő összes termék és a szállítás költségeit. A vásárlóknak meg kell látniuk a teljes fizetési összeget, hogy mennyit kell fizetniük a megrendelésért, az olyan meglepetések elkerülése érdekében kifizetéskor, amelyek eladási szünetet okozhatnak.

5. Többféle fizetési lehetőség - ha különböző fizetési módokat fogadsz el, mindenképpen szerepeltetned kell azokat, de nem szabad a megrendelőt azzal leterhelni, hogy 10 fizetési rendszer közül válasszon. Ideális esetben két olyan fizetési lehetőséget kínálhatsz, amelyek a legkedveltebbek az ügyfeleid között. Fontold meg a fizetési lehetőségek melletti ikonok hozzáadását (PayPal ikon, hitelkártya-ikonok). Így az ügyfelek megbizonyosodhatnak róla, hogy megbízható áruházat vezetsz, és önállóan is képesek fizetni.

6. Biztonsági pecsétek - Ha rendelkezel VeriSign Seal vagy McAfee Secure Seal pecséttel, akkor azokat a bevásárlókosár oldalára kell helyezni. Ez egy extra jele annak, hogy az ügyfelek bízhatnak benned. Ezek a pecsétek azonban fizethető opciókként kaphatók. Az alternatív lehetőség a pénztár gombjára helyezett felirat - "Tovább a fizetéshez".

7. Adatvédelmi és visszatérítési irányelvek - ne felejts el hivatkozásokat társítani ezekhez az oldalakhoz. Előnyösebb, hogy előugró ablakként is megnyíljanak (nem új lapoldalakként), így az ügyfél nem fogja elhagyni oldalt.

8. Kiegészítő termékek - kínálj kiegészítő termékeket az átlagos értékesítés vagy a"tranzakciós érték növelése érdekében". Ugyanakkor emlékezz rá, hogy az eredmény maximalizálása érdekében a termékeknek tényleg kiegészítő jellegűeknek kell lenniük, nem az eladhatatlan termékeket kell kínálni. A legjobb megoldás az, ha kedvezményt kínálsz a kiegészítő termékhez, és még fontosabb szempont - a kiegészítő termékek árának a fő termékár 50% -ánál kisebbnek kell lennie. Így az ügyfelek kényelmesen költhetik el az extra összeget, hogy javítsák a fő termékkel kapcsolatos tapasztalataikat. Ráadásul azzal, hogy kiegészítő termékkedvezményt kínálsz - a teljes összeg nem fogja meghaladni azt, amit az ügyfél a vásárlásra szánt.

9. Folytassa a vásárlást - ez egy nagyon fontos hivatkozás, amely lehetővé teszi az ügyfeleknek, hogy továbbra is megtöltsék a bevásárlókosarat termékekkel.

10. Tovább a fizetési linkre - ez a legfontosabb gomb a bevásárlókosár oldalán. A te feladatod, hogy felkeltsd rá a figyelmet - hogyan? Kiemelheted a gombot szép színnel, hogy az oldal szembetűnőbb és nagyobb méretű legyen. Megelégszel csupán egy unalmas "fizetés" felirattal? Például használj egy cselekvésre ösztönző kiírást, például az egyszerű "fizetés"-nél jobb a "tovább a fizetéshez". Ne feledd, hogy a "biztonságos fizetés" gomb felirata segítségével növelheted az e-kereskedelmi webhelyedbe vetett bizalmat (ez különösen fontos, ha nem használsz pecséteket).

A dizájn, a szöveges tartalom és a kiegészítő termékek egyedi kombinációjának megismeréséhez kísérletezned kell. Használj különböző feliratokat, színeket, gombméreteket, elhelyezéseket kiegészítő termékekhez stb. Egy jó tanácsadó a munkád értékeléséhez lehet a Google Website Optimizer, amelyről nemrég írtunk.