• +45 70 27 05 04
  • Support
  • English

Den gode produktliste - Del 1: Layout


3. juni 2025

Effektiv produktlistevisning er afgørende for at sikre konvertering

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.

Forestil dig to eksempler:

  • Eksempel 1: “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 med fødevarer til du befinder dig ved non-food-hylden. Hurtigt indsnævrer du hyldens 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 errindringer 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.”

 

  • Eksempel 2: “Du befinder dig på et bagagerumsmarked en lun sommerdag og du har ikke andre planer så hvorfor ikke lige svinge ind forbi og give det et kig. Det kan jo være, at du kan lave en god handel. Du vandrer frem og tilbage og kigger nøgternt på alle de stande, der ved første øjekast ser ud til at have nogle antikviteter, som tiltaler dig. Efter 4 timer kommer du ud på den anden side med et strudseæg, en orange køkkenvægt og nogle snapseglas med fuglemotiv. Hvordan ved du ikke. Glad kører du hjem.”

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 paraleller 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.

  • UI elementer

    • Grid vs. liste-visning
    • Antal produkter i visning og load metode
    • Variantvisning
    • Andet indhold
  • Navigation

    Breadcrumbs og "Tilbage" funktionalitet hjælper brugeren når de kænguru-stylter sig frem og tilbage mellem liste og detaljesider

  • Specifikt for mobil

    Enkeltdele, som er specifikke for layout på mobil-størrelser

UI elementer

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.

Vis antal af produkter

Forestil dig dette konkrete eksempel:

Du går ind i en ostebutik og spørger ekspedienten: ”Jeg elsker Gouda! Hvor mange forskellige har I af dem til min osteaften i aften?”.

Ekspedienten svarer: ”Vi har gouda!”.

For det første så virker det som om ekspedienten ikke ved hvad hun har i butikken, men du ved ikke om det er fordi hun har for mange til at kunne tælle eller om det er fordi hun ikke har særlig mange. 

Det er derfor altid en god ide at vise hvor mange produkter der vises på din produktliste fordi brugeren så har nemmere ved at vurdere om din butik har det de leder efter, men også vurdere om opgaven at kigge dem igennem er tålelig.

Det gælder også når man tilføjer filtre til listen – hvis jeg finder en produktliste kaldet ”Handsker” med 3000 produkter på, ved jeg, at det er et stort katalog og hvis jeg tilføjer filtre ”Farve: Brun” og ”Materiale: Læder” og får 150 produkter frem så ved jeg hvor stor en opgave der ligger foran mig i min jagt på de helt rigtige brune læderhandsker.

Det kaldes Goal Gradient effekten – at jo tættere vi mennesker er på målet – jo større er chancen for at vi fortsætter mod det. Hvis ikke vi ved hvor langt væk målet er, er chancen for at vi overhovedet begynder meget mindre.

Både Bilka og Søstrene Grene viser hvor mange produkter, der befinder sig på listen

Hvad skal I overveje

Gevinster og praktiske tiltag I selv kan styre

  • Har I styr på frivillige supplementer?

    Forefindes der dokumenter, filer, tegninger, monteringsvejledninger eller lignende supplerende materialer, som I kan berige jeres produkter med? Kan de findes for det enkelte produkt - enten på produktdetaljesiden eller via direkte link til en download-sektion.

  • Har I styr på de lovpligtige supplementer?

    Energi- og faremærker er to af de mest kendte, men der kan være andre mærkater eller dokumentationer indenfor lige netop jeres branche, som er nødvendige at kende til. 

Duravit brillerer i alle tænkelige filer, der kan downloades for deres produkter. Thomann har vedlagt et lydklip af deres instrumenter, hvilket er en fremragende form for supplerende indhold. Bygma har også en masse supplerende dokumenter og har her valgt at fremhæve, hvad der er lovpligtigt.

Cross selling

At kunne afsætte flere varer til samme kunde vil nok altid være et optimeringsfokus for både fysiske og internetbaserede butikker. For når kunden allerede har én vare med sig på vej gennem kassen, indikerer det, at butikken har bestået prøven: kunden stoler på butikkens troværdighed og produktets beskaffenhed.

Derfor arbejdes der ofte med cross selling, der desværre ikke har en særlig god dansk oversættelse, men som jo netop har til formål at informere kunden om flere og/eller andre produkter end dem, som har den øjeblikkelige interesse.

Der findes alternative definitioner og klassificeringer af de forskellige typer af cross selling, som man kan benytte sig af. Vi vil her fokusere på de to overordnede typer: Komplementære og alternative produkter.

Komplementære produkter:

Førstnævnte bør man se lige så meget som en god service som et konverteringsfremmende tiltag. Dette kræver måske lige en lille forklaring, for det vil helt sikkert bidrage til størrelsen af den enkeltes kurv, men fokus bør ikke være på dette, men i stedet på at give den potentielle kunde en hurtig og nem adgang til de produkter, som passer sammen med det produkt, som det kigger på. Eksempler kan være:

  • Batterier, der passer i størrelsen til legetøjet
  • Klinger, der passer til rundsaven
  • Bukser, der matcher i farven (eller matcher det, som modellen har på på miljøbilledet)

Her er altså tale om det, som vi ofte kender fra fysiske butikker, hvor disse produkter vises sammen – tænk på en mannequin i tøjbutikken. Dette er et godt eksempel på komplementær cross selling.

Sælger man ikke produkter, der som sådan "passer" sammen med andre produkter, kan man benytte "Andre købte også"-modellen, hvor man i stedet viser hvad andre har haft med i kurven på vej ud af butikken – en model som de fysiske butikker har svært ved at efterligne. Uanset model, handler det om at give den potentielle kunde en kortere vej til en god oplevelse med produktet ved at have alle fornødenheder for at bruge deres produkt når de modtager det.

En variant af komplementær cross selling er bundles eller pakkeløsninger, hvor man faktisk har minimeret arbejdet så meget, at kunden blot skal vælge pakken, så de ikke selv skal sidde og ligge det hele i kurven.

Alternative produkter:

Adskilt fra de komplementære produkter bør findes de alternative produkter, som er en samling af de produkter, der er nært beslægtede med det pågældende produkt og derved kan ses som værende et produkt, der erstatter det pågældende i kurven. Grunden til at vise disse produkter er for at give den potentielle kunde både et indblik i dybden af jeres produktkatalog, men også give hurtig adgang til andre produkter, hvis det pågældende ikke lever op til de krav, som kunden har. Hvor fristende det end kan være at fixe denne samling sådan, at der kun vises dyrere produkter, så overvej, om du ikke hellere vil sælge et billigere alternativ end at sende kunden videre til en konkurrent.

Fælles for alle typer af cross selling er god navngivning af sektionerne, så den potentielle kunde hurtigt kan aflæse, hvilke typer produkter man kan forvente at finde i sektionen.

Hvad skal I overveje

Gevinster og praktiske tiltag I selv kan styre

  • Har I produkter, der komplementerer hinanden?

    Hvis jeres produktportefølje indeholder produkter, som "passer sammen", bør I kraftigt overveje at indrette en specifik sektion til dette på jeres produktdetaljeside (og givetvis også lave relationen i jeres PIM).

  • Har I bundles eller kits?

    Kan jeg hjælpe jer med at pakke visse af jeres komplementære produkter i bundles eller kits, så I sikrer, at jeres kunder får det hele med? Det behøver ikke at være under unikke varenumre, men måske en måde, hvorpå alle de relevante varenumre tilføjes til kurven og kan fjernes igen.

  • Hvordan håndterer I alternative produkter?

    Vi kender alle de sektioner, der hedder noget ala "Andre købte også" eller "Lignende produkter", men hvad er logikken bag dem? Et velorganiseret varesortiment overlader ikke disse relationer til tilfældigheder, men gør en dyd ud af at præsentere brugeren for reelle alternativer. Overvej om der skal udvides med nøgle specifikationer på visningen. Det er svært at vurdere, om "Grass Mower 3000i" er bedre end "Grass Mower 3000u" - så hjælp kunden med at vurdere dette uden at skulle hoppe rundt på ti forskellige sider.

Greenline har lavet denne pakkeløsning-logik, hvor man kan lægge alle produkter i kurven med et simpelt klik. Ryobi viser ikke blot de batterier, der passer til den enkelte maskine, men også hvor mange skruer/huller, man kan forvente pr. opladning. 

Thomann har her udvidet den typiske "Andre købte også"-feature med deciderede tal på, hvor mange der egentlig købte det produkt, man befinder sig på, og hvor mange der valgte anderledes. Om logikken så er fiflet med, ved vi ikke. Asus viser ikke blot alternative produkter, men også en udvidet visning, hvor man kan sammenligne på siden, hvilket der er et bedre alternativ.

Anmeldelser (reviews)

Skal vi blive i analogien fra den virkelige verden, så har denne ingen gode pendanter til det digitale anmeldelses-univers. Når du går ind i en fysisk butik står der (som regel) ingen tidligere kunder uden foran, der fortæller dig om deres besøg i butikken. Du vil ikke blive mødt af altruistiske mennesker, som venter ved morgenmadshylden for at fortælle dig om deres oplevelse med den økologiske granola for fire år siden.

Det er dog lige netop hvad man har mulighed for online både gennem shop-anmeldelser som fx trustpilot, men også gennem indlejrede anmeldelsessystemer til produkt-reviews. Og det giver god mening at have dette lag på den digitale købsprocess – for i analoge butikker er der som regel en person bag disken eller en adresse, som du kan opsøge igen hvis der er problemer. På nettet er det meget nemmere at ende op i hvad der ville svare til en skummel baggårds pop up shop, som sælger mirakelvand, der kan kurere alt fra flisepest til akne. Dagen efter er de væk og slipper afsted med at sælge dårlige produkter til godtroende mennesker.

Derfor skal anmeldelser ses som den ultimative social proof – andre har købt produktet eller brugt butikken. Og deres ærlige mening har stor værdi for den nye kunde. Og en vigtig skelnen er vigtig at lave her – forskellen mellem ægte brugeres anmeldelser og test-side anmeldelser. Om end test-siders anmeldelser kan være helt reelle og objektive er de forbundet med en stor portion mistro fra shopperne, da de frygter at disse er manipuleret, betalt for eller kun vises når resultatet er godt.

Så derfor virker det ganske naturligt at give kunderne mulighed for at tilføje anmeldelser på shoppens produkter. Dog med følgende 9 features:

 

1. Brug en velkendt metafor for ratings

Stjerner er det hyppigst brugte ikon for anmeldelse. Overvej det nøje, hvis I tænker på ikke at benytte denne velkendte metafor. Benyt 1-5 som skala.

2. Lad kun reelle kunder kunne tilføje anmeldelser af de produkter de har købt

Det skal ikke være at tilføje anmeldelser, uden at have købt noget - markér tydeligt hvem der har købt, og hvem der ikke er verificeret som købere.

3. Sørg for at alle anmeldelser kan filtreres eller sorteres

Som minimum på seneste, lavest rated, højest rated og også på den specifikke stjerne/hjerte rating.

4. Vis fordelingen mellem de forskellige ratings

Det er ikke nok med et gennemsnit af rating - det skal være muligt at se hvor mange kunder, der har givet hhv. 1,2,3,4 og 5 stjerner.

5. Opmuntre til at vedlægge billeder i anmeldelser

Billeder giver den potentielle kunde mulighed for selv at vurdere, om anmeldelsen er troværdig og reelt omhandler det korrekte produkt.

6. Overvej subscores i anmeldelser

Det kan være elementer som pasform, størrelse, lydkvalitet m.fl.

7. Vis altid minimum 6 anmeldelser med mulighed for at loade flere

Men lad være med at loade alt for mange - 6-10 er en god tommelfingerregl

8. Besvar som minimum negative anmeldelser, men overvej at gøre det med alle.

Lad være med at fjerne de negative kommentarer, da en god håndtering af dem giver bedre troværdighed.

9. Tilføj link i toppen af siden, som leder til anmeldelser ned til anmeldelser.

Det kan være så simpelt som en visning af stjerne/hjerte rating, som leder til sektionen dernede.

Læs de forrige indlæg i serien

Den gode produktside - Del 1: Billeder

Et billede siger mere end tusind ord. I en virtuel butik hvor varen ikke kan tages ned fra hylden og besigtiges, er billeder og medier den bedste måde, som brugeren kan verificere, om produktet er ”det jeg søger”. I 2022 er billeder og andre medier altså kritiske
Den gode produktside - Del 1: Billeder

Den gode produktside - Del 2: Tekster

I seriens forrige indlæg undersøgte vi produktsidens billeder og deres funktion. I dette indlæg retter vi fokus imod produktsidens tekster. Billeder kan (og bør) ikke stå alene, og af hensyn til kundens oplevelse såvel som til SEO, er produkttekster vigtige elementer i
Den gode produktside - Del 2: Tekster

Den gode produktside - Del 3: Variantvisning

Produkter med mange varianter er ofte et tidskrævende punkt i designfasen af flere årsager. En god webshop skal gerne gøre det nemt for brugeren at navigere imellem forskellige produkter, deres varianter og deres forskellige egenskaber.
Den gode produktside - Del 3: Variantvisning

Den gode produktside - Del 4: UI elementer

Få styr på de kerne elementer i brugergrænsefladen, som gør en produktdetaljeside til det den bør være - konverterende.
Den gode produktside - Del 4: UI-elementer

Virksomheden

PicoPublish
Stagehøjvej 27E
8600 Silkeborg
+45 70 27 05 04
info@picopublish.com
CVR: 31086876
  • Cookies
  • Persondatapolitik

SKI certificeret leverandør

SKI info

PIM

  • Hvad er PIM
  • Systemer
  • Integrationer
  • Optimering af dataprocesser
  • Hvad koster pim

Websites & ecommerce

  • Web og ecommerce
  • Websites
  • Ecommerce
  • Digitalt Design

Bæredygtighedsrapportering

  • Bæredygtighedsrapportering
  • ESG - et nyt paraplybegreb for bæredygtighedsdata
  • Hvad er DPP (Digitalt Produktpas)?
  • Hvad er CSRD?
  • Hvad er ESRS?
  • Hvad er EPR?

Nyhedsbrev

Følg os her

Gazelle
  • 2015
  • 2016
  • 2017
  • 2018
  • 2019
  • 2024
Copyright © 2021 PicoPublish