Handel
Produktgalleri, lightbox & zoom
Billederne er det første, kunden kigger på — og ofte det, købet afgøres på. Et stærkt produktgalleri giver nok billeder fra flere vinkler, høj opløsning med zoom, mindst ét skala- eller kontekstbillede og en lightbox, der virker med tastatur. Her er evidensen, best practices og de typiske faldgruber.
Definition
Et produktgalleri er den samling af billeder på en produktside, som brugeren kan bladre i, forstørre og zoome i — typisk med thumbnails eller swipe og en lightbox til nærstudie. Mønstret dækker antal billeder, vinkler, skala- og kontekstbilleder, zoom, navigation og tilgængelighed.
Hvorfor det virker
Billederne er kundens indgang til produktsiden. I Baymards testning var det at inspicere billederne den første handling for 56% af testpersonerne, når de landede på en produktside — før de læste teksten. Galleriet bærer altså en stor del af købsbeslutningen.1
Kunder bruger billederne til at vurdere størrelse: 42% forsøger at aflæse produktets skala og størrelse ud fra billederne. Men 28% af sites tilbyder slet ikke et »in scale«-billede — og uden det ender brugere med at fejlvurdere størrelsen, kassere relevante varer eller forlade siden helt.1
Bæreprodukter kræver kontekst. Tøj, accessories (tasker, smykker, ure) og kosmetik skal vises på en model — uden den kontekst må kunden gætte på pasform, længde og fald ud fra mindre nyttige billeder, hvilket giver lavere købstillid. Rene »cut out«-billeder alene er ikke nok til denne varegruppe.2
Auto-roterende karruseller skader mere end de gavner. Nielsen Norman Group finder, at automatisk fremrulning tager kontrollen fra brugeren, reducerer synligheden af det enkelte billede og får folk til at ignorere indholdet, fordi bevægelse læses som reklame. Et galleri skal stå stille og først skifte, når brugeren selv beder om det.3
Et galleri skal kunne betjenes af alle. W3C/WAI slår fast, at al navigation mellem billeder skal kunne udføres med tastatur, at fokus skal håndteres forudsigeligt, og at skift af billede skal formidles til bl.a. skærmlæserbrugere — plus at auto-bevægelse skal kunne sættes på pause.5
Hvornår du bruger det — og hvornår ikke
Hvornår du bruger det
- På produkt- og varesider, hvor købsbeslutningen hviler på, hvordan varen ser ud, passer eller fylder.
- Når produktet har detaljer, materialer eller flere sider/vinkler, som ét billede ikke kan rumme.
- Ved bæreprodukter (tøj, tasker, smykker, kosmetik), hvor kunden skal kunne vurdere pasform og skala.
Hvornår du bør undgå det
- På et rent tekst- eller data-produkt (fx en digital licens eller et abonnement), hvor billeder ikke bærer beslutningen.
- Som auto-roterende hero-karrusel på forsiden — det er et andet, veldokumenteret uheldigt mønster.
Best practices
Giv nok billeder — og flere vinkler
Billederne er det, kunden inspicerer først. Vis produktet fra flere sider og vinkler samt nære detaljer af materiale og finish, så galleriet kan bære beslutningen uden at kunden skal gætte.1
Tilbyd høj opløsning og zoom
Lad kunden forstørre og zoome ind på detaljer i høj opløsning. Nærstudie er en stor del af, hvorfor folk går til billederne først — så billedkvaliteten skal kunne holde til et tæt kig.1
Inkludér mindst ét »in scale«-billede
Vis produktet i skala — i en hånd, i et rum eller ved siden af noget genkendeligt. 42% forsøger at aflæse størrelse fra billederne, og uden et skalabillede fejlvurderer de og kasserer relevante varer.1
Vis bæreprodukter på en model
For tøj, accessories og kosmetik: vis varen på en menneskemodel, ikke kun som fritlagt »cut out«. Det er den eneste måde, kunden kan vurdere pasform, længde og fald — og det løfter købstilliden.2
Lad brugeren styre — ingen auto-rotation
Undgå et galleri, der ruller videre af sig selv. Auto-fremrulning tager kontrollen fra kunden og får billederne overset. Skift kun billede, når brugeren klikker, swiper eller vælger en thumbnail.3
Brug thumbnails frem for prikker
Naviger med tydelige thumbnails, der viser hvert billede — ikke anonyme prikker, som især overses på mobil. Gør kontrollerne store nok at ramme, hold dem synlige (ikke under folden), og markér tydeligt det aktuelle billede.4
Gør lightbox og zoom tastaturvenlig
Lightboxen skal kunne åbnes og betjenes med tastatur: pil-taster mellem billeder, Esc for at lukke, fokus fanget inde i lightboxen mens den er åben, og fokus tilbage til udgangspunktet når den lukkes. Skift af billede skal meldes til skærmlæsere.5
Giv alt-tekst — og udskyd billeder uden for skærmen
Alle produktbilleder skal have meningsfuld alt-tekst. Af hensyn til ydelsen bør billeder uden for skærmen først indlæses, når de skal bruges (se responsive-billeder), så galleriet ikke bremser sidens indlæsning.5
Typiske fejl
Auto-roterende galleri
Et galleri, der skifter billede af sig selv, tager kontrollen fra kunden, sænker synligheden af hvert billede og læses som reklame. Lad kunden bladre selv.
Kun fritlagte billeder — ingen skala eller model
Uden et »in scale«-billede fejlvurderer 42% størrelsen, og bæreprodukter uden model efterlader kunden i tvivl om pasform. Begge dele koster salg.
Prikker som eneste navigation
Anonyme prikker overses — især på mobil — og kontroller gemt under folden bliver ikke brugt. Brug thumbnails og synlige, store kontroller, der viser hvor man er.
Lightbox uden tastatur og fokus-styring
En lightbox, der kun virker med mus, uden Esc, uden fokus-fælde og uden at melde billedskift, lukker tastatur- og skærmlæserbrugere ude.
Eksempler i praksis
IKEA (ofte fremhævet)
IKEA fremhæves ofte for at vise møbler både fritlagt og i indrettede rum-scener, så kunden kan aflæse skala og kontekst — netop de »in scale«- og kontekstbilleder, evidensen efterlyser.
Zalando (ofte fremhævet)
Modebutikker som Zalando fremhæves ofte for at vise tøj på en model fra flere vinkler ud over det fritlagte billede, så pasform og fald bliver til at vurdere — i tråd med anbefalingen om model-kontekst for bæreprodukter.
Ofte stillede spørgsmål
Hvor mange billeder bør en produktside have?
Nok til at kunden ikke skal gætte: flere vinkler, nære detaljer, mindst ét skalabillede og — for bæreprodukter — et modelbillede. Billederne er det, brugerne går til først, så galleriet bærer en stor del af beslutningen.
Hvad er et »in scale«-billede, og hvorfor betyder det noget?
Det viser produktet i forhold til noget genkendeligt (en hånd, et rum), så størrelsen kan aflæses. 42% forsøger at vurdere størrelse fra billederne, og 28% af sites mangler et skalabillede — uden det fejlvurderer kunden og kasserer relevante varer.
Bør produktgalleriet rotere automatisk?
Nej. Auto-rotation tager kontrollen fra kunden, sænker synligheden af hvert billede og får indholdet overset. Lad galleriet stå stille og først skifte, når brugeren selv bladrer.
Thumbnails eller prikker til at navigere?
Thumbnails. Prikker overses ofte, især på mobil. Vis et lille billede for hver visning, gør kontrollerne store og synlige, og markér tydeligt hvilket billede der vises.
Hvordan gør jeg en lightbox tilgængelig?
Sørg for at den kan betjenes med tastatur (pil-taster og Esc), at fokus fanges inde i lightboxen mens den er åben og føres tilbage når den lukkes, at billedskift meldes til skærmlæsere, og at alle billeder har alt-tekst.
Kilder
- Provide at Least One 'In Scale' Image (28% of Sites Get It Wrong)
- Provide Images of Accessory, Apparel, and Cosmetic Products on a Human Model
- Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility
- Carousel Usability: Designing an Effective UI for Websites with Content Overload
- Carousels Tutorial
Relaterede mønstre
Udforsk videre
Responsive og performante billeder
Billeder, der loader hurtigt og ikke rykker layoutet: reservér plads, lazy-load det, der er under skærmkanten, prioritér hero-billedet, og server moderne formater i den rigtige størrelse.
Se mønster →Skeleton-loading
Vis layout-pladsholdere mens indholdet hentes.
Se mønster →Gæste-checkout
Lad folk købe, før de opretter en konto.
Se mønster →