A mobil vásárlási folyamat optimalizálása

A mobil vásárlási folyamat optimalizálása nem űrtudomány. Egyrészt tekintettel kell lenned a mobil eszköz limitációira, másrészt viszont élned kell a készülékek adta technikai lehetőségekkel, mint például a kamera vagy a helymeghatározás. 

Lehet későn írtam meg ezt a cikket. A karácsonyi vásárlási szezon közepén vagyunk, az ecommerce pedig már egészen látható szeletet hasít ki a teljes kereskedelmi forgalomból Magyarországon is.  A mobilos vásárlásokat itthon a nagy webshopok is gyanítom eléggé alábecsülik, pedig elég sok potenciál lakozik benne. Pontosabban itthon inkább elszalasztott lehetőségek sokaságáról beszélhetünk.

Válogatott product design linkek

Inspirációs válogatás kéthetente a product design, UX, digitális termék stratégia és innováció világából.

Miközben az egyik karácsonyi ajándékot próbáltam megvásárolni elég vad dolgokat láttam (a szó rosszabb értelmében). Egy adott terméket próbáltam megvenni több különböző magyar webáruházban, nem azért mert olyan jó ezzel szórakozni, hanem mert a webshopok rosszul használhatóságban egymásra licitálnak, így többször is feladtam.

Ezek többsége olyan kereskedő volt ráadásul, akik a top 10 legnagyobb forgalmú ecommerce site közül kerültek ki. Mégis olyan megbocsáthatatlan hibák voltak a mobil vásárlási folyamatban, mint például a szállítási adatok megadása után kiderült, hogy a mobil számnál nem az “elvárt formátumban” adtam meg a számot, mire a rendszer eldobta az összes addig beírt adatot az űrlapról. A kisebb usability hibákról nem beszélve, ez józan paraszti ésszel is beláthatóan rendkívül barátságtalan reakció.

Akadtak persze tipikus, nem eszköz specifikus hibák is, például a szállítási költség utolsó lépésben való bedobása, regisztrációra kényszerítés. Összességében sehol sem volt zökkenőmentes a folyamat, ezért talán lesz pár hasznos tanácsom a webshop üzemeltetők számára, akik hajlandóak javítani a mobil vásárlási folyamataikon.

A kosár szerepe más, mint desktopon

Habár desktopon is jellemző, hogy a kosarat egyfajta kedvencek funkcióként használják, mobilon méginkább előfordul ez a viselkedés. Miután ez tűnik a legegyszerűbb megoldásnak (regisztrálni ezért biztos nem fognak), sokan a kosárba “mentik” a termékeket, amik érdekesek lehetnek számukra, és így könnyen tudják folytatni a vásárlást.

Ezért nyilván nagyon kritikus, hogy a kosár bármikor könnyen elérhető legyen. A fentiek miatt azt is biztosítani kell, hogy könnyen módosítani, vagy eltávolítani tudjanak termékeket a kosrából.

A kosár optimalizáláshoz tartoznak továbbá:

  • A kosárban lévő termékek linkeljenek a termékoldalra, hogy ki tudják szolgálni az említett viselkedést (a kosároldal csak egy összegző, vagy kedvencekként szolgáló oldal sok esetben)
  • A termékeket tárold a kosárban ameddig lehet, szintén a fenti viselkedés miatt (1-2 órás session lejáratok nem segítenek)
  • Kerüld az update gomb használatát, biztosítsd, hogy a felhasználó külön jóváhagyó button megnyomása nélkül tudja a kosár tartalmát módosítani

Mutasd meg a teljes összeget, amint lehet

Nem feltétlenül mobil specifikus ugyan, de talán mobilon még nagyobb jelentősége van, hogy a vásárlók tudni akarják a végösszeget – a termékek és az egyéb költségek összegét – amint lehet, mielőtt űrlapokat kezdenének töltögetni.  Ugyan az első stepeknél még kevés az adatunk relatíve, de becsült adatot tudunk mutatni, ami segíthet a felhasználóknak. Például mobilon le tudjuk kérni a lokációs adatait a vásárlónak, ez lehet az alapja a becslésnek, vagy a legnépszerűbb szállítási opció alapján adunk egy kiindulási árat.

Tedd lehetővé a vendég vásárlást

Azokon a webshopokon amiken dolgoztam, általában 50% fölött járt a vásárlások közül azok aránya, akik nem regisztráltak a vásárlások során. A másik véglet, ahol csak kötelező regisztrációval lehetett rendelni, ezeknél az oldalaknál a webanalitika általában kiadta, hogy a regisztrációnál a legmagasabb a lemorzsolódás. Mobilon hatványozódik a probléma, mert sietünk, egy kezünk van, szóval még kevésbé toleráljuk, ha plusz munkát ad nekünk egy webshop.

A vendégregisztráció egy fontos opció az új vásárlóknak, és azon régi ügyfeleknek is, akik esetleg elfelejtették a felhasználónevüket jelszavukat (mert mobilon még kevésbé van kedvük az emailes jelszó visszaállítással szenvedni).

A számlázási és a szállítási cím ugyanaz

Ha egy alapértelmezetten bepipált checkboxal biztosítod, hogy ugyanazt a szállítási és a számlázási címet használják, elkerülöd hogy a vásárlónak kétszer kelljen ugyanazokat az adatokat bepötyögnie. A tapasztalat, hogy azoknál a sietoknál, akik defaultból használják ezt az opciót, a vásárlások 90%-a estében megtartják a felhasználók ezt a beállítást. Mobilon méginkább ez a helyzet (általánosságban, de persze ez függ az üzlet típusától is).

Űrlapok a checkout során

Ha egy webshop nagyon ki akar szúrni a vásárlóival, akkor nem foglalkozik az űrlapok használhatóságával mobilon. Pedig ettől nagyobb konverzió erodáló eszközök nem léteznek: mobilon utálunk pötyögni, ezért is terjedtek el a szmájlik. A kontextus miatt – egy kézzel, a metrón esetenként dülöngélve írva – nagy a hibázás esélye is.

Az űrlapok optimalizálása nagyon egyszerű. Le kell redukálni a mezők számát, és automatikusan be kell generálni amit már eleve tudunk.

A megfelelő billentyűzet ajánlása

A számoknál a numeric padot kell feldobni, például bankkártya adatok megadásánál, vagy a telefonszámnál. A szöveges mezőknél lehet értelemszerűen az alapértelmezett billentyűzetet meghívni.

Amit tudunk, ne kérdezzük meg

Úgy is minimalizálhatjuk a szükséges gépelést, ha mi generálunk be bizonyos adatokat. Ha például valaki megadta az irányítószámot, abból ki tudjuk generálni a várost. Ugyanígy ne kérdezzük meg a bankkártya típusát, hiszen a számból meg tudjuk mondani.

Ide kapcsolódik azt is, hogy kétszer ne kérdezd meg ugyanazt. Az email címet szokták kétszer bekérni például, hogy csökkentsék a nem valid email címek esélyét, de a felhasználó szempontjából egy szükségtelen plusz lépés mobilon.

Ne darabold szét, ami egy mezőben is elfér

Gyakori, hogy nevet, a telefonszámot vagy a születési időt egy sorban, de különböző mezőkben kérik be. Ez arra kényszeríti a usert, hogy váltogasson a mezők között, több erőfeszítést igényel, plusz növeli a hibák esélyét is. Az említett adat típusoknál egy mezőt használj, és ha nagyon egyedi formázási szabályokat írsz elő (habár a legjobb csak javasolni, nem pedig kényszeríteni a felhasználónkat), akkor azt a placeholderben jelezd.

Ne töröld ki a kitöltött mezőket!

A bevezetőben említettem, az egyik legszemetebb megoldást. Ha felhasználó valamelyik mezőnél hibázik több dolgunk is van. Egyrészt inline validációval azonnal, a mező beírása után jelezzük neki, hogy mi a gond és hogyan tudja korrigálni (technikai bullshitet mellőzve, olyan egyszerűen leírva, hogy egy csak általános iskolát végzett is megértse). Ha erre nincs lehetőség – amire azért nem nagyon tudok elfogadható mentséget elképzelni – akkor sem szabad törölni a beírt adatokat, csak jelezni a hibát és javasolni a megoldás módját.

Használd ki a natív mobil funkciókat

Az okostelefonokban egyebek mellett olyan funkciók érhetők el, mint helymeghatározás, biometrikus azonosítás, kamera stb. Mindez azért érdekes, mert ezek kihasználásával lehetővé válik, hogy a felhasználónak még kevesebbet kelljen gépelni.

Nyilván ha hely adatokat be tudunk generálni egy ezzel kapcsolatos mezőbe az hasznos lehet, de néha ez problémás a pontosság tekintetében ezért érdemes lehet a Google’s Places API-t használni, ami a lokációs funkciót és az automatikus kiegészítést egyesíti egyetlen remek megoldásban.

A bankkártya adatok megadása melós, idegesítő és különösen mobilon nagy a hibázás esélye is. Ráadásul nem is mindig van a kezünk ügyében a bankkártya. A kamerával alternatívát lehet biztosítani arra, hogy például a bankkártyájuk adatainak megadásával ne kelljen szenvednie a vásárlóidnak, hanem a fotóból olvassa be a rendszer. 

Mobil-barát fizetési megoldások ajánlása

Ha már bankkártyás fizetés, a fizetési opciók ne merüljenek ki csak a kártyás fizetésben.

Közismert harmadik féltől származó, mobilra optimalizált megoldások mint a Paypal hasznosak lehetnek, mert tehermenetessé teszik a fizetési folyamatot.

Disztrakciók eltávolítása a vásárlási folyamatból

Az egyik legfontosabb alapelvvel zárnám a cikket. Az 1 oldal 1 CTA elv a mobilos vásárlásban is ugyanolyan fontos. Egyrészt minden nem a vásárlás felé irányító interakció csökkenti az esélyét (a felhasználó tudatosan, vagy öntudatlanul meghozza a döntést, hogy rákattint-e a linkre). Másrészt mobilon könnyebb “félretapintani” azaz olyan interakciókat eltrafálni, ami nem a feladathoz köthető. Ezért dobj ki mindent a checkoutból, ami nem esszenciális, a navigációt, footer linkek tengerét, és természetesen a nem odaillő promóciókat is. 

avatar

Boros Norbert

Bár UX designer, elismeri, hogy a user experience design nem az univerzum közepe, a UX-es pedig nem a földre szállt mindenható. A cél legvégül úgy is az, hogy segítsük az üzlet növekedését, ehhez pedig holisztikusabb megközelítés szükségeltetik, amiben a UX csak egy eszköz a sok közül.