Credo sia necessario dopo questo periodo di lockdown guardare con occhi interessati e attenti alla vendita online che è e sarà la chiave di svolta per il presente e per il futuro economico di molte realtà.

Con questo articolo voglio analizzare uno dei componenti fondamentali di un e-commerce ovvero la card del prodotto visualizzato nella pagina elenco dei vari risultati. Spero vi possa essere utile per proporre al meglio i vostri prodotti sul web.

Inizierei con il visualizzare il componente in questione, qui sotto ecco la card prodotto.

Capiamo subito che abbiamo a disposizione poco spazio nel quale la foto del prodotto ne occupa la maggior parte.

Gerarchia degli elementi necessari:

Nome Articolo, prezzo, numero e media del voto delle recensioni ottenute e sconto applicato sono i dati necessari per la prima lettura.

Poi sarà necessario creare buttons per le azioni che l’utente può e dovrà compiere:

  • Aggiungi al carrello
  • Aggiungi ai preferiti 
  • Vai alla scheda prodotto 
  • Scegli le caratteristiche del prodotto (es. taglia, colore, formato ecc… )

Vediamo alcuni benchmark di successo:

1. Zalando

Troviamo subito: Nome Prodotto, mini descrizione, prezzo, percentuale di sconto, prezzo scontato e un’ info della consegna veloce dove presente.

Non troviamo nessun riferimento alle recensioni, che troveremo solo nella scheda prodotto subito dopo il prezzo.

Sicuramente avete acquistato online e sapete quanto sia importante la tempistica della consegna, quando confrontiamo dei prodotti sicuramente questo fattore è determinante e scegliere di metterlo nella card ben visibile è una scelta vincente.

Quando progettiamo un e-commerce e nel dettaglio la card dobbiamo studiare attentamente le opzioni che il mouse over può far comparire sul nostro componente, qui sotto possiamo vederlo insieme:

 

Al mouse over cambia la foto e mostra il prodotto da un’altra angolazione, meglio se scegliamo coerenza compositiva che qui manca. Ad esempio se si è deciso che la prima foto mostrerà l’abito indossato dalla modella, la foto al mouse over dovrebbe mostrare il solo abito così l’utente saprà meglio come confrontare più velocemente i prodotti.

Poi compare la scelta dell’opzione, qui la scelta della taglia. Per la scelta di quale opzione far vedere subito nella card di comparazione tra prodotti è necessario studiare i nostri prodotti e capire quali sono le scelte determinanti di selezione dei nostri utenti.

Notiamo che manca la CTA “Aggiungi al carrello”, anche quando selezioniamo la taglia non compare e comunque per comprarlo l’utente dovrà fare un click sulla card per ritrovarsi alla pagina prodotto e poterlo aggiungere al carrello. Anche questa scelta è dettata da un’aspetto fondamentale: conoscere i propri utenti e le loro abitudini.

L’ultimo elemento che analizzo sarà il button “aggiungi ai preferiti”, ultimo non di importanza anzi è un’azione fondamentale per gli utenti. Qui lo troviamo con un design pulito, icona a forma di cuore che non ha bisogno di nessun testo aggiuntivo e ben visibile, posizionato sulla foto. Cliccandolo si colora del colore del brand, il prodotto viene aggiunto alla lista preferiti senza farti abbandonare la pagina e si può continuare a confrontare i vari prodotti. Si può ulteriormente toglierlo dalla lista dei preferiti con un’altro semplice click.

2. Shein

Cito Shein ma potrei citare Nike, Zaful e tanti altri per farvi vedere come hanno utilizzato il mouse over:

Quando sona presenti più opzioni di texture e/o colore con il semplice mouse over la foto cambia mostrandoci il prodotto modificato.

Gli altri elementi non li prenderemo in considerazione perché già esplicitato in precedenza.

3. AE

Per questo caso parliamo di “Quick View” ovvero una visualizzazione rapida del prodotto usato in modo ottimale.

Troviamo ancora il 43% dei siti e-commerce che utilizzano il mouse over per visualizzare una Quick View, ma servirebbe un articolo dedicato di approfondimento per valutare tutti i pro e i contro.

Mentre qui voglio mostrarvi la Quick View non al mouse over ma al click (Button con l’icona con il più) e appare in lightbox sticky a destra con tutti i componenti necessari per scegliere tra le varie opzioni, guardare la gallery, selezionare il numero del prodotto, visualizzare lo sconto con il prezzo scontato, aggiungere al carrello e aggiungerlo alla lista preferiti. Poi se vuoi ritornare alla pagina con le varie cards precedente basterà chiudere la modale.

Queste considerazioni valgono per la visualizzazione desktop e laptop. Per motivi di spazio disponibile e interazione su smartphone andranno applicate altre logiche di progettazione che approfondirò al prossimo articolo.

Buona progettazione a tutti!

 

 

 

Discussion

Leave a reply

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *