Design av användargränssnitt för e-handel: Hur man skapar engagerande produktsamlingssidor (6 handlingsbara taktiker)

Intro

Produktsamlingssidor är tyvärr ofta förbisedda av både designers och copywriters. Medan mycket arbete läggs på att skapa väldigt engagerande produktsidor och målsidor, faller samlingssidor vid sidan av vägen och förblir sorgligt ointressanta.

Låt oss titta på sex användbara sätt att skapa produktsamlingssidor som engagerar, inspirerar till handling och driver trafik och konverteringar.

Se till att den primära produktbilden är engagerande

Det första designhindret som produktsamlingssidor måste övervinna är att se till att det primära fotot är engagerande och intressant. Om du inte fångar en shoppares uppmärksamhet praktiskt taget så snart de landar eller inom ett par rullningar, har du förmodligen tappat dem.

Börja med att fundera över allt du vet om din målgrupp. Vad gillar de? Varför gillar de dina produkter? Vad är det med dina produkter som de gillar? Hur kan du sätta dessa egenskaper i centrum?

Börja sedan fundera på layouten. Måste bilderna zoomas in? Kräver de en livlig eller neutral bakgrund? Hur många produkter ska du visa i en rad?

Helst ska du A/B-testa flera designvarianter. Ibland kan de minsta förändringarna göra störst skillnad.

Titta på den här sidan för babykläder. Produkterna i sig är söta och engagerande, så de behöver inte visas på något särskilt nytt sätt. Märkningen "new in" skiljer tydligt ut vissa produkter och säkerställer att kunden lägger märke till dem.

Att placera produkter som denna mot en neutral bakgrund är ett bra sätt att få dem att sticka ut.

Källa: mamasandpapas.com

Ett annat sätt att göra det primära fotot på en samlingssida engagerande är att visa föremålet i bruk. Om du tittar på den här sidan om växthus kan du se hur detta kan göras utan ansträngning. Varje bild är helt annorlunda, i en annan färgpalett och visar föremålet från en annan vinkel. De har gjort det enkelt att föreställa sig produkten i ditt eget hem.

Källa: greenhouseemporium.com

Det här är en bra taktik om du vill göra det lättare för kunden att se hur slutprodukten kommer att se ut och hjälpa dem att föreställa sig en hel livsstil.

Se till att filtren inte är alltför distraherande

Kollektionssidor kräver filter för att vara användbara. Kunderna kan inte förväntas bläddra igenom sida upp och sida ner med produkter för att hitta en specifik artikel. Det är inte troligt att de är medvetna om bredden i ditt erbjudande och de kanske inte har tid för långvarig fönstershopping.

Filtren ska kategorisera dina produkter på ett meningsfullt sätt. Pris, storlek och material är bara några av de vanligaste filtren att använda. Tänk på produkterna i sig och vilka de differentierande faktorerna är.

Ju mer komplex produkten är, desto fler filter bör det finnas. Du kan också erbjuda användbara filter som "inte för nybörjare" eller "endast för proffs" om de hjälper kunderna att välja rätt artikel.

Filter bör inte heller vara för distraherande. De ska vara lätta att komma åt, men inte ta upp en stor del av sidan eller på något sätt störa surfupplevelsen.

Ta en titt på denna samlingssida för komposittrallbrädor. Filtren finns till vänster, och de har rätt balans mellan att vara lätt synliga och inte i vägen. Observera att de också är hopfällbara, så att den stora mängden information inte överväldigar en kund.

De har också ordnats på ett logiskt sätt - de flesta människor kommer att vilja begränsa färgerna och materialen innan de dyker in i mer specifika detaljer, som storlek.

Källa: Ovaeda Ovaeda.com

Du kan enkelt implementera en liknande lösning som inte tar upp mycket utrymme men som ändå avsevärt förbättrar användarupplevelsen och gör det möjligt för kunderna att begränsa sitt val på några sekunder.

Visa korta produktbeskrivningar vid överflygning

Tänk på produktsamlingssidor som ett informationsnav. Det är här du visar alla dina produkter i en viss kategori. Ju mer hjälpsam du är, desto mer sannolikt är det att en kund konverterar.

Försök att inte få kunderna att klicka på en artikel, läsa produktbeskrivningen och sedan klicka tillbaka. De måste slösa tid på att scrolla för att ta reda på var de precis slutade. Eller, om de fortsätter att öppna produkter i nya flikar, kommer de snart att bli överväldigade av antalet artiklar som de försöker jämföra.

Ju mer användbar information du kan visa på kollektionssidan, desto bättre. Genom att lägga till en enkel, kort produktbeskrivning när någon håller muspekaren över en produkt kan du hjälpa kunderna att jämföra produkter just där och då.

Denna samlingssida för bariatriska kalciumtugg gör ett bra jobb. Du får en kort produktbeskrivning som berättar vilka vitaminer och mineraler du kan hitta i produkten. Fördelarna lyfts också fram: det smakar bra, det främjar immunhälsan och så vidare.

_Källa: Bariatricfusion.com _

Lägg märke till hur korta beskrivningarna är. Du kan läsa dem på ett par sekunder och fortsätta att jämföra produkter.

När du använder den här taktiken ska du noga överväga beskrivningen av svävaren. Den behöver inte vara densamma som beskrivningen på produktsidan. Den bör kortfattat diskutera fördelarna med eller nyckelfunktionerna i artikeln och tydligt skilja den från andra produkter på sidan.

Fokusera på att vara informativ snarare än att driva en försäljning här. Kunderna är mer benägna att konvertera om de är säkra på sitt val.

Släng in lite socialt bevis

Sociala bevis är ett utmärkt verktyg för att göra sidor mer engagerande och hjälpsamma. De visar dina kunder att du är trovärdig, pålitlig och att dina produkter är av god kvalitet. Detta är särskilt viktigt för nya kunder som ännu inte känner till ditt varumärke och som kan vara mer tveksamma till att konvertera.

Sociala bevis finns i många former, men stjärnbetyg är den mest användbara typen av bevis att lägga in på dina samlingssidor. De kommer att tjäna flera syften:

• bedöma kvaliteten på den enskilda produkten
• visa hur många kunder som har köpt den och tagit sig tid att recensera den
• hjälpa kunderna att fatta snabbare köpbeslut

Stjärngraderingar är lätta att införliva. Kolla in Sephoras samlingssida för ögonskuggspaletter. De är lätta att upptäcka och visar all relevant information: hur många recensioner som finns och hur nöjda de är med produkten. Du kan också tydligt se att en av dessa paletter är mycket mer populär än de andra.

Källa: sephora.com

En annan bra signal för socialt bevis som du kan införliva på dina samlingssidor är försäljningsmeddelanden i realtid.

Kolla in den här sidan med anpassade klistermärken för bärbara datorer. När du surfar på webbplatsen visas en diskret popup-fönster i det nedre högra hörnet som berättar vem som har handlat på webbplatsen, var de kommer ifrån och vad de har köpt.

Detta är ett utmärkt sätt att lägga till lite FOMO i din marknadsföringstaktik. Kunderna kommer att få se andra varor, varor som uppenbarligen är populära eftersom någon just har köpt dem. Det kommer också att skicka starka signaler om förtroende och trovärdighet.

Se till att popup-fönstret inte är för flashigt eller distraherande. Försök också att sprida ut dem så att de inte börjar irritera shoppare.

Källa: vinylstatus.com

Visa flera produktvyer

Ju bättre kunderna kan se en produkt, desto större är chansen att de konverterar. Ju fler bilder av en vara du visar på kollektionssidan, desto mer engagemang och intresse kommer du att skapa.

Du kan integrera mer än en bild på ett par olika sätt. Du kan tillåta bläddring genom ett produktgalleri eller visa en annan bild när du håller muspekaren över sidan.

Denna sida med pojkkläder från H&M har ett rullbart produktgalleri. Du kan se alla foton som visas på den enskilda produktsidan direkt från kollektionssidan, så du behöver aldrig klicka bort dem.

Källa:hm.com

Om du föredrar att bara visa ett annat foto vid hovring kan du kolla in den här sidan med kollektionen av strandkläder för kvinnor för inspiration. Varumärket visar smart baksidan av artikeln på hover, så att du kan se hela stycket utan att behöva öppna en annan sida. Det här är en bra taktik för klädmärken.

Källa:simplybeach.com

När du väljer om du vill lägga till ett galleri eller ett svävande foto bör du tänka på artikelns karaktär. Hur många bilder behöver en kund se? Och vad ska det vara för bilder?

Du kan visa produkten när den används, eller så kan du visa kundfoton om det är mer troligt att de kan få en ny kund att handla. Du kan visa varan på nära håll eller till och med lista produktspecifikationer.

Visa nyligen visade objekt

Produktrekommendationer är vanligtvis reserverade för enskilda produktsidor. Det är också här varumärken kommer att placera karusellen "nyligen visad".

Men genom att visa den på kollektionssidan kan du påminna kunderna om de objekt som de redan har sett och gillat. Bespara dem tid och ansträngning med att gå tillbaka genom sin historik och ha många flikar öppna samtidigt.

Kolla in sidan Adidas löparskor för herrar. Så snart du tittar på en enskild produkt får du en "nyligen tittat"-funktion längst ner på kollektionssidan, vilket hjälper dig att hålla ett öga på de artiklar som har väckt ditt intresse.

Källa: adidas.com

Samma karusell visas också på enskilda produktsidor, vilket ger en individuellt anpassad surfupplevelse.

Du kan också rekommendera produkter till kunder baserat på de artiklar de har tittat på, precis som på produktsidor.

Avslutning

Fundera på vilka av dessa designtaktiker för produktsamlingssidor du kan implementera på dina egna sidor. Kanske kan alla sex spela en roll för att öka dina konverteringsfrekvenser.

Ha alltid dina produkters karaktär och din målgrupps problem i åtanke. Vad letar de efter och hur kan dina designinsatser hjälpa dem att hitta det?