E-handel

E-handelsdesign | Del 1/4 - Startsida och Header

Toppbild för E-handelsdesign del 1

Vill ni bli bättre på att omvandla besökare till kunder? I denna artikelserie får du lära dig hur du med hjälp av en genomtänkt användarupplevelse får fler besökare att konvertera och bli återkommande kunder.

Undvik slideshows och karuseller

Ofta används slideshows och karuseller i toppen på en sida för att få chansen att visa mycket information samtidigt. Där har vi ett problem. Vi tar alltså den viktigaste informationen och trycker ihop den på ett och samma ställe.

Därför är auto-rotating slideshows ett problem:

Har du hört talas om uttrycket, “to much information is no information”? Våra hjärnor är programmerade att reagera på rörelse och det gör att användaren är för upptagen med att reagera på rörelsen och missar då informationen du försöker förmedla.

Skippa slideshowen och kör istället på en stor hero-image med CTA (call to action) eller varför inte något fräsigt grid-system med flera CTA’s.

Inte helt övertygad än? Spana in den här länken.

grid

Exempel på grid-lösningar som kan ersätta slideshows och karuseller.

Visa huvudkategorierna direkt i headern/menyn

Många e-handlare väljer att gömma produktkategorierna i huvudmenyn under ett menyval som de ofta döper till t.ex. “produkter” eller “sortiment”.

Ibland kan man också se att vissa väljer att använda en "hamburgermeny" även på desktop. Visst, det kanske ser snyggt ut och löser problemet med att mer får plats i headern, men är det bra för besökaren? Nej!

Den största svagheten med att trycka in hela produktkatalogen under ett menyval är att besökaren inte direkt förstår vilken typ av sida den har hamnat på.

Besökaren får heller inte någon uppfattning om vilka typer av produkter som säljs på siten (ingen köpt trafik kommer rakt in på startsidan). Denna typ av meny adderar även ett klick och det blir jobbigare att byta mellan kategorier i huvudmenyn, speciellt på mobilen.

maxgamin

Maxgaming visar hela sitt utbud i huvudmenyn vilket gör det lätt för besökaren att direkt förstå vad för typ av sida en hamnat på.

del2-menu

Monki gömmer sina produktkategorier i en hamburgermeny även på desktop vilket gör att man inte direkt ser vad det finns för produktutbud.

Uppmana besökarna till handling med CTA-knappar

"CTA" är en förkortning för Call To Action och har som uppgift uppmana besökaren till en handling. Om du vill få besökaren att faktiskt klicka på de du pushar på är det viktigt att du utformar övertygande knappar och har det på alla dina erbjudanden. Välutformade CTA-knappar kommer att hjälpa dig att få användaren att göra det du vill att dem ska göra.

Tänk på detta när ni utformar CTA-knappar:

  • En ifylld CTA i en färg som sticker ut är mycket tydligare och lättare att uppmärksamma än en outlinad CTA (spök-knapp) med genomskinlig bakgrund. Det finns ingen universal färg som är bäst för konvertering men människor är mer benägna att märka (och komma ihåg) något som sticker ut från allt annat omkring.

  • Använd rektangulära CTA’s med rundade hörn. Runda hörn pekar inåt och uppmärksammar knappens insida. En fyrkantig kant pekar utåt och drar uppmärksamheten bort från texten i knappen. Studier visar även att vi är "programmerade" för att undvika skarpa kanter i naturen eftersom de utgör ett möjligt hot.

  • Skriv en tydlig och kortfattad copy i din CTA så att användaren förstår direkt vad som kommer att ske. En riktlinje du kan “keep in mind” är att tänka att användaren säger “jag vill” före uppmaningen. Till exempel; Jag vill “gå till kassan”, jag vill “bli inspirerad”, jag vill “shoppa rea”, jag vill “skapa konto”.

cta-maxgaming

Maxgaming använder gröna knappar med rundade hörn och en tydlig text. Lätt att se och lätt att förstå vad som händer om en klickar på dom.

cta-rum21

Rum21 har väldigt små och otydliga CTA's som är lätta att missta för vanlig text

Gör det enkelt för besökarna att hitta sökfältet

Sökfältet ska inte vara svårt att hitta, speciellt inte på sidor som har flera tusentals produkter där söket är det primära sättet att hitta rätt produkt. Låt sökfältet vara just ett sökfält och undvik att gömma det bakom en sökikon. Förutom att det adderar ett klick gör det även att sökfältet blir svårare att hitta.

Ett bra sök driver försäljning. Omsätter ni över 10 miljoner och har en stor produktkatalog kommer det vara värt att investera i en avancerad söktmotor som t.ex. Loop 54.

m-search

m.nu har ett stort och tydligt sökfält som är väldigt lätt att hitta

searchfield

Kappahl “gömmer” sitt sök bland alla andra ikoner och gör det väldigt svårt att hitta det.

Kopiera inte andra e-handlare

Titta inte bara på vad konkurrenter inom samma bransch eller andra e-handlare gör. Du vet inte vad som är grunden till att dom gör så eller om det verkligen fungerar. Jobba istället kontinuerligt med A/B-tester för att identifiera hur ni förbättrar användarupplevelsen och ökar konverteringen för just er.

Vi rekommenderar konverteringsoptimerarna på Sitegainer!

Läs nästa artikel här