E-handel

E-handelsdesign | Del 3/4 | Produktsida

e-handeldesign del 3 av 4

I del tre av serien e-handelsdesign går vi igenom fyra viktiga delar att tänka på när ni ska designa er produktsida (PDP).

Att en produktsida ska innehålla bildgalleri, produktnamn, pris, rea pris, CTA, produktbeskrivning, variantväljare, specifikationer, omdömen och storleksguide vet de flesta. Men det finns även en del andra do’s and dont’s när man ska designa en produktsida (PDP) - dessa ska vi gå igenom nu :)

Go big CTA or go home

I del ett av artikelserien pratade vi om utformningen av startsidan och tog upp vikten av CTA-knappar (Call to action). Även om vi redan berört vikten av CTA-knappar så tåls det att upprepas då det är en av de viktigaste komponenterna på produktsidan.

Många e-handlare har förstått vikten av att ha stora, tydliga, in-your-face köpknappar vilket är superbra. Men man stöter fortfarande regelbundet på små otydliga knappar och ibland även outlinade-knappar(spök-knappar) på produktsidan.

Vi rekommenderar att köra safe och tydligt så att ingen kan missa att “här lägger en produkten i varukorgen”.

Så avgör du om en CTA-knapp är bra

Kör ett “squint-test” på din produktsida. Sätt dig en bit bort från skärmen och kisa med ögonen, om du inte kan se köpknappen bör du göra den större eller byta till en tydligare färg.

Kom ihåg att det inte finns någon universal färg som konverterar mer än någon annan, så prova er fram vad för att se vad som konverterar bäst hos er.

cta-3-kunder

Maxgaming, childrens house och inrego kör på stora gröna CTA's på produktsidan

Skapa inga "Dead Ends"

Vad menar vi med det? Jo, eftersom produktsidan även ibland funkar som en landningssida (ni marknadsför produkter och länkar direkt till produktsidan) så är det viktigt att det finns ett tydligt "nästa steg" så att besöket i webshopen inte tar slut där.

Besökaren kommer in på produktsidan, inser fort att den inte vill ha just denna produkt, och nu?

Här är det viktigt att ha andra länkar på produktsidan så att besökaren enkelt kan navigera sig vidare. Det kan vara en länk till en varumärkessida som listar alla produkter från varumärket, andra produkter i samma kategori, rekommenderade produkter eller till kategorierna produkten ligger i.

Detta är extra viktigt i mobilen då en oftast gömmer kategoriträdet inuti en "hamburgermeny" och då blir inga andra kategorier synliga överhuvudtaget.

pdp-linkprod

Penstore länkar bland annat till produkter inom samma märke som den valda produkten

Undvik horisontella tabbar för produktinformation/specifikation

En nackdel med att använda horisontella tabbar för viktig information på produktsidan är att många besökare missar dom. Det i sin tur skapar en frustation då besökaren inte tror det finns mer information om denna produkt.

En annan svaghet med horisontella tabbar är att besökaren inte kan öppna två samtidigt utan bara kan se på en vy åt gången.

Vi rekommenderar att ni använder vertikala sektioner som kan kolappsa. Det ger besökaren en bättre översikt av vad för information som finns om produkten. All information finns även på en "sida"(horisontella tabbar gör att besökaren får känslan av att en byter “sida” när en byter tab).

Två fördelar med vertikala sektioner:

  1. Det finns möjlighet att öppna flera sektioner samtidigt och det är då större chans att besökaren faktiskt klickar sig igenom de sektioner som finns.
  2. Det är en bra lösning för både desktop och mobile, win-win.

tabbar-inrego

Inrego har valt att ha all information om produkten längst upp och sedan lista andra viktig info i vertikala stäng-/öppningsbara sektioner

tabbar-elgiganten

Elgiganten lägger all info i tabbar och det är svårt att veta vilken tab man ska gå till för att få rätt information

Frakt-, retur-, betalningsinformation

Oförusatta kostnader som dyker upp i kassan påverkar konverteringen negativt. Oväntade fraktkostnader i kassan är enligt Baymard institute den främsta anledningen (55 procent) till att besökare väljer att överge sin varukorg.

Det är helt okej att ta betalt för frakten men var tydlig med denna information redan från start. En rekommendation är att göra all information gällande beställningen synlig redan på produktsidan, fraktkostnader, returpolicy och vilka betalningsmetoder som tillåts i kassan.

Detta gör att besökaren inte behöver lämna produktsidan för att scanna igenom hela siten efter denna info innan produkten läggs i varukorgen.

bestallningsinfo-penstorePenstore visar all information rörande beställningen i en egen ruta på produktsidan

Läs del två av artikelserien här