Med semesterperioden precis runt hörnet kommer många av oss att handla online. (OK? Kanske mycket shopping!) Kassa sidan på en webbplats kan göra den upplevelsen en att minnas, eller en du önskar att du kan glömma.
Om du utformar en kassa-sida finns det så många överväganden - funktionalitet, användbarhet, säkerhet och design. Det sista elementet är något som varje formgivare kan påverka. En kassa-sida bör inte utformas som en eftertanke. Det är förmodligen den viktigaste sidan i online shopping upplevelse.
Gör det visuellt
Det kan låta som en uppenbar idé, men kassan på en e-handelssida måste vara visuell. För många webbplatser gör det till en grundläggande form.
Detta är viktigt av flera skäl. En visuell anslutning mellan kassan och resten av webbplatsen skapar varumärkes trovärdighet. Om checkoutsidan ser ut som resten av webbplatsen känns den säker och som den tillhör webbplatsen. Visualer, från logotyper till objekt i kundvagnen, hjälper användarna att komma ihåg varför och var de är på webben. (Kom ihåg, mycket av världen är en ganska distraherad grupp av internetanvändare.)
Så vilken typ av visuella ska du använda?
- Bilder. I varje fall bör varje artikel åtföljas av en ikon som visar vad användaren köper.
- Logos. Företagslogotypen ska alltid vara tydligt synlig (och klickbar för att komma tillbaka till resten av webbplatsen).
- Stora knappar. Ring till handling som? Lägg i varukorgen? ? Uppdatera objekt? och? Köp nu? stor, färgstark och visuellt tilltalande. Knappar ska vara lätta att hitta och gör att du vill klicka på dem.
- Färg. För många kassa sidor är alla vita med skisserade rutor. Det är OK att använda färg. Underhålla färgschema för resten av webbplatsen på kassan.
- Typografi. Texten ska vara enkel och lätt att läsa. (Folk tenderar att? Lita på? Enkla serif eller sans serif typsnitt mer än ett skript eller nyhetstypsnitt.) Men du kan också ha roligt med större textelement.
Inkludera betalningslogotyper och säkerhetsförseglingar
Inkludera visuella bilder som gör att användarna mår bra om att handla med dig. Medan de flesta förstår att de kan betala med ett kreditkort på nätet förstärks den här tanken med små logotyper bredvid betalningsknappar.
Det är en liten, men lugnande, visuell cue för användare. Det kan hjälpa till att eliminera förvirring om vilka typer av betalningar som accepteras.
Kom bara ihåg att inkludera logotyper för alla betalningstyper. (För många platser kommer du ihåg kreditkortlogotyper, men glöm PayPal eller Apple Pay.) Håll bilderna små och gruppera dem på ett organiserat sätt. (Tack och lov för designers gör de flesta av dessa element bra i små format och har liknande bildförhållanden.)
Överväg att utforma eller ladda ner ett specialt användargränssnitt med logotyper för detta ändamål. Du är inte begränsad till lagerlogotyper från företaget. Bara bli inte för vild med designen; Målet är att användarna känner igen logotyperna med en mycket liten storlek på skärmen.
Tänk på att förstora bilder
Kassa sidor som tillåter användare att få en sista titt på objekt i kundvagnen är en bra bonus. Höger effekter som förstorar varje föremål i vagnen eller en popup kan göra det enkelt för användarna att se potentiella inköp en gång till och eliminera frustrationen att behöva navigera tillbaka för att kontrollera en färg eller storlek.
Ett annat alternativ är att skapa överdimensionerade miniatyrbilder för artiklar på kassan. Den här ytterligare bilden kan hjälpa en användare att bekräfta att hon eller hon handlar och känner sig ännu bättre om köpet.
För många designers försummar att inkludera bilder alls, vilket gör det lättare att överge en vagn. Tänk på det på så sätt, att ha en bild vid kassan motsvarar att stå i linjen vid en fysisk butik med ett objekt i handen. Inte många människor ändrar sig nu.
Använd tabeller
Information i kundvagnen måste ordnas till perfektion. Det enklaste sättet att uppnå detta är att designa vagnen i form av ett bord eller liknande nätbaserat format.
Använd kolumner och rader för att visa varje objekt, en bild, beskrivning, kvantitet, pris och annan relevant information. Objekten ska sorteras vertikalt i kolumner med annan information i motsvarande rad. Denna sorteringsstil är avgörande för vagnar med flera objekt så att användarna inte tvingas flytta över skärmar istället för upp och ner (vilket är bekvämare).
Inom varje tabell eller rutnät, använd konsekvent anpassning. Vänster är vanligast. Tänk på hur priserna anpassar sig så att det är lätt att se på skärmen. Idealiskt bör priserna ställa upp så att siffrorna före och efter en period ligger i samma positioner för varje föremål.
Tänk om funktionalitet
Medan en stor del av den övergripande funktionaliteten hos en kassaskrivningssida kanske inte är en designers riktning, är det något som måste övervägas. (Om designers eller utvecklare skapar dessa koncept kan variera per lag.)
Viktiga funktionaliteter gäller som behöver designelement inkluderar:
- Möjlighet och enkel utskrift från flera skärmar, inklusive före och efter kassan.
- Inkludera önskelistafunktionalitet eller annan metod för att spara objekt för senare inköp. Gör den informationen delbar.
- För många kassa-sidor blir mörka hål utan länkar tillbaka till andra delar av shoppingupplevelsen. Lås inte användarna på sidor som de inte kan komma ifrån.
- Tillåt in-cart redigering av objekt.
- Tänk på en utskrivbar faktureringsalternativ eller sida. (Detta är särskilt viktigt om dina kunder inkluderar företagskunder.)
- Gör det enkelt för användarna att förstå hur man ändrar, ändrar eller uppdaterar order. Många kassa sidor innehåller en kvantitet räknare bredvid varje objekt. Gör det numret enkelt att redigera (och det ska uppdateras automatiskt).
- Gör det enkelt att skapa ett konto efter kassan. Inte varje kund har handlat med dig innan. Det ska vara snabbt och enkelt att göra ett köp och registrera sig för ett konto. Förtäcka försäljningen först.
Nyckel ikoner ska visas på varje sida
Tänk på kassaskrivningssidan, börjar minutens webbplatskoncept börjar inkludera ett e-handelsalternativ. Vissa designelement måste bära hela hela webbplatsen.
Lägg till i kundvagnen och checka ut sidan ikoner ska bäras genom hela designen. Knapparna eller navigeringselementen ska ha samma design (eller ganska liknande) som motsvarande åtgärdsknappar på kassan.
Kom ihåg mobila användare
En växande andel av försäljningen sker på mobila enheter i stället för stationära datorer. Tänk på utformningen av din kassa sida och användarvänlighet för dessa kunder också. (Ingenting är mer frustrerande - och alltför vanligt - än en webbplats som fungerar på en telefon fram till kassan.)
Designelement med kran och svep i åtanke. Knapparna ska vara större och lättare att se. Formen bör innehålla djupare lådor så att de är lätta att klämma in utan att behöva zooma in skärmen.
När det gäller mobila användare är det lika viktig att hålla allt på en enda sida. Skapa en kassaskrivsida som rullar istället för att flipa genom flera skärmar.
Slutsats
Att designa en kassa-sida kan vara en stor uppgift för någon formgivare. Nyckeln är något vi pratar om ofta i designgemenskapen: Håll det enkelt. Skapa en enkel skiss med minimala effekter och fokus på användbarhet och du är mer sannolikt att hitta framgång.
Kom ihåg användaren när du tänker på kassan. Sträva efter att designa en sida som har visuell appell, logotyper för att styra och informera användare, massor av bilder, en organiserad layout, funktion, ikoner för att styra och marknadsföra försäljning och ett mobilvänligt gränssnitt.
Arkivfoton Courtesy of Creative Market.