• UI & UX

Strategier för utformning av produktsidor som ökar konverteringen

  • Felix Rose-Collins
  • 10 min read
Strategier för utformning av produktsidor som ökar konverteringen

Intro

Vilken är den viktigaste sidan på din webbplats?

Nej, det är inte hemsidan, även om den spelar en viktig roll för att ge ett minnesvärt första intryck. Vinnaren är i det här fallet en underdog - din produktsida eller dina produktsidor.

Det är helt logiskt om man tänker efter. En stor del av dina e-postmeddelanden, SEO, sociala medier och betalda annonser syftar till att skicka trafik inte till din hemsida utan till specifika produktsidor. Det är där det faktiska beslutsfattandet och köpet sker.

I genomsnitt är det dock bara 2,5 %-3 % av besöken på e-handelswebbplatser som leder till framgångsrika konverteringar. Orsaken till en sådan undermålig konverteringsfrekvens är vanligtvis dålig utformning och optimering av produktsidorna.

I det här inlägget diskuterar vi vad som kännetecknar en väl utformad produktsida och varför varje strategi fungerar. Vi kommer också att förklara hur du implementerar varje strategi, så läs vidare för att lära dig mer och ta din produktsidedesign till nästa nivå.

Gör anpassningsprocessen enkel och intuitiv

Varumärken som utmärker sig på personalisering genererar 40 % mer intäkter än de som ligger efter. Samma undersökning visar att 71 % av kunderna förväntar sig att företagen ska erbjuda personliga interaktioner.

Baserat på denna statistik kan man dra slutsatsen att det inte är frivilligt att leverera skräddarsydda upplevelser och tillgodose kundernas behov. Anpassning har blivit en oumbärlig del av varje framgångsrik produktsida.

Möt Ranktracker

Allt-i-ett-plattformen för effektiv SEO

Bakom varje framgångsrikt företag finns en stark SEO-kampanj. Men med otaliga optimeringsverktyg och tekniker att välja mellan kan det vara svårt att veta var man ska börja. Nåväl, frukta inte längre, för jag har precis det som kan hjälpa dig. Jag presenterar Ranktracker, en allt-i-ett-plattform för effektiv SEO.

Vi har äntligen öppnat registreringen av Ranktracker helt gratis!

Skapa ett kostnadsfritt konto

Eller logga in med dina autentiseringsuppgifter

Även om det är lättare att anpassa produkter på nätet måste du vara försiktig så att du inte överväldigar dina potentiella kunder. Valförlamning är en verklig sak, och det händer när människor presenteras för ett antal olika alternativ.

Enligt Hick's Law tar det längre tid för en person att fatta ett beslut ju fler valmöjligheter han eller hon har. Denna fördröjning kan leda till att dina potentiella kunder avstår från att köpa, vilket i sin tur kan skada din försäljning.

Hur kan du minska denna valförlamning?

Här är några tips:

  • Begränsa antalet valmöjligheter eller åtminstone lyfta fram ett par av de mest distinkta. Du kan alltid lägga till en "Mer"-knapp som visar andra, mindre populära alternativ.
  • Förenkla personaliseringsprocessen och gör det lättare för dina kunder att anpassa den produkt de vill ha.
  • Erbjuda standardiserade, fördefinierade alternativ baserade på de mest populära valen och bästsäljarna. Detta minskar tröttheten i beslutsfattandet hos vissa kunder.

Det handlar om att göra hela processen så användarvänlig som möjligt och låta kunderna få vara med och bestämma hur slutprodukten ska se ut.

Nike är duktiga på att ge kunderna kreativ kontroll över vilken modell de vill köpa. Varumärkets verktyg för produktanpassning är intuitivt och listar tydligt alla produktelement som kan justeras. Dessutom kan kunderna klicka på den sneakerdel som de vill ändra och se de tillgängliga färgerna eller materialen.

Nike Air Force 1 (Källa: Nike)

Diversifiera ditt produktgalleri

Ett av de största hindren för online-shopping är kundernas oförmåga att röra, känna, prova och uppleva produkter. Även efter köpet kan dessa faktorer skada din försäljning eftersom de är ansvariga för att 10-15 % av de produkter som köps online returneras. I vissa branscher, t.ex. modebranschen, är denna siffra ännu högre och når upp till 50 %.

Möt Ranktracker

Allt-i-ett-plattformen för effektiv SEO

Bakom varje framgångsrikt företag finns en stark SEO-kampanj. Men med otaliga optimeringsverktyg och tekniker att välja mellan kan det vara svårt att veta var man ska börja. Nåväl, frukta inte längre, för jag har precis det som kan hjälpa dig. Jag presenterar Ranktracker, en allt-i-ett-plattform för effektiv SEO.

Vi har äntligen öppnat registreringen av Ranktracker helt gratis!

Skapa ett kostnadsfritt konto

Eller logga in med dina autentiseringsuppgifter

Även om alla sinnen fortfarande är ett privilegium för fysiska butiker, kan du använda det näst bästa alternativet - ett mångsidigt produktgalleri.

1. Ge så många bilder som behövs

Visa din produkt från olika vinklar och närbilder för att hjälpa dina kunder att föreställa sig den. Använd endast högkvalitativa bilder, men se till att de är optimerade så att de inte saktar ner din webbplats.

Gryniga eller pixliga bilder kommer bara att hämma din konverteringsgrad eftersom de inte visar dina produkter ordentligt och därmed inte tillför något värde. Ett sådant felsteg kommer både att påverka kundernas uppfattning om dina produkter negativt och skada ditt rykte. Kom ihåg att visuell attraktionskraft är en avgörande faktor när det gäller förtroende och trovärdighet, vilket innebär att besökarna på din webbplats kommer att vara ovilliga att ge dig sitt kreditkortsnummer om dina produktsidor verkar skumma.

2. Erbjuda en 360-graders produktvy

En 360-graders vy kan ersätta ett besök i en fysisk butik eftersom kunderna kan flytta en produkt och se den från olika vinklar.

Genom att implementera detta UX-element kan du dessutom ladda upp färre bilder utan att det går ut över användarupplevelsen.

3. Aktivera en funktion för att zooma in

När kunderna tittar på produkter i en fysisk butik vill de alltid titta närmare och granska detaljerna.

En zoomfunktion efterliknar detta och gör det möjligt för webbplatsens besökare att få en bättre visuell förståelse av en produkt och se dess struktur. När de kan utforska produkten i så stor detaljrikedom känner sig potentiella kunder mer säkra på att göra ett köp.

4. Visa dina produkter i användning

Kontextualisera varje produkt genom att visa potentiella kunder hur andra använder den.

Detta ger dem en känsla för hur en produkt ser ut i verkligheten och hur den ska användas. Det är t.ex. mer lättförståeligt och engagerande att visa ett klädesplagg på en modell än att placera det på en platt yta.

Bilder i sammanhanget ger kunderna en bättre uppfattning om hur plagget passar.

Det är en bra idé att inkludera modeller av olika storlek och etnisk bakgrund för att skapa en känslomässig kontakt med alla delar av din publik.

5. Utnyttja video

88 % av alla människor säger att de har blivit övertygade om att de skulle köpa en produktfilm när de tittade på den.

Detta format har en särskilt kraftfull förmåga att sammanfatta mycket information på kort tid. Vi har redan nämnt problemet med kort uppmärksamhetsspann, och istället för att tvinga dina potentiella kunder att läsa om produktens egenskaper och fördelar är det mycket effektivare att visa allt detta i en kort video.

6. Visa produktens storlek i verkligheten

Storleken spelar roll när du handlar på nätet.

Om du inte vill vilseleda dina potentiella kunder ska du se till att de kan visualisera hur stor eller liten en viss produkt är. Ange alla mått på både produkten och förpackningen och lägg till ett storleksdiagram för kläder och skor.

Om det finns en liten chans att storleken på en produkt kan vara vilseledande, visa skalan genom att placera den bredvid föremål som kan användas som referenspunkter.

Somnifix är ett utmärkt exempel på diversifiering av produktgallerier. Varumärkets produktsida är fylld med användbara bilder, illustrationer och andra visuella element som visar hur produkten ska användas, vem som kan använda den och vilka de viktigaste fördelarna är.

Show the Product Size in Real Life (Källa: Somnifix)

Använd dig av prisförankring

Marknadsföring bygger i hög grad på mänsklig psykologi. Prissättning är inte annorlunda, och du kan använda flera strategier för att öka din konverteringsgrad.

Kunderna har ingen aning om hur mycket en viss produkt borde kosta och de bildar sig en uppfattning om huruvida priset är bra utifrån flera referenspunkter. De kontrollerar till exempel hur mycket en liknande produkt kostar och använder det som måttstock.

Om en produkt är mycket efterfrågad är folk också beredda att betala mer. Hermès har till exempel utnyttjat detta i årtionden genom att skapa artificiell knapphet och en aura av exklusivitet kring sin ikoniska Birkinväska.

Denna utvärderingsmekanism tyder alltså på att kundernas uppfattning om priset är

  1. Relativ
  2. Mottaglig för manipulation

2010 höll Steve Jobs en av sina keynotepresentationer, den här gången för att presentera företagets helt nya produkt, iPad. När Jobs diskuterade prissättningen av denna flashiga pryl tog han upp spekulationerna om att prislappen skulle ligga strax under 1 000 dollar, vilket är branschens kodnamn för 999 dollar. Då dök siffran upp på en storbildsskärm i bakgrunden, för att 60 sekunder senare krossas av prislappen 499 dollar, under vilken publiken fick veta mer om enhetens fördelar.

När priset sedan "sjönk" fick kunderna ett starkt intryck av att de skulle spara 500 dollar och få en fantastisk produkt för en bråkdel av dess verkliga värde.

Denna kognitiva bias som Jobs mästerligt spelade på är kärnan i prisförankring. Du kan uppnå samma effekt genom att ge dina kunder intrycket att produktens verkliga pris är mycket högre. Tricket är att ange det ursprungliga priset, stryka över det och placera ett nytt, lägre pris bredvid. Och voila! Dina kunder tror nu att de kommer att få ett bra fynd.

Använd visuellt slående CTA:er

En effektiv uppmaning till åtgärder kan göra underverk för din konverteringsgrad. Det är anledningen till att den har en andra plats i den här artikeln.

Även om det inte verkar vara någon raketforskning att skapa ett par ord på en knappformad del, kräver processen faktiskt en hel del forskning, data och A/B-testning. Receptet för en oemotståndlig CTA är att hitta rätt kombination av text, storlek, färg och placering.

Skapa handlingsinriktad text

Poängen med en CTA är att tala om för besökarna vad de ska göra härnäst och uppmuntra dem att vidta åtgärder.

Men i stället för att säga "köp" måste din formulering vara mer övertygande och övertygande. Fraser som "Ta reda på mer", "Ja, jag vill ha en gratis provperiod", "Få en rabatt" eller "Ge mig mitt exklusiva erbjudande" är mer uppmärksammande och kraftfulla.

Going kombinerar denna princip med ett smart ordspel på sin produktsida för billiga flygresor. Varumärkets namn lämpar sig för en söt ordlek som fångar ögat och motiverar till handling.

Create Action-Oriented Copy (Källa: Going)

Välj rätt storlek

Å ena sidan vill du att texten i en CTA ska vara läsbar, å andra sidan vill du inte ha en gigantisk knapp som ser billig och avskräckande ut.

Den rätta balansen är en knapp som är tillräckligt stor för att sticka ut, men inte så stor att den överskuggar annat innehåll på sidan.

Cotton Bureaus produktsidor har tydliga CTA:er som är lätta att läsa, men som ändå inte överskuggar andra delar av sidan eller verkar alltför säljande.

Pick the Right Size (Källa: Cotton Bureau)

Använd kontrasterande men kompletterande färger

Iolika studier har man försökt fastställa den mest effektiva CTA-färgen, men färgen är viktig främst för att den ska få din CTA-knapp att framträda mot bakgrunden.

Om du använder komplementära färger (färger på motsatta sidor av färghjulet) skapar du den bästa kontrasten och ökar synligheten för din uppmaning till handling.

Ett annat sätt att göra din CTA märkbar och framträdande är att utnyttja negativt utrymme.

Kettle & Fire drar nytta av alla dessa bästa metoder; deras CTA är klarröd och väl synlig mot den vita bakgrunden. Ett annat skäl till att det här exemplet fungerar är att det är lätt att anpassa beställningar och att det är transparent.

Kunderna kan välja hur många förpackningar de vill köpa och se exakt hur mycket de kommer att debiteras. Det finns också möjlighet att välja mellan en engångsbeställning eller en prenumeration.

Use Contrasting but Complementary Colors (Källa: Kettle & Fire)

Ta till dig förklarande videor

Tittarna säger att de behåller nästan 95 % av budskapet från en video.

Även om du tycker att siffran är lite överdriven kan man inte förneka att detta format är oändligt mycket effektivare när det gäller att förmedla ett marknadsföringsbudskap och visa fördelarna och användningsområdena för en viss produkt.

Det är inte konstigt att 96 % av alla människor säger att de har tittat på en förklaringsvideo för att få veta mer om en produkt eller tjänst som de är intresserade av. Det här formatet är särskilt användbart för komplexa tjänsteprodukter i SaaS-världen. Om din produkt är obekant för din typiska köparpersona, investera i att producera en eller två videor för dina produktsidor.

Förklaringsvideor är utmärkta för att visa hur man använder en produkt eftersom de fungerar bättre för att ge instruktioner. Istället för att möta dina kunder med en vägg av text som beskriver en viss produkt, kan du erbjuda dem en kort, engagerande video som visar hur den fungerar och ger ditt budskap snabbare.

Dessutom är det dubbelt så troligt att människor delar videor med sitt nätverk, vilket innebär att du också kan öka din räckvidd och generera mer trafik.

Bay Alarm Medical använder sig av förklaringsvideon för att visa hur man installerar sitt medicinska larmsystem så att potentiella kunder inte behöver leta efter skriftliga instruktioner.

Embrace Explainer Videos (Källa: Bay Alarm Medical)

Ta itu med vanliga hinder för konvertering

Det är bekvämt att handla på nätet eftersom kunderna kan köpa en produkt hemifrån. Det finns dock vissa hinder som kan hindra konverteringar, och de vanligaste av dem är:

Säkerhet vid transaktioner

Dina kunder är oroliga för hur säker deras betalning är. 18 % av alla överger sina kundvagnar på grund av säkerhetsfrågor. Förutom att införa ett system som skyddar kundernas känsliga uppgifter och kreditkortsuppgifter, kan du använda förtroendemärken som visar att du är noggrann.

Med säker kassan och märken för accepterad betalning samt stöd från tredje part kan du skapa förtroende hos dina kunder och uppmuntra dem att fullfölja sina köp.

Fraktkostnader och returpolicy

Fraktkostnader och returpolicyer kan ha en betydande inverkan på dina konverteringar. Om dina kunder inte kan se de totala kostnaderna i förväg är det troligt att de kommer att lämna kundvagnen utan att slutföra köpet.

Eftersom de inte kan prova varan de beställer är en generös returrätt något som kan få dem att ändra sig.

Tillgänglighet till kundtjänst

Konvertering är inte slutet på köparens resa. När någon väl har köpt av dig är det viktigt att leverera en exceptionell kundupplevelse och tillgodose deras behov. Om människor inte är säkra på vad som kommer att hända om de behöver support efter köpet kommer de att vara ovilliga att göra affärer med dig.

Låt dem veta att de kan kontakta dig om de stöter på ett problem eller om de bara vill veta hur de ska få ut det mesta av den produkt eller tjänst de köpt.

Mannequin Mall undanröjer alla konverteringshinder genom att ta upp dessa frågor på sin produktsida tydligt och direkt från början. Deras potentiella kunder kan få alla svar de behöver utan att behöva utforska webbplatsen och klicka fram och tillbaka för att hitta frakt- eller returpolicyn.

Availability of After-Sales Support (Källa: Mannequin Mall)

Tänk på de mobila kunderna

Utgifterna för mobil e-handel förväntas nå 728,28 miljarder dollar år 2025.

För 59 % av konsumenterna är möjligheten att handla via mobilen en viktig faktor när de bestämmer sig för var de ska köpa.

Möt Ranktracker

Allt-i-ett-plattformen för effektiv SEO

Bakom varje framgångsrikt företag finns en stark SEO-kampanj. Men med otaliga optimeringsverktyg och tekniker att välja mellan kan det vara svårt att veta var man ska börja. Nåväl, frukta inte längre, för jag har precis det som kan hjälpa dig. Jag presenterar Ranktracker, en allt-i-ett-plattform för effektiv SEO.

Vi har äntligen öppnat registreringen av Ranktracker helt gratis!

Skapa ett kostnadsfritt konto

Eller logga in med dina autentiseringsuppgifter

Slutligen säger 57 % av internetanvändarna att de inte kommer att rekommendera ett varumärke med en dåligt utformad mobilwebbplats till sina vänner och familjemedlemmar.

Alla dessa uppgifter talar för att det är viktigt att skapa en mobilanpassad e-handelsbutik. Därför bör du alltid tillämpa bästa praxis när du utformar produktsidans mobilversion.

Här är några tips för en mobilanpassad webbplats som inte irriterar dina besökare:

  • Håll designen enkel och gör det lätt att navigera.
  • Använd stora knappar för att undvika felet med de tjocka fingrarna.
  • Undvik att använda popup-fönster, eftersom de kan vara svåra att stänga på en mobil enhet.
  • Optimera bilderna för mobila enheter för att öka laddningshastigheten.
  • Använd ramverket Accelerated Mobile Pages (AMP) för att förbättra serverns prestanda och öka laddningshastigheten.
  • Stäng av autokorrigering i webbformulär för att påskynda ifyllandet.
  • Använd standardtypsnitt som är lätta att läsa.

Many Mornings införde mobilvänlig design på sina produktsidor. Enkelhet, enkel navigering, stora CTA-knappar och en tydlig processöversikt gör det lätt för kunderna att bläddra i produktsektionen, lägga en produkt i kundvagnen och snabbt få tillgång till varor som de redan har valt.

Keep Mobile Shoppers in Mind (Källa: Many Mornings)

Slutliga tankar

Väl genomtänkta och optimerade produktsidor leder till betydligt fler konverteringar. När en kund kommer till en produktsida betyder det oftast att de är redo att köpa, och det är upp till dig att underlätta kassaprocessen och göra den så smidig och distraktionsfri som möjligt. De här strategierna visar dig i rätt riktning och hjälper dig att optimera viktiga delar av produktsidan.

Felix Rose-Collins

Felix Rose-Collins

Co-founder

is the Co-founder of Ranktracker, With over 10 years SEO Experience. He's in charge of all content on the SEO Guide & Blog, you will also find him managing the support chat on the Ranktracker App.

Börja använda Ranktracker... gratis!

Ta reda på vad som hindrar din webbplats från att rankas.

Skapa ett kostnadsfritt konto

Eller logga in med dina autentiseringsuppgifter

Different views of Ranktracker app