E-handelswebbplatser är notoriskt upptagna och överfulla.
Idag undersöker vi ett ton av onlinebutiker som bryter denna trend genom att vara både funktionella och attraktiva. Var och en av exemplen nedan har en unik lektion för att lära oss om bra e-handelsdesign. Låt oss börja!
Först, problemet
Innan vi kan uppskatta webbplatser som är väl utformade måste vi tänka på vad som är fel med det traditionella e-handelsformatet. Någon klok individ anmärkte en gång att en kamel är en häst som utformats av en kommitté. Denna snabba jest gäller definitivt för e-handelswebbplatser. Stora namn på nätbutiker har ofta alltför mycket inmatning från alltför många människor, vilket resulterar i en röra av goda intentioner och bra funktionsidéer som aldrig integrerades korrekt med varandra på ett synergistiskt sätt.
Skärmbilden ovan är bara en liten del av Kmart.com hemsida. Som du kan se är det ett tågavverk. Kryssa över till webbplatsen så ser du att sidan som helhet är ännu värre. Liksom Kmart.com lider många e-handelsplatser från enorma röran. Det är så mycket att tävla för din uppmärksamhet att det ultimata resultatet är att dina ögon studsar från plats till plats utan verklig syfte eller fokus.
Nu, lösningen
Låt oss ta en fördjupad titt på några webbplatser som har det rätt. När vi tittar på var och en av sidorna nedan jämför du gränssnittet med det av Kmart för att se hur mycket effektivare en ren och enkel layout kan vara.
Xtreme Mac
Xtreme Mac har den mest originella och innovativa shoppingupplevelse jag kom över i min sökning (Icon Dock nedan var en nära sekund). Du presenteras med ett enkelt raster av produktbilder med ljusa, färgglada rollover effekter. När du klickar på ett objekt, istället för att tas till en dedikerad sida, växlar hela nätet så att den valda cellen kan expandera till åtta gånger den är normal storlek. Du får då ett större produktskott, en kort beskrivning och möjlighet att antingen lära sig mer eller köpa nu. Klicka på ett annat objekt och den dynamiska layouten ändras igen för att funktionen ska förekomma.
Jag hittade Xtreme Mac-gränssnittet för att vara vackert och allt kul att leka med. Att få dina besökare att inte bara vara imponerade av din webbplatsdesign men faktiskt njuta av shoppingupplevelsen är den heliga graden av e-handelsdesign. Ju mer de tycker om din webbplats, desto mer tid spenderar de på den. Vilket teoretiskt sett gör dem mer benägna att faktiskt köpa något (det ultimata målet för vilken e-handelsplats!).
Ikon Dock
Strax utanför fladdermusen kan du se att Icon Dock är en vacker webbplats som är full av högkvalitativa illustrationer. Min favorit sak om ikonen dock är hur de har hanterat kundvagnar. Vissa webbplatser gör det ganska svårt att se och redigera innehållet i din kundvagn, men Icon Dock ger dig en visuell docka? av ikoner som stannar hos dig när du handlar. När du vill lägga till något till det, drar du helt enkelt ikonen till dockningsstationen för att släppa den in. Om du vill ta bort allt från dockan, klicka helt enkelt på den lilla? X? på ikonen.
Detta är utformat på ett sådant intuitivt sätt att du verkligen inte behöver någon instruktion. Det fungerar precis som du förväntar dig att det skulle. Och för dem som inte får det direkt, finns det fortfarande det gamla alternativet att klicka på? Lägg till i varukorgen? knapp. Detta är en viktig funktion. När du utformar ett unikt interaktivt gränssnitt, tänk alltid på om du fortfarande ska inkludera det traditionella sättet för dem som kanske inte förstår din snygga nya idé. Detta gör att du kan bläddra din egen väg i interaktivitet samtidigt som du bevarar användbarheten.
Nike
Ledsen Flash haters, men jag gillar verkligen den här webbplatsen. För att erkänna lite är lastningstiderna för varje sida ganska irriterande. Den övergripande webbplatsen är dock en imponerande visuell behandling. Liksom Kmart, har de massor av föremål till salu (kanske inte lika mycket, men argumentet är fortfarande giltigt), men i stället för att klämma upp hemsidan med felaktiga utvalda objekt har Nike integrerat allt på sidan i en visuellt sömlöst sätt. De har väl över tio unika sektioner på en enda sida, men det ser helt sammanhängande ut. Låt oss titta på några av de saker som de har gjort för att uppnå detta.
Det första som de har gjort för att skära röran är ganska enkelt. Istället för att stapla slumpmässigt stora banners som främjar olika objekt ovanpå varandra som Kmart, har Nike en primär banner som roterar mellan tre meddelanden. Det här är säkert inte banbrytande, men det är något för få designers anser när de ställs inför att ladda en sida till brädan med innehåll. Förbyggda bibliotek som jQuery gör denna typ av roterande innehåll till en cinch och kan verkligen göra en annorlunda statisk sida levande på ett subtilt, irriterande sätt.
Nästa sak som Nike har gjort för att skära röran är att sätta alla sektioner under huvudbanan på en kontinuerlig bakgrundsfärg för att undvika det? Föll i? ser du med kryssrutorna i Kmarts design. Detta gör att hela sidan ser ut som om den byggdes på samma gång av samma designers, i motsats till att ha en gammal design som du fortsätter att krympa mer och mer otillbörliga saker över tiden. Det handlar om synergi folk.
Dyson
Läran vi kan lära av Dyson är att du kan göra shopping för ett vakuum känner som att handla för en Mercedes. Oavsett vad du råkar vara att sälja, om du vill att den ska se hög slut, få din inspiration från webbplatser som säljer lyxbilar, båtar eller något annat som kostar mer än du gör om ett år. Den svarta och grå bakgrunden kompletteras verkligen av stänk av vitt och / eller blått som verkligen hoppa av sidan med kontrast. Det som verkligen stjäl showen är produktfotograferingen (utan tvivel så mycket Photoshop som faktiskt foto), vilket verkligen fångar kärnan i den attraktiva produktdesignen. Notera också den roterande bannern som med Nike-exemplet.Du kommer att se det här igen och igen i alla exempel, med god anledning, det är bara ett bra sätt att lägga massor av innehåll i ett litet utrymme utan några visuella rörelser.
SkinBox
Skinbox gör shopping för forumskinn otroligt enkelt. Hemsidan består till största delen av en stor sektion som visar sina teman. De logiska kategorierna (ljus, mörk professionell, etc) gör det enkelt att omedelbart hitta den typ av skinn du letar efter. Skinnen i varje kategori visas i ett stort galler med möjlighet att köpa nu eller se mer information på huden. Det senare alternativet är viktigt. E-handelswebbplatser fyller ofta en sida med tråkig produktinformation, vilket resulterar i en tung textlayout som försöker sälja något som verkligen handlar om visuell överklagande (åtminstone i det här fallet). Om du säljer designen av ett objekt, överväga att lägga funktionalitetsspecifikationerna bakom en? Mer info? knappen så att användare som vill ha den informationen enkelt kan hitta den och användare som bara surfar inte distraheras av den.
DropBags
Jag har ärligt talat om vad den här sajten säljer. Den? Hur man använder? avsnittet säger något om att sätta påsen i en hink, fylla den med växter och is och röra den upp, men jag kan inte föreställa mig varför jag någonsin skulle vilja frysa plantans liv. De kanske vill att jag ska tro att det är vetenskapligt, men jag är ganska säker på att det är häxkonst.
Poängen är, det är en skraj produkt. De säljer en väska som du sätter i en hink. Stor affär rätt? Men de har gjort platsen runt den galna hinkväskan så tilltalande att jag nästan var övertygad om att jag behövde en. Som webbdesigner kan du inte alltid landa Nike-kontot. Ibland får du en klient som vill sälja ett multifunktionsuttagssats? det är i grunden en överdriven hinkfodral. Under dessa omständigheter bör du lägga fram samma mängd ansträngning och kreativitet som du skulle om du arbetade för någon stor namnklient. Gör shoppingupplevelsen så enkelt och enkelt som du kan och gör miljön kring produkten inbjudande och attraktiv.
IKEA
Ikea vinner priset för den mest interaktiva shoppingupplevelsen. När jag får Ikea-katalogen i posten, älskar min fru och jag att sitta ner tillsammans och bläddra igenom den tillsammans för designidéer och se vilka coola nya produkter de har kommit med. Det här är roligt eftersom Ikea-upplevelsen är noggrant strukturerad så att man bläddrar genom katalogen är precis som att gå genom sitt showroom. I stället för att presenteras med enskilda föremål ser du anpassad fotografi av ett helt rum bestående av Ikea-produkter. De ger dig användbara nedbrytningar av vad varje objekt kostar samt kostnaden för att köpa hela rummet som en uppsättning. Detta hjälper normala människor som inte vet mycket om inredning skapa vackra rum.
Nyligen har Ikea överfört denna erfarenhet till sin webbutik. Vad du får är en upplevelse som mycket gillar att bläddra igenom katalogen, bara mycket mer interaktiv och dynamisk. Du kan klicka på ikonerna bredvid vissa produkter för att titta närmare på eller titta på dolda funktioner, ändra vyer för att titta runt i rummet eller hoppa över rumsutsikten och titta på ett enkelt raster med produkter. Som i några av de andra exemplen ovan skjuter Ikea för en shoppingupplevelse som inte bara är roligt, men kan även anses vara kul. Om du bygger en e-handelsplats, tänk på hur du kan uppleva upplevelsen genom att lägga till något lite mer interaktivt än din genomsnittliga webbutik.
Källare Thief
Cellar Thief är bara ett bra exempel på kreativ webbdesign. Designerna blandade nuvarande webbdesign med riktiga texturer och ljusa färger från vinindustrin för att skapa en otroligt attraktiv onlinebutik. Observera att de egentligen bara säljer tre separata viner, vilket är en mindre produktuppsättning än vad du sannolikt kommer att ha i dina projekt, men det finns fortfarande mycket att lära av från det här exemplet.
Först och främst, förutom vinerna till salu, finns det en massa sekundärt innehåll på sidan, till exempel vinstips, bloggblogg etc. Observera att var och en av dessa små avsnitt har placerats på höger sida av en sida fylld med vänster -aligned text. Detta är strukturerat så att det första du ser (glancing på sidan från vänster till höger) är det primära innehållet: produkten till salu. Först efter att du tittat på sidan i några sekunder märker du det sekundära innehållet. På den här sidan skulle det inte vara sant om innehållet placerades till vänster. Vänsterjustering av detta sekundära innehåll kan ge den en oförtjänad primär position i den visuella hierarkin. Försök alltid att föreställa dig den ordning i vilken en besökare kommer att se objekten på sidan och strukturera ditt innehåll i enlighet därmed.
En sista sak om organisering av information. Kolla in hur mycket innehåll det är relaterat till varje enskilt vin. Föreställ dig nu hur sidan skulle se ut om designern inte hade tänkt dela upp den informationen i flikar. Liksom det roterande banderoll av innehåll som vi diskuterade ovan, ger flikar ett snyggt och effektivt sätt att klämma in en löjlig mängd innehåll till ett litet, användarvänligt utrymme. Vid utarbetandet av tryckta material begär jag ständigt att mina kunder klarar av att trimma sin obligatoriska information på grund av rumsliga begränsningar. Däremot ger webbdesign dig så mycket mer frihet att tillhandahålla den mängd information som din kund vill ha på det innehålla sättet som en bra design kräver.
Mer attraktiva e-handelswebbplatser
Här är ett gäng fler exempel på designers som övervann den rotiga, klumpiga e-handelsstigmatiken genom att fokusera på både estetisk överklagande och funktionalitet. Sluta med varje exempel och leta efter de saker vi nämnde ovan.Det finns massor av roliga men enkla shoppingupplevelser, fantastiskt fotografi / konstverk och kreativ innehållsorganisation som inspirerar dig till e-handels storhet.
Baby Quasar
Ooga Zone
ShoeGuru
Madsen Cyklar
i / denti / tee
Abercrombie & Fitch
Sucr?
DNA11
MacStylez
Endast en +
Tolv söder
Sony
Slutsats
Nu när vi har tittat på vad jag anser vara fel och rätt sätt att designa en e-handelsplats, skulle jag vilja höra dina tankar. Berätta för oss vad irriterar dig om att handla online och vad du älskar eller hatar om exemplen ovan.
För ännu mer e-handel inspiration, kolla in Cart Frenzy, ett galleri dedikerade online butik design.