Share
Med kontinuerlig konkurransedyktige fremskritt innen mobiltelefon og nettbrettsteknologi er utfordringene for designeren til et e-handelsnettsted stadig skiftende. Mens teknologiske fremskritt i dette området er populært hos forbrukeren og stadig gir bedriftseiere nye muligheter for å nå kunder i stadig mer varierte scenarier og steder, kan det sikkert gi webdesignere noen interessante hindringer. I denne artikkelen skal vi ta opp noen av disse hindringene. Jeg vil bryte ned noen av de viktigste trinnene for å ta hensyn til å forberede et e-handelsnettsted for mobil tilgang og gi deg noe råd ut fra min erfaring.
Etterspørselen etter mobiltilgjengelige e-handelsnettsteder er høy, men det er verdt å merke seg at måten forbrukerne handler på, er forskjellig fra hvordan de kan handle fra skrivebordets komfort. Det er en forventning om å kunne få tilgang til de samme stedene, men på en slik måte er det forenklet for den mindre skjermen.
Forbrukerens kjøpsatferd på mobile enheter varierer betydelig fra det som er sett med større, statiske enheter. I en undersøkelse som ble publisert av Adobe, ble det fremhevet at tavlehandlere er dobbelt så sannsynlig å foreta et kjøp som smarttelefon-kjøpere, og demonstrere måten det bestemte verktøyet påvirker forbrukerens aktivitet på. For å finne ut mer om denne trenden, ta en titt på denne studien på nettbutikk. (Adobe Digital Marketing Insights Study 2012 kan lastes ned her).
Dette sa, det er viktig å opprettholde en balanse i tilgjengelighet; mens tilgang til nettbrett er åpenbart lukrative og rikere mobilbrukere (i sin tur rikere forbrukere) kan lene seg mot iPhone, bør nettstedet utformes for å fungere like bra på alle mobile plattformer. Selv om denne atferdsforskjellen sannsynligvis vil forbli mellom større og mindre enhetsbrukere, kan webdesignere løse problemet når det er mulig ved å ta hensyn til andre problemer som påvirker forskjeller i atferd og i siste rekke gjør det så enkelt som mulig for forbrukerne å foreta kjøp via mobilen nettstedet.
Enten vi snakker om et responsivt nettsted eller en bestemt mobilløsning, er det viktig å sørge for at de viktigste funksjonene overføres, og innholdet på mobilnettstedet prioriteres for enkel bruk. Disse funksjonene bør omfatte:
Et utmerket eksempel på et mobil e-handelsnettsted er Toys R Us nettsiden, som er ASOS; begge er spesielt klare for å navigere og logisk legges ut.
Hvis du finner et nettsted spesielt behagelig å bruke på en mobilenhet, tenk på grunnene til hvorfor og hvilke elementer som gjør dette nettstedet mobilvennlig - gode nettsteder har ofte mye til felles.
Å avgjøre hvilke elementer som er relevante for både desktop og mobil, er en viktig del av prosessen. Trikset er i prioritering; Bestil koblingene dine logisk, og sørg for at funksjonene fungerer like bra for mobile seere som desktop-lesere. De viktigste elementene for et e-handelsnettsted er:
Så følger det at disse alltid skal være øverst på skjermen. Mindre viktig er den sosiale andelen og relaterte produktkoblinger, så selv om nettstedet selvfølgelig bør oppmuntre sistnevnte, å opprettholde fokus på produktet er nøkkelen.
Å bruke ankerpunkter på en side er en av måtene å administrere kundens navigasjon på. Å ha et lite utvalg av linker under "Legg til i kurv" -knappen (for eksempel "beskrivelse", "leveringsinformasjon", "beslektede produkter") som automatisk vil skyve til den aktuelle delen av skjermen, gjør det enkelt og effektiv for brukere å finne ut om produktet før kjøp. Å ha en "back to top" -knapp som er konsekvent tilstede, er et must.
Jeg anbefaler på det sterkeste å bygge e-handelswebsteder med Twitter Bootstrap-rammen. Den er enkel, enkel å bruke og letter skaling mellom større og mindre skjermer uten hikke. Dette leveres med HTML, CSS og JS for mange bruksområder, og gir ulike grensesnittelementer, inkludert knappgrupper, knappetangenter, miniatyrbilder, varsler, fremdriftslinjer og mye mer. De tilbyr også gode råd om å tilpasse alt sammen, samt noen foreslåtte maler og oppmuntring til å "gjenkjøre på eksemplene". Dette hjelper deg å gjøre nettstedet ditt unikt, men til fordel for den første veiledningen gir rammen.
Opendesk er bygget på Twitter BoostrapBruke et rammeverk som dette hjelper også med et annet viktig aspekt av e-handel for mobil: ytelsesoptimalisering. Verktøy som Twitter Bootstrap kan hjelpe med å bruke CSS i stedet for bilder der det er mulig, noe som hjelper resultatoptimalisering. Hvis en gradient er nødvendig, bruk CSS i stedet for et bildesnitt. Eventuelle bilder kan optimaliseres ved å sikre at filstørrelsen er så liten som mulig uten å kompromittere kvaliteten unødvendig. Javascript og CSS-filer bør bli minifisert, og viktigst, sørg for at uønskede Javascript-filer ikke blir kalt inn når de lastes på en mobilenhet. For eksempel, hvis det er en karusell på hjemmesiden og en "klikk for å zoome" Javascript-plugin på produktsidene, sørg for at disse ikke er lastet når nettstedet er tilgjengelig fra en mobilenhet. Alle disse kontrollene hjelper nettstedet å utføre så effektivt som mulig for mobilbrukere.
På grunn av måten vi bruker mobilene våre på for sosiale nettverk, er det sannsynlig at kunder som ser på et nettsted fra mobilene, allerede er logget på Twitter og Facebook-kontoer. Det er viktig at e-handelsstedet ditt er designet for å gjøre det mulig å dele elementer med venner og følgere gjennom disse verktøyene, så raskt som mulig. Det er jo gratis reklame, så det kan gjøres for å oppmuntre det bare å være bra for virksomheten.!
Etsy plasserer sosial delingslinker fremtredende under hvert produktIgjen betyr arten av mobile surfevaner at forbrukerne sannsynligvis vil være mer begrenset i tid enn når de sitter på en datamaskin, og er mye mindre tilbøyelige til å gå i gang med en komplisert prosess (dette er relevant for alle aspekter av mobil e-handelsnettsted , ikke bare sosiale nettverk). Som et resultat er det vår fordel å sikre at alt som tilbys gjennom et e-handelsnettsted, kan utføres raskt og jevnt fra en mobil enhet.
Sosialt nettverkskoblinger er like viktige som andre elementer - de kan tross alt ofte direkte oversette til mer trafikk på webområdet og mer salg av e-handel. Lenker som enkelt kan kopieres, Facebook 'like' knapper og Twitter 'follow' knapper skal alle være tilgjengelige og ukompliserte. På samme måte som nettstedet må forenkles for mobil, blir den mobile brukerens forventninger også forenklet; ingen ønsker å snike rundt med endeløse flere skjermer på en mobiltelefon - se nedenfor for anbefalte kassettestrukturen for et eksempel på hva vi mener. Hvis du tenker på de situasjonene hvor mobil internettilgang oftest foregår - pendling, venter på en venn og venter på tog - er det viktig å legge merke til tankegangen som følger med disse aktivitetene. Mobil forbruker er naturlig mer rastløs enn den statiske shopper. Kunder vil ofte forlate en mobil side helt hvis de møter en ekstern frustrerende opplevelse. Alt om mobil shopping er tatt tilbake til det grunnleggende punktet at hvis det er komplisert å gjøre, så er det høyst sannsynlig at forbrukeren ikke vil gjøre det. Ta en titt her på Nielsen Social Media Report 2012 for noen virkelig nyttig informasjon om forbrukeradferd gjennom sosiale nettverk.
Ettersom kassen prosessen krever mange tekstfelter, kan dette være en av de vanskeligste delene av et e-handelsnettsted for å få rett. Prosessen må være godt strukturert og lett å følge på en mobil enhet. Jeg anbefaler å designe handlekurven i seksjoner som følger:
Ved utformingen av kasseprosessen er en trekkraftstruktur en god tilnærming. Dette gir brukeren et klart bilde av prosessen og holder all relevant informasjon på en skjerm. Igjen, lekerne R Us og ASOS nettsteder fungerer som gode eksempler på handlekurver som er enkle å bruke på mobile enheter.
Hvor jeg jobber, utvikler vi alle våre e-handelsprosjekter ved hjelp av vårt eget system som vi bygget oss for å gjøre det så raskt, pålitelig og fleksibelt som mulig. Hvis du er en webutvikler og har tid, anbefaler vi at du investerer den tiden i å utvikle et eget system,som det gjør at du kan skreddersy det til dine presise behov. Men undervurder ikke hvor kompleks og involvert dette kan være! For enkeltpersoner er det ofte ikke fornuftig fra et ROI-perspektiv, og kan føre til ytterligere komplikasjoner når utvikling og støtte må fortsette. Hvis du er i stedet på jakt etter en "off-the-shelf" -løsning, så er kravene avhengig, vi anbefaler Magento eller Shopify. Woocommerce blir også raskt populær på grunn av sin velkjente integrasjon med Wordpress-plattformen.
Distribusjon av typen handlekurvsteknologi som brukes globalt (mars 2014) kildeMagento er en åpen kildekode plattform som kan lastes ned og tilpasses. Ulempen med dette bestemte alternativet er at den er stor og kan være treg, så hvis du bruker denne plattformen, vil de ovennevnte punktene på ytelsesoptimalisering være spesielt relevant.
Shopify er en vertskapsløsning som er rask og enkel å bruke. Nye plugins og oppdateringer blir stadig utgitt, og det er derfor lett å finne plugins som vil bidra til å øke hastigheten på e-handelsstedet ditt for mobile enheter. Ta en titt på den siste serien Lær hvordan du bygger temaer for Shopify for å lære mer.
Det er verdt å shoppe litt selv; besøke forskjellige e-handelsnettsteder fra en mobilenhet og ta del av de som er gode og, viktigere, hvilke som er dårlige. Nettsteder som ser bra ut på en stasjonær skjerm, oversetter ikke alltid godt til mobile enheter. Vær oppmerksom på de dårlige tingene så mye som de tingene du finner nyttige, for å unngå å gjøre de samme feilene.
Huske; hold det enkelt. Jo klarere trinnene og jo mer gjennomsiktig kjøpsprosessen, jo bedre.Mobile forbrukere forventer en ukomplisert og rask respons opplevelse; shopping fra en mobil er iboende en sinnstilstand så mye som det er et valg av enhet. Fremfor alt, gjør det enkelt for kundene å bruke pengene sine med deg,heller enn med noen andre hvis nettsted bare skjer for å være bedre strukturert.
Accentsconagua