Mobilbarát webáruház készítés tanácsok

Csak azért, mert egy webshop használható okostelefonról, nem jelenti azt, hogy az mobilbarát webáruház. Cikkünkben olyan megoldásokat, tanácsokat fogunk bemutatni, melyeket követve biztosíthatod, hogy webshopod reszponzív, mobilbarát lesz.

A mobilbarát kialakításra két lehetőség van:

• Külön mobilos „m.” oldal létrehozása
• Reszponzív webshop készítése

Mivel a reszponzív megoldás a javasolt, a Google is ezt ajánlja, így cikkünkben erre fogunk koncentrálni.

Reszponzív webáruház

A reszponzív mobilbarát webáruház lényege, hogy bármilyen méretű kijelzőről használják weboldalad, ugyanazt az oldalt fogják látni, csak az adott mérethez igazított elrendezésben. A reszponzív megoldás segítségével mindenki ugyanahhoz az információhoz tud hozzájutni, csak egy oldalt kell folyamatosan frissíteni, és mivel mindenki egy oldalt látogat, így ez jó hatással lesz a keresőoptimalizálásra (SEO) is.

Egy ujjal „gondolkodj”

Úgy kell kialakítani a reszponzív dizájnt, hogy azt a látogatók egy ujj segítségével tudják használni. Mivel általában az egy ujjas (és egy kezes) használat jellemző az okostelefonokra, így ezt a használatot kell előnyben részesíteni.

Ebbe a kialakításba beletartozik az is, hogy ne kelljen közelíteni kis kijelzőkön sem. Ha valami nem olvasható eredeti méretben, az valószínűleg túl kis betűkkel van elkészítve, és javítani kell rajta.

A legtöbben érintőképernyőn keresztül fogják használni webshopod. Ügyelni kell arra, hogy a gombok, linkek, menük elég nagyok legyenek akkor is, ha valaki nagyobb méretű ujjal rendelkezik. Nincs annál rosszabb, amikor egy gombra szeretne a látogató kattintani, de mellékattint amiatt, mert nem elég nagy az adott gomb. Ha sokszor előfordul ez, lehet, hogy inkább tovább áll egy másik, ténylegesen mobilbarát webáruházhoz.

Egyszerű dizájn, rövid, lényegre törő szöveg

A webáruház dizájnt és a tartalmat a kisebb kijelzőket figyelembe véve célszerű megválasztani. Mobilbarát webshopoknál még kevesebb lehetőség van arra, hogy valamivel megragadd a látogató figyelmét, mint monitorra optimalizált oldal esetén, így kiemelten fontos az első benyomás. Ne legyen túlzsúfolt a kezdőoldal, de mégis találjanak meg rajta mindent a látogatók, amire szükségük lehet.

Minél kevesebb a kép, videó, annál gyorsabban fog betöltődni az oldal, ami pl. mobilnet használatánál fontos szempontnak számít. Ha mégis használsz képeket, csökkents le méretüket minél jobban az optimális böngészés érdekében.

Egyszerű navigáció

Elterjed megoldás, hogy nagyobb képernyőre történő tervezéskor az adott webáruház menüje teljes egészében látható valahol a webshop felületén (általában oldalt vagy a honlap tetején). Ez a megoldás azonban kisebb kijelzők esetén nem működik, mivel túl sok helyen venne el a képernyőből. Ennek kiküszöbölésére jó megoldás, ha a navigációs menüt egy gombbal helyettesíted, mely mindig ugyanazon a helyen lesz megtalálható, bármely oldalon is van éppen a látogató. Erre a gombra kattintva megjelenik egy lenyíló menü, ahol megtalálható minden, ami a navigációhoz szükséges lehet. E megoldás nem visz el sok helyet a képernyőből, de mégis egy gombnyomásra van a látogatótól minden információ.

Több eszközös vásárlás

A több eszközös vásárlás lényege, hogy pl. a számítógépen megkezdett vásárlást lehessen okostelefonon, applikáción keresztül folytatni, és fordítva. Mivel ma már az egyes látogatók nincsenek eszközhöz kötve, így a nap bármely pillanatában tudnak vásárolni egy webshopból. Ha munkahelyen megkezdi valaki a vásárlást, de nincs ideje az egész folyamatot végigcsinálni, akkor lehet, hogy mire hazaér, már nem fog vele foglalkozni. Ezt lehet megelőzni olyan lehetőségekkel, hogy az elkezdett vásárlás más eszközről, okostelefonról, appról is befejezhető legyen.

Regisztráció nélküli vásárlás

A mobilbarát webáruház egyik legnagyobb ellensége a regisztrációhoz kötött vásárlás. Számítógépet használó látogatóknál is számtalanszor előfordul, hogy nem hajlandók végigcsinálni a regisztrációt a vásárláshoz, ez a probléma okostelefonos vásárlóknál még jobban felerősödik. Bonyolult, időigényes lehet minden szükséges információt megadni, email címet megerősíteni egy kisebb kijelzőn. Ha nem teszed ezt kötelezővé, akkor nem fogják emiatt abbahagyni vásárlás előtt a rendelési folyamatot látogatók.

Főoldalra történő egyszerű navigáció

Az okostelefonos internetezés egyik jellemzője, hogy a(z általában) bal felső sarokban történő céges logóra kattintva a látogatók azt várják, hogy a webáruház főoldalára jutnak. Bár ez magától értetődő lehet, mégis sokan elfelejtik. Ezt a logót tehát főoldali linkké kell alakítani az elvárt viselkedésnek megfelelően.

Flash és felugró ablakok használatának mellőzése

Az iPhone és az Android 4.1 utáni verziói nem támogatják a Flash használatát. Helyette inkább a HTML5-öt célszerű alkalmazni.

A felugró ablakok idegesítőek tudnak lenni monitoron is, kis képernyőn azonban a fontos tartalom elől veszik el a helyet, így használatukat célszerű mellőzni.

Videók használata

Korábban említettük, hogy célszerű minimálisra csökkenteni a videókat mobilbarát webshopoknál, azonban vannak olyan esetek (pl. termékek bemutatásánál), amikor elengedhetetlenek. Ilyen esetekben az előbb említett HTML5 megoldást célszerű alkalmazni. Amire mindenképpen figyelni kell, hogy ne induljon el a lejátszás automatikusan, mert ez mobilnetnél súlyos összegeket jelenthet, akkor is, ha a videó megfelelően optimalizálva van.

Vásárlás és kosár ikonok

A vásárlási folyamat része a kosárba rakom és a kosár gombok, linkek helyes kivitelezése. Ezeknek minden egyes termékoldalon (a kosár gombnak minden egyes lapon) jól láthatóknak kell lenniük, hogy a látogató könnyen vásárolni tudjon.

Javasolt megoldás, ha a vásárlás gomb a termék rövid leírása alatti elhelyezése, hogy mire megérkezik az érdeklődő hozzá, addigra már rendelkezzen információkkal az adott termékről.

Alapos tesztelés

Ha elkészítetted a tökéletes mobilbarát webáruházat, akkor hátravan a tesztelés. Mindenképpen teszteld az elkészült webshopot különböző méretű kijelzőkön, mind a három nagy szoftverrel futó okostelefonon (iPhone, Android és Windows), tableteken, hogy bármilyen eszközt is használ a látogató, egyformán kiváló élményben legyen része.