En utställning av mobil e-handel
Optimering av webbplatser för mobilwebben är en chore. Och optimering av e-handelswebbplatser för mobilbanan är ett odjur som designers och utvecklare bara har börjat tämja.
Inte överraskande omfattar större företag först mediet först, troligen för att de har resurser och försäljningsflöde för att motivera det. När allt kommer omkring, även om en e-handelswebbplats får stor trafik, kommer en liten andel av det att vara mobilbaserad. Och en ännu mindre andel av den trafiken kommer faktiskt att slutföra sin försäljning.
Med dynamiken som bara börjar på denna arena är människors erfarenhet av full mobil e-handelstransaktioner begränsad. Detta gör nischen i bästa fall en experimentell. Lyckligtvis, med tanke på e-handelens karaktär, kan framgång noggrant mätas och testas. Detta är ett medium som fortfarande behöver definition.
En stor hinder mot framsteg är bristen på exempel. Surfing gallerier för att hitta massor av intressanta idéer är inte ens nära att vara snabb och enkel. Det finns bara några få samlingar av mobil design, ännu mindre för e-handel. För att ta itu med detta har jag samlat 10 fantastiska exempel på mobil e-handel. QR koder har inkluderats för enklare surfning. Du kan hitta många appar för dina mobiltelefoner som kan läsa dessa koder.
1. Walmart
Ett gemensamt tillvägagångssätt för alla webbplatser som presenteras här är att ha en portalsida-hemsida. Walmart är inte annorlunda. Men medan de flesta webbplatser bygger på textbaserade listor har den en rad ikoner, vilket är mycket lättare att bläddra. Många av de mobila webbplatser som omfattas här har listor som är så små att de är svåra att använda. Walmart kombinerar ikoner med text för att göra målen lätt att slå.
Den största gotchaen på Walmart-webbplatsen är att du måste hoppa till huvudsidan för att slutföra en transaktion. Ändå är informationen och knapparna extremt lätta att använda, tydliga i funktion och välorganiserad.
2. Leksaker-R-Us
De Toys R Us Webbplatsen är ett steg i rätt riktning. Men det kan göra några viktiga saker bättre. Först hittade jag listan med knappar på hemsidan för att vara bara en tad för liten. Jag förstår frestelsen att krympa ner dem för att bevara rymden, men de skulle vara mycket enklare att använda med bara lite mer utrymme. Visst, jag skulle behöva bläddra mer, men det är en bra trade-off.
När du väl gått över hemsidan blir det mycket bättre. I synnerhet har denna webbplats en av de bättre kundvagnssidorna. Knapparna är klara, och balansen mellan täthet och tryckförmåga verkar rätt. Sammantaget är ett bra exempel på hur man klart kommunicerar åtgärdspunkter.
3. Crocs
Mobil utveckling domineras fortfarande mycket av utvecklare, så att hitta en vackert utformad mobilwebbplats är en lättnad. Sådan är fallet med Crocs . Dess hemsida är väl implementerad och en skönhet att titta på.
Kataloglistan är särskilt ren. Det enda sättet att det skulle kunna bli smidigt skulle vara att eliminera produktnamn. Oavsett, varje rad ger ett enkelt mål med tydlig och relevant information.
4. JC Penny
Ett problem som designers av JC Penny mobilaffär som ställdes inför var produktens omfattning. Hur aktiverar du användarna att effektivt bläddra i ett brett utbud av alternativ i en sektion som herrbyxor? Lösningen, ett enkelt nedrullningssystem, gör det möjligt för kunder att snabbt filtrera kriterier för att komma till de produkter de behöver.
De stora bilderna är också en riktigt trevlig funktion. Lägg märke till hur lätt det är att se de faktiska objekten i produktdetaljvisningen. Jag misstänker att omvandlingsfrekvensen för mobila webbplatser är extremt låg, och jag kan inte låta bli att tro att bra fotografi som detta är ett av de få vapen som bekämpar detta.
5. Pottery Barn
Formeln ska vara ganska tydlig nu: logotypen överst, sök under det, en inledningsgrafik för att marknadsföra en produkt eller försäljning, följt av en lista över huvudproduktkategorier. Och vi hittar den exakta strukturen på Pottery Barn S mobila webbplats.
En absolut strålande detalj är den här webbplatsens lösning på problemet med långa brödsmulor. Du kommer att märka i listan över produktkategorier att breadcrumbspåret har förkortats avsevärt för att endast omfatta den sista delen av strängen. Jämför det här med brödcrumbens intrusivitet på Toys-R-Us, och du kommer att uppskatta denna rymdbesparande lösning.
6. Trådlös
Det är ingen överraskning att Threadless mobilwebbplatsen är fantastisk. Hemsidan följer kategoriportalformeln, men med en vridning. På samma sätt som Walmarts hemsida är gridmetoden här mycket lättare att använda än de flesta. Fotograferingen är engagerande och gör butiken känns som en riktig shoppingupplevelse. Någonting om det känns bara mindre mekaniskt än de flesta andra butiker som omfattas här.
Du kommer att hitta samma rutnät tillvägagångssätt i produktlistan, vilket är en bra lättnad och visar produkterna väldigt bra. Konstruktörerna lyckades minimera bortkastat utrymme samtidigt som de var lätta att använda.
7. Brookstone
Brookstone Mobilbutiken lider av en tät hemsida. Men när du kommer över det blir webbplatsen bättre. Den stora tydliga fotograferingen är mycket uppskattad. Jag vet inte om bilderna var optimerade för mobila enheter, men de är säkert bland de enklaste att se i hela batchen.
En svag punkt är hur mycket rullning som krävs på sidan på kundvagnen för att komma till utcheckningsknappen. Innehållet kan göra med en del beskärning och optimering för att stänga affären.
8. Dooney & Bourke
Jag uppskattar verkligen fotograferingen på Dooney & Bourke S hemsida. Det förmedlar exakt vad företaget säljer så fort du landar på sidan. En subtil detalj för att säga minst, men säkert något att tänka på.
En irriterande punkt om produktdetaljvisningen är att kvantitetsfältet är tomt som standard. Jag var tvungen att lägga till en "1" för att lägga till en produkt i min kundvagn. Men det är osannolikt att jag skulle beställa mer än en av samma $ 150 väska.
Även sidan på kundvagnen känns lite som en eftertanke. Men jag kommer att ge företaget kredit för att lägga viktiga åtgärder på toppen. Chanserna att kunderna glömmer vad de just lagt i sin vagn är smala, så det är en smart idé att fokusera på att hjälpa dem att komma till utcheckningssidan.
9. Buy.com
Hemsidan för Buy.com har något som ingen annan hemsida i den här artikeln har: en verklig produkt. Tänkandet på de flesta e-handelsbutiker är att skapa en mobilportal som gör det möjligt för användarna att gräva i hela produktlinjen. Även om detta kan vara nödvändigt, inspirerar Buy.com mig att överväga alternativ.
Vad händer om ett bättre tillvägagångssätt är att fokusera på erbjudanden? Hemsidan är förstklassig fastighet; Med tanke på utmaningen att stänga försäljningen, varför inte ägna all din ansträngning för att sätta något oemotståndligt framför kunderna. Observera att innan du når listan över avdelningar på denna webbplats ser du den presenterade produkten och fyra separata länkar till försäljning, erbjudanden och specialerbjudanden.
10. Petco
En bra funktion hos mobilbanan är att det eliminerar fluff. Så när jag ser hemsidan för Petco S mobila hemsida kan jag inte undra om det stora fotot är användbart på något sätt. Företagsnamnet och den medföljande hund-och-kattikonen kommunicerar produktfokus. Så varför visa den här dumma bilden? Istället skulle jag lägga antingen en särskild affär eller ett nät av kategorikonikoner. Medan jag uppskattar den polska av webbplatsen, kan det vara tweaked lite.
Företaget slår på en genial idé i produktdetaljvisningen genom att lyfta fram försäljning på Internet. Varför inte gå ett steg längre och göra några av dem specialerbjudanden på mobilen. Ordlista åt sidan, produktdetaljer sidan är fantastiskt ren och klar. Att ta bort beskrivningarna i full längd under nyckelfunktionerna och informationen verkar också som ett klokt beslut.
Slutsats
Att designa mobila webbplatser är svårt, och det är kanske dubbelt så att designa mobila e-handelswebbplatser. Att räkna ut hur man hjälper kunder att hitta rätt produkt och hur man konverterar processen till en försäljning är långt ifrån lätt. Jag hoppas att den här lilla samlingen av resurser ger några fina idéer till din nästa (eller kanske första) mobila webbdesign.
Skriven uteslutande för WDD av Patrick McNeil . Han är frilansskribent, utvecklare och designer. I synnerhet älskar han att skriva om webbdesign, utbilda människor på webbutveckling och bygga webbplatser. Patricks passion för webbdesignstrenden och mönster finns i hans böcker på TheWebDesignersIdeaBook.com . Följ Patrick på Twitter @designmeltdown .
Vad tycker du om dessa exempel? Vänligen dela i kommentarerna nedan ...