Tillgänglig kassa

Under min utbildning inom tillgänglig design var en av uppgifterna att designa en tillgänlig kassa. Jag valde att göra en e-handel för posters.

Här är några skärmdumpar från det arbetet med beskrivning av de val jag har gjort.

Om du vill kan du även själv klicka dig igenom prototypen.

Tydlig och enkel varukorg

Det ska vara enkelt att se vad som ligger i varukorgen. Vilka varor jag lagt där, hur många, i vilka storlekar samt kostnad. Därför har varje vara en produktbild, rubrik och beskrivning. Du ser även vad varje vara kostar per styck samt vad din totala kostnad är.

Produkterna är tydligt avgränsade från varandra för att jag lätt ska se vilka uppgifter som hör till vilken produkt. Här är de avgränsade både med utrymme och med linjer.

Det är enkelt att ändra antal av en produkt eller ta bort den ur min varukorg. Knapparna för att öka och antalet varor, eller helt ta bort en vara, är stora och tydliga.

Du kan även klicka på produktbilden eller produktens text för att komma till produktens sida för att hitta mer information om produkten.

Utcheckningsprocessen

Jag valde att ha hela utcheckningsprocessen i ett flöde neråt på hemsidan. Detta för att kunden lätt ska kunna se vad hen har valt tidigare i flödet eller lätt kunna ändra något av sina val.

De olika stegen i flödet, som val av leveranssätt och betalsätt är tydligt avgränsade från varandra för att ögat lättare ska kunna hitta rätt. Stegen är också markerade med rubriker för extra tydlighet.

Fraktsätt

Vilken frakt kunden valt är tydligt med färg och bock. Om jag skulle göra det här kassaflödet ”på riktigt” hade jag även valt att ha olika ikoner för de olika fraktalternativen.

Betalning

För betalsätt finns även val för de som inte har BankID. Valt betalsätt visas genom tydoig ram samt att ej valda alternativ blir utsuddade. De är dock fortfarande kvar så att kunden lätt ska kunna ändra betalsätt.

Jag ber bara om den information som jag behöver för betalning och leverans, och har ett val för annan leveransadress.

Felmeddelande

Att göra rätt ska vara lätt, och när det blir fel ska det vara enkelt att se vad jag gjort för fel och vad jag behöver göra för att rätta till det. Här är ett exempel på felmeddelande när kunden skrivit in fel telefonnummer.

Texten är ändrad och förtydligad till att det behöver vara ett telefonnummer som är kopplat till Swish. Det aktuella fältet är tydligt markerat med bakgrundsfärg och ram.

Knappen för att komma vidare till nästa steg i betalningsflödet är också avaktiverad och det går inte att komma vidare innan du har gjort rätt.

Transaktionen

När kunden påbörjat betalningen går det inte längre att göra några ändringar. Detta för att det inte ska uppstå några missförstånd eller fel i systemet.

Det står tydliga instruktioner för vad kunden ska göra i det här steget.

En animation med prickar runt Swish-symbolen visar att betalningen är under behandling.

Tacksida

När transaktionen är slutförd kommer kunden till en tacksida.

Här finns information om att beställningen är mottagen och inom vilken tid den kommer att bli behandlad.

Kunden får också en sammanställning av sin beställning. Den är utformad på samma sätt som varukorgen. Bortsett från att det nu inte går att ändra antal eller ta bort varor. Kunden får även se vilken adress produkten kommer att skickas till.

Sist, men inte minst, finns en knapp som tar kunden tillbaka till webbshoppen om hen vill göra fler beställningar.