Nuovo look per e-commerce: consigli e spunti per un restyling efficace

Oggi vorrei proporre ai navigatori una riflessione sugli e-commerce.

Gli utenti su Internet stanno diventando sempre più esigenti: per acquisire nuovi clienti che, ricordiamolo, non sanno chi siamo, è fondamentale la facilità con cui si reperiscono informazioni su prodotti che si stanno cercando.

Il web offre una sola possibilità di giudizio pertanto non sprechiamola!

In questo articolo prenderò come esempio l’analisi del restyling di due e-commerce di piante evidenziando punti forza e lacune migliorabili.

È primavera ed è tempo di curare orti, giardini e vasi in fiore.

Negli ultimi anni ho acquisito un buon pollice verde ed ho fatto diversi esperimenti in vaso con piantine aromatiche, piante grasse e d’appartamento.

Ho provato a coltivare il mio piccolo orticino in vaso per la prima volta l’anno scorso e da allora ho cercato su internet notizie, corsi, eventi e possibilità di acquistare online piante che avrei voluto.

Cosa vorrei trovare in un sito?

Sono un utente piuttosto esigente, sia come navigatrice che come amante delle piante.

Mi leggesse mai un mio caro compagno di corso di Laurea, la cui Botanica era il suo pane mentre per me era perdita di tempo ed energia, chissà quante risate si farebbe: proprio io che facevo morire persino le piante grasse! Altro che pollice verde!

Ma con il tempo ho imparato ad apprezzare l’avere piante in casa e la coltivazione in vaso di piante aromatiche.

Ho cercato alcuni siti che potessero fare al caso mio e ho analizzato la loro facilità di navigazione e la loro affidabilità.

Adoro le foto delle varie specie di piante, magari accompagnate da una classificazione più dettagliata: Specie > Genere > Famiglia > Ordine > Classe > Phylum.

Esempio:

  • Divisione: Gymnospermae
  • Classe: Pinopsida o Coniferopsida
  • Ordine: Pinales
  • Famiglia: Pinaceae
  • Genere: Pinus
  • Specie: pinea

In alternativa, la nomenclatura binomiale (Pinus pinea) della specie e il nome comune della pianta (Pino domestico), e in seguito altri dettagli più o meno essenziali quali:

  • Prezzo
  • Grandezza della pianta venduta, in cm, e sua capacità di crescita
  • Corretta ambientazione: umidità, soleggiatura diretta/non diretta
  • Consigli sulla coltivazione, travaso, potature e quant’altro
  • Classificazione erboristica: erba medica/erba non medica
  • Periodo di fioritura
  • Assistenza

Verdefacile

verdefacile1
Mi imbatto in questo sito di e-commerce per piante dentro cui trovo un menù, a sinistra, abbastanza esaustivo sulle categorie di piante nel negozio virtuale: la difficoltà è nel poco contrasto della voce scelta rispetto alle altre presenti.

sx-menu

Il primo impatto è la presenza del troppo verde, come colore, che stanca molto dopo un certo tempo di navigazione.

Le informazioni del sito son disposte chiaramente e la presentazione concisa.

Scelte alcune piante, ho provato a registrarmi e ho avuto facilità di immissione dati, ma opterei per cambiare decisamente lo sfondo del form ottimizzando i messaggi di errore magari di colore rosso, assenti nella stessa pagina e nella visibilità degli stessi.

I riquadri dell’inserimento dati son di colore verde come anche il testo che vi si può scrivere all’interno: possono confondere l’utente nel verificare i dati corretti inseriti.

I riquadri così ravvicinati e con titoli piccoli possono essere difficoltosi nella loro visibilità e compilazione.

form-verdefacile

Gli errori di compilazione non sono presenti vicino ai campi di immissione, ma si presentano in un’altra pagina: fuorviante e tedioso per l’utente che deve tornare indietro a ricompilare il campo mancante perché non segnalato.

La parte finale del form presenta sulla destra della tabella il testo della privacy praticamente invisibile  in quanto il testo, verde quasi fosforescente, è poco in contrasto con lo sfondo grigio.

privacy

Stesso problema di visualizzazione testo/sfondo l’ho riscontrato nella scelta e comparazione di altri prodotti all’interno del sito.

verdefacile2
Per ovviare alla problematica di sfondi consoni al colore del testo, trovo utile scaricare questo programmino gratuito, per Windows e Mac, che analizza il giusto contrasto.

maccontrasto

Il verde, come colore scelto ovunque, confonde anche sulla scelta del prodotto da inserire nel carrello, quasi invisibile nel contesto:

verdefacile3

ok_pianta.pngMi piace

  • Contenuti essenziali
  • Sufficiente presentazione delle caratteristiche delle piante
  • Chiaro nei contenuti
  • Chiarezza sulle spedizioni, condizioni di vendita e pagamenti
  • Privacy presente in una pagina, ma migliorabile
  • Velocità di caricamento accettabile

no_pianta.pngDa rivedere

  • Lo stile grafico e strutturale è sorpassato: opterei per il responsive
  • Testo troppo piccolo e di un colore troppo chiaro, quindi di difficile lettura
  • Assenza di messaggi d’errore nella stessa pagina del form
  • Poco visibili le briciole di pane e titoli di pagine assenti
  • Troppe tabelle e bordi: distolgono l’attenzione dell’utente
  • Call to action carente

Bakker

Un altro sito e-commerce per la vendita di piante è il seguente.

bakker

Ciascun prodotto è ben presentato e con differenti colori e dimensioni del testo.

Ben visibili il nome della pianta, col titolo, comune, il sottotitolo, specie, e il paragrafo con i dettagli. La rappresentazione del mese di fioritura con le caratteristiche, riquadrate, sono visivamente piacevoli.

Il colore arancione del carrello attira il navigatore sull’acquisto.

L’unica pecca di questa schermata, a mio avviso, sono i social button troppo piccoli.

orchidea

Il form di compilazione ordini segue bene gli step che si presentano nella parte superiore della pagina, contrassegnati con numeri e sfondi differenti a seconda di dove ci si trova.

Il pagamento risulta facile e la scelta del metodo intuitiva.

pagamento

Il prodotto in omaggio è ben visibile, con un colore diverso dal contesto.

Molti, su internet, pagano tramite Carta di Credito e aggiungere alla scelta di questa modalità la schermata di cui sotto, è certamente di aiuto ai meno esperti degli acquisti on-line:

carta

ok_pianta.pngMi piace

  • Grafica piacevole, ma renderei più pastello i colori e il design più moderno
  • Buona la presentazione delle caratteristiche delle piante
  • Chiaro nei contenuti
  • Carrello chiaro, ben riquadrato e dettagliato: lo migliorerei inserendo solo un “+” davanti al prezzo della spedizione, per meglio giustificare il totale acquisti
  • Velocità di caricamento accettabile, ma ottimizzabile

no_pianta.pngDa rivedere

  • Testo piccolo
  • Messaggi d’errore nella form migliorabili
  • Poco visibile la selezione di voce di menù a sinistra
  • La sezione contatti è poco visibile: inserirei un riquadro in homepage, in alto, con numero di telefono e email

Consigli

  • Il successo di un e-commerce è nella semplicità di presentare prodotti e informazioni: il design deve rispecchiare il brand e la facilità di navigazione intuitiva
  • Aggiornare frequentemente il negozio on-line: inserire offerte, curare i nuovi arrivi, contribuire a inserire corsi o video su consigli. Questo aumenterà la brand reputation
  • Dove possibile, diminuire i campi di compilazione form: aiuteranno a non perdere clienti impazienti
  • Quando possibile, inserire una chat per assistenza a domande immediate: il potenziale cliente si sentirà più “ascoltato” e avrà più fiducia
  • Inserire la possibilità di lasciare commenti sugli acquisti: aiuterà il cliente a sentirsi parte del negozio e sarà più volenteroso nel dire la sua
  • Aumentare la possibilità di potervi contattare: rendere visibile un numero di telefono al quale rivolgersi in ogni pagina del sito ed inserire un contatto Skype
  • Interagire con i navigatori web: creare pagine social dentro cui, giornalmente, inserire consigli sulla potatura, semina, nuovi arrivi e quant’altro riguardi l’e-commerce. Creare fiducia vuol dire attirare nuovi acquirenti.

E tu? Come hai creato i tuoi e-commerce? Vuoi raccontarcelo?

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: ,

L'autore

Monica è consulente Web e SEO. Tra i prodotti Adobe quelli che predilige sono Photoshop, Illustrator ed InDesign. Tra un cartaceo ed un e-book è pronta a divorare libri su libri. Perché, in fondo, nel mestiere del web non ci si può mai definire dei grandi esperti: bisogna esser sempre pronti ad imparare e ad aggiornarsi.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

27 commenti

  1. Fausto
  2. Matteo
    • Foto per e-commerce FXE
    • Annalisa
  3. Marco

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo

Lascia un Commento

Current day month ye@r *