Dagens uppgifter i våra liv revolutioneras av teknik. En uppgift som tekniken hjälper till att förenkla är shopping: uppgiften att köpa produkter i butiker är inte lika bekväm som online shopping .

Med det i åtanke blir det allt viktigare att uppmärksamma användbarheten hos e-handelswebbplatser .

När kunder vill köpa en produkt vill de att processen ska bli snabb och enkel, utan några problem.

Här är 10 tips som hjälper dig att skapa användbara uttag för e-handel och kundvagnar .

1. Hel sida och minikartor

Varukorgar finns ofta i två former, en fullt fungerande kundvagn som finns på en egen sida och en "mini" kundvagn, som vanligen finns i sidofältet eller ovanför sidvikten. Den bästa praxisen är att inkludera båda .

Mini kundvagnar visar information inom ett litet område som inte tar bort från resten av layouten. Här är ett utmärkt exempel på en användbar mini kundvagn.

När en produkt väljs visas föremålet omedelbart i miniburen. När du fortsätter att shoppa, minimerar detaljerna och endast antalet artiklar och totalt pris visas. Det finns också en länk från minikorgen för att se hela sidan kundvagnen.

Amentio


Med hela sidan kundvagnen kan du ge mer information och fler alternativ än en minikorg. Till exempel kan information som produktdetaljer, ta bort / redigera objekt, skattesatser och fraktalternativ alla inkluderas i en heltäckande kundvagn. Den fullständiga sidan kundvagnen nedan visar också en mini cart i övre högra hörnet.

action2

2. Checkout: Steg för steg eller en sida

Genom att använda ett steg för steg-metod gör koll processen enklare för kunden att följa. Ta en titt på Apple.com-kassan nedan. Kassa proceduren utförs i fyra olika steg: Logga in, Fakturering & Frakt, Betalning och slutligen Verifiera / Redigera.

Det här är en välstrukturerad process och du bör verkligen överväga att använda något som liknar detta när du utformar stegvisa kassar.


apple_checkout1

Förutom en steg-för-steg-process är ett annat alternativ att inkludera kundvagnen, personlig information och frakt / faktureringsinformation på en enda sida.

Detta kan fungera snyggt om det görs med en bra layout. Följande webbplats använder en bra enkelsidiga kassaprocess. Det finns ett bord på toppen som innehåller vagnen med inköpsinformationsformulären nedan.

realmac_cart1

3. Länk från minikorg till full kundvagn med en ikon

När du bygger en kundvagn, finns det subtila funktioner som påverkar kundens upplevelse. Att klicka på minikorgen ska länka till hela kundvagnen och en ikon ska visas bredvid minikorgen för att dra kundens uppmärksamhet på minikorgen och den här länken.

Följande hemsida är ett perfekt exempel på detta. Dessa knappar finns på ett främmande språk, men kundvagnen kan enkelt identifieras av någon.

iluminejp

4. Gör kassan / lägg till i kundvagnens knappar självklart

Vid utformning av e-handelskassa och kundvagn är det viktigt att inkludera lättillgängliga länkar för att vägleda kunden genom kassan. Det är bäst att använda stora uppenbara knappar . Kontrollera att knapparna innehåller tydligt läsbar och förståelig text, till exempel "Lägg i kundvagn" eller "Fortsätt till kassan".

Knapparna nedan är välformade och väl placerade direkt under informationen för varje produkt. Om kunden inte hittar kassan kan de inte köpa din produkt!

bohemisk

5. Använd en läsbar tabellbaserad layout

Vid utformning av en full kundvagn är det alltid bäst att använda en bordsbaserad struktur. Layouten ska effektivt visa informationen utan avbrott. Använd standardfonter och undvik att använda komplexa bakgrunder .

Var alltid säker på att använda starka gränser för att skilja celler, men stilla inte gränserna. Information i en kundvagn borde vara lätt att se utan distraktion från andra element eller komplex styling.

Detta är en mycket ren kundvagn. Bordet är lättläst och innehåller alla nödvändiga element. Ännu viktigare, notera bilden. Bilden av produkten ger kunden en bra bild av vad de köper , vilket kan hjälpa kunder att bekräfta att de faktiskt köper den produkt som de tänkte.

dbh1


6. "Fortsätt Shopping" länken

En ytterligare funktion är en "Fortsätt Shopping" länk. När du klickar bör länken ta tillbaka kunden till affären och katalogen. Detta placeras vanligtvis under bordet i den fulla kundvagnen, där kunden enkelt kan hitta den.

Exemplet nedan visar "Fortsätt shopping" och "Gå till Kassa" -länkar. Lägg märke till hur lätt det är att hitta dessa.

threadless3

7. Undvik för många fält

Det finns inget mer irriterande för den genomsnittliga konsumenten än att behöva fylla i en onödig mängd inmatningsfält i en form. Du vill ha utbetalningsprocessen så enkel som möjligt, för om kunden inte finner det bekvämt, kommer de sannolikt inte att köpa från webbplatsen igen.

Håll antalet inmatningsfält åtminstone , placera liknande inmatningsfält i grupper och ge rubriker för varje sektion. En lämplig mängd vitt utrymme kommer också att bidra till att formen känns mer organiserad.

Följande formulär är minimal och innehåller ett litet antal inmatningsfält.

deckpeck

8. Ge massor av hjälpelement

Det finns många ställen som hjälper elementen att inkluderas i kundvagnen och kassan.

I kundvagnen finns snabba tips om hur du bäst kan använda kundvagnens funktioner och förklara kassan. Etiketter i kundvagnen och på kassan kan förklaras med hjälp av verktygstips .

På sidan Checkout kan du inkludera exempel på vad som ska inkluderas i varje inmatningsfält, samt exempel på specifik faktureringsinformation, till exempel en bild som visar var CVD-numret finns på baksidan av ett kreditkort.

I formuläret nedan har inmatningsfälten förklarande provtext och mellanskolonnen innehåller ytterligare användbar information.


threadless2

9. Ge visuell support

Visuellt stöd kan vara allt från diagram till enkla ikoner. En bild som visar platsen för ett kontonummer på ett kreditkort hjälper kunderna genom att ange sin faktureringsinformation. Ikoner för att stödja text är användbara för att underlätta förmen att skanna igenom.

Följande bild visar ett mycket bekvämt klick och dra vagn . Bilden på vagnikonet berättar för kunder att de kan dra artiklar i vagnen. Vagnen har också en etikett ovanför den som säger "Drag saker här."

nerv

10. Alltid inkludera en verifieringssida

Det viktigaste inslaget i eventuella kasseringsprocesser är verkligen en verifiering och redigering av sidan som det sista steget. Vanligtvis kunder vill bekräfta att de köper rätt artiklar. Varje bra checkoutprocess har den här funktionen som en sista chans för kunden att granska sin order innan de förbinder sig genom betalningsprocessen.

På kontrollsidan bör du inkludera all information om produkten i en tabell, som liknar hela kassan. Kunden ska kunna avbryta sin order, eller kunna använda en länk "Fortsätt Shopping" för att lägga till fler artiklar. Gör knappen för att slutföra processen väldigt tydlig, vilket eliminerar även den minsta förvirringen.

Utställning av användbara kundvagnar och utcheckning

IconDock - Den här webbplatsen har en mycket användbar och praktisk kundvagn. Allt du behöver göra är att klicka och dra ett objekt i panelen. Det beräknar automatiskt summan och är en mycket snabb shoppinglösning.

icondock


MediaTemple - Här är ett mycket trevligt prissättningstabell med tydliga kassaknappar med bra placering.

MT2


Early Learning Center - Den här webbplatsen har en utmärkt full kundvagn, en mini cart och ett steg för steg utcheckningsförfarande som illustreras med en tidslinje.

earlylearning


Roxy - Det här är en enkel vagn, och den har också en bra mini-vagn som visar kundens löpande summa.

roxy1


Mia & Maggie - Det här är en snygg stilvagn som är lätt att läsa och innehåller en stor utcheckningsknapp.

miamaggie



Mia & Maggie - Här är ett annat exempel från Mia & Maggie, den här av kassan. Denna kassa använder en stegvis process på en enda sida, vilket är en mycket smart och användbar layout.

miamaggie22



Amazon - Amazon är ännu en populär e-handelsplats som använder en steg-för-steg-process.

amazon1


Evel - Det här är en mycket användbar och snabb checkout utan alltför många inmatningsfält på formuläret. Observera också att kundvagnen ligger ovanför formuläret, vilket kan vara mycket bekvämt för vissa kunder.

evel


Design av människor - Ett annat exempel på en perfekt enkelsidiga kassa. Den här innehåller en orderöversikt som kan vara till stor hjälp. Det finns också många hjälpelement i hela formuläret.

dbh2


Bridge55 - En bra kundvagn med en bild av produkten.

bridge55


Kosmisk soda - En bra e-handelswebbplats med både en minibåt och en full kundvagn.

cosmic1


Incase - En välorganiserad kassa med en minimal mängd fält.

om


Shoon - En bra mini-kundvagn som visar ett popup-fönster som innehåller ytterligare information när knappen "Lägg i varukorgen" är klickad.

Shoon


Wunderbloc - En lightbox kundvagn.

wunderbloc


Bored of Southsea - En bra minivagn och organiserad fullvagn.

uttråkad


Subnormaler - Användning av mini- och fullvagn och en stegvis förköpsprocess.

subnormals


AlphaStore - En tabellstruktur och en minikorg med en igenkännlig kundvagnsikon.

alphastore


Me & Mommy-to-be - En vackert stilig vagn som inte är överst med dekoration.

mamma


Skriven uteslutande för WDD av Matt Cronin från Spoonfed Design .

Vilka tips är viktigast när du utformar en online kundvagn? Vänligen dela dina kommentarer med oss.