Az egyik legjobb dolog az online vásárlásban, hogy nem kell beállnunk egy hosszan kígyózó sorba fizetéskor. A webáruházak pénztára mindig nyitva tart és mindig rendelkezésre áll, bármikor is érkezünk oda. Ez egy kétélű fegyver az online kereskedők számára, hiszen a látogatók ugyanolyan könnyen el is hagyhatják a pénztárat, ahogy beérkeztek oda. Ezt elkerülendő, a webáruházaknak a vásárlási folyamatukat kényelmessé és egyszerűvé kell tenniük.

A való világból a mozgólépcsőt hozhatnánk fel jó párhuzamnak, ami úgy viszi A pontból B pontba a vásárlót, hogy annak semmiféle erőfeszítést sem kell tennie. Ugyanakkor, ha több tucat lépcsőfokot kell megmászni a köszönő oldalig, a felhasználó jogosan mondhatja, hogy ő ebből nem kér.

A kellemes pénztárfolyamat kialakítása azonban nem könnyű. Nézzük meg, hogyan oldotta meg ezt a problémát 5 díjnyertes magyar webáruház!

Extreme Digital

A magyar e-kereskedelem óriását valószínűleg senkinek sem kell bemutatnunk. A GKI Digital adatai alapján évek óta ez az áruház uralja a hazai online kiskereskedelmet. 6-szoros nyertese a szórakoztató elektronika kategóriának az Ország Boltja megmérettetésén, illetve 2017-ben a legnépszerűbb webpláza díjat is megszerezte.

A webáruházban több tízezer termék közül válogathatunk, a kínálat pedig a notebookoktól egészen a testápolókig terjed. De hogyan is néz ki a webáruház pénztár felülete?

A kosárig hibátlan minden, könnyű eligazodni a folyamatban és mintaszerűen működik a felület. A kosárból továbblépve az e-mail címünket kéri a bolt. Attól függően, hogy korábban regisztráltunk-e a webáruházban, a következő felületen el kell fogadnunk az ÁSZF-et és az adatvédelmi nyilatkozatot. A felület továbbra is egyértelmű és pofonegyszerű.

Egyetlen negatívum, hogy kötelező a regisztráció. Nem kapunk lehetőséget arra, hogy fiók létrehozása nélkül lépjünk tovább a pénztárba.

extreme digital teszt - egyszerű felületek

Érdekesség, hogy új vásárlóként a pénztárban értesítést kapunk fiókunk létrejöttéről, de a vásárláshoz akár egy másik e-mail címet is használhatunk. A felület ezen a ponton nem teljesen egyértelmű.

  • Miért kell megadnom még egyszer az e-mail címemet?
  • Vajon, ha új e-mail címet adok meg. akkor egy új fiók jön létre?
  • Használhatom az eredetileg megadott e-mail címemet vagy kötelező újat megadni?

Az adatok megadása oldalon kell kitöltenünk a vásárláshoz szükséges adatokat (a számlázási és szállítási címünket), illetve itt választjuk ki a szállítási és a fizetési módot.

A pénztár tervezése folyamán valószínűleg mobile first szemléletben gondolkodott az Extreme Digital, mert a felület mobil kijelzőkön sokkal összeszedettebb és átláthatóbb mint egy laptopon.

Az információkat könnyedén végig lehet futni fentről lefelé, a kiválasztott elemek kontrasztosak és könnyen felismerhetők, a szövegek jól olvashatók.

jól átlátható mobil felület

 

Ami tetszett:

  • Progress bar jelzi, hol járunk
  • Mobile first szemlélet
  • Jól használt ikonok
  • Kötelező a regisztráció, de legalább pofonegyszerű

Ami nem tetszett:

  • Kötelező regisztráció
  • Regisztrált vásárlókra szabott felület

UJKONYVEK.HU

A korábban az Ország Boltja fődíját is bezsebelő UJKONYVEK.HU könyvesbolt az UNAS bérlős webáruház rendszert használja. A webáruházban egyaránt találhatunk színezőkönyveket, science fiction könyveket és életrajzi könyveket, tehát a kínálat minden műfajt magába foglal.

A webáruház többlépéses pénztára azokból az időkből származik, amikor a felhasználói élménnyel még nem foglalkoztak komolyan az e-kereskedelemben. Ez természetesen nem jelenti azt, hogy a pénztár használhatatlan lenne, de hiányoznak belőle azok a megoldások, amelyek ma már alapkövetelménynek számítanak.

A kosár oldalon minden fontosabb információt megtalálunk, legyen szó a kosárban lévő termékekről, a végösszegről vagy a szállítási díjról. Még egy upsell modult is sikerült beépíteni a felületre.

Ami hiányzik, az a vizuális hierarchia és a következetes design. Erre jó példa a Megrendelés gomb megjelenése, amely szinte alig különbözik a mellette lévő másik 3 gombtól. Valóban csak ennyivel lenne fontosabb a Megrendelés gomb a kosár ürítésénél?

Jó felszereltség, átgondolatlan megjelenés.

A pénztár további oldalait ugyanez a kettősség jellemzi. Mindent tudnak, amit elvárhatunk tőlük, de nem segítik a felhasználót. Az Adatok Megadása oldalon 8 mezőt kell kitöltenünk, hogy továbbléphessünk.

Az áruház megkönnyíthetné a felhasználó dolgát, ha az Adatok Megadása lépést két lépésre bontaná. A vásárló így gyorsabban át tudná futni az adott oldal tartalmát és hamarabb végezne a rá bízott feladattal.

Adatok Megadása oldal

8 input mező és 1 checkbox van az Adatok Megadása oldalon. A Szállítás és fizetés oldalon az összes kiválasztható szolgáltatás leírását nyitva találjuk. A vevők legtöbbször csak a számukra érdekes szöveges tartalmakat olvassák át, tehát felesleges ennyi leírással terhelnünk őket. Arról nem is beszélve, hogy a betűk nagyon aprók, ami az idősebb felhasználók szemét hamar kifárasztja.

Minden itt van, amit tudnunk kell és annál sokkal több is...

Habár az összesítő oldalon szintén megtalálunk minden fontosabb információt, a vizuális hierarchia és az áttekinthetőség hiánya itt is megnehezíti a dolgunkat. Az oldal tetején ránk üvöltő üzenet sem teszi szimpatikusabbá a felületet.

8 input mező és 1 checkbox van az Adatok Megadása oldalon.

Van még egy hely, ahol a webshop lemaradása érezhető, ez pedig nem más mint a mobilok kijelzője. A fejlécben ugyan kiemeli a webáruház, hogy 2016-ban megnyerte az Ország Boltja fődíjat, de ez a szöveg messze kilóg a kijelzőről.

Továbbá a laptop kijelzőhöz hasonlóan itt is érezhetőek azok a problémák, amelyek a felület átláthatóságát rontják. Csak a példa kedvéért: a sárga háttérre kiírt fehér feliratok kifejezetten nehezen olvashatók.

Ami tetszett

  • Minden tud, amit egy pénztárnak tudnia kell
  • Progress bar jelzi, hol járunk
  • Gyakorlott vásárlók számára megszokott pénztár kialakítás

Ami nem tetszett

  • Kis betűméret, nehezen olvasható szövegek
  • Nincs meg a vizuális hierarchia
  • Rengeteg felesleges információval terheli a felhasználót
  • Nincs mobilra optimalizálva

SzerszamKell.hu

A 2018-ban díjat díjra halmozó (első hely az Év Webshopja, Év Webáruháza versenyen, illetve népszerűségi díj az Ország Boltja megméretettésen) SzerszamKell.hu webáruházban több mint 50 ezer elektromos gép, kerti szerszám, kéziszerszám és egyéb barkácseszköz közül válogathatunk. A bolt a ShopRenter bérelhető webáruház rendszert használja.

A webshop pénztárába lépve egy letisztult felület fogad minket. Az első oldalon mindössze a nevünket, e-mail címünket és a telefonszámunkat kell megadnunk és máris továbbléphetünk a szállítási módok kiválasztásához.

Szerszámkell első lépés

Egy jól kialakított pénztárból nem hiányozhat a progress bar, ami visszajelzést ad arról, hol járunk a vásárlásban és mennyi munkánk van még hátra a vásárlással.

A fejlécben egy bizalomépítő elem is helyet kapott, ami arra hívja fel a figyelmünket, hogy a biztonságos kapcsolatnak köszönhetően adataink jó kezekben vannak.

A szállítási módokat tartalmazó oldalon csak akkor kell megadnunk a szállítási címünket, ha futárszolgálatos szállítást választunk. Ez egy jó pont, hiszen a pénztár megkímél bennünket a felesleges erőfeszítéstől.

Találkoztunk egy zavaró megoldással is. A kötelező mezőket nem csillag jelöli, helyette csak az opcionális mezőket különböztetik meg. Ez nem túl szerencsés azok számára, akik nem gyakorlottak az online vásárlás területén.

Szerszámkell első lépés

A pénztárfolyamat érezhetően irányítja a vásárlót, hiszen a webáruház szokásos fejléce és lábléce itt már nem látható. A pénztár nem ad lehetőséget az elkalandozásokra, ami a webáruház szempontjából jó, a vásárló viszont úgy érezheti, hogy meg van kötve a keze.

A folyamat mobil eszközökön is jól áttekinthető és könnyen kezelhető marad. Ma már általános trend, hogy a webáruházakat többször nyitják meg mobilon, mint nagyobb kijelzővel rendelkező eszközökön, így a mobilos használhatóság különösen fontos szempont, ha nem akarunk vásárlásokat veszíteni.

Szerszámkell 4Ami tetszett

  • Könnyen áttekinthető és használható felület
  • Mobil eszközökön is jól használható
  • Progress bar jelzi, hol járunk
  • Tudatosan próbálják a pénztárban tartani a vásárlót

Ami nem tetszett

  • Mobilokon nem látszik a progress bar
  • Szokatlan a kötelező mezők (nem) jelölése
  • Kevésbé testreszabható a folyamat
  • A túlságosan irányított folyamat nem mindenkinek lesz szimpatikus

GlobalStore

A GlobalStore a WordPress bővítményét, a WooCommerce-t használja. Aki okostelefonokat, drónokat, okosórákat, horgászfelszereléseket és ehhez hasonló kütyüket szeretne vásárolni, itt megtalálja a számítását. A webáruház 2018-ban hazavitte az Ország Boltja minőségi díját mobilkommunikáció kategóriában.

A kosár jól áttekinthető és külön öröm, hogy már itt ki tudjuk választani a szállítási módot és megbizonyosodhatok a szállítás költségéről. Itt feltűnt, de a pénztárban lepett meg igazán az óriási színes háttér, ami a Kosár és Pénztár felirat mögött látható. Erre az óriási háttérképre nincs semmi szükség.

Global store pénztár

A harmónikaszerűen kinyíló és bezáródó lépések is inkább zavaróak mint segítenek a haladásban, hiszen minden továbbkattintás után korrigálni kell, hogy ne veszítsük szem elől az adott lépést.

A számlázási adatok űrlapon 11 mezőt kell kitölteni, hogy tovább tudjunk lépni, ráadásul hol középre, hol balra rendezve jelennek meg a megadott adatok.

Számlázási adatok megadása a Global Storeban

Emiatt és a mezők szélessége miatt a szemnek sokat kell ugrálnia. Ugyanilyen furcsán vannak elrendezve a Rendelés tartalma lépésben található táblázat adatai is.

A pénztár reszponzív ugyan, de a fent említett hibák csak fokozódnak a kisebb kijelzőn. A pénztár felirat mögötti háttér még több területet takar ki, a harmonika mechanika pedig még jobban összezavarhatja a vásárlókat, ami sokat ront a vásárlási élményen.

Global Store mobil nézet

Ami tetszett

  • Jól áttekinthető kosár
  • Reszponzív pénztár

Ami nem tetszett

  • Felesleges design elemek
  • Nem vezeti a tekintetünket a felület
  • Ide-oda ugráló pénztár lépések

KütyüBazár

A KütyüBazár.hu Magento webáruház motort használ és a nevéhez híven a legkülönfélébb kütyüket kínálja a látogatóknak, legyen az szonda vagy állatszőr eltávolító kefe. 2018-ban ez a webshop nyerte meg a Hobbi, kellék, ajándék minőségi kategória Ország Boltja díját.

Az áruház pénztára első ránézésre kifejezetten zavarosnak tűnhet. A hierarchia hiánya ugyanúgy igaz erre a felületre, mint az UJKONYVEK:HU webáruházra. Miután a tekintetünk flippergolyóként végigpattogott az egymással versengő díszek és kiemelések között, sikerült tisztázni, hogy ez nem egy kosár oldal, hanem az áruház egyoldalas pénztára.

Lentebb görgetve ugyanakkor sokat javul a helyzet. Jobban tagolt a felület és az üres területek is sokat segítenek, hogy megpihenhessen a szemünk. Ráadásul, maga folyamat is a végsőkig le van egyszerűsítve. Látszik, hogy igyekeztek minimálisra csökkenteni a felhasználóra hárított feladatok számát.

Kütyübazár adatok megadásaA pénztár nem kényszeríti a vásárlót regisztrációra. A fiókunkat egy checkbox bepipálása után létrehozhatjuk egy jelszó megadásával. Hasonlóan oldották meg a céges számlázást és a szállítási címtől eltérő számlázási cím megadását is. Ezeket a checkboxokat gyorsan át lehet futni, így gyorsan el tudjuk dönteni mi az, ami bennünket érint és mi az, ami nem.

A pénztár reszponzív, így lényegében a laptopon észlelt minden előny és hátrány továbböröklődik a kisebb kijelzőkre is. Első ránézésre mobil kijelzőn is zavaros a felület, de a pénztár egyszerűsége sokat segít abban, hogy minél gyorsabban befejezzük a vásárlást.

Ami tetszett

  • Végletekig egyszerűsített vásárlás
  • Reszponzív

Ami nem tetszett

  • Első ránézésre zavaros a pénztár felülete

A teszt során láthattuk, hogy még a sok díjat elnyerő webáruházak pénztárfolyamata is hagy némi kívánnivalót maga után mind design, mind használhatóság szempontból. Ugyanakkor a jó gyakorlatokra is láttunk példákat, amelyeket érdemes követnünk saját webáruházunkban. Bízunk benne, hogy a bejegyzés elolvasását követően tisztázódik, hogy a saját webáruházadban mi a következő lépés a pénztárfolyamatok optimalizálásához!