Design af brugergrænseflader til e-handel: Sådan skaber du engagerende produktsamlingssider (6 brugbare taktikker)

Intro

Produktsamlingssider bliver desværre ofte overset af både designere og tekstforfattere. Mens der bruges mange kræfter på at skabe vildt engagerende produktsider og landingssider, falder kollektionssider til jorden og forbliver sørgeligt uinteressante.

Lad os se på seks brugbare måder at skabe produktsamlingssider, der engagerer, inspirerer til handling og driver trafik og konverteringer.

Sørg for, at det primære produktfoto er engagerende

Den første designforhindring, som produktsamlingssider skal overvinde, er at sikre, at det primære foto er engagerende og interessant. Hvis du ikke fanger en shoppers opmærksomhed praktisk talt så snart de lander eller inden for et par scrolls, har du sandsynligvis mistet dem.

Start med at overveje alt, hvad du ved om din målgruppe. Hvad kan de lide? Hvorfor kan de lide dine produkter? Hvad er det ved dine produkter, de kan lide? Hvordan kan du sætte disse funktioner i centrum?

Begynd derefter at overveje layoutet. Skal der zoomes ind på billederne? Skal de have en levende eller en neutral baggrund? Hvor mange produkter skal du vise i en række?

Ideelt set vil du A/B-teste flere designvariationer. Nogle gange kan de mindste ændringer gøre den største forskel.

Se på denne kollektionsside med babytøj. Produkterne i sig selv er søde og indbydende, så de behøver ikke at blive vist på nogen særlig ny måde. Mærket "new in" adskiller tydeligt visse produkter fra andre og sikrer, at kunden lægger mærke til dem.

At sætte produkter som dette op mod en neutral baggrund er en god måde at få dem til at skille sig ud på.

Kilde: mamasandpapas.com

En anden måde at gøre det primære foto på en kollektionsside engagerende på er at vise genstanden i brug. Hvis du kigger på denne side med skæve drivhuse, kan du se, hvordan det kan gøres uden besvær. Hvert billede er helt forskelligt, i en anden farvepalet og viser genstanden fra en anden vinkel. De har gjort det nemt at forestille sig produktet i dit eget hjem.

Kilde: greenhouseemporium.com

Det er en god taktik, hvis du vil gøre det lettere for kunden at se, hvordan det endelige produkt vil se ud, og hjælpe dem med at forestille sig en hel livsstil.

Sørg for, at filtrene ikke er for distraherende

Kollektionssider kræver filtre for at være nyttige. Man kan ikke forvente, at kunderne skal bladre gennem side op og side ned med produkter for at finde en bestemt vare. De er sandsynligvis ikke opmærksomme på bredden i dit tilbud, og de har måske ikke tid til lang tids vinduesshopping.

Filtre skal kategorisere dine produkter på en meningsfuld måde. Pris, størrelse og materiale er blot nogle af de mest almindelige filtre, man kan bruge. Overvej selve produkterne, og hvad de differentierende faktorer er.

Jo mere komplekst produktet er, jo flere filtre bør der være. Du kan også tilbyde nyttige filtre som "ikke for begyndere" eller "kun for professionelle", hvis de kan hjælpe kunderne med at vælge den rigtige vare.

Filtre bør heller ikke være for distraherende. De skal være lette at få adgang til, men må ikke fylde en stor del af siden eller på nogen måde forstyrre browseroplevelsen.

Tag et kig på denne side med kollektioner af komposit terrassebrædder. Filtrene findes til venstre, og de har den rette balance mellem at være let synlige og ikke i vejen. Bemærk, at de også er sammenklappelige, så den store mængde information ikke overvælder en kunde.

De er også ordnet på en logisk måde - de fleste mennesker vil gerne indsnævre farverne og materialerne, før de dykker ned i mere specifikke detaljer som størrelse.

Kilde: Ovaeda.com

Du kan nemt implementere en lignende løsning, der ikke fylder meget, men som stadig forbedrer brugeroplevelsen betydeligt og giver kunderne mulighed for at indsnævre deres valg i løbet af få sekunder.

Vis korte produktbeskrivelser ved overflyvning

Tænk på produktsamlingssider som et informationscenter. Det er her, du viser alle dine produkter i en bestemt kategori. Jo mere hjælpsom du er, jo mere sandsynligt er det, at en kunde konverterer.

Prøv ikke at få kunderne til at klikke på en vare, læse produktbeskrivelsen og derefter klikke tilbage. De skal spilde deres tid på at scrolle for at finde ud af, hvor de lige slap. Eller hvis de bliver ved med at åbne produkter i nye faner, vil de snart blive overvældet af antallet af varer, de prøver at sammenligne.

Jo flere nyttige oplysninger du kan vise på kollektionssiden, jo bedre. Ved at tilføje en enkel, kort produktbeskrivelse, når nogen holder musen over et produkt, kan du hjælpe kunderne med at sammenligne produkter lige der og da.

Denne samleside for bariatriske calcium chews gør et godt stykke arbejde. Du får en kort produktbeskrivelse, der fortæller dig, hvilke vitaminer og mineraler du kan finde i produktet. Fordelene fremhæves også: det smager godt, det fremmer immunforsvaret og så videre.

_Kilde: Bariatricfusion.com _

Læg mærke til, hvor korte beskrivelserne er. Du kan læse dem på et par sekunder og fortsætte med at sammenligne produkter.

Når du anvender denne taktik, skal du nøje overveje hover-beskrivelsen. Den behøver ikke at være den samme som beskrivelsen på produktsiden. Den skal kort fortælle om varens fordele eller nøglefunktioner og tydeligt adskille den fra andre produkter på siden.

Fokuser på at være informativ i stedet for at presse et salg igennem. Kunderne er mere tilbøjelige til at konvertere, hvis de er sikre på deres valg.

Smid noget socialt bevis ind

Social proof er et godt værktøj til at gøre sider mere engagerende og hjælpsomme. De viser dine kunder, at du er troværdig og pålidelig, og at dine produkter er af god kvalitet. Det er især vigtigt for nye kunder, som endnu ikke kender dit brand, og som måske er mere tilbageholdende med at konvertere.

Socialt bevis findes i mange former, men stjernebedømmelser er den mest nyttige form for bevis at lægge på dine indsamlingssider. De tjener flere formål:

• vurdere kvaliteten af det enkelte produkt
• vise, hvor mange kunder der har købt den og taget sig tid til at anmelde den
• Hjælp kunderne med at træffe hurtigere købsbeslutninger

Stjernebedømmelser er nemme at indarbejde. Tjek Sephoras kollektionsside for øjenskyggepaletter. De er nemme at få øje på og viser alle de relevante oplysninger: hvor mange anmeldelser der er, og hvad den samlede tilfredshed med varen er. Du kan også tydeligt se, at en af disse paletter er meget mere populær end de andre.

Kilde: sephora.com

Et andet godt signal om socialt bevis, som du kan indarbejde på dine kollektionssider, er salgsmeddelelser i realtid.

Se denne side med brugerdefinerede klistermærker til bærbare computere. Mens du surfer, kommer der en diskret popup i nederste højre hjørne, som fortæller dig, hvem der har foretaget et køb på hjemmesiden, hvor de kommer fra, og hvad de har købt.

Det er en god måde at tilføje lidt FOMO til din markedsføringstaktik. Kunderne får vist andre varer, varer, som tydeligvis er populære, fordi nogen lige har købt dem. Det vil også sende stærke tillids- og troværdighedssignaler.

Sørg for, at popup'en ikke er for prangende eller distraherende. Prøv også at placere dem med mellemrum, så de ikke begynder at irritere kunderne.

Kilde: vinylstatus.com

Vis flere produktvisninger

Jo bedre kunderne er i stand til at se et produkt, jo større er chancen for, at de konverterer. Jo flere billeder af en vare, du viser på kollektionssiden, jo mere engagement og interesse vil du skabe.

Du kan indarbejde mere end ét billede på et par måder. Du kan tillade rulning gennem et produktgalleri, eller du kan vise et andet billede ved hover.

Denne side med drengetøj fra H&M har et scrollbart produktgalleri. Du kan se alle billederne på den enkelte produktside direkte fra kollektionssiden, så du behøver aldrig at klikke væk.

Kilde:hm.com

Hvis du foretrækker bare at vise et andet billede ved hover, kan du finde inspiration på denne side med kollektion af strandtøj til kvinder. Mærket viser på en smart måde bagsiden af tøjet ved hover, så du kan se hele tøjet uden at skulle åbne en anden side. Det er en god taktik for tøjmærker.

Kilde:simplybeach.com

Når du skal vælge, om du vil tilføje et galleri eller et hover-foto, skal du overveje varens karakter. Hvor mange fotos har en kunde brug for at se? Og hvad skal de billeder være?

Du kan vise produktet i brug, eller du kan vise kundebilleder, hvis det er mere sandsynligt, at de overbeviser en ny kunde. Du kan vise varen tæt på eller endda angive produktspecifikationer.

Vis nyligt viste varer

Produktanbefalinger er normalt forbeholdt individuelle produktsider. Det er også her, brands vil placere karrusellen "for nylig set".

Men ved at vise det på kollektionssiden kan du forsigtigt minde kunderne om de varer, de allerede har set og synes godt om. Spar dem for tid og kræfter med at gå tilbage i deres historik og have mange faner åbne på samme tid.

Tjek siden med Adidas-løbesko til mænd. Så snart du ser et individuelt produkt, får du en "nyligt set"-funktion nederst på kollektionssiden, som hjælper dig med at holde øje med de varer, der har vakt din interesse.

Kilde: adidas.com

Den samme karrusel vises også på individuelle produktsider, hvilket giver en individuelt tilpasset browseroplevelse.

Du kan også anbefale produkter til kunder baseret på de varer, de har set, ligesom du ville gøre på produktsider.

Afrunding

Overvej, hvilke af disse designtaktikker for produktsamlingssider du kan implementere på dine egne sider. Måske kan alle seks spille en rolle i at øge dine konverteringsrater.

Hav altid dit/dine produkt(er)s natur og din målgruppes smertepunkter i tankerne. Hvad leder de efter, og hvordan kan din designindsats hjælpe dem med at finde det?