En udstilling af mobil e-handel
Optimering af websteder til mobilwebben er en opgave. Og optimering af e-handelswebsites til mobilwebben er et dyr, som designere og udviklere kun er begyndt at tæmme.
Ikke overraskende omfatter større virksomheder mediet først, sandsynligvis fordi de har ressourcer og salgsstrømme til at retfærdiggøre det. Selv hvis en e-handelswebsite får en betydelig trafik, vil en lille procentdel af det være mobilbaseret. Og en endnu mindre procentdel af trafikken vil faktisk afslutte deres salg.
Med momentum, der kun er virkelig begyndt i denne arena, er folkets oplevelse med fuld mobil e-handelstransaktioner begrænset. Dette gør nichen til en eksperimentel i bedste fald. Heldigvis kan succesen nøjagtigt måles og testes på baggrund af e-handels karakter. Dette er et medium, der stadig har brug for definition.
En stor hindring for fremskridt er manglen på eksempler. Surfing gallerier for at finde et ton af interessante ideer er ikke engang tæt på at være hurtig og nem. Der er kun få små samlinger af mobildesign, endnu mindre for e-handel. For at løse dette har jeg samlet 10 fantastiske eksempler på mobil e-handel. QR koder er blevet inkluderet for nemmere browsing. Du kan finde mange apps til dine mobiltelefoner, der kan læse disse koder.
1. Walmart
En fælles tilgang til alle de websites, der er indeholdt her, er at have en portal-type hjemmeside. Walmart er ikke anderledes. Imidlertid, mens de fleste af hjemmesiderne er afhængige af tekstbaserede lister, har denne et rist af ikoner, hvilket er meget nemmere at gennemse. Mange af de mobile websteder, der er omfattet her, har lister, der er så små, at de er svære at bruge. Walmart kombinerer ikoner med tekst for at gøre målene let at ramme.
Den største gotcha på Walmart hjemmeside er, at du skal hoppe til hovedwebstedet for at fuldføre en transaktion. Alligevel er information og knapper meget nemme at bruge, klare i funktion og velorganiseret.
2. Legetøj-R-Us
Det Legetøj-R-Us Website er et skridt i den rigtige retning. Men det kunne gøre nogle få vigtige ting bedre. For det første fandt jeg listen over knapper på hjemmesiden for at være bare en smule for lille. Jeg forstår fristelsen til at krympe dem ned for at bevare plads, men de ville være meget lettere at bruge med bare lidt mere plads. Sikker på, jeg ville nødt til at rulle mere, men det er en god afvejning.
Når du kommer forbi hjemmesiden, bliver det meget bedre. Denne hjemmeside har især en af de bedste indkøbskurv sider. Knapperne er klare, og balancen mellem tæthed og tap-evne virker rigtigt. Alt i alt et godt eksempel på, hvordan man klart kommunikerer handlingspunkter.
3. Crocs
Mobil udvikling er stadig meget domineret af udviklere, så det er en lettelse at finde et smukt designet mobilwebsite. Sådan er tilfældet med Crocs . Dens hjemmeside er godt implementeret og en skønhed at se på.
Katalogoversigten er særlig ren. Den eneste måde, hvorpå det kunne gøres mere slank, ville være at fjerne produktnavne. Uanset hvad gør hver række et let mål med klare og relevante oplysninger.
4. JC Penny
Et problem, som designere af JC Penny Mobilbutik overfor var produktomfanget. Hvordan giver brugerne mulighed for effektivt at gennemse en bred vifte af muligheder i en sektion som mænds bukser? Løsningen, et simpelt drop-down system, giver kunderne mulighed for hurtigt at filtrere kriterier for at komme til de produkter, de har brug for.
De store billeder er også en rigtig god funktion. Bemærk, hvor nemt det er at se de faktiske elementer i produktdetaljevisningen. Jeg formoder, at konverteringsfrekvensen på mobilwebsites er ekstremt lav, og jeg kan ikke lade være med at tro, at stor fotografering som denne er et af de få våben til at bekæmpe dette.
5. Pottery Barn
Formlen skal være ret klar nu: logo øverst, søg under det, en lead-in grafik til at promovere et produkt eller salg, efterfulgt af en liste over hovedproduktkategorier. Og vi finder den nøjagtige struktur på Pottery Barn S mobilwebsite.
En absolut strålende detalje er denne hjemmesides løsning på problemet med lange brødkrummer. Du vil bemærke i listen over produktkategorier, at breadcrumb trail er blevet forkortet til kun at omfatte den sidste del af strengen. Sammenligne dette med brødkrumbens påtræk på Toys-R-Us, og du vil sætte pris på denne pladsbesparende løsning.
6. Trådløs
Det er ikke overraskende, at threadless 'Mobil hjemmeside er fantastisk. Hjemmesiden følger kategoriportalformlen, men med et twist. Netop som Walmart's hjemmeside er nettet tilgang her meget lettere at bruge end de fleste. Fotografiet er engagerende og gør butikken til en ægte shopping oplevelse. Noget ved det føles bare mindre mekanisk end de fleste af de andre butikker, der er dækket her.
Du finder den samme netopgang i produktlistevisningen, som er en god lettelse og viser produkterne meget godt. Designerne formåede at minimere spildt plads og samtidig bevare brugervenligheden.
7. Brookstone
Brookstone Mobilbutik lider af en tæt startside. Men når du kommer forbi det, bliver hjemmesiden bedre. Den store klare fotografering er meget værdsat. Jeg ved ikke, om billederne blev optimeret til mobile enheder, men de er sikkert blandt de letteste at se i hele batchet.
Et svagt punkt er mængden af rullning, der kræves på indkøbskurvsiden for at komme til check-out-knappen. Indholdet kunne gøre med noget beskæring og optimering for at lukke aftalen.
8. Dooney & Bourke
Jeg sætter pris på fotograferingen på Dooney & Bourke S hjemmeside. Det formidler præcis, hvad virksomheden sælger, så snart du lander på siden. En subtil detaljer for at sige mildt, men bestemt noget at overveje.
Et irriterende punkt om produktdetaljevisningen er, at mængdefeltet som standard er tomt. Jeg var nødt til at tilføje en "1" for at tilføje et produkt til min kurv. Men det er usandsynligt, at jeg ville bestille mere end en af de samme $ 150 taske.
Også indkøbskurvsiden føles lidt som en eftertanke. Men jeg vil give virksomheden kredit for at lægge nøgleaktive poster øverst. Chancerne for kunder at glemme, hvad de lige har lagt i deres vogn er slanke, så det er en smart ide at fokusere på at hjælpe dem med at komme til udkørselssiden.
9. Buy.com
Hjemmesiden til Buy.com har noget, som ingen anden startside i denne artikel har: et faktisk produkt. Tanken om de fleste e-handelsbutikker er at skabe en mobilportal, der giver brugerne mulighed for at grave ind i hele produktlinjen. Selvom dette kan være vigtigt, inspirerer Buy.com mig til at overveje alternativer.
Hvad hvis en bedre tilgang er at fokusere på tilbud? Hjemmesiden er førsteklasses ejendom; I betragtning af udfordringen med at lukke salget, hvorfor ikke bruge al din indsats for at sætte noget uimodståeligt foran kunderne. Bemærk, at før du kommer til listen over afdelinger på denne hjemmeside, ser du det fremhævede produkt og fire separate links til salg, tilbud og tilbud.
10. Petco
En stor funktion ved mobilbanen er, at det eliminerer fluff. Så når jeg ser hjemmesiden til Petco S mobilwebsite, kan jeg ikke undvære, men spørger mig selv, om det store fotografi er nyttigt på nogen måde. Virksomhedens navn og tilhørende hund-og-katt-ikon kommunikerer produktfokus. Så hvorfor vise dette dumme billede? I stedet vil jeg enten lægge en særlig aftale eller et net af kategoriikoner. Mens jeg sætter pris på den polske af hjemmesiden, kan det være tweaked lidt.
Virksomheden slår på en genial idé i produktdetaljevisningen ved at fremhæve salg på internettet. Hvorfor ikke gå et skridt videre og lave nogle af dem, der kun er mobil-specialer. Ordliste til side er produktdetailsiden fantastisk ren og klar. At tømme beskrivelserne i fuld længde under nøglefunktionerne og informationen virker også som en klog beslutning.
Konklusion
Design af mobile websteder er svært, og design af mobile e-handelswebsteder er måske dobbelt så. At finde ud af, hvordan man hjælper kunder med at finde det rigtige produkt, og hvordan man konverterer processen til et salg, er langt fra let. Jeg håber, at denne lille samling af ressourcer bringer nogle friske ideer til dit næste (eller måske første) mobile website design.
Skrevet udelukkende til WDD af Patrick McNeil . Han er freelance skribent, udvikler og designer. Han elsker især at skrive om webdesign, uddanne folk på webudvikling og opbygge hjemmesider. Patrick's passion for webdesigntendenser og mønstre findes i hans bøger på TheWebDesignersIdeaBook.com . Følg Patrick på Twitter @designmeltdown .
Hvad synes du om disse eksempler? Venligst del i kommentarerne nedenfor ...