Törekszik a mobil e-kereskedelmi webhelyek tervezésére? Ne izgulj, a következőt kell tenned
2021-ben az e-kereskedelem növekedését nagyrészt a mobileszközök vezérelték. Valójában, Bennfentes intelligencia előrejelzése szerint az m-kereskedelem volumene 488 milliárd dollárra, azaz a globális e-kereskedelmi piac eladásainak 44%-ára emelkedik 2024-re. Ennek a piacnak körülbelül 9.2%-át az Egyesült Államok fogja uralni.
Akár tetszik, akár nem, egy mobilbarát e-kereskedelmi webhely ma már inkább szükségszerűség, mint választás; különben a kiskereskedők egyszerűen elpusztulnak a fogyasztókért. Az Elogic-nál számos projektünk a mobil e-kereskedelmi webhelyek tervezését az egyik legfontosabb elemként sorolta fel Az e-kereskedelmi webhely követelményei, ennek fő oka a webhelyek magasabb konverziós aránya és a keresőmotorokban való nagyobb láthatóság.
Ha szeretné használni az e-kereskedelmi webhelyeket, de nem tudja, hol kezdje, akkor ez a cikk neked szól. Olvasson tovább, hogy megismerje a mobilbarát, mobilra optimalizált és reszponzív tervezés közötti különbségeket, fedezzen fel hat mobiloptimalizálási tippet, és megtudja, hogyan tesztelheti e-kereskedelmi webhelyét mobilra.
Miért nem csak trend a mobilbarát e-kereskedelmi webhely?
A mobilbarát e-kereskedelmi webhely azt jelenti, hogy a felhasználók szabadon használhatják mobileszközön: weboldala „összezsugorodik”, hogy beleférjen a telefon kis képernyőjébe, nincsenek használhatatlan funkciók vagy flash animáció, a képek kisebbek, a navigáció sokkal egyszerűbb.
Annak ellenére, hogy a konverziós arány mobilon valamivel alacsonyabb, mint az asztali számítógépen (1.81% vs 1.98%), ez nem jelenti azt, hogy el kell törölnie. Az e-kereskedelmi webhely mobilja lehet az oka annak, hogy a felhasználók az asztali számítógépeken hajtanak végre konverziót, mert termékkutatást a telefonjukkal végeztek. Még az egyik felmérésből is kiderült Az ügyfelek 67% -a kevésbé valószínű, hogy a márkától vásárolnak, ha nincs mobilra optimalizált webhelyük.
A mobilbarát e-kereskedelmi webhely előnyei nem korlátozódnak a magasabb konverziós arányra:
- Jobb felhasználói élményt (UX) biztosít, és így több forgalmat irányít minden formájú és méretű eszközről.
- A felhasználók kevésbé valószínű, hogy frusztráltan hagyják el webhelyét, és negatív érzelmekkel társítják márkáját.
- A keresőmotorok egy optimalizált webhelyet fognak az élre tolni, mivel az UX az egyik rangsoroló tényező.
- Ez növelni fogja az ügyfelek lojalitását, mivel a nem mobilbarát webhelyek vázlatosnak és rossz minőségűnek tűnnek.
Bár a mobiloptimalizálás apró részletnek tűnhet, komoly hatással lehet az e-kereskedelmi üzletére, mivel növeli az értékesítések számát és a fő webhely forgalmát.
Mobilbarát vs mobilra optimalizált vs reszponzív: mi a különbség?
A mobilbarát, mobilra optimalizált és reszponzív dizájn három különböző megközelítést jelent az e-kereskedelmi mobilwebhely-verzió létrehozásához.
Mobilbarát e-kereskedelmi webhely
A mobilbarát dizájn a meglévő webes UX mobileszközökre szabásáról szól. Ez az asztali számítógépen látható webhely zsugorított változata, amely a legkönnyebben megvalósítható.
Egy mobilbarát e-kereskedelmi webhely is elegendő ahhoz, hogy előrébb kerüljön a Google keresésben (akár futtasson le egy mobilbarát tesztet ellenőrizni), de ez nem fogja maximalizálni a felhasználói élményt. A főként szöveget és képeket tartalmazó kis e-kereskedelmi üzletek hasznot húzhatnak belőle, de a fizetési oldalon lévő UX érintetlen marad.
Mobilra optimalizált kialakítás
A mobilra optimalizált kialakítás a mobil-első megközelítést követi. Más szóval, először egy külön weboldalt tervez a mobileszközök számára (főleg azért, mert több korlátja van), majd később az asztali verzióra méretezi. Ellenőrizze néhányat A PWA legjobb példái a kiskereskedelemben, mint az Alibaba vagy a Flipkart – a mobil-első megközelítést szem előtt tartva készültek.
Mobil-reszponzív tervezés
A reszponzív e-kereskedelmi mobilwebhely-tervezés azt jelenti, hogy a webhely tartalma automatikusan megváltozik, hogy illeszkedjen a felhasználó képernyőjéhez. Mobil operációs rendszerre támaszkodik, és a képernyőméret legkisebb változásaira is reagál, ami a különböző iPhone-verzióknál és Android-eszközöknél jellemző. A tartalom dinamikus: a képek és a betűtípusok mérete változik, az elrendezések igazodnak. Jelentős költségvetést igényel és az e-kereskedelem fejlesztése, de a legfelhasználóbarátabb a trió közül.
Mi a különbség a webes és a mobil e-kereskedelmi tervezés között?
A webdesign és a mobil e-kereskedelmi tervezés soha nem egyenértékű. A kettő közötti különbség több okból is óriási:
- Sokkal nagyobb szabadságot élvezhet az asztali webhelyek tervezésénél. Nemcsak az operációs rendszer felületelemei határozzák meg a mobil e-kereskedelmi webhely kialakítását, hanem a kisebb képernyő is azt jelenti, hogy a látogató sokkal kevesebb információt láthat a weboldalon. E korlátozások ellensúlyozására az m-kereskedelmi kereskedők lehetővé teszik a felhasználók számára a weboldalak nagyítását és kicsinyítését, valamint a betűméret beállítását, hogy a szöveg könnyen olvasható legyen.
- A mobilwebhelyek érintésalapú bevitellel rendelkeznek. A legtöbb mobilfelhasználó az egér vagy a billentyűzet használata helyett az érintőképernyő és a mobilspecifikus funkciók, például a click-to-call vagy a helyalapú térképezés segítségével kommunikál eszközeivel.
- A webhelyek asztali számítógépen és mobileszközön való használatának kontextusa eltérő. Amikor egy ügyfél vásárolni érkezik az Ön e-kereskedelmi webhelyére, nagy valószínűséggel befejezi a vásárlást. Eközben a mobilfelhasználók gyors vásárlók. Az Ön e-kereskedelmi webhelyének mobileszközét használják termékek kutatására, helyszínek keresésére, hírek olvasására stb., de előfordulhat, hogy nem folytatják a fizetést. Így a webdizájn növeli az eladásokat, de a mobil e-kereskedelmi tervezés optimalizálja a konverziókat és növeli az ügyfelek lojalitását.
Ha már a vizuális megjelenésről beszélünk, a webes és mobil e-kereskedelmi tervezés is szembetűnő különbségeket mutat. Íme egy példa egy szórakoztatóelektronikai webhelyre TurcomUSA az Elogic tervezte. A Turcom kütyüket és elektronikus eszközöket árul. Amikor megnyitja az asztalon, a következő verziót fogja látni:
Most nézze meg ugyanazt a webhelyet mobiltelefonján. A weboldal minden fontos eleme megmarad: helyszíni kereső, bevásárlókosár, személyes szekrény. Ennek ellenére a tartalmat és a vizuális elemeket újraszervezték a jobb felhasználói élmény érdekében.
Hogyan optimalizálhatjuk az e-kereskedelmi webhelyet mobilra?
Ha vállalkozása nem áll készen a mobil-első vagy mobil-reszponzív webhelyre (legyen szó költségvetésről vagy műszaki szakértelemről), ne aggódjon. Nem kell mobilalkalmazást fejlesztenie ahhoz, hogy már az elején magasabb legyen. E-kereskedelmi webhelyét ehelyett mobilra is optimalizálhatja.
Íme hat módszer, amellyel költséghatékony módon optimalizálhatja a webdizájnt a mobil e-kereskedelemhez.
1. Tegye villámgyorsan webhelyét
Az ügyfelek körülbelül 47%-a várja a webhelyek betöltését 2 másodperc alatt; különben egyszerűen leesnek. A Google a betöltési sebességet is figyelembe veszi, amikor rangsorolja webhelyét a keresőben.
Az organikus forgalom és az ügyfelek elégedettsége a webhely sebességétől is függ. Walmart észrevette hogy a megnövekedett webhelysebesség minden másodperce 2%-kal több konverziót jelent, és minden 100 ms 1%-os bevételnövekedést jelent.
A sebesség növelése érdekében:
- Optimalizálja a képeket
- Tartalomszolgáltató hálózatok (CDN) használata
- CSS, JavaScript és HTML kicsinyítése és kombinálása
- Használjon aszinkron betöltést
- Tárhely frissítése
- Engedélyezze a tömörítést
- Használja a böngésző gyorsítótárát
#2. Biztosítson kényelmes fizetési élményt
A fizetési tapasztalat sokat jelent: lehet, hogy jól átgondolt marketingcsatornával rendelkezik, de vázlatos fizetéssel, így a felhasználók így is elhagyják a kosarukat. A fizetés mobilra optimalizálásához használja a következő tippeket:
- Hozzon létre e-kereskedelmi webhely mobilverzióját, amely illeszkedik a felhasználó képernyőjéhez
- Egyszerűsítse az űrlapot
- Törölje az összes zavaró tényezőt, például a hirdetéseket és az e-mail-feliratkozási űrlapokat
- Használjon biztonsági pecsétet
- Készítsen nagy gombokat könnyen olvasható szöveggel
- Hozzon létre egy sávot a felhasználó előrehaladásával
- Automatikus kitöltés engedélyezése
- Ne hivatkozzon a fizetési folyamaton kívül
- Használjon különböző billentyűzeteket a különböző mezőkhöz (például húzza fel a numerikus billentyűzetet a telefonszámhoz, ahelyett, hogy az ügyfeleket saját maga váltaná rá)
Így néz ki a mobilra optimalizált pénztár Görgős nyúlwebhelye, egy online divatüzlet, amelyet az Elogic fejlesztett ki. A kiskereskedő optimalizálta a felhasználói élményt, és csökkentette a kosárelhagyási arányt.
3. Dolgozzon az intuitív helyszíni keresésen
A navigáció elengedhetetlen része a mobil e-kereskedelmi platformok webdesignjának. A böngészhető tételek ezrei miatt a felhasználóknak a lehető legnagyobb mértékben szűkíteniük kell a választékot, hogy hamarabb eljussanak a kívánt termékekhez.
A mobileszközökön végzett helyszíni keresés optimalizálása érdekében javasoljuk, hogy rövidítse meg, először sorolja fel a legfontosabb oldalakat, és készítsen nagyobb gombokat a menüben, mivel a felhasználók ujjai nagyobbak, mint egy nyíl a képernyőn. Kerülje a lebegtetést és a menük kibontását, hogy minimalizálja a hirtelen eltűnésből és az al-navigáció újbóli megjelenéséből adódó súrlódást.
#4. Csiszolja fel termékoldalait
A termékleírásokat nem feltétlenül úgy kell meghagyni, hogy a termékoldal a mobil képernyőjének méretéhez igazodjon. Javasoljuk azonban, hogy rövidre (max. 200 karakter) legyen, és közvetlenül a hajtás fölé helyezze őket egy jó minőségű fotó mellé. Kerülje el a sok görgetést, összecsukható tartalomblokkot és koppintott tartalmat. Azt is javasoljuk, hogy használja a „vissza a tetejére” gombot, de ügyeljen arra, hogy az ügyfelek véletlenül se nyomják meg, miközben egyszerűen lefelé görgetnek.
#5 Optimalizálja a felhasználói élményt
A UX for Mobile eCommerce webhelyek megjelenése eltér attól, amit az asztali számítógépeken látott. Az egyik legalapvetőbb szabály, hogy a gombokat nagy méretben kell tartani, és minimalizálni kell a szöveget, mivel nincs sok hely a munkához. A mobilfelhasználók figyelme könnyebben elterelhető, mint az asztali felhasználók, ezért ügyeljen arra, hogy az értékesített példányok rövidített változatát adja meg.
Ne feledje a hüvelykujj helyzetét is. Míg az asztali felhasználók a képernyő szó szerint minden részével foglalkozhatnak, a mobilfelhasználók a hüvelykujjukig nyúlnak. A jobb alsó sarok az egyik legaktívabb hely a mobilfelhasználók számára, ezért ügyeljen arra, hogy a fontos gombokat (például a kosárba helyezés) ott helyezze el.
Végül ne felejtse el megőrizni márkaidentitását: használjon vállalati betűtípusokat és színeket, amennyit csak tud, nehogy a mobil verziója egyszerű szövegekké és képekké váljon.
#6 Használja ki a közösségi médiát e-kereskedelmi webhelyén
A felhasználók többnyire mobilon keresik fel a közösségi médiát, és ezt te is kihasználhatod. Könnyítse meg márkája oldalainak követését közösségi követési és megosztási ikonok hozzáadásával, csúsztatható képek beágyazásával, hogy nagyobb figyelmet kapjon a Pinteresten, és közösségi bejelentkezésekkel tegye a regisztrációt a lehető legegyszerűbbé.
Közösségi hírcsatornákat is beágyazhat, hogy arra ösztönözze a felhasználókat, hogy osszák meg fényképeiket a termékkel, és árulják nekik, hogy később visszatérjenek. Ügyfelünk Carbon38 kipróbálta és nagyszerű eredményeket ért el!
Ne felejtse el tesztelni e-kereskedelmi webhelyét mobilra
Az e-kereskedelmi mobilwebhely-tervezés tesztelésének egyik módja az, hogy ellenőrzi a válaszkészségét különböző méretű képernyőkön. Ügyeljen a betöltési időre, az intuitív navigációra, az információk olvashatóságára, valamint az információk elhelyezésére a termékoldalakon.
A tesztelési folyamat kevésbé időigényes és költséghatékonyabbá tétele érdekében a következő eszközöket veheti figyelembe:
- W3C mobileOK Checker. A W3C mobileOK Checker az egyik legjobb eszköz a webhelye mobileszközökön való kompatibilitásának tesztelésére. Az eszköz számos tesztet végez, amelyek azonosítják a mobilwebhely felhasználóbarát jellegét.
- Google Mobilizer. Google Mobilizer dicsérik az intuitív kezelőfelületet és a könnyű használhatóságot. Csak be kell írnia weboldala címét a keresőmezőbe, és az eszköz megkeresi a teljesítmény szűk keresztmetszeteit, és optimalizálási javaslatokat ad e-kereskedelmi mobilwebhelyéhez.
- Gomez. Gomez a mobil készenléti eszköz több mint 30 jól bevált technika alapján teszteli webhelyét. 1 és 5 közötti pontszámot ad. Az eredmények egy olyan dokumentumban jelennek meg, amely javaslatokat tesz webhelye fejlesztésére. Készüljön fel néhány személyes adat megadására, beleértve az e-mail címét és a telefonszámát.
Következtetés
Mivel az m-kereskedelem növekedésre készül, továbbra is ugrálhat a trenden, és optimalizálhatja e-kereskedelmi webhelyét mobilra. Akár egy mobilbarát e-kereskedelmi webhely mellett dönt, akár a semmiből fejleszt egy mobilalkalmazást, tartsa szem előtt a következő mutatókat:
- A mobiloptimalizálás elengedhetetlen ahhoz, hogy előkelő helyen szerepeljen a keresőkben. Még ha nincs is megfelelő műszaki csapata vagy költségvetése egy mobilalkalmazás elkészítéséhez, tegye a mobiloptimalizálást az e-kereskedelmi fejlesztési prioritások közé.
- A sebesség számít. Webhelye mobil verziójának ugyanolyan gyorsnak (ha nem gyorsabbnak) kell lennie, mint az e-kereskedelmi webhelyé. Optimalizálja termékképeit mobilra, adjon hozzá rövid leírásokat, és dolgozzon egy egyoldalas fizetésen.
- Az intuitív felhasználói élmény a mobilon a kulcs a megnövekedett konverziós arányhoz. Könnyítse meg a felhasználók számára a keresett termék megtalálását, csatlakozzon a közösségi médiához, és használja ki a mobil-natív funkciókat a webhelyén.
Soha ne becsülje alá a mobil e-kereskedelmi webhelyek erejét. Lehet, hogy ez a kulcsa vállalkozása növekedésének.
- "
- &
- 2021
- 9
- Lemondás
- Fiók
- aktív
- hirdetések
- Előny
- Alibaba
- Minden termék
- android
- animáció
- app
- cikkben
- Billió
- Doboz
- böngésző
- épít
- üzleti
- változik
- ellenőrzése
- Megrendelés
- Kávé
- Közös
- fogyasztó
- A fogyasztói elektronika
- Fogyasztók
- tartalom
- Átalakítás
- Credits
- Vásárlói hűség
- Vevői elégedettség
- Ügyfelek
- dátum
- kézbesítés
- Design
- részlet
- Fejleszt
- Fejlesztés
- Eszközök
- hajtott
- Csepp
- e-commerce
- e-kereskedelem
- Elektronika
- érzelmek
- ösztönzése
- stb.
- példa
- tapasztalat
- Divat
- GYORS
- Jellemzők
- Fields
- vezetéknév
- megfelelő
- Vaku
- FLIPKART
- következik
- szabadság
- Gadgets
- Globális
- Google keresés
- nagy
- Nő
- Növekedés
- Magas
- Hogyan
- How To
- HTTPS
- azonosítani
- Identitás
- kép
- Hatás
- fontos
- Beleértve
- Növelje
- info
- információ
- iPhone
- kérdések
- IT
- JavaScript
- Kulcs
- nagy
- TANUL
- Tőkeáttétel
- Korlátozott
- LINK
- felsorolás
- kiszámításának
- Hűség
- Gyártás
- piacára
- Marketing
- számít
- intézkedés
- Média
- Mobil
- Mobil alkalmazás
- mobil eszköz
- mobil eszközök
- mobiltelefon
- Navigáció
- hálózatok
- hír
- online
- nyitva
- üzemeltetési
- operációs rendszer
- érdekében
- szerves forgalom
- Más
- Fizet
- teljesítmény
- telefonok
- Platformok
- lengyel
- hatalom
- be
- Termékek
- Termékek
- projektek
- Vásárlás
- Az árak
- Készenlét
- miatt
- Bejegyzés
- kutatás
- Eredmények
- kiskereskedő
- kiskereskedők
- Revealed
- jövedelem
- szabályok
- eladás
- értékesítés
- Skála
- Képernyő
- Keresés
- kereső
- Keresők
- biztonság
- Megosztás
- vásárlók
- Bevásárlás
- bevásárlókocsi
- rövid
- Egyszerű
- SIX
- Méret
- kicsi
- So
- Közösség
- Közösségi média
- Hely
- sebesség
- kezdet
- tartózkodás
- tárolni
- árnyékolók
- előfizetés
- SWIFT
- kapcsoló
- rendszer
- Érintse
- tech
- technikák
- teszt
- Tesztelés
- tesztek
- idő
- tippek
- szerszám
- szerszámok
- felső
- Érintőképernyő
- forgalom
- us
- Felhasználók
- ux
- láthatóság
- kötet
- Walmart
- háló
- weboldal
- honlapok
- szavak
- Munka
- gyertya