Mobil webáruházakkal foglalkozó cikksorozatunk első részében megnéztük, melyek a legfontosabb tudnivalók, mikor a webáruházunkat okostelefonra optimalizáljuk, és milyen elvek szerint érdemes felépíteni áruházunk mobil verziójának főoldalát. A folytatásban a kategória- és termékoldalakra koncentrálunk, vagyis azt vizsgáljuk meg, hogyan alkalmazhatjuk a választás segítés és meggyőzés kritériumait az érintőképernyőn.

fly.jpg

Mit jelentenek ezek a fogalmak? A választás segítés során azt próbáljuk elérni, hogy a vásárló minél hamarabb eljusson a neki megfelelő termékhez és "ne tévedjen el", eközben pedig lehetőleg az általunk ajánlani kívánt termékekkel is találkozzon. A meggyőzés során minél teljesebb körben informáljuk a vásárlót egy adott termékről, és megpróbáljuk meggyőzni arról, hogy ez az ajánlat számára megfelelő. Mint látni fogjuk, a hely csökkenésével ezen fogalmak is csorbulnak valamelyest, mobilon csak a legfontosabb célok teljesítésére lesz kapacitásunk.

Kategóriaoldalak

A mobil webshopokban a kategóriaoldalak felépítése érdekes csapdahelyzetet teremt: minél több terméklistázó funkciót helyezünk el, annál könnyebb lesz megtalálni egy adott tételt, viszont annál kevesebb helyünk lesz maguknak a termékeknek a megjelenítésére.

Az első ilyen problémás pont az alkategóriák megjelenítése: ha a kategóriarendszerünk legfeljebb 3-4 szint mély, akkor a további kategóriák megjelenítése linkként a kategóriaoldal tetején, vagy a terméklistázás helyett jó megoldás lehet, mivel a vásárlók legfeljebb két-három kattintással egy erősen szűkített terméklistához juthatnak. Ha viszont a kategóriarendszerünk mélyebb és szerteágazóbb ennél, akkor mindenképpen jelenítsük meg a termékeket is egy-egy kategóriaoldalon a további kategóriák alatt (vagy akár felett), hogy a vásárlók azonnal terméklistához juthassanak. Érdemes ilyenkor odafigyelni arra, hogy ne listázzunk túl sok terméket (legfeljebb 10-20 db-ot), mert az lassítja az oldal betöltődését, és a böngészésnek ezen szakaszában inkább a kategóriák közötti gyors váltás a szempont. Levélkategóriában azonban, ahol már nincsenek további alkategóriák, nyugodtan megjeleníthetünk akár 20-30 terméket, ha ez nem lassítja túlzottan az oldal betöltődését. (Ne felejtsük el, hogy látogatóink mobilon türelmetlenebbek és kisebb sávszélességből gazdálkodnak, mint asztali társaik!) Általánosan elmondható, hogy mobilon kb. 20 terméket érdemes egy oldalon kilistázni.

1ama.png
Az Amazon.com az alkategóriákat a termékek alatt jeleníti meg. Ekkora termékkör esetén bizony priorizálni kell: ők a bestseller termékeik megjelenítését fontosabbnak vélték a kategórianavigációnál, ami érthető. A vásárlók itt inkább a keresőhöz nyúlnak, ha konkrétumokat akarnak.

2target.png
Az Target.com ellenben azt választotta, hogy a vásárló minél gyorsabban és könnyebben a kívánt kategóriába jusson. Ami nem látszik, hogy ők a főoldalon erősen nyomják a saját bestsellerlistáikat, és nem bízzák ezeket automatizmusra, így a kategórianavigáció ilyen kialakítása talán jobban érthető: aki nem azokban keresgél, az valószínűleg tudja, mit akar.

A választás segítés a mobilokon is megköveteli, hogy a termékek legfontosabb információit a kategóriaoldalakon is megjelenítsük. Eből, és a szokásos helyszűkéből következően a termékeket általában egymás alá, vagy ha termékkörünknél a kinézet a kiemelt, sőt, szinte egyetlen szempont, soronként kettesével listázzuk. A termék nevén és árán kívül érdemes a termék raktárállapotát, esetleges szín-méret variációját (ha van) és esetleg a csillagos értékelését is megjeleníteni. A képekkel viszont vigyázni kell, a kis méretű képek részletessége szükségképpen lecsökken, a kép rengeteg részletet elveszíthet, és nem feltétlenül tudja ugyanazt a funkcionalitást betölteni, mint asztali társa. Megjegyzendő, hogy a mobilok kijelzőméretének növekedésével ez a hátrány egyre kevésbé jelentkezik, ma már nem a technológia, inkább az emberi szem a szűk keresztmetszet.

3best.png
A BestBuy.com megoldását nem feltétlenül tudom értelmezni. Mintha olyan embereknek készült volna, akik pontosan tudják, milyen terméket akarnak. E-ink és LCD kijelzős e-könyvolvasók vannak egymás mellett, anélkül, hogy a néven és a cikkszámon kívül bármit is megtudnánk. A Compare gomb menti a helyzetet, mivel ezen információk könnyen áttekinthetővé válnak általa, de hiányzik mellőle egy call-to-action, ami a konkrét termék megtekintésére, vagy kosárba rakásra csábítana.

5ae.png
Az AE.com megoldása soronként két terméket jelenít meg, ami érthető: ruhabolt révén a kép a alegfontosabb információ. Érdekesség, hogy választható soronként egy termék megjelenítése is, viszont nem kapunk több információt ebben az esetben sem a termékről.

A terméklistázást befolyásoló funkcióknál már többet variálhatunk, de itt is érdemes figyelembe venni az előző cikkben írtakat. Természetesen a lapozás minden kategóriaoldalon elengedhetetlen, viszont ezt is a mobios igényekhez kell igazítani. Mindenképpen érdemes egy előző-következő (esetleg első és utolsó oldalra ugrás) gomb elhelyezése, mert kisebb kijelzőn ezek kezelhetők kényelmesen, bár a nagyobb kijelzők megjelenésével a normál oldalakon alkalmazott lapozás funkció is egyre jobban használható. 

6mac.png

Klasszikus lapozás a Macy's-nél, de figyeltek arra is, hogy a lapozó gomb jól tapogatható legyen.


7cr.png
A Crutchfield lapozójára is sok példát láttam már. Ahelyett, hogy a lapozó egy új oldalt töltene be, itt az adott oldalra helyez még egy adag terméket AJAX technikával, így a görgetés akár a végtelenségig folytatható. Még kifinomultabb megoldás lehet egy Facebook-szerű automatizált betöltés az oldal aljára érve.

A termékek rendezésére és szűrésére szolgáló funkciók már bonyolultabbak, ugyanis a mobilképernyők mérete egyszerűen nem enged meg egy lépésben részletesen finomhangolható megoldásokat. Itt két lehetőség van, a termékek száma és a termékkör típusa szerint kell ezek közül választani. Az első lehetőség, ha nagyon egyszerű rendezési funkciókat alkalmazunk, és azokat egy gombbal aktiválható módon helyezzük el. A másik lehetőség, ha a szűrésre és/vagy rendezésre szolgáló funkciót külön oldalon engedjük beállítani. A dolog mindenképpen nehézkesebb, mint az asztali böngészőnkben.

81800.png
Az 1800Flowers a kiszállítási rendszere szempontjából fontos adatokat a böngészés elején bekéri, mivel prioritás, hogy a vevő csak azt vehesse meg, ami az adott helyre kiszállítható. Példa ez a megoldás arra, hogy nem mindig a termékek megjelenítése a legfontosabb egy oldal betöltésekor.

9cr.png
A Crutchfield szűrője külön oldalon nyílik meg. Egy ilyen kifinomult szűrő használata már mindenképpen plusz interakciókat jelent, még az asztali böngészőhöz képest is.

Termékoldalak

Mivel az okostelefont inkább információ keresésére használják, ezért az áruházban is inkább a termékinformációk elhelyezése a prioritásos, mint a kosárba rakás és a meggyőzés (kivéve persze, ha a termék értékesítésénél az okosmobil az elsődleges platform, de ez az esetek többségében még nem így van). Épp ezért - és a mobilos böngészés sajátosságai miatt - bizonyos, a normál termékoldallal kapcsolatos, általában említett szempont itt nem értelmezhető. Nem fontos például az, hogy a kosárba rakás a látványvonal fölé kerüljön, mivel így a leglényegesebb termékinformációk sem férnének ki, és mobilokon nagyobb az az elérés egyes kijelzők magasságában. Emellett maga a látványvonal sem "lőhető" be egy körülbelüli, még használható értékre.

p1target.png
Mint látható, a Target.com-on sem törekedtek a kosárba gomb látványvonal fölé zsúfolására, és ez jól van így: vannak fontosabb adatok is.

Az egyik legfontosabb termékinformációnk a kép, tehát oda kell figyelnünk arra, hogy az hasonlóan elláthassa funkcióját, mint a normál oldal esetén . Érdemes olyan fotókat használni, ahol az objektumok körül minél kevesebb az üres terület, és lehetőséget kell adni arra is, hogy a képet a böngésző teljes szélességében megtekinthesse a látogató, vagy akár bele is nagyíthasson. Ezért a mobil termékoldalon a termékképeket teljes oldalszélességben érdemes elhelyezni, vagy ha nem annyira fontos a kép, akkoris biztosítani kell a teljes oldalas nagyítás lehetőségét.

p2best.png
...mint azt a BestBuy is teszi. Híradástechnikai termékről lévén szó általában nem (bár egyre inkább) a kép a legfontosabb adat, annak nagyíthatóságát viszont külön ikon is jelzi.

p3zappos.png
A Zappos oldalán inkább a több termékkép megjelenítésén van a hangsúly, amelyeket simitelefonokon megszokott módon lehet kezelni (bár ezt a másik kép csücskének nehezen észrevehető bevillantásán kívül semmilyen vizuális elem nem jelzi). Jól láthatóan jelenítik meg a többi színvariációt is.

A termékoldalakon - a ketegóriákkal ellentétben - meg kell jeleníteni a teljes termékismertetőt, raktárkészlet státusszal és házhozszállítási idővel együtt. Nem mindegy azonban, hogy ezt hogyan tesszük. Mivel kis helyen kell összezsúfolni sok információt, csábító lehet, hogy a különböző típusú információkat fülekkel jelenítsük meg. Egy ilyen megoldást mindenképpen tesztelni kell, mivel ezek a fülek a teljes oldalt elfoglalják, és éppen ezért nehezebben felismerhetőek. A mobiltelefonon a görgetés még a normál oldalnál is kevésbé fájdalmas, valamint szükséges a navigációhoz, így bátran alkalmazhatjuk azt, és a termék leírását folytatólagosan is feltüntethetjük. Ha túl hosszú temékleírásaink vannak, és más információk (pl. vásárlói vélemények) is nyújtják az oldalt, akkor lenyíló gombokat is elhelyezhetünk, melyekre kattintva a részletes leírás és a többi információ egyaránt megjelenik.

p5ama.png
Az Amazonnál a rengeteg termékinformáció megjelenítését úgy oldották meg, hogy az olyan részegységeknek külön aloldalakat csináltak, ahol már megszokottabb felületi megoldások vannak.

A kosárba rakás gomb itt is a legfontosabb termékinformációk alá kerüljön, és mint rendesen, gyakran terméktípus választás kapcsolódik hozzá. Ezt a leggazdaságosabban itt is legördülőkkel oldhatjuk meg, de ha nincs túl sok opció (pl. ruhaméretek), egy kattintással aktiválható gombok is pótolhatják azt. 

p6target.png
Target.com. Az előbb látható Lego alatt közvetlenül egy klasszikus és jól értelmezhető kosárba gomb következik. Én egy kis ikont azért még odaraktam volna. (Más kérdés, hogy nagyobb kijelzőkön mennyire tűnik ez egyszerű csíknak.)

p7zappos.png
A Zappos.com klasszikus terméktípus választóval rendelkezik, ami tökéletesen ellátja feladatát. A színek esetén viszont ők is - nagyon helyesen - kép alapú, kattintható választót alkalmaznak.

p8cr.png
Van, hogy a legfontosabb termékinformációk prioritás szerint megelőzik a call-to-actiont, mint a Crutchfieldnél is. Itt a termékelőnyök ismertetője megelőzi a kosárba rakást, és ha valaki jobban szereti az offline megoldásokat, másodlagos CTA-ként egy kattintással telefonon is rendelhet.

A termékoldalon biztosítani kell még annak lehetőségét is, hogy az adott terméktől más kapcsolódó vagy helyettesítő termékekig is eljuthassunk, ez mobilon sincs másként. A megjelenítendő termékek száma viszont itt sem lehet végtelen, hisz túl sok termék kezelhetetlen méretűre nyújtaná az oldalt. Ezeket már mindenképpen érdemes lenyíló menükbe elhelyezni, hisz ekkor a vásárló eldöntheti, hogy a kétfajta ajánló közül melyikre kíváncsi inkább.A hasonló termékek közötti navigációt olyan gombokkal is leegyszerűsíthetjük, amelyek a kategóriában előző vagy következő termékhez visznek.

p10ae.png
Az AE.com a kapcsolódó termékek közötti minél gyorsabb böngészést helyezi előtérbe, így nagyon gyorsan tudunk az egyes ruhadarabok között válogatni.

p9best.png
A BestBuy-nál a termékhez tartozó kiegészítők egy alapból "lenyitott" termékinformációs blokkban vannak, általános és követhető megoldás. Figyeljük meg, hogy mivel kiegészítőkről van szó, ezért jelölőnégyzeteket alkalmaztak Kosárba gombok helyett, hogy ne kelljen a vásárlónak oda-vissza navigálnia. Helyettesítő termékek esetén persze más a helyzet.

Folytatjuk

Angolul tudóknak a cikk mellé hasznos olvasmány továbbra is a getelastic.com oldal:
http://www.getelastic.com/mobile-product-page-design-tips/
http://www.getelastic.com/mobile-search-category-pages/ 
http://www.getelastic.com/mobile-home-page-navigation/

Hamarosan jelentkezünk a sorozat harmadik, befejező részével. Szívesen várok minden hozzászólást!

Ha szeretnél egy gyakorlatban működő, kész megoldást a fentiek megvalósítására, tekintsd meg a mi mobilra optimalizált webáruház rendszerünket!

Kérjük írja be a képen látható kódot
Biztonsági kód Új kódot kérek
Szeretnék e-mail értesítést kapni az új hozzászólásokról!