E-handel

Designa kategorisida

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. I artikel två i serien går vi igenom tips för din kategorisida och även något att tänka på när ni kategoriserar upp ert utbud (kategoriträdet).

1. Använd horisontell topbar-filtrering

På många e-handelssidor idag på desktop ligger filtreringsalternativen till vänster i en side-bar, men fler och fler börjar byta ut detta till en horisontell top-bar istället. En top-bar ger möjlighet till att använda hela hemsidans bredd för produkter till skillnad mot en sidebar-filtrering som tar upp nästan en tredjedel av sidan. En annan fördel med top-bar-filtering är att den har en större upptäckningsfrekvens. Pssst! Undvik också att gömma filtreringsalternativen på desktop under ett extra klick som heter t.ex. "Filtrera". Finns det plats, som det oftast gör på desktop, visa alla filteralternativen direkt.

Användarstudie sidebar-filtrering

En Baymard Institute studie visar att besökare ofta missar filtreringsalternativen som ligger i en side-bar (detta var det mest vanliga scenariot). Studien visar även att besökare ibland misstar sorteringsalternativen för filtreringsalternativen och tror att det är de enda alternativen som finns tillgängliga.

baymard-topbar-filter En heatmap från en ögonspårningsstudie där 32 personer deltog - Detta visar tydligt på att en horisontell filtrering kan ha en väldigt stor upptäcksfrekvens. Källa: Baymard Institute.

2. Visa valda filter i en översikt

När en användare har gjort sina filtertingsval är det utöver att bekräfta valet vid ursprunget också bra att visa en översikt med alla valda filter. Dels för att en inte ska behöva scrolla igenom mängder med filter för att hitta de en valt men också för att det ska vara enkelt att rensa alla. Nedan kommer förslag hur en kan göra detta för både desktop och mobile:

filter-mobile2 Exempel för mobile

filter-desktop2 Exempel för desktop

3. Visa underkategorier tydligt

Allt fler och fler e-handlare går ifrån egna landningssidor för huvudkategorier och visar istället direkt en produktlistning som landningssida för kategorin. Vilket i sig är bra då det minskar antalet klick en behöver göra för att hitta rätt produkt. Det är dock viktigt att en inte glömmer bort att tydligt visa vad för underkategorier som finns, helst separat från filtreringen.

Placera helst underkategorierna i toppen av kategorisidan så att det är tydligt vad för kategori en hamnat på. Även om uppfattningen om att en användare inte scrollar "below the fold" anses vara död, förlitar sig användare fortfarande på vad som finns "above the fold" och bildar sig snabbt en uppfattning om en hamnat rätt.

sub category-mobile2 Exempel för mobile

Sub category - desktop2 Exempel för desktop

4. Visa info som särskiljer produkter direkt i listningen

Om det behövs visa information för besökaren redan innan den går till produktsidan så är det bra att göra det statiskt i listningen istället för en så kallad "Quick view". Många jämför produkter redan i listningen så varför ska en då dölja informationen som skiljer produkterna åt med ett klick? En till nackdel med "quick view" är att det ofta mistas för produksidan och en då missar massa bra information om produkten.

Ett alternativ till detta är att visa mer information på hover vilket innebär att när man håller musen över produktbilden så blir mer information synlig, dock fungerar inte detta alternativ på mobilen. För enheter som inte har hover, t.ex. en mobil, är det bättre att visa den viktigaste informationen direkt. På så sätt kan besökaren jämföra olika produkter direkt på kategorisidan.

Utöver bas info så som produktnamn, pris och reapris kommer här några tips på info du kan addera direkt i listningen - märke, lagerstatus, reviews, vilka färger som produkten finns i, storlekar och tekniska specifikationer. Egentligen allt som underlättar för användaren utan att göra det rörigt.

show info product list - desktop4 Exempel för hur en kan visa upp mer info i listning

5. Undvik att överkategorisera kategoriträdet

Det är lätt att tro att du gör sina användare en tjänst genom att kategorisera upp hela utbudet direkt i menyn. Ta kategorin klänningar som exempel - Det finns massa typer av klänningar och många e-handlare idag kategoriserar upp det till allt från strandklänningar, studentklänningar, vardagsklänningar, balklänningar och långklänningar.

Nackdelar med att överkategorisera

Att kategorisera direkt i menyn gör att besökaren inte får någon bra överblick av hela utbudet. När besökaren inte snabbt hittar rätt finns det stor risk att den väljer att lämna. En annan nackdel med överkategorisering direkt i menyn är att besökarna inte kan välja fler kategorier samtidigt vilket gör att man får väldigt smala underkategorier presenterade för sig. Ibland vill man kanske titta på både studentklänningar och partyklänningar samtidigt utan att behöva byta mellan kategorierna.

Låt besökarna filtrera fram sin egen vy

Vi rekommenderar att ni använder ett filtreringasalternativ där besökaren kan filtrera på “typ”, så att det går att välja flera typer av klänningar samtidigt. Låt besökaren själv bestämma vilket utbud som den vill ha presenterat för sig. Pssst! Om ni vill ha dessa kategorier av SEO-skäl så föreslår jag att ni skapar upp dessa kategorier men döljer dem från menyn.

Läs del ett i artikelserien här