Ecommerce UI Design: Come creare pagine di raccolta prodotti coinvolgenti (6 tattiche attuabili)

Introduzione

Le pagine di raccolta dei prodotti sono purtroppo spesso trascurate da designer e copywriter. Mentre si compiono molti sforzi per creare pagine di prodotto e landing page estremamente accattivanti, le pagine di raccolta cadono nel dimenticatoio e rimangono tristemente poco interessanti.

Vediamo sei modi praticabili per creare pagine di raccolta di prodotti che coinvolgano, ispirino all'azione e guidino il traffico e le conversioni.

Assicuratevi che la foto del prodotto principale sia coinvolgente

Il primo ostacolo di design che le pagine delle collezioni di prodotti devono superare è garantire che la foto principale sia coinvolgente e interessante. Se non catturate l'attenzione di un acquirente praticamente appena atterrato o entro un paio di scroll, probabilmente lo avete perso.

Iniziate considerando tutto ciò che sapete sul vostro pubblico di riferimento. Cosa piace loro? Perché amano i vostri prodotti? Che cosa piace loro dei vostri prodotti? Come potete mettere queste caratteristiche in primo piano?

Poi, iniziate a considerare il layout. Le immagini devono essere ingrandite? Hanno bisogno di uno sfondo vivace o neutro? Quanti prodotti è opportuno mostrare in fila?

L'ideale sarebbe testare A/B diverse varianti di design. A volte, le modifiche più piccole possono fare la differenza.

Guardate questa pagina di collezione di abbigliamento per bambini. I prodotti in sé sono carini e accattivanti, quindi non hanno bisogno di essere esposti in modo particolarmente originale. L'etichetta "new in" distingue chiaramente alcuni prodotti e garantisce che l'acquirente li noti.

L'inserimento di prodotti come questo su uno sfondo neutro è un ottimo modo per farli risaltare.

Fonte: mamasandpapas.com

Un altro modo per rendere accattivante la foto principale di una pagina di raccolta è mostrare l'articolo in uso. Se guardate questa pagina sulle serre, vedrete come questo può essere realizzato senza sforzo. Ogni immagine è completamente diversa, con una tavolozza di colori diversa e mostra l'oggetto da un'angolazione diversa. In questo modo è facile immaginare il prodotto nella propria casa.

Fonte: greenhouseemporium.com

È un'ottima tattica se si vuole rendere più facile per il cliente vedere l'aspetto del prodotto finale e aiutarlo a immaginare un intero stile di vita.

Assicuratevi che i filtri non siano troppo distraenti

Le pagine delle collezioni richiedono filtri per essere utili. Non ci si può aspettare che i clienti sfoglino pagine e pagine di prodotti per trovare un articolo specifico. È probabile che non siano consapevoli dell'ampiezza della vostra offerta e che non abbiano il tempo di fare lunghe ricerche.

I filtri devono categorizzare i prodotti in modo significativo. Prezzo, dimensioni e materiali sono solo alcuni dei filtri più comuni da utilizzare. Considerate i prodotti stessi e quali sono i fattori di differenziazione.

Più il prodotto è complesso, più filtri dovrebbero esserci. Si possono anche offrire filtri utili come "non per principianti" o "solo per professionisti", se aiutano i clienti a selezionare l'articolo giusto.

Inoltre, i filtri non devono distrarre troppo. Devono essere facilmente accessibili, ma non devono occupare gran parte della pagina o interferire in qualche modo con l'esperienza di navigazione.

Date un'occhiata a questa pagina di collezioni di pannelli per decking composito. I filtri sono disposti sulla sinistra e raggiungono il giusto equilibrio tra facilità di visualizzazione e assenza di intralcio. Si noti che sono anche pieghevoli, in modo che l'enorme quantità di informazioni non sopraffaccia il cliente.

Inoltre, sono stati ordinati in modo logico: la maggior parte delle persone vorrà restringere il campo dei colori e dei materiali prima di immergersi in dettagli più specifici, come le dimensioni.

Fonte: Ovaeda.com

Potete facilmente implementare una soluzione simile che non occuperà molto spazio, ma che migliorerà comunque in modo significativo l'esperienza dell'utente e permetterà ai clienti di restringere la scelta in pochi secondi.

Visualizzazione di brevi descrizioni dei prodotti al passaggio del mouse

Considerate le pagine di raccolta dei prodotti come un centro di informazioni. Qui vengono mostrati tutti i prodotti di una determinata categoria. Più siete utili, più è probabile che un cliente si converta.

Cercate di non costringere gli acquirenti a cliccare su un articolo, leggere la descrizione del prodotto e poi tornare indietro. Devono perdere tempo a scorrere per capire dove si sono fermati. Inoltre, se continuano ad aprire i prodotti in nuove schede, saranno presto sopraffatti dal numero di articoli che stanno cercando di confrontare.

Più informazioni utili riuscite a visualizzare nella pagina della collezione, meglio è. Aggiungendo una semplice e breve descrizione del prodotto quando si passa il mouse su di esso, è possibile aiutare i clienti a confrontare i prodotti proprio in quel momento.

Questa pagina di raccolta di masticatori di calcio bariatrici fa un ottimo lavoro. Viene fornita una breve descrizione del prodotto, che indica le vitamine e i minerali contenuti nel prodotto. Vengono inoltre evidenziati i benefici: ha un ottimo sapore, favorisce la salute immunitaria e così via.

Fonte: Bariatricfusion.com

Notate quanto sono brevi le descrizioni. È possibile leggerle in un paio di secondi e continuare a confrontare i prodotti.

Quando si applica questa tattica, si deve considerare attentamente la descrizione in hover. Non è necessario che sia uguale alla descrizione della pagina del prodotto. Dovrebbe descrivere brevemente i vantaggi o le caratteristiche principali dell'articolo, distinguendolo chiaramente dagli altri prodotti presenti nella pagina.

Concentratevi sulle informazioni piuttosto che sulla vendita. I clienti sono più propensi a convertire se sono sicuri della loro scelta.

Un po' di riprova sociale

La riprova sociale è un ottimo strumento per rendere le pagine più coinvolgenti e utili. Mostreranno ai vostri clienti che siete degni di fiducia, affidabili e che i vostri prodotti sono di buona qualità. Questo è particolarmente importante per i nuovi clienti che non conoscono ancora il vostro marchio e che potrebbero essere più restii a convertire.

La riprova sociale si presenta in molte forme, ma le valutazioni a stelle sono il tipo di prova più utile da inserire nelle pagine della vostra raccolta. Servono a diversi scopi:

• valutare la qualità del singolo prodotto
• mostrare quanti clienti l'hanno acquistato e si sono presi il tempo di recensirlo
• aiutare i clienti a prendere decisioni d'acquisto più rapide

Le valutazioni a stelle sono facili da incorporare. Date un'occhiata alla pagina della collezione di palette di ombretti di Sephora. Sono facili da individuare e mostrano tutte le informazioni rilevanti: quante recensioni ci sono e qual è il gradimento complessivo dell'articolo. Si può anche vedere chiaramente che una di queste palette è molto più popolare delle altre.

Fonte: sephora.com

Un altro ottimo segnale di riprova sociale da incorporare nelle pagine delle vostre collezioni sono le notifiche di vendita in tempo reale.

Date un'occhiata a questa pagina di adesivi personalizzati per computer portatili. Durante la navigazione, nell'angolo in basso a destra viene visualizzato un popup discreto che indica chi ha effettuato un acquisto sul sito, da dove proviene e cosa ha comprato.

Questo è un ottimo modo per aggiungere un po' di FOMO alle vostre tattiche di marketing. Ai clienti verranno mostrati altri articoli, chiaramente popolari perché qualcuno li ha appena acquistati. Inoltre, invierà forti segnali di fiducia e credibilità.

Assicuratevi che il popup non sia troppo appariscente o distraente. Inoltre, cercate di distanziarli in modo che non inizino a infastidire gli acquirenti.

Fonte: vinylstatus.com

Visualizzare più viste dei prodotti

Più i clienti sono in grado di vedere un prodotto, maggiori sono le possibilità di conversione. Più immagini di un articolo vengono mostrate nella pagina della collezione, più coinvolgimento e interesse si generano.

È possibile incorporare più di un'immagine in un paio di modi. Si può consentire lo scorrimento di una galleria di prodotti, oppure si può visualizzare una foto diversa al passaggio del mouse.

Questa pagina di abbigliamento per ragazzi di H&M presenta una galleria di prodotti scorrevole. È possibile vedere tutte le foto presenti nella pagina del singolo prodotto direttamente dalla pagina della collezione, in modo da non dover mai fare clic.

Fonte:hm.com

Se preferite visualizzare una foto diversa al passaggio del mouse, date un'occhiata a questa pagina della collezione beachwear femminile come ispirazione. Il marchio mostra abilmente il retro dell'articolo al passaggio del mouse, in modo che si possa vedere l'intero pezzo senza dover aprire un'altra pagina. È un'ottima tattica per i marchi di abbigliamento.

Fonte:simplybeach.com

Quando si sceglie se aggiungere una galleria o una foto in primo piano, bisogna considerare la natura dell'articolo. Quante foto deve vedere un acquirente? E quali dovrebbero essere queste foto?

Si può mostrare il prodotto in uso o le foto dei clienti, se sono più adatte a convincere un nuovo acquirente. Potete mostrare l'articolo da vicino o anche elencare le specifiche del prodotto.

Visualizzare gli articoli visti di recente

I consigli sui prodotti sono solitamente riservati alle pagine dei singoli prodotti. È anche il luogo in cui i marchi inseriscono il carosello "visti di recente".

Tuttavia, inserendoli nella pagina della collezione, potete ricordare ai clienti gli articoli che hanno già visto e che gli sono piaciuti. Risparmiate loro il tempo e la fatica di andare a ritroso nella loro storia e di avere numerose schede aperte contemporaneamente.

Consultate la pagina delle scarpe da corsa Adidas da uomo. Non appena si visualizza un singolo prodotto, in fondo alla pagina della collezione viene visualizzata la funzione "visti di recente", che consente di tenere d'occhio gli articoli che hanno suscitato il proprio interesse.

Fonte: adidas.com

Lo stesso carosello è presente anche nelle pagine dei singoli prodotti, per un'esperienza di navigazione personalizzata.

Potete anche consigliare i prodotti ai clienti in base agli articoli che hanno visualizzato, proprio come fareste con le pagine dei prodotti.

Conclusione

Considerate quali di queste tattiche di progettazione delle pagine delle collezioni di prodotti potete implementare nelle vostre pagine. Forse tutte e sei possono contribuire ad aumentare i tassi di conversione.

Tenete sempre presente la natura dei vostri prodotti e i punti dolenti del vostro pubblico. Che cosa stanno cercando e in che modo i vostri sforzi di design possono aiutarli a trovarlo?