5 Eksempler på utmerket produktsidedesign og hva du kan lære av dem

Introduksjon

Når du besøker et netthandelsnettsted, må opplevelsen for kundene være grei fra første stund: iøynefallende, enkel og rett på sak. Utformingen av produktsidene er et av de viktigste aspektene ved den generelle brukeropplevelsen, fordi det er disse sidene som til syvende og sist konverterer nettlesere til kunder. Derfor bør utvalgte produkter, bilder av høy kvalitet og detaljert informasjon være hovedfokus når du designer en produktside for nettbutikken din.

De fleste kunder går gjennom en produktside før de fullfører et kjøp, så hvis du er i ferd med å opprette et nytt nettsted eller optimalisere ytelsen til netthandelsnettstedet ditt, må du huske at god design starter med å forstå brukerens behov og tilpasse seg deretter.

La oss utforske hvordan du designer en utmerket produktside, noen eksempler på beste praksis for design av produktsider, og hva som er de viktigste funksjonene som gjør en produktside verdifull og attraktiv.

Hvordan utforme en produktside

Selv om designprosessen kan variere fra designer til designer, er det visse ting som alle bør huske på når de lærer å designe produktsider.

1. Bruk bilder av høy kvalitet

Handleopplevelsen på nettet er helt og holdent visuell, og produktbilder er avgjørende for enhver produktside. Siden kundene ikke kan ta på og prøve produktene slik de kan i en fysisk butikk, vil bilder hjelpe dem med å bestemme seg for om de vil kjøpe noe eller ikke.

Sørg for at du bruker optimaliserte bilder og holder dem oppdatert når du oppretter nettstedet ditt. Bilder som er optimalisert, bør være av riktig filtype, størrelse og komprimert for å gi raskere innlastingstid. Bildene dine bør også være i fokus, ha en enkel bakgrunn og gi flere vinkler slik at brukerne kan se hva de får.

2. Lag en overbevisende oppfordring til handling

Aktivt språk motiverer kundene til å handle for å kjøpe eller lære mer om et produkt. Når du oppretter og formaterer oppfordringsknappene dine (eller CTA-knappene), bør du holde dem korte, konsise og skape nysgjerrighet; med andre ord bør en effektiv CTA-knapp utløse et klikk.

3. Skriv informative produktbeskrivelser

Vi har sagt at bilder er avgjørende for en god produktside, men det er også gode produkttekster.

Produktbeskrivelser gir kundene detaljert informasjon om hvert produkt. Ja, de bør komme raskt til poenget, men de må også inneholde detaljer som materialer, farger og toppattributter.

Produktbildene og beskrivelsene dine bør fungere sammen for å overtale noen til å kjøpe det du selger.

4. Vis transparente priser

Kjøpsbeslutningen vil ikke bare komme ned til et femstjerners produkt, klar og overbevisende tekst og flotte bilder; prisen er også en avgjørende faktor. Du bør **alltid vise tydelige priser **med stor skriftstørrelse, og unngå tvetydige rabatter og liten skrift.

5. Inkluder sosiale bevis

Vi påvirkes av sosial atferd, så når vi ser folk stå i kø for å få bord på en restaurant eller et familiemedlem anbefaler et produkt, påvirkes vår kjøpsbeslutning ofte av hva andre gjør eller sier om det. Netthandel er ikke noe unntak.

Faktisk sier 97 % av kundene at nettanmeldelser påvirker kjøpsbeslutningen deres, noe som gjør det enkelt å inkludere sosiale bevis for å påvirke produktsidens konverteringer i positiv retning.

6. Vær konsekvent

I tillegg til å ha et sterkt design, bør nettstedet ditt og hver produktside være konsistente og inneholde ensartede, godt integrerte farger og bilder som passer sammen.

Sørg for merkevarekonsistens ved hjelp av en fargepalett, spesifikke skrifttyper og en harmonisk tone i det skriftlige innholdet. For visuell konsistens kan du bruke grafiske maler for nettstedet ditt; dette vil hjelpe deg med å skape et unikt, sammenhengende utseende på tvers av ulike produktsider og landingssider.

(Bildekilde: Envato Elements)

5 vakre eksempler på produktdesign og hvorfor de fungerer

Så nå som vi har gått gjennom det grunnleggende for å lage en produktside for e-handel, la oss undersøke eksempler fra merkevarer som får det riktig når det gjelder webdesign av produktsider.

1. Eple

(Bildekilde: Apple / iPad)

Hvorfor virker det?

På denne siden har Apples designteam skapt en virkningsfull kundeopplevelse uten distraksjoner, med fokus på produktet og dets unike funksjoner. Teksten er kort og inspirerende, og når brukerne fortsetter å bla, fortsetter oppdagelsen med korte beskrivelser og produktbilder som skiller seg ut på den hvite bakgrunnen.

Hva kan du lære?

Når det gjelder bilder, tekst og alle andre designelementer på produktsidene dine, er mindre mer.

Apple gjør en upåklagelig jobb når de bygger en produktside. Hvert bilde, hvite mellomrom, ord og detalj er valgt nøye, slik at det generelle utseendet forblir rent, konsistent og fremhever produktet.

Minimalistisk design som dette gir ikke rom for distraksjon, så når du bygger siden din, bør du velge et enkelt oppsett.

2. Krønikebøker

(Bildekilde: Chronicle Books)

Hvorfor virker det?

Selv om dette nettstedet bruker lyse farger på tvers av kategorier, er personalisering hovedfokuset på produktsidene. Chronicle Books gjør det enkelt å identifisere kategorier fra toppmenyen og å vise relatert og relevant innhold deretter.

(Bildekilde: Chronicle Books)

Å foreslå relaterte bøker som brukerne kan legge til i handlekurven uten å forlate siden de for øyeblikket surfer på, er en effektiv måte å holde dem interessert i et allerede kuratert utvalg av produkter.

Hva kan du lære?

En personlig kundeopplevelse er nøkkelen på produktsider hvis du vil sikre at brukeren finner det de leter etter - og forhåpentligvis mer enn det for å øke størrelsen på handlekurven. Tenk på produktene dine og hvordan du kan relatere andre produkter som ikke nødvendigvis passer inn i samme kategori, men som kanskje samsvarer med kundens bredere interesser.

3. Farfetch: Alt om detaljene

Hvorfor virker det?

For mote-nettbutikken Farfetch ligger alt i detaljene på en god produktside. Kundene kan få tydelig informasjon om produktpleie, størrelse, pris, leveringstider og designeren, alt på ett sted. Det er til og med mulig å legge varen til en ønskeliste hvis de ikke er klare til å kjøpe akkurat nå.

Hva kan du lære?

Spør kundene dine hva slags informasjon de leter etter når de surfer på dine - og konkurrentenes - produktsider. Du bør skreddersy informasjonen du viser på produktsidene dine til de typene spørsmål som vil hjelpe kundene med å ta en kjøpsbeslutning.

(Bildekilde: Farfetch)

4. Zara: Gjør det oppslukende

(Bildekilde: Zara)

Hvorfor virker det?

På Zaras nettsted starter ikke opplevelsen med selve produktsiden. Fra hjemmesiden føles det som om brukeren befinner seg på en motevisning med modeller som går på catwalken i den nyeste Zara-kolleksjonen. Under videoen er det en uendelig rulle som lar brukeren se på vakkert kuraterte redaksjonelle bilder i stedet for å søke etter produkter gjennom en katalog.

Zara tilbyr et stort antall produkter, og lagerbeholdningen oppdateres kontinuerlig, men det er få produktkategorier. Denne forenklingen av katalogen gjør det enklere å bla gjennom og lar brukerne begrense søket ved hjelp av opptil ti filtre.

(Bildekilde: Zara / Woman / Party)

Hva kan du lære?

Oppslukende produktsider som disse krever innsats å lage fordi bildene er tatt i en redaksjonell stil i stedet for på et vanlig bakteppe. Du må også vurdere hvordan produktfotograferingen passer inn i den bredere opplevelsen på og utenfor nettstedet, enten det er en video på hjemmesiden eller bilder som deles via Instagram. Hvis denne tilnærmingen utføres effektivt, kan den ikke bare bidra til å selge produkter, men også til å bygge merkevaren og kundeforbindelsen.

5. Glossier: Hero Your Products

(Bildekilde: Glossier)

(Bildekilde: Glossier)

Hvorfor virker det?

For skjønnhetsmerket Glossier er produktene helten på nettstedet - som selvfølgelig inkluderer produktsidene. Alt som ligger rundt produktbildene, enten det er den kortfattede teksten, brukeranmeldelser, fargepalettvelgeren eller "topprangerte" tagger, er utformet for å informere brukeren om verdien av selve produktet. Bildegallerier bidrar til å vise frem ulike varianter av produktet, noe som gjør det enkelt å bestemme seg for hva man skal velge. Dette er avgjørende for produkter som sminke der kunden ikke har mulighet til å prøve det først.

Hva kan du lære?

Hvis produktet ditt er stjernen, ikke nøl med å sette det i sentrum. Designere blir noen ganger distrahert av layout, merkevarebygging og tilleggsgrafikk og glemmer at produktet er salgsargumentet. Vurderinger kan også gjøre underverker når du trenger å gi produktet ditt liv og demonstrere sosialt bevis på dets verdi fra virkelige brukere.

Hva kjennetegner en god produktside?

Som vi har sett ved å se på fem beste praksis-design for produktsider, er det mye som inngår i en god produktside, men det er noen viktige ingredienser som hver produktside trenger.

Forskning fra Baymard Institute foreslår 95 retningslinjer som bør følges ved utforming av en produktside, inkludert layout, produktbilder, bildegalleri, "kjøp"-delen, frakt, retur, gavepolitikk, produktvarianter, beskrivelser, spesifikasjoner, brukeranmeldelser og kryssalg og kryssnavigasjon.

Studien viste at bare 18 % av de 185 mest innbringende netthandelsnettstedene i USA og Europa har en "god" eller "akseptabel" produktside. Spesifikasjoner er et av de vanligste problemene blant dem.

(Bildekilde: Baymard Institute)

Hva er god design?

Til tross for mange måter å oppnå god design på og definere den, kan noen prinsipper fra den tyske industridesigneren Dieter Rams veilede deg gjennom designprosessen.

1. God design er nyskapende.
2. Det gjør et produkt nyttig og forståelig.
3. Er estetisk.
4. Er lite påtrengende.
5. Er ærlig.
6. Det er langvarig - selv om det i denne digitale verden kanskje ikke er tilfelle i like stor grad.
7. Det viser oppmerksomhet på detaljer.
8. Det er miljøvennlig.
9. Det krever så lite design som mulig.

Oppsummert betyr dette å holde det enkelt, fokusere på det viktigste og unngå å legge til funksjoner som ikke bidrar til brukervennlighet.

Beste praksis for utforming av produktsider

Selvfølgelig er god design viktig, men ingen virksomhet kan overleve uten fortjeneste. Så i tillegg til å lære om grafikk og formater, må du lære å designe produktsider som øker salget på nettet.

Ifølge Shopify, og forskning fra Nielsen Norman Group, er dette de beste fremgangsmåtene å følge som vil hjelpe kundene med å bestemme seg for hva de vil kjøpe.

1. Et beskrivende produktnavn
2. Nøyaktige produktbilder
3. Detaljert, innzoomet visning av hvert produkt
4. Pris, og om det er tilleggskostnader
5. Tydelige produktalternativer å velge mellom
6. Tilgjengelighet
7. Tydelighet når du legger varer i handlekurven, tilbakemelding når den er lagt til
8. Informativ produktbeskrivelse

Maler for design av produktsider

Hvis design fra bunnen av ikke er din sterke side, eller du trenger noen kreative ressurser for å komme i gang, bør du vurdere å bruke en mal for produktsidedesign, nettbaserte designverktøy og nettmaler for å oppnå best mulig resultat. Fordelene med å bruke designmaler for produktsider er blant annet at det forenkler prosessen, sparer tid og sikrer konsistens på tvers av sidene.

Sjekkliste for utforming av produktsider

Nå har vi utforsket beste praksis og generelle veiledninger, men hvis du trenger en sjekkliste å følge neste gang du designer en produktside for netthandel, er her et sammendrag av alt vi har utforsket i denne artikkelen.

• Velg optimaliserte bilder av høy kvalitet
• Inkluder overbevisende CTA-knapper
• Skriv informative produktbeskrivelser
• Vis synlige produktvariasjoner
• Vær transparent med prissettingen
• Demonstrere sosiale bevis og vurderinger
• Inkluder fraktinformasjon
• Vær konsekvent med merkevarebyggingen din

Klar til å designe en produktside som gjør deg stolt

Å designe en ny produktside er et spennende eventyr. Du får produktene til å skinne og skille seg ut fra tusenvis av andre alternativer på nettet - en oppgave som ikke bør tas lett på.

Til syvende og sist må du ikke glemme brukeren som besøker e-handelsnettstedet ditt. Produktet ditt er selvfølgelig stjernen i showet, men det er kunden som tar den endelige avgjørelsen.