Share
Met continu concurrerende ontwikkelingen in mobiele telefoon- en tablettechnologie veranderen de uitdagingen voor de ontwerper van een e-commerce website voortdurend. Hoewel technologische vooruitgang op dit gebied populair is bij de consument en constant bedrijfseigenaren nieuwe kansen biedt om klanten te bereiken in steeds meer gevarieerde scenario's en locaties, kan het website-ontwerpers zeker een aantal interessante hindernissen bieden. In dit artikel gaan we enkele van die hindernissen aanpakken. Ik zal een paar van de belangrijkste stappen beschrijven om rekening mee te houden bij het voorbereiden van een e-commercesite voor mobiele toegang en biedt u wat advies op basis van mijn ervaring.
De vraag naar voor mobiel toegankelijke e-commercesites is hoog, maar het is de moeite waard om op te merken dat de manier waarop consumenten winkelen vanaf mobiele apparaten anders is dan hoe ze vanuit hun bureau kunnen winkelen. Er is een verwachting dat je toegang kunt krijgen tot dezelfde sites, maar op zo'n manier dat het op het kleinere scherm voldoende vereenvoudigd is.
Het koopgedrag van consumenten op mobiele apparaten verschilt aanzienlijk van dat van grotere, statische apparaten. In een door Adobe gepubliceerde enquête werd benadrukt dat tabletgebruikers winkelen twee keer zo waarschijnlijk een aankoop doen als smartphonekopers, wat aantoont hoe de specifieke tool de activiteit van de consument beïnvloedt. Lees deze studie over tabletshoppen voor meer informatie over deze trend (de 2012 Adobe Digital Marketing Insights Study kan hier worden gedownload).
Dit gezegd hebbende, is het belangrijk om een evenwicht te bewaren in toegankelijkheid; terwijl tablettoegang natuurlijk lucratief is en rijkere mobiele gebruikers (op hun beurt rijkere consumenten) mogelijk naar de iPhone leunen, zou de site ontworpen moeten zijn om even goed te werken op alle mobiele platforms. Hoewel dit gedragsverschil waarschijnlijk zal blijven bestaan tussen grotere en kleinere apparaatgebruikers, kunnen webdesigners het probleem waar mogelijk aanpakken door rekening te houden met andere kwesties die verschillen in gedrag beïnvloeden en uiteindelijk het voor consumenten zo gemakkelijk mogelijk maken om aankopen te doen via de mobiele telefoon. plaats.
Of we het nu hebben over een responsieve website of een specifieke mobiele oplossing, het is van vitaal belang om ervoor te zorgen dat de belangrijkste functies worden overgedragen en dat de inhoud van de mobiele site voorrang krijgt vanwege het gebruiksgemak. Deze functies moeten het volgende omvatten:
Een uitstekend voorbeeld van een mobiele e-commercesite is de Toys R Us-website, evenals ASOS; beide zijn bijzonder duidelijk om te navigeren en logisch op te zetten.
Als u een site bijzonder prettig vindt om te gebruiken op een mobiel apparaat, denk dan eens na over de redenen waarom en welke elementen deze site mobielvriendelijk maken - goede sites hebben vaak veel gemeen.
Bepalen welke elementen relevant zijn voor zowel desktop als mobiel is een essentieel onderdeel van het proces. De kunst is om prioriteiten te stellen; bestel uw links logisch en zorg ervoor dat de functies net zo goed werken voor mobiele kijkers als desktop-viewers. De belangrijkste elementen voor een e-commercesite zijn:
Dit betekent dat deze altijd bovenaan het scherm moeten staan. Minder belangrijk zijn het sociale aandeel en gerelateerde productkoppelingen, dus de site moet natuurlijk de laatste stimuleren, focus houden op het product staat centraal.
Het gebruik van ankerpunten binnen een pagina is een van de manieren om de navigatie van de klant te beheren; met een kleine selectie van links onder de knop 'toevoegen aan winkelmandje' (zoals 'beschrijving', 'bezorginfo', 'verwante producten') die, wanneer ingedrukt, automatisch naar het relevante deel van het scherm schuiven, maakt het gemakkelijk en efficiënt voor gebruikers om meer te weten te komen over het product voorafgaand aan de aankoop. Het hebben van een 'back to top'-knop die consequent aanwezig is, is een must.
Ik raad ten zeerste aan om e-commerce websites te bouwen met behulp van het Twitter Bootstrap-framework. Het is eenvoudig, gemakkelijk te gebruiken en vergemakkelijkt het schalen tussen grotere en kleinere schermen zonder hikken. Dit wordt geleverd met HTML, CSS en JS voor tal van toepassingen, met verschillende interface-elementen zoals knopgroepen, knoppen voor knoppen, miniaturen, waarschuwingen, voortgangsbalkjes en nog veel meer. Ze bieden ook een goed advies om alles samen te stellen, evenals enkele gesuggereerde sjablonen en aanmoediging om de [voorbeelden] te herhalen. Dit helpt u om uw site uniek te maken, maar met het voordeel van de initiële begeleiding die het framework biedt.
Opendesk is gebouwd op Twitter BoostrapHet gebruik van een dergelijk framework helpt ook bij een ander belangrijk aspect van e-commerce voor mobiel: prestatie-optimalisatie. Tools zoals Twitter Bootstrap kunnen waar mogelijk helpen bij het gebruik van CSS in plaats van afbeeldingen, wat de prestatie-optimalisatie ten goede komt. Als een verloop nodig is, gebruikt u CSS in plaats van een afbeeldingsegment. Alle afbeeldingen kunnen worden geoptimaliseerd door ervoor te zorgen dat de bestandsgrootte zo klein mogelijk is zonder dat dit ten koste gaat van de kwaliteit. Javascript- en CSS-bestanden moeten worden verkleind en, het allerbelangrijkste, zorgen ervoor dat ongewenste Javascript-bestanden niet worden opgeroepen wanneer ze op een mobiel apparaat worden geladen. Als er bijvoorbeeld een carrousel op de startpagina staat en een Javascript-plugin 'klik om in te zoomen' op de productpagina's, zorg er dan voor dat deze niet worden geladen wanneer de site wordt benaderd vanaf een mobiel apparaat. Al deze controles helpen de site om zo efficiënt mogelijk te presteren voor mobiele gebruikers.
Vanwege de manieren waarop we onze mobiele apparaten gebruiken voor sociale netwerken, is het waarschijnlijk dat klanten die een site van hun mobiele telefoon bekijken, al zijn ingelogd op hun Twitter- en Facebook-accounts. Het is belangrijk dat uw e-commercesite is ontworpen om items met vrienden en volgers zo snel en gemakkelijk mogelijk via deze tools te delen. Het is tenslotte gratis adverteren, dus alles wat u kunt doen om het aan te moedigen, kan alleen maar goed zijn voor uw bedrijf.!
Etsy plaatst social sharing-links prominent onder elk productNogmaals, de aard van mobiele surfgewoonten betekent dat consumenten waarschijnlijk op tijd meer beperkt zijn dan wanneer ze aan een computer zitten en veel minder snel zullen beginnen aan een gecompliceerd proces (dit is relevant voor alle aspecten van de mobiele e-commercesite , niet alleen sociale netwerken). Als gevolg hiervan is het in ons voordeel om ervoor te zorgen dat alles wat wordt aangeboden via een e-commercesite snel en soepel kan worden uitgevoerd vanaf een mobiel apparaat.
Sociale netwerklinks zijn net zo belangrijk als elk ander element - ze kunnen immers vaak direct worden vertaald in meer websiteverkeer en meer e-commerceverkoop. Links die gemakkelijk kunnen worden gekopieerd, Facebook-achtige knoppen en Twitter-volgknoppen moeten allemaal toegankelijk en ongecompliceerd zijn. Net zoals de site vereenvoudigd moet worden voor mobiel, worden de verwachtingen van de mobiele gebruiker ook vereenvoudigd; niemand wil rondrennen met eindeloze meerdere schermen op een mobiele telefoon - zie hieronder voor onze aanbevolen uitcheckstructuur voor een voorbeeld van wat we bedoelen. Als u nadenkt over het soort situaties waarin mobiele internettoegang het vaakst plaatsvindt - woon-werkverkeer, wachten op een vriend, wachten op een trein - is het belangrijk om kennis te nemen van de mindset die bij die activiteiten hoort. De mobiele consument is van nature rustelozer dan de statische shopper. Klanten verlaten vaak een mobiele site helemaal als ze geconfronteerd worden met een op afstand frustrerende ervaring. Alles over mobiel winkelen wordt teruggebracht tot het fundamentele punt dat, als het ingewikkeld is om te doen, het hoogst waarschijnlijk is dat de consument het niet zal doen. Bekijk hier het Nielsen Social Media Report 2012 voor een aantal echt nuttige informatie over het gedrag van consumenten via sociale netwerken.
Omdat het afrekenproces om meerdere tekstvelden vraagt, kan dit een van de moeilijkste onderdelen van een e-commercesite zijn om goed te krijgen. Het proces moet goed gestructureerd zijn en gemakkelijk te volgen op een mobiel apparaat. Ik zou adviseren het winkelwagentje als volgt in secties te ontwerpen:
Bij het ontwerpen van het afrekenproces is een accordeonstructuur een goede benadering. Dit geeft de gebruiker een duidelijk beeld van het proces en houdt alle relevante informatie op één scherm. Nogmaals, de Toys R Us- en ASOS-websites zijn goede voorbeelden van winkelwagentjes die gemakkelijk te gebruiken zijn op mobiele apparaten.
Waar ik werk, ontwikkelen we al onze e-commerce-projecten met behulp van ons eigen systeem dat we zelf hebben gebouwd om het zo snel, betrouwbaar en flexibel mogelijk te maken. Als u een webontwikkelaar bent en de tijd hebt, raden we u ten zeerste aan om die tijd te investeren in het ontwikkelen van een eigen systeem,omdat het u in staat stelt om het aan te passen aan uw specifieke behoeften. Onderschat echter niet hoe complex en betrokken dit kan zijn! Voor individuen is het vaak niet logisch vanuit ROI-perspectief en kan het leiden tot verdere complicaties wanneer ontwikkeling en ondersteuning moeten worden voortgezet. Als u in plaats daarvan op zoek bent naar een 'off-the-shelf' oplossing dan, afhankelijk van de vereisten, raden we Magento of Shopify aan. Woocommerce wint ook snel aan populariteit dankzij de vertrouwde integratie met het Wordpress-platform.
Distributie van het type winkelwagentechnologie dat wereldwijd (maart 2014) wordt gebruiktMagento is een open-sourceplatform dat kan worden gedownload en aangepast. Het nadeel van deze specifieke optie is dat deze groot is en traag kan zijn, dus als u dit platform gebruikt, zijn de bovenstaande punten over prestatie-optimalisatie bijzonder relevant.
Shopify is een gehoste oplossing die snel en gemakkelijk te gebruiken is. Er worden voortdurend nieuwe plug-ins en updates uitgegeven en als gevolg daarvan zijn plug-ins eenvoudig te vinden die uw e-commercesite voor mobiele apparaten helpen versnellen. Bekijk de recente serie Leer hoe u thema's kunt maken voor Shopify voor meer informatie.
Het is de moeite waard om zelf wat te 'shoppen'; verschillende e-commercesites bezoeken vanaf een mobiel apparaat en kennis nemen van de goede en vooral slechte. Sites die er goed uitzien vanaf een desktopscherm, vertalen zich niet altijd goed naar mobiele apparaten. Let net zo goed op de slechte dingen als de dingen die u nuttig vindt, om te voorkomen dat u dezelfde fouten maakt.
Onthouden; hou het simpel. Hoe duidelijker de stappen en hoe transparanter het koopproces, hoe beter.Mobiele consumenten verwachten een ongecompliceerde en snel reagerende ervaring; winkelen vanaf een mobiel is inherent een gemoedstoestand, net zoals het een apparaatkeuze is. Maak het bovendien vooral gemakkelijk voor uw klanten om hun geld met u uit te geven,in plaats van met iemand anders wiens site toevallig beter gestructureerd is.
Accentsconagua