Design av produktsidor: 12 detaljer som ökar försäljningen
Vi går igenom 12 designdetaljer i galleri, pris, lager, leverans och recensioner som ökar andelen som lägger produkten i varukorgen, med mobilen i första hand.
Aurora YazılımRedaktionen
6 min läsning
En bra produktsidesdesign visar allt kunden behöver för att bestämma sig redan på första skärmen och med en blick: ett galleri som går att zooma, tydligt pris och delbetalning, lagerstatus, en tydlig knapp för att lägga i varukorgen och beräknad leverans. Längre ner stöder en detaljerad beskrivning, recensioner och liknande produkter beslutet. Sidan ska öppnas snabbt på mobilen.
Varför är produktsidan så viktig?
I en webbshop är det på produktsidan köpbeslutet fattas. Startsidan och kategorisidorna leder kunden till produkten, medan produktsidan svarar på frågan “ska jag köpa den här?”. En liten oklarhet på sidan räcker för att kunden ska stänga fliken och gå till en konkurrent.
Produktsidans framgång följs med ett enda mått: andelen som lägger i varukorgen. Hur stor del av besökarna som lägger produkten i varukorgen visar om designen gör sitt jobb. De 12 detaljerna nedan är de mest grundläggande områdena som påverkar den andelen.
Innan vi går in på detaljerna en påminnelse om en princip: produktsidan är ingen mall utan en sida som byggs efter din produkts struktur. Om kläder, livsmedel och elektronik presenteras i samma upplägg hamnar det viktigaste för var och en i bakgrunden.
Bild- och informationsytan
De fyra första detaljerna gäller ytan där kunden lär känna produkten. Den ytan ska ligga högst upp på sidan, i området som syns utan att scrolla.
1. Produktgalleri med zoom
Produktgalleriet motsvarar ögonblicket i butiken då man tänker “låt mig ta i den”. Använd foton från olika vinklar som går att zooma och helst en kort video. På mobilen ska galleriet gå att svepa med fingret och miniatyrerna ha en storlek som passar för tryck. För detaljerna kring fotograferingen kan du läsa vårt inlägg produktfoto för e-handel.
2. Tydlig produkttitel
Titeln ska innehålla varumärke, produkttyp och särskiljande egenskap. En titel som “Märke Modell X Termos i rostfritt stål 500 ml” i stället för “Modell X” berättar för både kunden och sökmotorn vad produkten är.
3. Viktiga egenskaper
En kort sammanfattning på tre till fem punkter direkt under titeln ger den viktigaste informationen till den kund som inte läser den långa beskrivningen. Varje punkt bör beskriva både en egenskap och nyttan den ger.
4. Synligt val av variant
Färg- och storleksalternativ ska inte döljas i en rullgardinslista utan visas som knappar eller färgrutor. Att bild, pris och lagerstatus ändras direkt efter vald variant förhindrar att kunden lägger fel produkt i varukorgen. Länken till storlekstabellen ska ligga bredvid valytan.
Köpytan
De följande fyra detaljerna utgör ytan där kunden bestämmer sig och agerar. Den ytan ska ha en enkel och ostörd layout.
5. Pris, rabatt och delbetalning
Priset ska vara en av de mest läsbara uppgifterna på sidan. Finns en rabatt visas det gamla priset överstruket och det nya tydligt. Delbetalningsalternativen kan visas under priset i en kort sammanfattning, och den detaljerade delbetalningstabellen i en yta som öppnas med ett klick.
6. Lagerstatus
Uppgifter som “I lager”, “Sista 3 produkterna” eller “Förbeställning” hjälper kunden att bestämma sig. Informationen måste dock bygga på verkligt lager; falska nedräknare som skapar konstgjord brådska skadar förtroendet. För en slutsåld produkt lockar alternativet “meddela mig när den finns i lager” tillbaka kunden i stället för att förlora hen.
7. Tydlig knapp för att lägga i varukorgen
Knappen för att lägga i varukorgen är sidans mest framträdande element: kontrasterande färg, tillräcklig storlek och en tydlig etikett. Att knappen ligger fast längst ner på skärmen när man scrollar på mobilen gör att kunden inte behöver leta efter den i beslutsögonblicket.
8. Leverans- och fraktinformation
Vid sidan av priset vill kunden veta när produkten kommer och om frakten kostar något. Beräknad avsändningstid och gräns för fri frakt ska stå mycket nära knappen. Att kunden först ser den informationen i betalsteget är en av de vanligaste orsakerna till övergivna varukorgar.
Förtroende- och fortsättningsytan
De fyra sista detaljerna är ytorna som övertygar den tveksamma kunden och håller shoppingen igång. Dessa sektioner ligger oftast under köpytan.
9. Detaljerad beskrivning
Den långa beskrivningen, tekniska uppgifter samt användnings- och skötselråd kan ordnas i flikar eller fällbara avsnitt. Hur texten ska skrivas har vi gått igenom med 10 regler i vår guide skriva produktbeskrivning.
10. Kundrecensioner
Recensioner med foton och betygsfördelning hör till de starkaste övertygelseverktygen eftersom de visar produktens verkliga användning. Etiketten “Verifierad köpare” och vänliga svar på negativa recensioner ökar förtroendet. Att ta bort recensioner eller bara visa de positiva tappar däremot förtroende på sikt.
11. Retur och säker betalning
En kort sammanfattning av returvillkoren och de betalningsmetoder som accepteras kan ligga nära köpytan som ett litet informationsband. För kunder som handlar för första gången är den informationen avgörande.
12. Liknande och kompletterande produkter
Liknande produkter längst ner på sidan håller kvar kunden som inte riktigt hittat det hen söker. Kompletterande produkter och produktset ökar varukorgens värde. Det är viktigt att ytan verkligen är relevant för produkten; slumpmässiga produkter distraherar.
Tänk mobilen först
Största delen av e-handelstrafiken kommer från mobila enheter. Därför bör produktsidan först designas för telefonskärmen och sedan utökas för dator. På mobilen ska pris, val av variant och knappen för varukorgen synas utan scrollning, och tryckytorna ska vara stora nog att trycka på med fingret.
Snabbhet är en oskiljaktig del av mobilupplevelsen. I Googles Core Web Vitals räknas 2,5 sekunder för LCP, 200 millisekunder för INP och 0,1 för CLS som goda gränsvärden. Att komprimera stora produktbilder, undvika att galleriet hoppar när sidan öppnas och ta bort onödiga skript förbättrar de värdena direkt. Här kommer arbetet med mobilanpassad design och hastighet och prestanda in.
Mät och förbättra designen
En bra produktsida blir inte klar på en gång; den mognar med data. Att regelbundet följa förhållandet mellan antal produktvisningar, tillägg i varukorgen och köp visar i vilket steg problemet finns.
Värmekartor och verktyg för sessionsinspelning låter dig se var användarna klickar på sidan och var de fastnar. Innan du gör en ändring på hela webbplatsen bör du testa den på några produkter och jämföra resultaten, så undviker du beslut som bygger på gissningar.
- Om andelen som lägger i varukorgen är låg: se över galleri, pris och variantyta.
- Om många lägger i varukorgen men få köper: titta på fraktavgiften och betalsteget.
- Om avhoppen är höga: kontrollera sidhastigheten och informationen på första skärmen.
- Om det är stor skillnad mellan mobil och dator: testa mobillayouten separat.
Produktsidan hos Aurora
I Aurora Smart E-Ticaret används inga färdiga teman; varje butiks design, produktsidorna inkluderade, tas fram unikt för ditt företag och produkternas struktur med vår tjänst konceptdesign. Användarresan och gränssnittets upplägg planeras enligt principerna för UI/UX-design.
På produktsidan ingår som standard galleri med zoom och video, val av variant, liknande produkter, produktset, snabbvisning och recensioner med foton och etiketten “Verifierad köpare”. Uppladdade bilder omvandlas automatiskt till ett format som öppnas snabbt. För själva bilderna kan du också använda vår tjänst produktfotografering.
Hur du vinner tillbaka kunder som tappats efter produktsidan har vi samlat i övergivna varukorgar.
Vanliga frågor
01Är det nödvändigt med video på produktsidan?
Det är inte obligatoriskt, men för produkter där användning, struktur eller rörelse är viktig visar den det som fotot inte kan förklara. Välj korta videor som går att förstå även utan ljud och som öppnas snabbt. Videon bör laddas först när användaren spelar upp den, så att den inte sänker sidhastigheten.
02Är en lång eller kort produktsida bättre?
Det är inte längden som är viktig utan ordningen på informationen. Det som behövs för beslutet ska finnas på första skärmen, och detaljerna presenteras längre ner i ordnade avsnitt. För dyra och tekniska produkter ger längre sidor oftast bättre resultat.
03Ökar försäljningen om man visar lagersaldot?
Äkta information om lågt lager kan få kunden att bestämma sig. Men att ständigt visa “sista produkten” på varje produkt eller använda falska nedräknare skadar förtroendet. Visa informationen bara när den är sann.
Produktsidan är din webbshops säljdisk; varje detalj, från galleriet till leveransinformationen, ska göra kundens beslut enklare eller snabbare. För en snabb och mobilfokuserad sida som byggs efter dina produkter kan du titta på vår tjänst konceptdesign, och för hela butiken på våra e-handelslösningar.
