En utstilling av mobil e-handel
Optimalisering av nettsteder for mobilnett er en oppgave. Og optimalisering av e-handelsnettsteder for mobilnett er et dyr som designere og utviklere bare har begynt å tømme.
Ikke overraskende, omfatter større bedrifter mediet først, sannsynligvis fordi de har ressurser og salgsstrøm for å rettferdiggjøre det. Tross alt, selv om et e-handelsnettsted får betydelig trafikk, vil en liten andel av det være mobilbasert. Og en enda mindre prosentandel av trafikken vil faktisk fullføre sitt salg.
Med momentum som egentlig virkelig begynner i denne arenaen, er menneskers erfaring med full mobil e-handelstransaksjoner begrenset. Dette gjør nisje en eksperimentell i beste. Heldigvis, gitt e-handelens natur, kan suksessene måles nøye og testes nøye. Dette er et medium som fortsatt trenger definisjon.
En stor hindring mot fremgang er mangel på eksempler. Surfing gallerier for å finne massevis av interessante ideer er ikke engang nær å være rask og enkel. Det er bare noen få små samlinger av mobildesign, enda mindre for e-handel. For å løse dette har jeg samlet 10 fantastiske eksempler på mobil e-handel. QR koder er inkludert for enklere surfing. Du kan finne mange apps for mobiltelefonene dine som kan lese disse kodene.
1. Walmart
En felles tilnærming til alle nettstedene som er omtalt her, er å ha en portal-type hjemmeside. Walmart er ikke annerledes. Imidlertid, mens de fleste av nettstedene er avhengige av tekstbaserte lister, har denne et rutenett med ikoner, noe som er mye enklere å bla gjennom. Mange av de mobile nettstedene som er dekket her, har lister som er så små at de er vanskelige å bruke. Walmart kombinerer ikoner med tekst for å gjøre målene enkle å treffe.
Den største gotchaen på Walmart-nettsiden er at du må hoppe til hovedsiden for å fullføre en transaksjon. Allikevel er informasjon og knapper ekstremt enkle å bruke, klar i funksjon og godt organisert.
2. Leker-R-Us
De Toys-R-Us Nettstedet er et skritt i riktig retning. Men det kan gjøre noen viktige ting bedre. Først fant jeg listen over knapper på hjemmesiden for å være litt for liten. Jeg forstår fristelsen til å krympe dem ned for å bevare plass, men de ville være mye lettere å bruke med bare litt mer plass. Jo, jeg måtte bla mer, men det er en god avgang.
Når du kommer forbi hjemmesiden, blir det mye bedre. Spesielt har dette nettstedet en av de bedre handlekurvsidene. Knappene er klare, og balansen mellom tetthet og trykk-evne virker riktig. Alt i alt, et godt eksempel på hvordan du tydelig kommuniserer handlingspunkter.
3. Crocs
Mobil utvikling er fortsatt svært dominert av utviklere, så det er lettelse å finne et vakkert designet mobilnettsted. Slik er tilfellet med Crocs . Nettstedet er godt implementert og en skjønnhet å se på.
Kataloglistevisningen er spesielt ren. Den eneste måten det kunne gjøres noe slankere, ville være å eliminere produktnavn. Uansett gir hver rad et enkelt mål, med klar og relevant informasjon.
4. JC Penny
Et problem som designere av JC Penny Mobil butikken møttes var produktomfanget. Hvordan aktiverer du brukerne å effektivt bla gjennom et bredt spekter av alternativer i en seksjon som menns bukser? Løsningen, et enkelt drop-down system, gjør det mulig for kunder å raskt filtrere kriterier for å komme seg til produktene de trenger.
De store bildene er også en veldig fin funksjon. Legg merke til hvor lett det er å se de faktiske elementene i produktdetaljvisningen. Jeg mistenker at konverteringsfrekvensen på mobile nettsteder er ekstremt lav, og jeg kan ikke hjelpe, men tenk at flott fotografering som dette er et av de få våpnene som bekjemper dette.
5. Pottery Barn
Formelen skal være ganske klar nå: logo øverst, søk under det, en innledende grafikk for å markedsføre et produkt eller salg, etterfulgt av en liste over hovedproduktkategorier. Og vi finner den nøyaktige strukturen på Pottery Barn S mobile nettsted.
En helt strålende detalj er dette nettstedets løsning på problemet med lange brødkrummer. Du vil legge merke til i listen over produktkategorier at breadcrumb-stien har blitt sterkt forkortet til å inkludere bare den siste delen av strengen. Sammenligne dette med inntrengningen av breadcrumb på Toys-R-Us, og du vil sette pris på denne plassbesparende løsningen.
6. Trådløs
Det er ingen overraskelse at Threadless Mobil nettside er fantastisk. Hjemmesiden følger kategoriportalformelen, men med en vri. I likhet med Walmarts nettsted er grid-tilnærmingen her mye lettere å bruke enn de fleste. Fotografiet er engasjerende og gjør butikken til en sann shoppingopplevelse. Noe om det føles bare mindre mekanisk enn de fleste av de andre butikkene som er dekket her.
Du vil finne samme grid-tilnærming i produktlistevisningen, som er en fin lettelse og viser godt på produktene. Designerne klarte å minimere bortkastet plass samtidig som det var lett å bruke.
7. Brookstone
Brooks Mobilbutikk lider av en tett hjemmeside. Men når du kommer forbi det, blir nettstedet bedre. Den store klare fotograferingen er mye verdsatt. Jeg vet ikke om bildene var optimalisert for mobile enheter, men de er sikkert blant de enkleste å se i hele batchen.
Et svakt punkt er mengden rulling som kreves på siden for handlekurven for å komme til utskriftsknappen. Innholdet kan gjøre med litt beskjæring og optimalisering for å lukke avtalen.
8. Dooney & Bourke
Jeg setter stor pris på fotografiet på Dooney & Bourke S hjemmeside. Det formidler nøyaktig hva selskapet selger så snart du lander på siden. En fin detalj å si mildt, men absolutt noe å vurdere.
Et irriterende punkt om produktdetaljvisningen er at feltfeltet er tomt som standard. Jeg måtte legge til en "1" for å legge til et produkt i handlekurven min. Men det er usannsynlig at jeg vil bestille mer enn en av de samme $ 150-baggen.
Også siden på handlekurven føles litt som en ettertanke. Men jeg vil gi selskapet kreditt for å sette nøkkelhandlinger på toppen. Sjansene for at kundene glemmer det de nettopp har lagt i handlekurven deres, er slanke, så det er en smart idé å fokusere på å hjelpe dem med å komme seg til utkjørsiden.
9. Buy.com
Hjemmesiden til Buy.com har noe som ingen andre hjemmesider i denne artikkelen har: et faktisk produkt. Tanken på de fleste e-handelsbutikker er å skape en mobilportal som lar brukerne grave inn i hele produktlinjen. Selv om dette kan være avgjørende, inspirerer Buy.com meg til å vurdere alternativer.
Hva om en bedre tilnærming er å fokusere på avtaler? Hjemmesiden er førsteklasses eiendom; gitt utfordringen med å lukke salg, hvorfor ikke bruke all din innsats for å sette noe uimotståelig foran kundene. Legg merke til at før du kommer til listen over avdelinger på denne nettsiden, ser du det fremhevede produktet og fire separate lenker til salg, tilbud og tilbud.
10. Petco
En flott funksjon av mobilbanen er at den eliminerer fluff. Så når jeg ser hjemmesiden til Petco Mobilwebområde, kan jeg ikke unngå å lure på om det store bildet er nyttig på noen måte. Firmanavnet og tilhørende hund-og-katt-ikon kommuniserer produktfokuset. Så, hvorfor vis dette dumme bildet? I stedet vil jeg sette enten en spesiell avtale eller et rutenett av kategoriikoner. Mens jeg setter pris på det polske av nettsiden, kan det bli tweaked litt.
Selskapet slår på en genial ide i produktdetaljvisningen ved å markere salg av internett bare. Hvorfor ikke gå et skritt videre, og gjør noen av dem bare for mobiltjenester. Ordliste til side, produktdetaljer siden er utrolig ren og klar. Å tømme full lengdebeskrivelsene under nøkkelfunksjonene og informasjonen virker også som en klok beslutning.
Konklusjon
Design av mobile nettsteder er vanskelig, og utformingen av mobile e-handelswebsteder er kanskje dobbelt så. Å finne ut hvordan du hjelper kundene med å finne riktig produkt, og hvordan man konverterer prosessen til et salg, er langt fra enkelt. Jeg håper denne lille samlingen av ressurser gir noen ferske ideer til din neste (eller kanskje første) mobile webdesign.
Skrevet utelukkende for WDD av Patrick McNeil . Han er freelance skribent, utvikler og designer. Spesielt elsker han å skrive om webdesign, trene folk på webutvikling og bygge nettsteder. Patrins lidenskap for trender og mønstre i webdesign finnes i hans bøker på TheWebDesignersIdeaBook.com . Følg Patrick på Twitter @designmeltdown .
Hva tror du om disse eksemplene? Vennligst del i kommentarene nedenfor ...