Hvordan vise fram produkter på best mulig måte på nett?
Bloggpost

Hvordan vise fram produkter på best mulig måte på nett?

8. mars 2016

Paginering, vis mer eller uendelig scroll? Her kommer svaret på hvordan du bør vise produktene i nettbutikken din.

De siste årene har vi i Creuna jobbet mye med e-handel. Alt fra byggevare hos Maxbo, reiser hos Hurtigruten og klær for Varner. Når man jobber med e-handel er det ekstremt viktig å være klar over de små tingene som gir kundene en ekstra god brukeropplevelse – og som kan være utslagsgivende for om man gjennomfører kjøpet eller ikke.

Danskene i Baymard Institute gjør jevnlig tester og studier på brukeroppførsel og e-handel. Deres artikler er blitt et viktig verktøy for oss til å bli enda bedre, lage mer brukervennlige løsninger, og få bredere innsikt i hvordan folk oppfører seg på nett.

1.mars publiserte Christian Holst fra Baymard Institute en veldig interessant artikkel i Smashing Magazine om hvordan man på best mulig måte kan vise frem produktene sine på nett. Et smalt tema, sier du? Nei, vi synes ikke det – det er brød og smør for hvordan nettbutikker skal gjøre salg.

Som et supplement til det min kollega Karin har sagt om nettbutikkene kundene elsker, ønsker jeg her å belyse noen spennende funn som har blitt gjort om friksjonsfrie handleopplevelser.

Slik nettbutikkene viser frem produktene sine i dag, er det stort sett tre ulike løsninger i bruk; uendelig scrolling, paginering og «vis mer»-knappen. Nå skal vi se på forholdet mellom disse, og fordelene og ulempene ved de tre variantene.

Paginering

Paginering er fortsatt den mest populære måten å laste nye produkter på i en produktoversikt, i stor grad fordi det er en innebygget løsning i de fleste e-handelsplattformene som finnes. Denne metoden fungerer slik at man deler opp produktlisten i flere sider med et begrenset antall produkter på hver, og så har man en knapp for hver enkelt side, en knapp for å gå tilbake, og en knapp for å gå fremover. Tipper du har sett den før!

Her er hovedfunnene (fordelene og ulempene med de tre teknikkene) fra brukerundersøkelsene Baymard gjorde blant brukere:

  • Mange kjenner til pagineringskonseptet
  • Man bruker lang tid på å se på det første utvalget
  • Mange opplever paginering som tregt, og forbinder det med gammeldagse nettsteder
  • Svært få benytter seg av pagineringen til å navigere
  • Pagineringen er som regel utformet på en lite mobilvennlig måte, med små trykkflater. Her er det viktig å tenke mobile first og responsiv design.

Skjermbilde fra Vitus apotek

Vitus apotek bruker paginering for å dele opp produktlistene sine

Skjermbilde fra Vitus apotek på mobil

Ofte er paginering en mindre god løsning på mobil pga. små trykkflater, men i Vitus Apoteks responsive nettbutikk er det løst på en god måte

«Vis mer»-knapp

  • Kunden bruker lang tid på å se på det første utvalget
  • Enkel utforming gir liten grad av kognitiv belastning
  • Produkter legges til den første samlingen, derfor endres ikke utvalget helt når man trykker på ”Vis mer”
  • Kunden ser på færre produkter enn ved uendelig scroll, men ofte flere enn ved paginering
  • Det er ofte et stort UX-problem at man ikke har tilrettelagt for navigering frem og tilbake mellom listesider og produktsider – det er viktig at man benytter seg av teknikker (HTML5 sitt History API gjør susen her), som gjør at man kommer tilbake til det stedet man var i listen når man beveger seg fra produktsiden tilbake til listen

Skjermbilde fra Zalando

Zalando har en tydelig ”Vis mer”-knapp som gir deg flere produkter dersom du ønsker det

Uendelig scroll/Lazy load

  • Dersom det er implementert på en god måte, kan det gi en veldig friksjonsfri brukeropplevelse
  • Store fordeler når det gjelder ytelse fordi man laster produkter gradvis
  • Viser bredden i produktsammensetningen på en god måte – man ser flere produkter enn ved de to andre teknikkene
  • Produkter legges til den første samlingen, istedenfor å endre utvalget helt
  • Tilgangen til nettstedets bunntekst forsvinner ofte
  • Brukerne skanner mer, og har mindre fokus på hvert produkt
  • Egner seg ikke til bruk i søk, fordi relevansen av treffene gjerne vil være mindre og mindre, jo lenger ned man kommer.

Skjermbilde fra Komplett

Komplett.no bruker en svært rask, uendelig scroll. Her får man servert produkter helt til det er tomt

Så hva er best?

Forskningen til Baymard viser at det er «vis mer»-knappen i kombinasjon med en «lazy-load»-teknikk som gir det klart beste resultatet, og som fører til en mer sømløs brukeropplevelse.

Når det er sagt, må vi ta høyde for hvilken kontekst og type produkter det er snakk om. For noen nettbutikker kan det være viktig å vise bredden først, mens i andre nettbutikker er det viktigere å fokuserer på få produkter, med større detaljnivå.

Dette bør du gjøre

«Vis mer»-knappen løser de problemene som paginering gir, i tillegg til at den tilrettelegger for en mer fokusert skanning av produktene.

  • Bruk en kombinasjon av «last mer»-knappen med «lazy loading» på kategorinivå
  • Bruk «last mer»-knappen på søkeresultater på grunn av relevans
  • Bruk «last mer»-knappen på mobile flater på grunn av trykkflater

Og aller viktigst:

  • Pass på at produktoversikten har innhold som gir brukerne den informasjonen de trenger til enhver tid
  • Observer brukerne dine for å lære mer om hvordan de opplever produktoversikten din (fortsettelse følger rundt dette temaet i et blogginnlegg som er under produksjon)

Ønsker du å lese mer?