• Design

5 eksempler på fremragende design af produktsider, og hvad du kan lære af dem

  • Alina Midori Hernández
  • 7 min read
5 eksempler på fremragende design af produktsider, og hvad du kan lære af dem

Intro

Når kunderne besøger et e-handelswebsted, skal oplevelsen for dem være ligetil fra starten af: iøjnefaldende, enkel og præcis. Produktsidedesignet er et af de vigtigste aspekter af den samlede brugeroplevelse, fordi det er disse sider, der i sidste ende konverterer browsere til kunder. Derfor bør fremhævede produkter, billeder af høj kvalitet og detaljerede oplysninger være det vigtigste fokus, når du designer en produktside til din onlinebutik.

De fleste kunder gennemgår en produktside, før de gennemfører et køb, så hvis du er i gang med at oprette et nyt websted eller optimere dit e-handelswebsteds ydeevne, skal du huske, at godt design starter med at forstå brugerens behov og tilpasse dig derefter.

Lad os undersøge, hvordan man designer en fremragende produktside, nogle af de bedste eksempler på design af produktsider, og hvilke nøglefunktioner der gør en produktside værdifuld og attraktiv.

Sådan designer du en produktside

Selvom designprocessen kan variere fra designer til designer, er der visse ting, som alle bør huske på, når de lærer at designe produktsider.

1. Brug billeder af høj kvalitet

En online shoppingoplevelse er helt og holdent visuel, og produktfotos er afgørende for enhver produktside. Da kunderne ikke kan røre ved og prøve produkterne, som de kan i en fysisk butik, hjælper billeder dem med at beslutte, om de vil købe noget eller ej.

Sørg for at bruge optimerede billeder og holde dem opdaterede, når du opretter dit websted. Billeder, der er optimeret, skal have den rigtige filtype, størrelse og være komprimeret for at give hurtigere indlæsning af siden. Desuden skal dine billeder være i fokus, have en enkel baggrund og give flere vinkler, så brugerne kan se, hvad de får.

2. Skab en overbevisende opfordring til handling

Aktivt sprog motiverer kunderne til at handle for at købe eller lære mere om et produkt. Når du opretter og formaterer dine call to action-knapper (eller CTA-knapper), skal du sørge for, at de er korte og præcise og skaber nysgerrighed.

3. Skriv informative produktbeskrivelser

Vi har sagt, at billeder er afgørende for en god produktside, men det er også vigtigt med en god produkttekst.

Produktbeskrivelser giver kunderne detaljerede oplysninger om hvert enkelt produkt. Ja, de skal komme hurtigt til sagen, men de skal også indeholde detaljer som materialer, farver og topegenskaber.

Dine produktbilleder og beskrivelser skal arbejde sammen for at overtale nogen til at købe det, du sælger.

4. Vis gennemsigtig prissætning

Købsbeslutningen vil ikke kun være baseret på et produkt med fem stjerner, en klar og overbevisende tekst og gode billeder, men også prisen er en afgørende faktor. Du bør **altid vise en klar pris ** med en stor skriftstørrelse og undgå tvetydige rabatter og småt skrevet tekst.

5. Medtag socialt bevis

Vi påvirkes af social adfærd, så når vi ser folk, der står i kø for at få et bord på en restaurant, eller når et familiemedlem anbefaler et produkt, bliver vores beslutning om at købe ofte påvirket af, hvad andre gør eller siger om det. At handle online er ingen undtagelse.

Mød Ranktracker

Alt-i-en-platformen til effektiv SEO

Bag enhver succesfuld virksomhed ligger en stærk SEO-kampagne. Men med utallige optimeringsværktøjer og -teknikker at vælge imellem kan det være svært at vide, hvor man skal starte. Nå, frygt ikke mere, for jeg har lige det, der kan hjælpe dig. Jeg præsenterer Ranktracker alt-i-en platformen til effektiv SEO

Vi har endelig åbnet for gratis registrering til Ranktracker!

Opret en gratis konto

Eller logge ind med dine legitimationsoplysninger

Faktisk siger 97 % af kunderne, at online anmeldelser påvirker deres købsbeslutning, hvilket gør det helt klart nødvendigt at inkludere sociale beviser for at påvirke konverteringerne på din produktside positivt.

6. Vær konsekvent

Ud over at have et stærkt design skal dit website og hver produktside være konsistent og indeholde ensartede, velintegrerede farver og billeder, der passer sammen.

Sørg for konsistens i brandet ved hjælp af en farvepalet, specifikke skrifttyper og en harmonisk tone i det skriftlige indhold. For at opnå visuel konsistens kan du bruge grafiske skabeloner til dit websted; dette vil hjælpe dig med at skabe et unikt, sammenhængende udseende på tværs af forskellige produktsider og landingssider.

Be consistent (Billedkilde: Envato Elements)

5 smukke eksempler på produktsidedesign og hvorfor de fungerer

Nu hvor vi har gennemgået de grundlæggende principper for at skabe en produktside til e-handel, skal vi se på eksempler fra brands, der gør det rigtigt, når det kommer til webdesign af produktsider.

1. Apple

Apple (Billedkilde: Apple / iPad)

Hvorfor virker det?

På denne side har Apple-designteamet skabt en effektiv kundeoplevelse uden forstyrrelser, hvor der er fokus på produktet og dets unikke funktioner. Teksten er kort og inspirerende, og når brugerne fortsætter med at scrolle, fortsætter opdagelsen med korte beskrivelser og produktbilleder, der skiller sig ud på den hvide baggrund.

Create to hert's content

Mød Ranktracker

Alt-i-en-platformen til effektiv SEO

Bag enhver succesfuld virksomhed ligger en stærk SEO-kampagne. Men med utallige optimeringsværktøjer og -teknikker at vælge imellem kan det være svært at vide, hvor man skal starte. Nå, frygt ikke mere, for jeg har lige det, der kan hjælpe dig. Jeg præsenterer Ranktracker alt-i-en platformen til effektiv SEO

Vi har endelig åbnet for gratis registrering til Ranktracker!

Opret en gratis konto

Eller logge ind med dine legitimationsoplysninger

Hvad kan du lære?

Når det gælder billeder, tekst og alle andre designelementer på din produktside, er mindre mere end mere.

Apple gør et upåklageligt stykke arbejde, når de opbygger en produktside. Hvert billede, hvert hvidt felt, hvert ord og hver detalje er nøje udvalgt, så det overordnede look er rent, ensartet og fremhæver produktet.

Minimalistisk design som dette giver ikke plads til forstyrrelser, så vælg et enkelt layout, når du opbygger din side.

2. Chronicle-bøger

Chronicle Books (Billedkilde: Chronicle Books)

Hvorfor virker det?

Selvom dette websted bruger lyse farver i alle kategorier, er personalisering hovedfokus på produktsiderne. Chronicle Books gør det nemt at identificere kategorier fra topmenuen og vise relateret og relevant indhold i overensstemmelse hermed.

Chronicle Books - product example (Billedkilde: Chronicle Books)

You may also like

At foreslå relaterede bøger, som brugerne kan tilføje til deres indkøbskurv uden at forlade den side, de er ved at gennemse, er en effektiv måde at holde dem interesseret i et allerede udvalgt udvalg af produkter på.

Hvad kan du lære?

En personlig kundeoplevelse er nøglen på produktsiderne, hvis du vil sikre, at brugeren finder det, han/hun leder efter - og forhåbentlig mere end det for at øge størrelsen på hans/hendes indkøbskurv. Tænk over dine produkter, og hvordan du kan relatere andre produkter, der ikke nødvendigvis passer ind i samme kategori, men som måske matcher en kundes bredere interesser.

3. Farfetch: Alt om detaljerne

Farfetch: All About the Details

Hvorfor virker det?

For e-forhandleren Farfetch er en god produktside en detalje, der er afgørende for en god produktside. Kunderne kan få klare oplysninger om produktpleje, størrelser, pris, leveringstider og designeren - alt sammen på ét sted. Der er endda mulighed for at tilføje varen til en ønskeliste, hvis de ikke er klar til at købe lige nu.

Hvad kan du lære?

Spørg dine kunder, hvilke typer oplysninger de leder efter, når de gennemser dine - og konkurrenternes - produktsider. Du bør skræddersy de oplysninger, du viser på dine produktsider, til de typer forespørgsler, der vil hjælpe kunderne til at træffe en købsbeslutning.

Farfetch - product example

Farfetch - details (Billedkilde: Farfetch)

4. Zara: Gør det medrivende

Zara: Make It Immersive (Billedkilde: Zara)

Hvorfor virker det?

På Zara-webstedet starter oplevelsen ikke med selve produktsiden. Allerede på hjemmesiden føler brugeren sig som om, han er inde i et high fashion runway show med modeller, der går på catwalk i den nyeste Zara-kollektion. Under videoen er der en uendelig rulning, som giver brugeren mulighed for at se på smukt kuraterede redaktionelle billeder i stedet for at søge efter produkter i et katalog.

Zara tilbyder et stort antal produkter, og lageret opdateres konstant, men der er kun få produktkategorier. Denne forenkling af kataloget gør det mere overskueligt at bladre og giver brugerne mulighed for at indsnævre deres søgning ved hjælp af op til ti filtre.

Zara - onepager

Zara - filters (Billedkilde: Zara / Woman / Party)

Hvad kan du lære?

Sådanne medrivende produktsider kræver en indsats at skabe, fordi billederne er optaget i en redaktionel stil og ikke på en almindelig baggrund. Du skal også overveje, hvordan produktfotografierne passer ind i den bredere oplevelse på og uden for webstedet, uanset om det er en video på hjemmesiden eller billeder, der deles via Instagram. Hvis denne fremgangsmåde udføres effektivt, kan den ikke kun bidrage til at sælge produkter, men også til at opbygge brand og kundetilknytning.

5. Glossier: Hero dine produkter

Glossier: Hero Your Products (Billedkilde: Glossier)

Glossier - product example

Glossier - reviews (Billedkilde: Glossier)

Hvorfor virker det?

For skønhedsmærket Glossier er produkterne helten på webstedet - hvilket naturligvis også omfatter produktsiderne. Alt, hvad der ligger omkring produktbillederne, hvad enten det er den korte tekst, brugeranmeldelser, farvepaletvælgeren eller "top rated"-tags, er designet til at informere brugeren om værdien af selve produktet. Billedgallerier er med til at vise forskellige variationer af produktet, så det er nemt at beslutte, hvad man skal vælge. Dette er afgørende for produkter som f.eks. make up, hvor køberen ikke har mulighed for at prøve det først.

Hvad kan du lære?

Hvis dit produkt er stjernen, skal du ikke tøve med at sætte det i centrum. Designere bliver nogle gange distraheret af layouts, branding-elementer og yderligere grafik og glemmer, at produktet er salgsargumentet. Anmeldelser kan også gøre underværker, når du har brug for at give dit produkt liv og vise sociale beviser for dets værdi fra rigtige brugere.

Hvad gør et godt produktsidedesign til en god produktside?

Som vi har set ved at kigge på fem bedste praksis-designs for produktsider, er der meget, der indgår i en god produktside, men der er nogle vigtige ingredienser, som enhver produktside har brug for.

Forskning fra Baymard Institute foreslår 95 retningslinjer, der skal følges ved udformningen af en produktside, herunder layout, produktbilleder, billedgalleri, køb-sektionen, forsendelse, returnering, gavepolitik, produktvarianter, beskrivelser, specifikationer, brugeranmeldelser samt krydssalg og krydsnavigation.

Mød Ranktracker

Alt-i-en-platformen til effektiv SEO

Bag enhver succesfuld virksomhed ligger en stærk SEO-kampagne. Men med utallige optimeringsværktøjer og -teknikker at vælge imellem kan det være svært at vide, hvor man skal starte. Nå, frygt ikke mere, for jeg har lige det, der kan hjælpe dig. Jeg præsenterer Ranktracker alt-i-en platformen til effektiv SEO

Vi har endelig åbnet for gratis registrering til Ranktracker!

Opret en gratis konto

Eller logge ind med dine legitimationsoplysninger

Undersøgelsen viste, at kun 18 % af de 185 amerikanske og europæiske e-handelswebsteder med de største indtægter har en "god" eller "acceptabel" produktsideydelse. Specifikationer er et af de mest almindelige problemer blandt dem.

UX benchmarks (Billedkilde: Baymard Institute)

Hvad er godt design?

På trods af de mange måder at opnå og definere godt design på, kan nogle principper fra den tyske industrielle designer Dieter Rams guide dig gennem designprocessen.

  1. Godt design er innovativt.
  2. Det gør et produkt nyttigt og forståeligt.
  3. Er æstetisk.
  4. Er diskret.
  5. Er ærlig.
  6. Den er langtidsholdbar - selv om det i den digitale verden måske ikke er så meget tilfældet i dag.
  7. Det viser, at man er opmærksom på detaljerne.
  8. Det er miljøvenligt.
  9. Det kræver så lidt design som muligt.

Kort sagt betyder det, at du skal holde det enkelt, fokusere på det væsentlige og undgå at tilføje funktioner, der ikke er nyttige.

Bedste praksis for design af produktsider

Selvfølgelig er godt design vigtigt, men ingen virksomhed kan overleve uden profit. Så ud over at lære om visuelle elementer og formater skal du lære at designe produktsider, der øger salget online.

Ifølge Shopify og undersøgelser fra Nielsen Norman Group er dette de bedste metoder til at følge, der kan hjælpe kunderne med at beslutte, hvad de vil købe.

  1. Et beskrivende produktnavn
  2. Præcise produktbilleder
  3. Detaljeret, indzoomet visning af hvert produkt
  4. Pris, og om der er yderligere gebyrer
  5. Overskuelige produktmuligheder at vælge imellem
  6. Tilgængelighed
  7. Klarhed ved tilføjelse af varer til indkøbskurven, feedback, når varen er blevet tilføjet
  8. Informativ produktbeskrivelse

Designskabeloner til produktsider

Hvis det ikke er din stærke side at designe fra bunden, eller hvis du har brug for nogle kreative aktiver til at komme i gang, bør du overveje at bruge en designskabelon til produktsider, online designværktøjer og webskabeloner for at opnå det bedst mulige resultat. Fordelene ved at bruge designskabeloner til produktsider er bl.a. at forenkle processen, spare tid og skabe konsistens på tværs af siderne.

Tjekliste for design af produktside

Nu har vi udforsket bedste praksis og generelle fremgangsmåder, men hvis du har brug for en tjekliste, som du kan følge, når du næste gang designer en produktside til e-handel, kan du her se en oversigt over alt det, vi har udforsket i denne artikel.

  • Vælg optimerede billeder af høj kvalitet
  • Medtag overbevisende CTA-knapper
  • Skriv informative produktbeskrivelser
  • Vis synlige produktvariationer
  • Vær gennemsigtig med prisfastsættelsen
  • Demonstrer sociale beviser og anmeldelser
  • Medtag forsendelsesoplysninger
  • Vær konsekvent med din branding

Klar til at designe en produktside, der gør dig stolt

Det er et spændende eventyr at designe en ny produktside. Du får mulighed for at få produkterne til at skinne og skille sig ud fra tusindvis af andre online muligheder - en opgave, der ikke bør tages let på.

I sidste ende må du ikke glemme brugeren, der besøger dit e-handelswebsted. Dit produkt er naturligvis stjernen i showet, men det er kunden, der træffer den endelige beslutning.

Alina Midori Hernández

Alina Midori Hernández

Content Marketing Wwriter, Envato

Journalist-turned-content marketing writer at Envato. Alina is passionate about design and the creative industry. She’s a metalhead, jazz enthusiast, and hardcore Tori Amos fan.

Begynd at bruge Ranktracker... Gratis!

Find ud af, hvad der forhindrer dit websted i at blive placeret på ranglisten.

Opret en gratis konto

Eller logge ind med dine legitimationsoplysninger

Different views of Ranktracker app