3. juni 2025
Introduktion
Hvor vi i serien om den gode produktside var fokuserede på det enkelte produkt zoomer vi nu ud og kigger på hele varehylden. Hvor vi i de fysiske butikker også hjælpes til at finde det rette produkter gennem afdelinger, skilte og vejvisere finder vi også pendanter hertil i den online købsoplevelse – i denne serie kigger vi i den brede forstand på produktlisten og hvilke overvejelser man bør gøre sig for at hjælpe brugerne i den rigtige retning, hen til det rigtige produkt og i sidste ende til en konvertering i lige nøjagtig din shop. Læs med nedenfor og se nederst på siden de andre posts i samme serie så du kommer hele vejen rundt. Læs derudover også vores serie om den gode produktdetaljeside.
Generelt layout
Effektiv produktlistevisning er afgørende for at sikre konvertering – det er et mantra, som er godt at holde sig for øje i det efterfølgende arbejde, som vi vil beskrive.
Men “effektiv” kan være forskelligartet alt efter hvad du sælger:
- Eksempel 1
- Eksempel 2
De rigtige batterier
“Cykellygten er løbet tør for strøm og der er ikke flere batterier I skuffen. Du skal have fat i nogle AA-batterier i en fart. Du befinder dig snart i den lokale fødevarebutik og finder hurtigt igennem alle gangene til du befinder dig ved non-food-hylderne. Hurtigt indsnævrer du hyldernes indhold til batteri-faget og snart står du med AA-batterier I hånden. Skal de være genopladelige? Principielt kan du godt lide ideen, men opladeren er for dyr. Skal det være duracell eller butikkens eget mærke? Du vælger Duracell og håber, at dine erindringer om en mekanisk lyserød kanin, der spiller på tromme meget længere tid end de andre batterimærker holder stik og du ender hurtigt med lys på lygten igen.”
Omend noget karikerede så er disse to eksempler med til at vise forskellige købsrejser og selvom, at de foregår i den helt fysiske og analoge verden, så kan vi drage vigtige paralleler til den online version:
Har brugeren et konkret behov?
Hvor meget ved brugeren om sit behov?
Er brugeren villig til at overveje alternative løsninger på sit problem?
Hvor risikovillig er brugeren?
Hvad kendetegner en god handel for brugeren?
Kommer brugeren her tit eller sjældent?
Disse spørgsmål og flere til, er gode at stille sig selv (og faktisk også brugerne selv) for at spore sig ind på hvordan du sikrer dig, at den potentielle kunde finder det eftertragtede produkt eller som minimum går derfra med en god oplevelse – for så er der større chance for, at de kommer tilbage.
Uden yderligere omsvøb dykker vi direkte ned i materien på den virtuelle produkthylde; produktlistens layout.
I denne blogpost vil vi gennemgå følgende elementer:
UI elementer
- Grid vs. liste-visning
- Antal produkter i visning og load metode
- Variantvisning
- Andet indhold
Navigation
Specifikt for mobil
Enkeltdele, som er specifikke for layout på mobil-størrelser
UI elementer
- List eller grid
- Antal produkter
- Indlæsning af produkter
- Variantvisning
List eller grid
Hvis ikke disse to ord siger dig så meget, så er det ikke så unormalt for du kender dem måske bedre som deres visuelle sidestykker. Tidligere var normen, at du gav brugeren selv valget om de ville have vist produktlisten som liste eller grid på samme måde som sortering, men dette er ikke særlig udbredt længere.
Måske fordi the power of defaults er så stor at langt de færreste benytter sig af muligheden for at skifte. Men hvilken default er så den rigtige til jeres produkter?
Helt kort fortalt er hovedreglen, at produkter med vigtige specifikationer vises som liste mens mere visuelt drevne produkter vises som grid.
Hvorfor?
I liste visningen er hele bredden i spil og dette giver plads til at vise enten en produkttekst eller specifikationer. Er billeder vigtigere for dine brugere end specifikationer så kan disse være større i grid visningen og derfor bør I gå med grid som default hvis jeres produkter er visuelt drevne.
Forskellen på produktvisningen mellem Ahlsell og Fjällräven er tydelig - det ene er båret af specifikationer, det andet er mere visuelt.
Hvad skal I overveje
Gevinster og praktiske tiltag I selv kan styre
Er grid eller list bedst for jeres produkter?
Har I mest behov for at vise specifikationer eller større billeder? Det bør være være den største overvejelse i forhold til hvad I vælger. Og skal det være den samme visning på alle sider eller skal I skifte mellem de to alt efter hvilken kategori man befinder sig i.
Viser I antal produkter?
Har I sørget for at man kan se hvor mange produkter, der befinder sig på listen?
Loadingmetode
Hvordan loades flere produkter ind på jeres liste? Er paginering eller indlæs flere det rette for jer?
Variantvisning
Har I sørget for at jeres varianter vises som et enkelt produkt med varianter og ikke enkeltvise produkter?
Navigation
Breadcrumbs:
Uden at skulle dykke alt for langt ned i materien på navigationsstrukturer så er det værd at nævne, at produktlistesiden selvfølgelig også bør indeholde en indikation af hvor i shoppens hierarki man befinder sig. Breadcrumbs er specielt vigtige for shops med dybe hierarkiske strukturer hvor denne type navigation hjælper brugeren med at udvide sit perspektiv ved at gå et niveau op i strukturen. Udover at besvare det almennyttige spørgsmål ”Hvor er jeg?” så kan det nemlig også hjælpe brugeren med forståelsen for ”…og hvad er der omkring mig?”.
Forestil dig, at du står på en produktliste med overskriften ”Sko”. Der er stor forskel på om hierarkiet bagved hedder
Hjem > Dyrehold > Stald
eller
Hjem > Fest > Formel.
Og hvad hvis dine produktkategorier figurerer under flere hovedkategorier? Som udgangspunkt bør man definere en primær kategori og gerne den sti, som giver brugeren den bedste forventning om hvad der befinder sig på listen.
Så hvis produktlisten ”Handsker” både befinder sig under
Hjem > Beklædning > Tilbehør
og
Hjem > Vinterudsalg
så vil førstnævnte være mest sigende om hvad man kan forvente at finde på listen.
Tilbage-funktionalitet:
Når brugeren besøger en produktdetaljeside og beslutter sig for at gå tilbage til produktlisten vil det alt andet lige give mening, at brugeren befinder sig samme sted på listen, som hvor man forlod den.
Navigation
- Breadcrumbs
- Tilbage-funktionalitet
Uden at skulle dykke alt for langt ned i materien på navigationsstrukturer så er det værd at nævne, at produktlistesiden selvfølgelig også bør indeholde en indikation af hvor i shoppens hierarki man befinder sig. Breadcrumbs er specielt vigtige for shops med dybe hierarkiske strukturer hvor denne type navigation hjælper brugeren med at udvide sit perspektiv ved at gå et niveau op i strukturen. Udover at besvare det almennyttige spørgsmål ”Hvor er jeg?” så kan det nemlig også hjælpe brugeren med forståelsen for ”…og hvad er der omkring mig?”.
Forestil dig, at du står på en produktliste med overskriften ”Sko”. Der er stor forskel på om hierarkiet bagved hedder
Hjem > Dyrehold > Stald
eller
Hjem > Fest > Formel.
Og hvad hvis dine produktkategorier figurerer under flere hovedkategorier? Som udgangspunkt bør man definere en primær kategori og gerne den sti, som giver brugeren den bedste forventning om hvad der befinder sig på listen.
Så hvis produktlisten ”Handsker” både befinder sig under
Hjem > Beklædning > Tilbehør
og
Hjem > Vinterudsalg
så vil førstnævnte være mest sigende om hvad man kan forvente at finde på listen.
Hvad skal I overveje
Gevinster og praktiske tiltag I selv kan styre
Breadcrumbs
Tilbagefunktionalitet
Hvad sker der når man går tilbage fra detalje til listesiden? Kommer man tilbage til der hvor man forlod listen?
Andet indhold
Som udgangspunkt er produktlisten jo som ordet indebærer, en liste af produkter. Ikke andet. Derfor skal man være varsom med at fylde andet indhold ind på siden for at stille forskellige behov. Vi ser ofte at SEO-tekster, smarte produktanbefalings-moduler, inspirationsindhold og reklamer puttes ind på produktlisten. Årsagerne kan være mange og gode, men desværre kan det lede til en fragmenteret og decideret uproduktiv oplevelse af produktlisten.
- Produkter først
- Undlad opdeling
- Støtte-indhold
Her mener vi – lad være med at putte for meget indhold ind henover selve listen af produkter. Skriv en god H1 og eventuelt en kort SEO tekst (Eller en længere, som har en fold ud funktion) og vis derefter produkterne – det er brugerens opfattelse, at de har fundet en produktliste og derfor vil det give mening, at de ser produkter som noget af det første. Undlad helt at vise relaterede produkter i toppen da det blot forvirrer brugeren om båndet er en del af listen eller ej.
Mobil hensyn
Mobile devices har deres helt særegne fordele og udfordringer – vi bruger dem mere og mere og derfor bør vi også have et skarpt øje på, at vores layout fungerer på forskellige opløsninger. Et godt sted at starte er, at blive bevidst om hvilke devices jeres brugere oftest tilgår jeres site fra. Dette kan Google Analytics fortælle jer og det giver jer en prioriteret liste over de opløsninger, som I bør være helt sikre på, er i top. Udover at have et generelt blik for layoutets responsivitet er her nogle konkrete huskeregler for listens layout på mobil:
- Klar adskillelse
- Antal produkter
- Højde på produkter
- Andet indhold
1. Sørg for at et enkelt produkt på listen er klart adskilleligt fra det næste. Lav enten en visuel afgrænsning i bunden af liste-genstanden for at vise brugeren, at nu begynder det næste produkt. Spacing er ikke altid nok og kan skabe forvirring om billedet hører til ovenfor eller nedenunder.
