Mobil-first vásárlói élmény: nem trend, hanem alapkövetelmény

Képzeld el, hogy a legjobb eladód egész nap egyetlen dolgot csinál: a vevők kezébe nyom egy összegyűrődött, apró betűs katalógust, és reméli, hogy megtalálják benne a rendelés gombot. Nagyjából ezt csinálja a webshopod, ha a mobilnézet csak „valahogy összement” az asztali verzióból. A vásárlóid többsége ma telefonról érkezik — és nem lesz elnézőbb attól, hogy kis képernyőn nézi.

Nem kell külön „mobil appot” építened, és nem is éri meg. Arról lesz szó, mi az a néhány mobil-specifikus hiba, ami miatt a telefonos látogató kikattint, és hogyan találod meg őket tíz perc alatt a saját oldaladon.

A vevőd a zsebében dönt

Tizenöt éve nézem, ahogy a webshopok forgalma átvándorol asztali gépről telefonra. Aki ezt még mindig „másodlagos csatornának” kezeli, az a vevői többségét kezeli másodlagosan.

Konkrét számot nem mondok, mert szegmensenként más — nézd meg a saját elemződben (GA4 → eszközkategória). Nagy eséllyel nálad is a mobil viszi a forgalom nagyobbik részét, sok szegmensben (divat, szépségápolás, ajándék, impulzustermékek) erős többséget. A lényeg ettől függetlenül igaz: ha a mobil élmény gyenge, a látogatóid nagyobbik részének adsz rossz élményt. Minden mobil-hiba a forgalom többségét érinti — ezért a mobil nem „is” fontos, hanem elsősorban.

„Reszponzív a sablon” — és mégis rossz

A reszponzív annyit jelent, hogy az elrendezés átrendeződik kis képernyőre. Nem jelenti azt, hogy használható. A sablon a kirakat, de a te termékneveid, képeid, szűrőid, fizetési logóid és checkout-beállításaid nem a demo-tartalommal kerülnek rá.

A tipikus eset: a fejlesztő letesztelte egy üres demo-boltban, ahol minden fért. Amikor viszont rákerül a nyolc szűrőd, a kétsoros termékneveid és az öt fizetési logó, a mobilnézet szétcsúszik. Ezért kell a saját, éles tartalmaddal végignézned.

Mobil súrlódási pontok, konkrétan

• Túl kicsi kattintható elemek. A menüpontok, szűrők, mennyiség plusz-mínusz gombok és a „kosárba” egymáshoz préselődnek. Hüvelykujjal a fele mellémegy. Adj nekik akkora felületet, amit egy ujjbeggyel biztosan el lehet találni.
• Hosszú űrlapok. Asztali gépen kitölteni egy 14 mezős szállítási űrlapot fárasztó; telefonon, mozgó buszon, felugró billentyűzettel gyötrelem. Minden mező, amit kihagyhatsz, megtartott rendelés.
• Nem látszó CTA. Ha a „kosárba” vagy „tovább a pénztárhoz” gomb a hajtás alatt van, vagy elúszik a képek és a leírás között, a vevő nem keresi meg. Mobilon a fontos gomb legyen rögtön szem előtt, ideális esetben tapadva a képernyő aljához.
• Apró betű, alacsony kontraszt. Ha csippenteni kell a nagyításhoz, hogy elolvasd az árat vagy a szállítási feltételt, már elvesztetted a vevő türelmét.
• Agresszív popupok. Az a hírlevél-ablak, aminek az „X”-e pici és félig kilóg a képernyőről, mobilon szinte garantált kilépés. Ha kell popup, az legyen később, jól zárhatóan és ritkán.
• Lassú, nagy képek. Mobiladaton a túlsúlyos termékfotó másodpercekbe kerül — erről külön írtam a webshop-sebességről szóló cikkben.

A tíz perces önteszt

• Fogd a saját telefonod, kapcsolj mobiladatra (ne wifire), és vásárolj végig egy terméket a kezdőlaptól a „rendelés leadása” előtti pillanatig.
• Számold, hányszor kell nagyítanod, hányszor tévesztesz gombot, és hol torpansz meg egy pillanatra, hogy „hol is van a tovább”.
• Add oda egy családtagnak, aki még nem látta az oldalt. Ne segíts, csak figyeld, hol akad el.
• Ha tudsz, nézd meg iPhone-on és Androidon is — a billentyűzet és a görgetés máshogy viselkedik.
• Írd fel a három legbosszantóbb pontot. Az a következő heted feladata.

Mit javíts először

A sorrend: először a pénztár mobilon (a legdrágább hiba szinte mindig itt van), utána a gombméret és a CTA láthatósága, aztán az űrlap rövidítése és a vendégrendelés engedélyezése, végül a popupok szelídítése. A checkout-hibák külön cikket érdemelnek — összeszedtem a leggyakoribb súrlódási pontokat. A mobil UX egyébként nem külön diszciplína, hanem a konverzióoptimalizálás gyakorlati része — abban a cikkben végigvettem, hol szivárog el a profit a fizetés előtt.

A mobil-first nem azt jelenti, hogy a telefon fontosabb, mint az asztali gép. Azt jelenti, hogy amikor döntesz egy elrendezésről, egy gombról vagy egy űrlapmezőről, előbb a telefonos vevőre gondolsz, mert belőle van több. Ha szeretnéd, hogy valaki kívülről, a vevő szemével nézze végig a webshopodat mobilon és asztalon egyaránt, és priorizált listát adjon a javításokról, annak való az AI-alapú webshop-audit.