Streven naar optimalisatie van het ontwerp van mobiele e-commerce websites? Maak je geen zorgen, dit is wat je moet doen
In 2021 is de groei van de e-commerce grotendeels gedreven door mobiel. In werkelijkheid, Insider-intelligentie voorspelt dat het volume aan m-commerce tegen 488 zal stijgen tot 44 miljard dollar, of 2024% van de wereldwijde omzet op de e-commercemarkt. Ongeveer 9.2% van deze markt zal worden gedomineerd door de VS.
Of je het nu leuk vindt of niet, een mobielvriendelijke e-commerce website is nu eerder een noodzaak dan een keuze; Anders gaan detailhandelaren alleen maar ten onder voor de consumenten. Bij veel van onze projecten bij Elogic wordt het ontwerp van mobiele e-commercewebsites als een van de essentiële genoemd Vereisten voor e-commercewebsites, De belangrijkste redenen hiervoor zijn hogere websiteconversiepercentages en een grotere zichtbaarheid in de zoekmachines.
Als u gebruik wilt maken van de mobiele e-commercewebsite, maar niet zeker weet waar u moet beginnen, dan is dit artikel iets voor u. Lees verder om meer te weten te komen over de verschillen tussen mobielvriendelijk, voor mobiel geoptimaliseerd en responsief ontwerp, ontdek zes mobiele optimalisatietips en ontdek hoe u uw e-commercewebsite voor mobiel kunt testen.
Waarom een mobielvriendelijke e-commercewebsite niet alleen maar een trend is
Een mobielvriendelijke e-commerce website betekent dat gebruikers deze vrij kunnen gebruiken op een mobiel apparaat: uw website “verkleint” zodat deze op het kleine scherm van de telefoon past, er zijn geen onbruikbare functies of flash-animaties, de afbeeldingen zijn kleiner en de navigatie is veel eenvoudiger.
Ook al is het conversiepercentage op mobiel iets lager dan op de desktop (1.81% versus 1.98%), betekent dit niet dat u het moet afschaffen. Mobiele e-commercewebsites kunnen de reden zijn waarom gebruikers naar de desktop gaan en converteren omdat ze hun productonderzoek met hun telefoons hebben gedaan. Zelfs uit één van de onderzoeken bleek dat zegt 67% van de klanten Het is minder waarschijnlijk dat ze bij het merk winkelen als ze geen website hebben die is geoptimaliseerd voor mobiel.
De voordelen van een mobielvriendelijke e-commerce website beperken zich niet alleen tot hogere conversiepercentages:
- Het levert een betere gebruikerservaring (UX) op en genereert zo meer verkeer vanaf apparaten in alle soorten en maten.
- Het is minder waarschijnlijk dat gebruikers uw website gefrustreerd verlaten en uw merk associëren met negatieve emoties.
- Zoekmachines zullen een geoptimaliseerde website naar de top duwen, omdat UX een van de rankingfactoren is.
- Het zal de klantloyaliteit vergroten, omdat niet-mobielvriendelijke websites vaag en van lage kwaliteit lijken.
Hoewel mobiele optimalisatie misschien een klein detail lijkt, kan het een diepgaande impact hebben op uw e-commercebedrijf door het aantal verkopen en het verkeer naar uw hoofdwebsite te vergroten.
Mobielvriendelijk versus mobiel geoptimaliseerd versus responsief: wat is het verschil?
Mobielvriendelijke, voor mobiel geoptimaliseerde en responsieve ontwerpen zijn drie verschillende benaderingen voor het creëren van de mobiele e-commerce websiteversie.
Mobielvriendelijke e-commercewebsite
Mobielvriendelijk ontwerp gaat over het afstemmen van de bestaande web-UX op mobiele apparaten. Het is een verkleinde versie van de website die u op de desktop ziet en die het gemakkelijkst te implementeren is.
Een mobielvriendelijke e-commerce website is voldoende om hoger te scoren in de zoekresultaten van Google (dat kan zelfs). voer een mobielvriendelijke test uit om het te controleren), maar het zal de gebruikerservaring niet maximaliseren. Kleine e-commerce winkels die voornamelijk tekst en afbeeldingen bevatten, kunnen hiervan profiteren, maar de UX op uw afrekenpagina blijft intact.
Voor mobiel geoptimaliseerd ontwerp
Het voor mobiel geoptimaliseerde ontwerp volgt een mobile-first-benadering. Met andere woorden: je ontwerpt eerst een aparte website voor mobiele apparaten (grotendeels omdat deze meer beperkingen heeft) en schaalt deze later op naar de desktopversie. Controleer er een paar beste voorbeelden van PWA in de detailhandel, zoals Alibaba of Flipkart, ze zijn gebouwd met een mobile-first-aanpak in gedachten.
Mobiel-responsief ontwerp
Responsief mobiel website-ontwerp voor e-commerce betekent dat de inhoud van de website automatisch wordt aangepast aan het scherm van de gebruiker. Het is afhankelijk van een mobiel besturingssysteem en reageert zelfs op de kleinste veranderingen in de schermgrootte, wat gebruikelijk is voor verschillende iPhone-versies en Android-apparaten. De inhoud is dynamisch: de grootte van de afbeeldingen en lettertypen veranderen, lay-outs passen zich aan. Het vergt een aanzienlijk budget en e-commerce ontwikkeling, maar is de meest gebruiksvriendelijke van het trio.
Wat is het verschil tussen web- en mobiel e-commerceontwerp?
Webdesign en e-commerce-ontwerp voor mobiel zijn nooit gelijkwaardig. Het verschil tussen de twee is om een aantal redenen enorm:
- Je hebt veel meer vrijheid als het gaat om het ontwerpen van een desktopwebsite. Niet alleen interface-elementen van het besturingssysteem bepalen het ontwerp van de mobiele e-commerce website, maar ook een kleiner scherm zorgt ervoor dat de bezoeker veel minder informatie op de website kan zien. Om deze beperkingen te compenseren, stellen m-commerce retailers gebruikers in staat om in en uit te zoomen op webpagina's, en om de lettergroottes aan te passen om de tekst gemakkelijk leesbaar te maken.
- Een mobiele website heeft op aanraking gebaseerde invoer. In plaats van een muis of toetsenbord te gebruiken, communiceren de meeste mobiele gebruikers met hun apparaten via een touchscreen en mobielspecifieke functionaliteiten, zoals click-to-call of locatiegebaseerde kaarten.
- De context van het gebruik van een website op desktop en mobiel is verschillend. Wanneer een klant op uw e-commercewebsite komt winkelen, is de kans groot dat hij een aankoop voltooit. Ondertussen zijn mobiele gebruikers snelle shoppers. Ze gebruiken uw mobiele e-commercewebsite om producten te onderzoeken, locaties te zoeken, het nieuws te lezen, enz., maar gaan mogelijk niet door naar de kassa. Een webontwerp zal dus de verkoop stimuleren, maar een mobiel e-commerce-ontwerp zal de conversies optimaliseren en de klantenloyaliteit vergroten.
Over visuele uitstraling gesproken, het ontwerp van web en mobiele e-commerce vertoont ook opvallende verschillen. Hier is een voorbeeld van een website voor consumentenelektronica TurcomVS ontworpen door Elogic. Turcom verkoopt gadgets en elektronische apparaten. Wanneer u het op een bureaublad opent, ziet u de volgende versie:
Bekijk nu dezelfde website op uw mobiele telefoon. Alle belangrijke elementen van de website worden bewaard: zoeken op de site, winkelwagen, persoonlijke kast. Toch zijn de inhoud en visuele elementen opnieuw georganiseerd voor een betere gebruikerservaring.
Hoe kan ik de e-commerce website voor mobiel optimaliseren?
Als uw bedrijf nog niet klaar is voor de mobile-first of mobiel-responsieve website (of het nu gaat om budget of technische expertise), hoeft u zich geen zorgen te maken. U hoeft geen mobiele app te ontwikkelen om vanaf het begin hoger te scoren. In plaats daarvan kunt u uw e-commercewebsite optimaliseren voor mobiel.
Hier zijn zes manieren om het webontwerp voor mobiele e-commerce op een kosteneffectieve manier te optimaliseren.
#1 Maak uw website razendsnel
Ongeveer 47% van de klanten verwacht dat websites worden geladen minder dan 2 seconden; anders vallen ze gewoon neer. Google houdt ook rekening met de laadsnelheid bij het rangschikken van uw website in een zoekmachine.
Uw organische verkeer en klanttevredenheid zijn ook afhankelijk van de snelheid van de website. Walmart merkte dat elke seconde verbeterde websitesnelheid 2% meer conversies betekent en dat elke 100 ms zich vertaalt in een omzetstijging van 1%.
Om de snelheid te verbeteren, kunt u:
- Optimaliseer afbeeldingen
- Gebruik Content Delivery Networks (CDN's)
- Verklein en combineer CSS, JavaScript en HTML
- Maak gebruik van asynchroon laden
- Hosting upgraden
- Compressie inschakelen
- Gebruik browsercaching
#2 Zorg voor een gemakkelijke afrekenervaring
Afrekenervaring betekent veel: je hebt misschien een goed doordachte marketingtrechter, maar een schetsmatige afrekening, zodat gebruikers hun winkelwagentje toch zullen verlaten. Gebruik de volgende tips om het afrekenen voor mobiel te optimaliseren:
- Maak een mobiele versie van de eCommerce-website die op het scherm van de gebruiker past
- Vereenvoudig het formulier
- Verwijder alle soorten afleiding, zoals advertenties en e-mailabonnementsformulieren
- Gebruik veiligheidszegels
- Maak grote knoppen met gemakkelijk leesbare tekst
- Maak een balk met de voortgang van de gebruiker
- Automatisch aanvullen toestaan
- Niet linken buiten het afrekenproces
- Gebruik verschillende toetsenborden voor verschillende velden (trek bijvoorbeeld het numerieke toetsenbord omhoog voor het telefoonnummer in plaats van klanten er zelf naar te laten overschakelen)
Zo ziet een voor mobiel geoptimaliseerde kassa eruit Roller konijn's website, een online modewinkel die Elogic heeft ontwikkeld. De retailer optimaliseerde de gebruikerservaring en zag een daling in het aantal verlaten winkelwagentjes.
#3 Werk aan intuïtief zoeken op locatie
Navigatie is een essentieel onderdeel van webontwerp voor mobiele e-commerceplatforms. Met duizenden items om door te bladeren, moeten gebruikers hun keuze zo veel mogelijk beperken om sneller bij de producten te komen die ze willen.
Om uw zoekopdracht op locatie voor mobiel te optimaliseren, raden we u aan deze kort te maken, de belangrijkste pagina's eerst te vermelden en grotere knoppen in het menu te maken, aangezien de vingers van gebruikers groter zijn dan een pijl op het scherm. Vermijd hover-and-expand-menu's om de wrijving van het plotseling verdwijnen en opnieuw verschijnen van subnavigatie te minimaliseren.
#4 Poets uw productpagina's op
U hoeft de productbeschrijvingen niet noodzakelijkerwijs aan te passen aan de productpagina op het mobiele schermformaat. Maar het wordt aanbevolen om ze kort te maken (maximaal 200 tekens) en ze net boven de vouw naast een foto van hoge kwaliteit te plaatsen. Vermijd talloze scrolls, opvouwbare inhoudsblokken en getikte inhoud. We raden ook aan om de “terug naar boven”-knop te gebruiken, maar zorg ervoor dat klanten deze niet per ongeluk indrukken terwijl ze proberen eenvoudigweg naar beneden te scrollen.
#5 Optimaliseer de gebruikerservaring
Het website-ontwerp van UX voor mobiele e-commerce ziet er anders uit dan wat u vroeger op desktops zag. Een van de meest essentiële regels is om de knoppen groot te houden en de tekst te minimaliseren, aangezien je niet veel ruimte hebt om mee te werken. Mobiele gebruikers worden gemakkelijker afgeleid dan desktopgebruikers, dus zorg ervoor dat u verkorte versies van uw verkochte exemplaren aanbiedt.
Houd ook rekening met een duimpositie. Terwijl desktopklanten letterlijk elk deel van het scherm kunnen gebruiken, reiken mobiele gebruikers zover als hun duim reikt. De rechterbenedenhoek is een van de meest actieve ruimtes voor mobiele gebruikers, dus zorg ervoor dat u de belangrijke knoppen (zoals toevoegen aan winkelwagen) daar plaatst.
Vergeet ten slotte niet uw merkidentiteit te behouden: gebruik zoveel mogelijk bedrijfslettertypen en -kleuren om uw mobiele versie niet om te zetten in eenvoudige teksten en afbeeldingen.
#6 Maak gebruik van sociale media voor uw e-commerce website
Gebruikers gaan meestal op sociale media op mobiel en u kunt er uw voordeel mee doen. Maak het gemakkelijk om de pagina's van uw merk te volgen door sociale volg- en deelpictogrammen toe te voegen, pinbare afbeeldingen in te sluiten om meer aandacht op Pinterest te krijgen en sociale logins te gebruiken om de registratie zo eenvoudig mogelijk te maken.
U kunt ook sociale feeds insluiten om gebruikers aan te moedigen hun foto's met het product te delen en ze een verkoop te geven, zodat ze later terugkomen. Onze klant Carbon38 heb het geprobeerd en kreeg geweldige resultaten!
Vergeet niet uw e-commercewebsite voor mobiel te testen
Eén manier om het ontwerp van uw mobiele e-commercewebsite te testen, is door de reactiesnelheid ervan te controleren op apparaten met verschillende schermformaten. Besteed aandacht aan de laadtijd, intuïtieve navigatie, leesbaarheid van informatie en informatieplaatsing op de productpagina's.
Om het testproces minder tijdrovend en kosteneffectiever te maken, kunt u de volgende hulpmiddelen overwegen:
- W3C mobileOK Checker. De W3C mobielOK Checker is een van de beste tools om de compatibiliteit van uw site op mobiele apparaten te testen. De tool voert verschillende tests uit die de gebruiksvriendelijkheid van de mobiele website in kaart brengen.
- Google Mobiliser. Google Mobiliser wordt geprezen om zijn intuïtieve interface en gebruiksgemak. U hoeft alleen maar het adres van uw webpagina in het zoekvak in te voeren, en de tool zal knelpunten in de prestaties vinden en optimalisatiesuggesties geven voor uw mobiele e-commercewebsite.
- Gomes. Gomez mobile readiness tool test uw website aan de hand van ruim 30 beproefde technieken. Het levert u een score op tussen de 1 en 5. De resultaten worden weergegeven in een document waarin wordt aangegeven hoe u uw website kunt verbeteren. Zorg ervoor dat u enkele persoonlijke gegevens invult, waaronder uw e-mailadres en een telefoonnummer.
Conclusie
Nu m-commerce op het punt staat te groeien, kunt u nog steeds op de trend inspringen en uw e-commercewebsite voor mobiel optimaliseren. Of u nu besluit om voor een mobielvriendelijke e-commercewebsite te gaan of een geheel nieuwe mobiele app te ontwikkelen, houd rekening met de volgende tips:
- Mobiele optimalisatie is een must om hoog te scoren in zoekmachines. Zelfs als u niet over het technische team of het budget beschikt om een mobiele app te bouwen, moet u mobiele optimalisatie tot een van uw prioriteiten voor de ontwikkeling van e-commerce maken.
- Snelheid is belangrijk. De mobiele versie van uw website moet net zo snel (zo niet sneller) zijn als de e-commerce website. Optimaliseer uw productafbeeldingen voor mobiel, voeg korte beschrijvingen toe en werk aan een betaalpagina van één pagina.
- Intuïtieve UX op mobiel is de sleutel tot hogere conversiepercentages. Maak het gebruikers gemakkelijk om het product te vinden waarnaar ze zoeken, verbinding te maken met sociale media en gebruik te maken van mobiel-native functionaliteit voor gebruik met uw website.
Onderschat nooit de kracht van mobiele e-commercewebsites. Het kan de sleutel zijn tot de groei van uw bedrijf.
- "
- &
- 2021
- 9
- Verlatenheid
- Account
- actieve
- advertenties
- Voordeel
- Alibaba
- Alles
- android
- animatie
- gebruiken
- dit artikel
- Miljard
- Box camera's
- browser
- bouw
- bedrijfsdeskundigen
- verandering
- controleren
- Afrekenen
- Koffie
- Gemeen
- consument
- Consumentenelektronica
- Consumenten
- content
- Camper ombouw
- credits
- Klantenbinding
- Klanttevredenheid
- Klanten
- gegevens
- levering
- Design
- detail
- ontwikkelen
- Ontwikkeling
- systemen
- gedreven
- Val
- e-commerce
- ecommerce
- Elektronica
- emoties
- aanmoedigen
- etc
- voorbeeld
- ervaring
- Mode
- SNELLE
- Voordelen
- Velden
- Voornaam*
- geschikt
- flash
- FLIPKART
- volgen
- Vrijheid
- Gadgets en electronica
- Globaal
- Kopen Google Reviews
- Google Search
- groot
- Groeien
- Hoge
- Hoe
- How To
- HTTPS
- identificeren
- Identiteit
- beeld
- Impact
- belangrijk
- Inclusief
- Laat uw omzet
- info
- informatie
- iPhone
- problemen
- IT
- JavaScript
- sleutel
- Groot
- LEARN
- Hefboomwerking
- Beperkt
- LINK
- vermelding
- laden
- Loyaliteit
- maken
- Markt
- Marketing
- Zaken
- maatregel
- Media
- Mobile
- Applicatie voor de mobiele telefoon
- mobiel apparaat
- mobiele toestellen
- mobiele telefoon
- Navigatie
- netwerken
- nieuws
- online.
- open
- werkzaam
- besturingssysteem
- bestellen
- organisch verkeer
- Overige
- Betaal
- prestatie
- telefoons
- platforms
- Pools
- energie
- presenteren
- Product
- Producten
- projecten
- inkomsten
- Tarieven
- gereedheid
- redenen
- Registratie
- onderzoek
- Resultaten
- kleinhandelaar
- verkooppunten
- Revealed
- inkomsten
- reglement
- sale
- verkoop
- Scale
- scherm
- Ontdek
- zoekmachine
- Zoekmachines
- veiligheid
- Delen
- Shoppers
- Winkelen
- winkelwagen
- Bermuda's
- Eenvoudig
- ZES
- Maat
- Klein
- So
- Social
- social media
- Tussenruimte
- snelheid
- begin
- blijven
- shop
- winkels
- abonnement
- SWIFT
- Stap over voor slechts
- system
- Tik
- tech
- technieken
- proef
- Testen
- testen
- niet de tijd of
- tips
- tools
- tools
- top
- Touchscreen
- verkeer
- us
- gebruikers
- ux
- zichtbaarheid
- volume
- Walmart
- web
- Website
- websites
- woorden
- Mijn werk
- zoom