Come impostare il layout di un e-commerce?

Plumroots prodotti
Tempo stimato di lettura: 3 minuti, 2 secondi
127 Flares 127 Flares ×

Prima o poi ogni web designer si ritrova a dover progettare da zero il layout del suo primo e-commerce.
Prima di lanciarti a capofitto nel tuo programma di grafica preferito ed iniziare a creare bozze su bozze, vorrei fornirti alcune linee guida che ti permettano di orientarti al meglio in questo mondo e di evitare errori grossolani.

Un e-commerce ha la chiara finalità di vendere prodotti o servizi.
Come ben sappiamo, in un sito di commercio elettronico non è sufficiente che il prodotto o il servizio in questione sia di ottima qualità, ma entrano gioco altri fattori molto importanti poiché il potenziale cliente non può toccare con mano la merce, non può guardare il venditore negli occhi e vengono meno tutte quelle tecniche di vendita basate sulla gestualità e sul linguaggio del corpo che i commercianti di tutto il mondo sfruttano da secoli.

Come puoi intuire, in questo campo la qualità del sito web è di fondamentale importanza, e decreta il successo o il fallimento del negozio in questione.

Un buon layout per un e-commerce dovrebbe avrebbe avere un aspetto creativo e di grande impatto estetico, in modo da catturare l’attenzione dell’utente ed invogliarlo a proseguire nella navigazione.
Se un potenziale cliente cliente capita su e-commerce anonimo, sciatto e poco curato, non sarà invogliato a vedere cosa c’è oltre la homepage, ed andrà a cercare ciò di cui ha bisogno nel sito di un competitor.

Altro elemento fondamentale è la credibilità dell’azienda che sta dietro il sito.
Devi fare in modo che l’utente percepisca una realtà solida e affidabile dall’altra parte dello schermo, in modo che scatti il cosiddetto meccanismo della fiducia che sta alla base di ogni vendita.

Dopo aver catturato l’attenzione del potenziale cliente, ed avergli trasmesso una sensazione di fiducia nei confronti dell’azienda, sei a metà dell’opera. A questo punto non devi fare altro che prendere l’utente per mano ed accompagnarlo fino al fatidico pulsante “Acquista”.

Attenzione però, questo percorso è lastricato di trappole in cui potresti inciampare e mandare all’aria tutto il lavoro svolto finora.
Gli elementi fondamentali di un e-commerce, come il carrello o la lista dei prodotti, hanno delle posizioni ben precise, che per convenzione sono diventate di default.
Se queste posizioni vengono stravolte, l’utente sarà disorientato perché non riuscirà a trovare ciò di cui ha bisogno. Di conseguenza, con molta probabilità, abbandonerà il sito ed effettuerà l’acquisto da un competitor.

Vediamo insieme quali sono le posizioni corrette per gli elementi fondamentali di un e-commerce.

Header

Nell’header abbiamo rigorosamente il logo sulla sinistra e il carrello a destra.

Archiduchesse
Archiducesse carrello

Se presenti nel sito, i pulsanti per effettuare il login e il searchbox sono posizionati anch’essi all’interno dell’header.

Charlotterusse
Carlotterusse carrello

Plum Roots
Plumroots carrello

Menù di navigazione

In genere il menù di navigazione si trova proprio sotto l’header, e contiene tutte le voci di navigazione principali tranne la lista dei prodotti.

Plum Roots
Plumroots menu

The Greeting Farm
Thegreetingfarm menu

In alcuni casi, tra le voci di navigazione principali, può essere presente un pulsante che rimanda alla lista dei prodotti.

Whatisblik
whatisblik_menuProdotti

Mouse to Winx
MouseToMinx menu

Lista prodotti

La posizione classica per l’elenco dei prodotti è nella colonna sinistra

Plum Roots
Plumroots prodotti

Ma è possibile ottenere risultati molto efficaci e suggestivi anche ricorrendo all’uso di un megamenù, in genere posizionato appena sotto l’header

Charlotterusse
Charlotterusse megamenuProdotti

Aanthropologie
Anthropologie

In conclusione, dai pure sfogo alla tua creatività quando progetti il layout di un e-commerce. Ma non stravolgere mai il posizionamento di carrello, searchbox, pulsante login, menù di navigazione principale e lista prodotti, perché l’utente si aspetta di trovarli nelle loro posizioni di default.
Per un vezzo grafico rischieresti di far perdere molti clienti all’azienda che ti ha commissionato il lavoro.

E tu cosa ne pensi? Rispetti queste posizioni quando progetti un e-commerce?

  • Alessandro

    Articolo molto interessante ed essenziale (cosa che apprezzo molto)

  • http://twitter.com/ExplosiveLab Follow The Web

    Ciao Giovanna,
    quello che hai detto è corretto, per convertire in un ecommerce è importante avere un buon layout creativo ma che si adegui a gli standard ormai accettati dagli utenti.

    Però mi permetterei di aggiungere che hai leggermente trascurato il concetto vero e proprio di Usabilità.
    Tu parli di ‘posizioni precise’, ‘elementi fondamentali’ ma alla fine quello che conta veramente è se l’utente riesce a capire intuitivamente come interagire con il layout.
    Si dice: Il modo in cui tu completi task con un prodotto – cosa tu fai e come lui risponde – questa è l’intefaccia.
    Comunque buon articolo :)

    • http://www.facebook.com/giovanna.mastrocola Giovanna Mastrocola

      Si hai ragione, se un layout è progettato con grande cura e realizzato con maestria da un professionista molto competente, anche stravolgendo completamente la struttura “standard” di un e-commerce, l’esperienza utente sarebbe comunque serena ed intuitiva.. il potenziale cliente riuscirebbe ad orientarsi senza problemi e a navigare perfettamente il sito in lungo e in largo.

      Però, come si suol dire, per rompere le regole bisogna prima conoscerle.

      Diciamo che la “molla” per scrivere questo articolo mi è scattata dopo aver visitato alcuni e-commerce che hanno una grafica molto carina e accattivante, ma hanno gli elementi posizionati un po’ a casaccio.
      Ho avuto difficoltà io a capire dove trovare il carrello o dove era nascosta la lista dei prodotti.. di conseguenza immagino che utOntO non riesca a venirne a capo e abbandoni il sito dopo pochi minuti.

    • Simone Cociancich

      Credo che l’intuitività “spaziale” e l’intuitività “procedurale” stiano su due piani paralleli ma distinti. Prima cosa: fai trovare gli elementi dell’interfaccia DOVE l’utente se li aspetta; seconda cosa: fai comportare questi elementi COME l’utente si aspetta.

127 Flares Twitter 32 Facebook 42 Google+ 39 LinkedIn 13 Pin It Share 1 127 Flares ×
Leggi altro:
Immagine tratta da http://it.depositphotos.com
A ognuno il suo Pantone: scegli il tuo

Il colore é da sempre presente nella nostra vita, Pantone lo sa bene. Tu quale colore vorresti?

Chiudi