Megújult regisztrációs és pénztárfolyamat

A ShopRenteres áruházak regisztrációs és pénztárfolyamatát radikálisan átalakítottuk, hogy könnyebbé és kényelmesebbé tegyük a vásárlást az áruház látogatói számára. Hosszú tesztelés és sok-sok mérés után a megújult pénztár folyamat minden ShopRenteres webáruház számára elérhetővé vált. 

 

Mi változik?

  • Kosár: a letisztultabb, átláthatóbb és gyorsabb felület célja, hogy átsegítse a felhasználókat a pénztár oldalra. 
  • Pénztár: az új pénztár folyamat logikailag és megjelenését tekintve is teljesen átalakul. Úgy terveztük, hogy maximálisan felhasználóbarát legyen és minden egyes részlete a konverziót szolgálja.  
  • Belépés oldal: a belépés oldal új külsőt kap, hogy igazodjon a pénztár modernebb megjelenéséhez. 
  • Regisztrációs oldal: a megújult regisztrációs oldalon kevesebb beviteli mező lesz, ezáltal a felhasználók gyorsabban és kényelmesebben tudnak regisztrálni az áruházba.  
  • Köszönő oldal: modernebb új külseje igazodik az új pénztár folyamathoz.

 

A megújult kosár és pénztár fő előnyei

1) Felhasználóbarát felület

A fizetési folyamat áruházunk egyik legkényesebb területe. A pénztárunkban válnak a látogatóink vevőkké, és itt lesz a böngészésből vásárlás.

Ez azt jelenti, hogy a megszokott felületünk sok esetben csak hátráltatni fogja a pénztárig eljutó felhasználókat. A navigációs elemek, kategória menü, termékajánló dobozok, bannerek és egyéb elemek elterelik a vevő figyelmét, ezért ezeket mind eltávolítottuk a pénztárból, sőt a szokásos fejléctől és lábléctől is megváltunk. Ne raboljuk a felhasználók idejét!  

penztar1.png

 

2) Regisztáció nélküli vásárlás:

A látogatók vásárolni szeretnének, nem űrlapokat kitölteni. Az online fogyasztók negyede elhagyja a kosarat, ha a pénztár használatához regisztrációra kötelezzük őket. A regisztrációhoz olyan szintű pszichológiai elkötelezettség szükséges, amelyet sok felhasználó egyszerűen nem hajlandó megtenni.

Az új pénztár folyamatban ezért megkönnyítettük a regisztráció nélküli vásárlás használatát. A vevőnek nem kell a regisztráció és a vendég vásárlás közül választania. Amint befejezte a vásárlást, a köszönő oldalon felkínáljuk neki a fiók létrehozás lehetőségét. Ezen kívül a regisztrált felhasználók számára lehetőséget biztosítunk arra, hogy vendégként vásároljanak az áruházban. 

vendegpenztar.png

3) Biztonságos fizetés: 

Fontos, hogy a vevő biztonságban érezze magát a pénztárunkban, hiszen nem csak a személyes adatait adja meg a vásárlás során, hanem sok esetben a pénzét is ránk bízza. SSL tanúsítványt használó boltjainkban az új pénztár automatikusan kiegészül a biztonságos kapcsolat jelzéssel, ami a felhasználók biztonságérzetét erősíti.

penztar2.png

4) Mobilbarát pénztár: 

Tekintettel arra, hogy a laptopok és asztali számítógépek konverziós aránya a legtöbb esetben megelőzi a mobilokét, a kiskereskedők nagyobb erőfeszítéseket tesznek az asztali megjelenésük optimalizálására. Ugyanakkor a trendek azt mutatják, hogy napról-napra többen vásárolnak okostelefonról. Az új pénztár folyamat tervezése során ezért nagy hangsúly fektettünk a mobilról érkező látogatók felhasználói élményének növelésére.   

Az űrlapok kitöltése sok fejtörést okoz a vevőknek a mobilos vásárlások során. Emiatt mindenhol nagy beviteli mezőket és nagy gombokat használtunk. Arra is figyeltünk, hogy ahol lehet automatikusan töltsük ki előre a beviteli mezőket. A számlázási adatokat például kitöltjük a szállítási címnél megadott adatokkal, így a vevőnek kevesebb mezőt kell kitöltenie. 

5) Folyamatjelző:

Mivel az új pénztár egy többlépcsős folyamaton vezeti keresztül a látogatót, ezért egy folyamatjelzőt, más néven progress bart helyeztünk el a logó közelében, amelyről a felhasználó könnyen leolvashatja, hol jár és hány lépést kell még megtennie a vásárlás befejezésééig. 

6) Felhasználóbarát hibajelzések

Akármennyire egyszerű felületet tervezünk is, a felhasználók időnként hibázni fognak. Amennyiben a felhasználó egy hibaüzenetet lát, a webáruháznak segítenie kell őt a hiba gyors és egyszerű javításban, ezért egyértelművé kell tennie a hiba helyét és jellegét. Az optimalizált fizetési folyamatunkban kiemeljük a hibás mezőket, és rögtön a hiba mellett adunk visszajelzést a probléma jellegéről.

penztar3.png

 

Hogyan kapcsolhatom be az új pénztár folyamatot?

Az új pénztár funkciót a Labor menüpontban tudja bekapcsolni. Mivel a vásárlási folyamat átalakítása nem csak a pénztár oldalt érinti, ezért 3 különböző kapcsolót helyeztünk el a Labor menüpontban, amelyeket külön-külön bekapcsolhat:

  • Új pénztár fejlesztés: a megújult pénztár és köszönő oldal be- és kikapcsolására szolgál
  • Új kosár fejlesztés: a megújult kosár oldal be- és kikapcsolására szolgál
  • Új bejelentkezés és regisztráció: a megújult bejelentkezés és regisztrációs oldal be- és kikapcsolására szolgál

Figyelmeztetés: az egyes pénztárlépések technikai okokból új URL-eken érhetők el, így ha a Google Analytics-ben rendelkezünk URL alapú cél beállítással, szükséges a beállításokat módosítanunk, hogy továbbra is jól mérje az Analytics a célteljesüléseket.

A megújult kosár és pénztár beállításai 

Nettó ár és Áfa megjelenítés

A megújult kosár és pénztár oldalon csak a bruttó ár jelenik meg a költségek összegzésében. Bizonyos esetekben ez kevés lehet, így a lenti beállítással bekapcsolhatjuk plusz két sor, azaz a nettó részösszeg és az ÁFA tartalom megjelenítését.

Beállítások > Bolt beállítások > Kosár és Pénztár beállítások > Kosár > Nettó részösszeg és ÁFA kijelzése a kosárban és a pénztárban

shoprenter-penztar-1.JPG

 

Előző lépések összefoglalója a pénztárban

A pénztár folyamat során bevitt adatokat a pénztár utolsó oldalán összegezve mutatjuk meg a látogatónak, aki innen visszaléphet és módosíthatja azokat. Amennyiben nagyobb kontrollt szeretne adni a felhasználóinak az adatok ellenőrzésében, bekapcsolhatja az előző lépések összefoglalóját. A funkció bekapcsolása után a bevitt adatok már nemcsak az utolsó oldalon, hanem a szállítási mód lépés követően minden oldalon megjelennek a folyamatjelző alatt. 

Beállítások > Bolt beállítások > Kosár és Pénztár beállítások > Pénztár > Rendelés során az előző lépések összefoglalójának mutatása

shoprenter-penztar-2.JPG

 

Pénztár logó

Az új pénztár felület fehér hátteret kapott, ez azonban bizonyos webáruház logókat nehezen kivehetővé tehet. Ez főleg azokra a boltokra igaz, ahol világos színű logót használnak. Az ő esetükben segíthet a pénztár logó feltöltése. Az itt feltöltött logó csak a pénztár oldalon jelenik meg, és ide nyugodtan fel lehet tölteni egy inverz logót, ami a pénztár fehér hátterén is jól kivehető. 

Beállítások > Bolt beállítások > Általános beállítások > Logó > Pénztár logó 

shoprenter-penztar-3.JPG

 

Pénztár linkek és gombok színe

Az új pénztár felület alapértelmezett színeit testreszabhatja, hogy azok kövessék webáruháza stílusát. Külön színt adhat meg a linkeknek és a gomboknak, illetve azt is be tudja állítani, hogy milyen legyen ezeknek az elemeknek a színe rámutatáskor.

Beállítások > Bolt beállítások > Kosár és Pénztár beállítások > Pénztár

 

Pénztár folyamatjelző

A pénztár oldal tetején elhelyezett folyamatjelző 2 stílusban érhető el. A négyzetes megjelenés letisztultabb, minimalistább, míg a körös megjelenés vizuálisabb.  

Beállítások > Bolt beállítások > Kosár és Pénztár beállítások > Pénztár > Pénztár lépés mutató stílusa

Körös megjelenés:

shoprenter-penztar-progress-bar-1.JPG

Négyzetes megjelenés:

shoprenter-penztar-progress-bar-2.JPG

 

Van még kérdése? Kérelem beküldése

7 Megjegyzések

  • Avatar
    Hódos Péter

    Nagyon hasznos és szép az új pénztár és kosár megjelenés. Sajnos nem találtam benne az adószám megadási lehetőség, illetve a hűségpont beváltási lehetőséget, de lehet,hogy én voltam figyelmetlen az első tesztnél. A köszönő oldalon van két link, ami nem vezet sehova. Ezeket sajnos nem tudtam inaktiválni még a szövegszerkesztőben sem.
    Üdv. Péter

  • Avatar
    Bánkuti József

    Nekem is tetszik az új megjelenés és én is hiányolom a számlázási név és az adószám megadásának lehetőségét. Amíg nincs javítva, nem tudom bekapcsolni.
    Az adatkezelési tájékoztató a Chrome böngészőben egy nagyon kis ablakban nehezen olvashatóan jelenik meg.
    Üdv. Bánkuti József

  • Avatar
    Pecsenye László

    Hogyan lehet az megoldani, hogy az új Kosár / Pénztár / Bejelentkezés oldalakat csak admin felhasználó láthassa? Elég sokat módosítottam a régi oldalak megjelenésén, ezeket átvezetném az új oldalakon is, de amíg nincs kész, addig nem mutatnám a vásárlóknak az újat.
    Üdv. LAci

  • Avatar
    Kiss Rita

    Nagyon jók lettek a fejlesztések. Egyedül a kosár oldalon hiányolom a figyelmeztető kiírást, miszerint ha még x Ft értékben vásárol, ajándékot kap (ami a régi kosár oldalon megvolt).

  • Avatar
    Gergely Ferenc

    Nagyon jó fejlesztések, viszont több ponton szükséges lenne csiszolni rajta, mielőtt élesíteném az oldalon. Az előttem szólókhoz még hozzáfűznék néhány észrevételt. Az egyik, hogy a megjelenés nem használja a már beállított stílusokat és CSS-ben sem lehet átírni (pl. gombok csak radius-szal jelennek meg, nem hozza az alap gombbeállítást, hover színek, árnyék stb., ami pedig állítható rajta, az kevés az egységesítéshez). A beviteli mezők is mindenhol kényszeresen radiusszal jelennek meg, amit nem lehet átállítani. Nem igazán értem, miért nem lehetett eleve úgy fejleszteni, hogy az oldal stílus beállításait használja. A fenti folyamatjelző színe sem állítható, ez a zöld egyszerűen nem illeszkedik egyik oldalam színvilágához és nem változtatható. A regisztráció / pénztár szövegei nem hozzák át az alap pénztár beállítás és regisztráció szövegeit, és nem is lehet átírni őket (ezt se teljesen értem, miért). Nem kevés munkába telt mindenhol testre szabni, ehhez képest itt csak a Shoprenter szövegei jelenhetnek meg és nem is módosíthatók. A hűségpontok beírását nem jelzi semmi (van egy beviteli mező a kupon alatt, de nem derül ki, hogy az mire szolgál). Mobilnézetben ráadásul ez a beviteli mező nem is jelenik meg, csak ha rákattint a részletek kinyitására a vevő.

  • Avatar
    JEBETO Kft

    Nagyszerű fejlesztések, ugyanakkor van néhány dolog, ami megnehezíti a működést.
    A stíluslappal nekem is problémáim vannak, teljesen máshogy néz ki pl. a kosár, mint az eredeti oldal, olyan, mintha elirányított volna egy másikra oldalra.
    Továbbá a regisztráció vagy belépés oldalakon kényszeresen befókuszál az első inputba, viszont ha onnan elkattintok, akkor nem megy el, hanem előbb kidobja a hibaüzenetet, hogy "kötelező mező". Második vagy sokadik klikkre hagyja, hogy azt tegyem, amit én akarok, általános felhasználóként már majdnem nyomtam volna jobb fent az X-et.
    A legnagyobb bajom mégis az - és ez szintén a stílussal kapcsolatos - hogy az új kosároldal teljes egészében elkülönül az oldaltól, se egy fejléc, se egy főmenü, se semmi, ami arra utal (persze a logón kívül), hogy ott vagyok, ahol kellene lennem.
    Valamint, ha már benne vagyok a kosárban, akkor vagy végigcsinálom vagy sok-sok vissza-gombbal tudok újra a weblapra menni, vagy a címsorba írhatom be újra a URL címet, máshogy nem sikerült visszamennem a "saját" oldalamra, hogy további termékeket nézhessek. (vagy keresnem kellett volna egy gombot, ami ezt megteszi, de lusta vásárló vagyok, aki nem keresgél gombokat, hogy merre az előre :) )
    Ezek miatt nem inkább nem kapcsolom be az új oldalt.
    Üdv: Pályi Zsolt

  • Avatar
    JEBETO Kft

    Illetve még egy, de ez már az alapértelmezésben is probléma nekem.
    Mivel a mi cégünk - valószínű sok száz másik cég is - kizárólag Magyarországra szállít, nem lehetne valahogy beállítani egy kapcsolóval, hogy ez a kényszeres országmeghatározás a kosárban, regisztrációnál (lásd fent a példa screenshotot a "Előző lépések összefoglalója a pénztárban" résznél - "Szállítási módok az országodban: Magyarország") kikapcsolható legyen? Egy fél napot töltöttem korábban azzal, hogy a 200 országot (Fidzsitől Grönlandig) meg körzetet egyesével kitöröljem, de így is mindig ott a választás, még abból az egyből is, mert kötelező, ami roppantul zavaró.
    Üdv
    Pályi Zsolt

Kérjük, Belépés után hagyjon megjegyzést.