Best practice-principer för E-handlare.

1. Orderbekräftelse
Övrigt
Userium.com
Baymard.com
blog.kissmetrics.com/mega-ecommerce-guide/
Nielsen Norman Group, Articles
E-commerce Usability Best Practices by governor technology
Smashing magazine - Fundamental Guidelines Of E-Commerce Checkout Design
Kr
<<img src="http://www.abc
/def/flaggan.gif" alt="svenska
flaggan">>
CSS
<SVERIGE>
Sajten är responsiv
Den fungerar i olika skärmstorlekar och i mobil
och surfplatta. Besökaren behöver inte scrolla
fram och tillbaka sidledes.
Personaliseringsfunktioner
Valuta, språk, landsspecifika erbjudanden, skatter
och leveransalternativ ändras utifrån besökarens
geografiska position. IP-baserad geografisk posi-
tionering används inte utan kundens tillåtelse.
Alt-taggar
På alla element som inte är text, exempelvis bilder,
kartor och videos, används Alt-taggar.
Allt innehåll går att läsa utan stilmall (style sheet)
Länkar, knappar och checkboxar är enkelt klickbara
exempelvis kan en användare klicka i en checkbox
genom att klicka på texten bredvid, inte bara på
själva checkboxen.
Relateradinformationärtydligtgrupperadtillsammans
Konsekvent layout
Sidors layout ser likadan ut på alla sidor på sajten.
Sidor är inte plottriga
Det finns tillräckligt mycket vitt utrymme för att
besökaren ska kunna ”scanna” igenom innehållet.
Övrigt
TACK Tacka kunden för att de valt att köpa produkten hos er
E-post med orderbekräftelse
Upplys kunden om att denne kommer få ett
E-postmeddelande från dig med orderbekräftelse.
Fråga efter mer
Låt inte kunder försvinna efter köpet. Be kunden
anmäla sig till ert nyhetsbrev eller gilla er sajt på
sociala medier så som Facebook.
Orderbekräftelse
Kr 99
Navigation Varukorgen
Startsida
100
100
?
!
?
NAMN
890102 01010
19890102 01010
ADRESS
100
TOTALSUMMA
400
BANK
BANK
10
12
Visa antalet steg i checkout-processen
och på vilket steg användaren just nu befinner sig.
Minimera distraktion
Ta bort onödiga element som distraherar
besökare, exempelvis headern samt alla länkar till
andra produktsektioner på sajten. Behåll logo-
typen och låt denna leda till startsidan.
Bra exempel är Bokus.se.
Framhäv ”nästa steg”-knappen
genom både färg, form och text. Uppmuntra till klick.
Be aldrig om information
som inte är direkt nödvändig för själva köpet.
Förklara varför du ber om informationen
särskilt viktigt är det om denna information är
oväntad för kunden.
Använd positiv validering
Ge kunden uppmuntrande meddelanden, ändra
formulärfärgen eller lägg till en grön bock bredvid
formulärfältet när kund har skrivit in rätt data.
Använd trevliga felmeddelanden
som tydligt beskriver vad som gick fel. Ta om mö-
jligt på er skulden, skyll aldrig på kunden.
Använd vanliga ord som beskriver formulärfälten
som exempelvis namn och adress. Undvik sådant
som folkbokföringsadress eller förnamn/efternamn.
Acceptera alla format av data
Om kunden skriver personnumret med eller utan
19 i början eller om bindestreck används eller inte
används ska inte spela någon roll.
Leverans- och orderhanteringstid
Tala om för kunden hur lång tid det kommer att ta
innan den beställda varan skickas och om möjligt
anländer.
Visa den totala kostnaden
inkludera alltid skatter och fraktkostnader.
Betalning sker på sajten
Skicka aldrig besökaren till en betallösning hos
tredje part. Se till så att betalningen sker på din sajt.
Checkout
100
50%
+-
Kr 99
=Gå till checkout
Stora tydliga thumbnail-bilder
visar vad som ligger i varukorgen.
Produktlänkar, priser, lagersaldo och kvantitet
syns tydligt.
Rabattkodsfält framhävs inte men är ändå synlig
Helst är det gömt bakom en länk som fäller ut en
dropdown.
Det går att ändra antal och ta bort produkter
Det senare framhävs dock inte men är fortfarande
synlig för besökaren.
Visa upp ett telefonnummer till kundtjänst
och en länk till eventuell kundtjänstchatt.
Placera triggern ovanför sidbryt (så kallad fold)
Tyddliggör betalalternativ
så som Visa, Klarna, Paypal etc.
Beskriv alternativa möjligheter för checkout
som exempelvis med registering, snabbkassa etc.
Live chatt
funktion finns på sidan (rekommenderas men inte
nödvändigt)
Spara i önskelista
(rekommenderas men inte nödvändigt)
Skicka som gåva
(rekommenderas men inte nödvändigt)
Spara varukorgen till senare
(rekommenderas men inte nödvändigt)
Varukorgen
1
A 14-16 pxA
100
100
100
+
TOTALSUMMA
Produktbilder/videos är relevanta och meningsfulla
Det finns högkvalitativa bilder och videor som visar
produkten.
Tydliga produktbilder
Produktbilder är tagna ur olika vinklar och det går
att förstora bilderna.
Sammanfattning av produktegenskaperna
En sammanfattning samt fördjupad information om
produkten finns och dessa två är tydligt avgrän-
sade från varandra.
Låt inte priset bli en överaskning
Priset kommuniceras tydligt. Det finns inte
dolda kostnader som tillkommer eller över-
askningar i villkoren.
Leveranstiden förmedlas tydligt
Om varan är slut i lager kommuniceras detta
Positiva och negativa kundomdömen
Både positiva och negativa kundomdömen synlig-
görs genom en rekommendationsfunktion.
14-16 pixlar stor fontstorlek
Fontstorleken på text är minst 14-16 pixlar vilket
förbättrar läsbarheten.
Produktsidor
Produktsök
Tydligt sökfält
Det finns ett fält för produksök tydligt synlig på alla
sidor på sajten (förutom på sidor i betalflödet).
Produktsökfältets bredd
Produktsökfältet är brett nog för att besökare ska
kunna se vad de har skrivit.
Produktsök är placerat i ett formulär
Besökaren kan skriva in sökord direkt i ett formulär
och behöver inte gå via en länk.
Sökresultaten är relevanta
Sökfunktionen är “smart”
Sökfunktionen hittar produkter oavsett om söknin-
gen sker i singularis, pluraris, felstavningar, syno-
nymer etc.
Sökförslagsfunktion
Produktsökmotorn ger sökordsförslag för att
hjälpa användare söka efter relevanta nyckelord.
Sökhistorik
Användaren kan se deras senaste sökningar i
produktsökfunktionen.
Startsida
”Klicka här”.
Startsida
Navigation
Varukorgen
Navigation VarukorgenStartsida < <
Navigation
Viktiga länkar publiceras inte i rörliga element
Du undviker att placera vikta länkar i exempelvis
snurrande bildkaruseller.
Kategorier är sorterade utifrån popularitet
Brödsmulor
Brödsmulor finns på alla sidor på sajten så att
besökaren förstår var de är.
Navigationen ser likadan ut på alla sidor
Beskrivande länkar
Varje länk eller knapp kommunicerar vad som
händer om användaren klickar. Det finns inga
länkar eller knappar med text av typen ”Klicka här”.
Länkar är lätta att identifiera
Det är uppenbart att länkar är länkar. Element som
inte är klickbara ser inte inte heller klickbara ut,
exempelvis undviks understruken text på vanlig text.
URL till sajten är kort och lätt att komma ihåg
Tydlig länk till varukorgen i det övre högre hörnet
En tydlig länk till varukorgen finns i det övre högra
hörnet på alla sidor på sajten (förutom på sidor i
betalflödet).
1 1 1
Första intryck
Startsidan gör ett bra första intryck och uppmanar
till köp.
Trygghetssymboler
Bygg trovärdighet och förtroende genom att
visa upp välbekanta trygghetshöjande symboler
i headern på sajten.
Gör det uppenbart vad du säljer
Startsidan gör det uppenbart vilken typ av pro-
dukter du säljer.
Unik värde
Det kommuniceras tydligt varför besökare ska
handla på din sajt snarare än av några av era
konkurrenter.
Visa upp era bästsäljande produkter
Dina bäst säljande produkter marknadsförs så
tidigt som möjligt på startsidan.
Tydliga triggers
Besökarna förstår vad de ska göra och det är
tydligt varför de bör klicka på triggers som till
exempel knappar eller länkar.
Visa nöjda kunder
Sajten visar upp exempel på nöjda kunder och
bygger därigenom fötroende och värde. Både
namn, bild och deras omdöme är publicerade.
Undvik stock photos
Du undviker att använda generiska bilder, så
kallade ”stock photos”.
Kontaktuppgifter till kundtjänst
Kontaktuppgifter är lätta att hitta direkt via startsi-
dan.
Sekretesspolicy
Om din sajt samlar in information om användare
finns det en sekretesspolicy.
Startsida
ChecklistaOptimera din E-handel Checka