E-handel

Designa startsida & header

I denna artikelserie, design & UX för e-handel, får du flera exempel på hur du kan använda design best practices på din e-handelssida. Först ut är fyra tips för din startsida & header (plus ett litet extra tips).

1. 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. Du kanske har hört talas om uttrycket, “too much information is no information”?

Därför är auto-rotating slideshows ett problem: 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 eller video med CTA (call to action) eller varför inte ett 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.

2. 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 "hamburgarmeny" ä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 användaren? Nej!

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

Användaren får heller inte någon uppfattning om vilka typer av produkter som säljs på siten (det är sällan användare landar på startsidan som första sida). Denna typ av meny adderar även ett klick och det blir krångligare att byta mellan kategorier i menyn. För mobilen finns det inte så många val i dagsläget, där kan en köra på hamburgermeny men vara noga med att länka till kategorier utanför menyn också. T.ex. populära kategorier på startsidan, underkategorier på katergorisida etc.

1-Show menu items ✔️Exempel på hur en kan designa sin desktop-header där alla huvudmenyval direkt är synliga

1-Hide menu items ✖️Exempel på hur en inte bör designa sin desktop-header då huvudmenyvalen är dolda trots att det finns gott om plats

3. Uppmana användarna till handling med CTA's

"CTA" är en förkortning för Call To Action och har som uppgift uppmana användaren till en handling. Om du vill få användaren 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 direkt förstår vad som kommer att ske. En riktlinje du kan komma ihåg ä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”.

2-cta-example Exempel på hur mycket tydligare en CTA blir när den är ifylld

4. Låt inte dina användare söka efter 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. 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.

3-Show search ✔️Exempel på desktop-header där sökfältet är lätt att upptäcka

3-Hide search ✖️Exempel på desktop-header där sökfältet är lätt att missa

Extra tips: Undvik att kopiera andra e-handlare rakt av

Sist men inte minst, titta inte endast på vad konkurrenter inom samma bransch eller andra e-handlare gör. Du vet inte vad som är grunden till att de har just så eller om det faktiskt 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.