E commerce design: come farlo con successo




L’e commerce design è il punto di partenza per la creazione di un sito ecommerce. Si tratta di un insieme di diversi fattori che permettono di rendere il design dell’ecommerce in linea con il brand e i prodotti venduti.

D’altronde si sa, per creare un ecommerce sono necessarie diverse competenze e l’e commerce design è solo una di queste. Le altre attività da svolgere riguardano il digital marketing, che comprende la SEO, ovvero l’ottimizzazione del sito per i motori di ricerca, la SEM, ovvero le sponsorizzazioni a pagamento, e lo sviluppo tecnico.

In questa guida andiamo a parlare esclusivamente dell’e commerce design, scoprendo come è possibile eseguirlo con successo seguendo i passi necessari per progettare al meglio il design di un ecommerce.

Che cos’è l’e commerce design

Che cos'è l'e commerce design

Prima di entrare nel dettaglio del processo vero e proprio del design di un ecommerce, andiamo a capire che cos’è e a che cosa serve.

Quando pensiamo al design di un sito ecommerce, probabilmente la prima cosa che ci viene in mente è la grafica, composta dalle immagini, dai colori, dal carattere dei testi e dal logo. Senza dubbio si tratta di elementi che fanno parte del design, ma non sono gli unici.

Il design si espande molto di più, di fatto comprende anche l’esperienza utente e il branding. In questo caso non si tratta di branding vero e proprio, – come ad esempio la creazione di un logo – ma si tratta di impostare l’e commerce design in modo tale che comunichi i giusti valori relativi al marchio e ai prodotti.

L’esperienza utente – come suggerisce il nome – è quell’attività che studia e imposta il design in modo tale che sia ottimizzato per gli utenti e per la navigazione. Si tratta infatti di un punto fondamentale, senza il quale si rischierebbe di avere un design a metà.

Quali sono le attività dell’e commerce design

Quali sono le attività dell'e commerce design

Come scritto sopra, le attività del design sono diverse e si completano l’un l’altra. Le attività devono essere svolte seguendo un determinato ordine, altrimenti si rischierebbe di incappare in grossi problemi che porterebbero a una perdita di tempo e di denaro.

Entrando nello specifico, le attività che devono essere svolte per fare design con successo sono:

  • Analisi del brand e dei prodotti;
  • Identificazione della comunicazione che il design deve avere;
  • Creazione dell’alberatura del sito;
  • Scelta della palette colori e dei font;
  • Ideazione della struttura delle pagine;
  • Creazione di un mockup del sito;
  • Ottimizzazione dell’esperienza utente.

Ognuna di queste attività deve essere svolta nel modo corretto, seguendo l’ordine indicato qui sopra. Il mancato o errato svolgimento di una di queste attività può portare ad una perdita di tempo, risorse e denaro, causando ritardi nella definizione del design e quindi nello sviluppo del sito ecommerce.

Proseguendo in questa guida analizzeremo tutte le attività appena indicate vedendo come svolgere al meglio e come fare e commerce design con successo.

Analisi del brand e dei prodotti

Analisi del brand e dei prodotti

L’analisi è il primo passo per stabilire determinate caratteristiche per il design. Si tratta di un’attività molto importante da non sottovalutare, che deve essere svolta nel migliore dei modi, dato che questa fase sarà necessaria per lo svolgimento di quelle successive.

Analizzare il brand e i prodotti significa porsi determinate domande riguardanti l’azienda che vuole creare un ecommerce e vendere prodotti online.

La risposta a queste domande permetterà di fare luce a importanti fattori che determinaneranno lo svolgimento delle altre attività.

Che cosa vuol dire analizzare un brand?

Un brand non è composto solamente da un logo, un nome e dei colori, si tratta di molto di più.

Il brand è ciò che ricordiamo quando pensiamo a una determinata azienda:

  • Il mercato di riferimento;
  • Le caratteristiche che descrivono l’azienda in questione;
  • Le caratteristiche relative ai prodotti.

Un brand vale sia online che offline, quindi le sue caratteristiche e il suo mercato di riferimento possono essere già state definite nel caso in cui esista già da tempo, anche se non ha mai svolto un’attività online.

Il mercato di riferimento si tratta semplicemente – come dice il nome – della tipologia di mercato su cui vengono venduti i prodotti e su cui si posiziona l’azienda.

Chiedendosi qual’è il mercato di riferimento è possibile individuare delle importanti caratteristiche come il pubblico a cui vengono venduti i prodotti, aziende e privati e a quale mercato l’azienda si riferisce:

  • Livello economico: prodotti economici;
  • Livello medio: prodotti di prezzo medio;
  • Livello alto: prodotti di lusso e di prezzo alto.

Le caratteristiche che descrivono l’azienda devono essere individuate basandosi dal mercato di riferimento. Infatti un’azienda può essere caratterizzata per un mercato economico, di medio livello o di livello alto e lussuoso.

Infine, le caratteristiche relative ai prodotti riguardano sempre il loro prezzo e il loro packaging, che definiscono la posizione sui tre livello scritti sopra.

Tutti e tre i valori analizzati devono ovviamente coincidere, ciò significa quindi che un’azienda non può riferirsi ad un mercato economico con prezzi economici presentandosi però come lussuosa.

Una discrepanza di questo genere all’interno dell’e commerce design porterebbe ad una totale confusione gli utenti che navigano il sito, facendoli molto probabilmente abbandonarlo.

Identificare la comunicazione del design

Identificare al acomunicazione del design

Avendo analizzato il brand e i prodotti che vuole vendere online, è possibile procedere allo step successivo, identificando la comunicazione da adottare nell’e commerce design.

I punti analizzati e definiti in precedenza svolgo un ruolo chiave in questa attività, infatti permettono di identificare la giusta comunicazione che l’ecommerce deve utilizzare.

Supponiamo che la tua azienda voglia vendere prodotti online e abbiate deciso di creare un ecommerce. State leggendo questa guida e sapete che il vostro mercato di riferimento è di medio livello e vendete ai privati, la vostra azienda si posiziona come media qualità e i vostri prodotti presentano dei prezzi nella media e un packaging strutturato per il mercato di medio livello.

Avendo a disposizione questi dati è possibile identificare la comunicazione che il vostro ecommerce deve avere: si tratta di un ecommerce con stile informale, che da abbastanza – ma non troppa – attenzione ai prodotti in offerta e che descrive la loro qualità e le loro caratteristiche.

Creazione dell’alberatura del sito

Creazione dell'alberatura del sito

Successivamente è possibile procedere alla creazione dell’alberatura del sito per l’e commerce design.

L’alberatura del sito non è altro che la definizione e l’organizzazione delle pagine del sito ecommerce.

In base alle informazioni scaturite dalle attività precedenti, è ora possibile definire le pagine da inserire all’interno del sito ecommerce. Solitamente un ecommerce è formato da:

  • Home Page;
  • Pagina istituzionale;
  • Pagina prodotti con relative categorie se presenti;
  • Blog;
  • Contatti;
  • Altre pagine come termini e condizioni, privacy policy ecc…

Attraverso la definizione della comunicazione è possibile scegliere quali e quante pagine inserire per raccontare o meno i propri prodotti, aggiungendo ad esempio una pagina che riguarda la storia dei prodotti, gli ingredienti dei prodotti e la qualità degli ingredienti dei prodotti.

Scelta della palette colori e dei font

Scelta della palette colori e dei font

I colori e i font sono un elemento comunicativo molto forte, che può essere integrato all’utilizzo delle immagini.

Esistono colori standard che vengono associati automaticamente a determinate cose, ma solitamente quando un brand è già stato definito è bene utilizzare i colori presenti nel logo per l’e commerce design.

I colori – oppure il colore se presente solo uno – devono essere ripetuti all’interno del design in modo uniforme, utilizzandoli ad esempio sui link nelle voci menu, sui bottoni e su elementi stilistici. I colori utilizzati all’interno dell’e commerce design e quindi visualizzati successivamente sull’ecommerce devono richiamare i valori e la personalità del brand.

I font devono essere selezionati sempre in base alla comunicazione definita per il design, dato che determinati font comunicano in modo diverso rispetto ad altri.
Per fare qualche esempio, le aziende che vendono prodotti economici utilizzando font in grassetto con lettere maiuscole, mentre le aziende che vendono prodotti di alta gamma utilizzano font eleganti, sottili e con lettere ben distanziate tra di loro.

Ideazione della struttura delle pagine

Ideazione della struttura delle pagine

Sempre attraverso i parametri derivanti dalle attività svolte in precedenza, è possibile ideare la struttura delle pagine per procedere con l’e commerce design.

La struttura delle pagine dovrà rispecchiare le caratteristiche e la personalità dell’azienda, insieme alle caratteristiche dei prodotti.

Prendendo sempre l’esempio di un’azienda che vende prodotti economici, lo stile delle pagine presenterà una struttura molto basica, con diversi colori, titoli grandi e in grassetto e immagini grandi.

Usufruendo di carta e penna, oppure di un programma professionale come Adobe XD oppure Sketch, è possibile iniziare ad ideare dei wireframe per le varie pagine del sito ecommerce.

Che cos’è un wireframe? Un wireframe è uno “scheletro” della pagina che deve essere progettata. Non presenta quindi degli elementi grafici, dei testi, o delle immagini, ma si limita a presentare la struttura delle pagine attraverso dei blocchi.

I wireframe delle varie pagine sono di fondamentale importanza per la progettazione corretta del design di un ecommerce.

Infatti i wireframe permettono di definire subito la struttura delle pagine che comporranno il sito. La struttura permette successivamente di procedere con il design, andando a creare un mockup o un prototipo interattivo del sito ecommerce.

Il wireframe si limita quindi a presentare l’organizzazione delle pagine e la loro struttura, definendo quali elementi devono contenere e come devono essere disposti.

Gli elementi che possono essere inclusi nelle pagine sono diversi:

  • Slider o caroselli;
  • Immagini;
  • Titoli e testi;
  • Elementi grafici;
  • Pulsanti e call to action;
  • Moduli di contatto o di iscrizione;
  • Menu di navigazione;
  • Righe e colonne.

Tutti questi elementi devono essere presenti all’interno delle pagine con del significato. Infatti gli elementi all’interno delle pagine devono seguire una certa gerarchia.

Prendendo come esempio la struttura dell’home page, potrebbe presentare come primo elemento la testata di pagina con il logo del sito ecommerce e il menu di navigazione. Ovviamente la testa sarà uguale per tutte le pagine.

Successivamente potrebbe presentare uno slider di immagini a piena larghezza dello schermo. In questo modo è possibile introdurre ai prodotti che vengono venduti sull’ecommerce.

Dopo lo slider potrebbe presentare una sezione introduttiva alla pagina “chi siamo”, organizzata con una riga suddivisa in due colonne. Nella colonna di sinistra può essere presente un’immagine e in quella di destra del testo, oppure viceversa.

Continuando può essere presente una griglia da 3 o 4 colonne che mostra i prodotti acquistabili.

Andando avanti di questo passo è possibile completare la struttura dell’home page e delle altre pagine.

È importante ribadire che in questa fase si indicano solamente gli elementi che dovranno essere presenti all’interno delle pagine, senza inserire tutti i relativi contenuti, le relative immagini e i relativi testi. Bisogna solamente sapere come organizzarli.

La strutturazione delle pagina dipende dai passaggi scritti sopra e svolti in precedenza, infatti potrebbe tranquillamente variare da quella indicata qui sopra come esempio.

Creazione di un mockup del sito

Creazione di un mockup del sito

Il passo successivo all’ideazione della struttura delle pagine è la creazione del mockup del sito ecommerce.
Al contrario del wireframe e della sola struttura, il mockup presenta tutti gli elementi che sono stati definiti nel passo precedente. Quindi include i testi, le immagini, i colori, gli stili dei caratteri, i pulsanti, i form ecc…

Il mockup serve per dare una forma e uno stile effettivo al sito ecommerce. Infatti ora l’ecommerce inizia a prendere vita.

Attraverso il mockup è possibile quindi definire l’aspetto grafico, unire i vari colori, comporre effettivamente le varie pagine.

Il mockup è necessario per avere una linea guida da utilizzare durante lo sviluppo vero e proprio del sito ecommerce. Senza un mockup lo sviluppatore non può basarsi solamente sui wireframe e sulla sua immaginazione per creare la grafica del sito ecommerce.

Si tratta quindi di un elemento fondamentale da mantenere nell’e commerce design.

Dopo aver disegnato un mockup del sito ecommerce, con tutti i relativi stili e tutti gli elementi, è possibile procedere all’ottimizzazione dell’esperienza utente.

Ottimizzazione dell’esperienza utente

Ottimizzazione dell'esperienza utente

L’esperienza utente è fondamentale per ottimizzare la navigazione e l’utilizzo del sito ecommerce. Si tratta dell’ultima parte che viene svolta durante il processo di e commerce design, ma ciò non significa che sia la meno importante.

Una corretta esperienza utente permette all’utente di navigare con semplicità il sito ecommerce e di condurlo a determinate azioni che possono convertirlo in potenziale cliente oppure cliente.

Questa pratica si basa sull’usabilità del sito e si integra con l’attività di ideazione del mockup.

Durante l’ideazione del mockup è possibile definire una serie di elementi che possono migliorare l’esperienza utente. Un esempio banale è l’integrazione di una barra di ricerca sempre in vista – ad esempio a fianco del menu principale di navigazione – che permette all’utente di ricercare un determinato prodotto senza il bisogno di navigare l’intero sito.

Questo è un ottimo esempio di miglioramento dell’esperienza utente, ma non è il solo. Includere lo “sticky menu”, ovvero la testata con il menu principale sempre fissa in alto durante la navigazione e lo scroll della pagina, è fondamentale per permettere all’utente di navigare il sito in qualsiasi pagina o a qualsiasi altezza della pagina si trovi.

Così come includere i menu con informazioni secondarie nel pié di pagina, insieme ad un pulsante sempre visibile nel lato destro che al click permette all’utente di tornare all’inizio della pagina, sono ottime pratiche per migliorare l’esperienza utente.

Questa attività non si limita solamente ai menu, alla barra di ricerca e ai pulsanti “torna su”, ma si espande anche alla navigazione.

Infatti buona prassi è far capire all’utente in quale pagina si trova e da dove proviene. Solitamente questa pratica si svolge inserendo sotto il menu o sotto il titolo principale della pagina il cosiddetto breadcrumb.

Il breadcrumb non è altro che una serie di link che presentano le voci di navigazione fino a quella determinata pagina. Un esempio vale più di mille parole.

Poniamo il caso che l’utente si trovi nella pagina di prodotto singolo e che per arrivarci è passato dalla pagina generale dei prodotti, è entrato nella pagina della relativa categoria per poi entrare nel prodotto singolo.

In questo caso il breadcrumb sarà strutturato in questo modo: Home > Prodotti > Categoria prodotto > Nome del prodotto. Le voci saranno cliccabili per tornare alla pagina precedente.

L’ottimizzazione dell’esperienza utente è un’attività fondamentale che permette di ottenere un e commerce design di successo.

E commerce design: un caso di successo

Analizzare un caso di successo è fondamentale per fare e commerce design nel migliore dei modi.

Analizziamo un sito ecommerce di un brand famoso e controlliamo come sono stati eseguiti i passaggi che sono stati scritti sopra.

Nike

È uno dei brand più famosi nel mondo dell’abbigliamento e delle calzature.

Analisi del brand e dei prodotti

Nike è un brand incentrato sullo sport, che offre scarpe da ginnastica e abbigliamento sportivo. I loro prodotti hanno un prezzo nella media per la categoria.

Il loro slogan è di tipo imperativo: Just do it.

Identificazione della comunicazione e del design

Aprendo il sito ecommerce Nike è possibile notare lo stile comunicativo che viene utilizzato insieme al design.

I colori utilizzati sono pochi: bianco e nero. I titoli sono neri e in grassetto e insieme ai testi utilizzano un font senza grazie. Le immagini sono in primo piano e vengono utilizzate spesso.

I pochi colori e la basilarità del layout portando alla considerazione di una comunicazione e di un design inerenti a prodotti di alta gamma. Tuttavia se aggiungiamo l’utilizzo ricorrente di immagini enormi e di titoli molto grossi e senza grazie, allora riconsideriamo la comunicazione e il design, associandoli effettivamente a quelli di un prodotto e un mercato di medio livello, così come lo comunicano anche i prezzi nella media.

Alberatura del sito

Il sito ecommerce Nike è ricco di pagine, di categorie e di prodotti. I prodotti sono organizzati tutti tramite varie categorie e sottocategorie.

Non mancano comunque le pagine istituzionali che si possono trovare nel pié di pagina.

Struttura delle pagine ed esperienza utente

Le pagine sono strutturate con un layout molto basilare formato da righe e da colonne, immagini grandi e testi.

In alto nel menu è presente una barra di ricerca insieme all’icona del carrello e della lista prodotti preferiti.

Il menu principale resta sempre fisso in alto durante la navigazione e lo scorrimento delle pagine. Nel piè di pagine sono presenti altri menu secondari.

All’interno delle pagine categoria è possibile capire subito in quale ci si trova grazie al titolo principale, quanti prodotti sono presenti all’interno. È possibile inoltre filtrare i prodotti e ordinarli sotto determinati criteri.

E commerce design: conclusione

Fare e commerce design con successo è un punto fondamentale per creare un ecommerce di successo.

Il design è solamente uno dei tasselli per la creazione di un ecommerce. In questa guida è spiegato come farlo con successo e in altri articoli è spiegato come creare un ecommerce, fare strategie seo, fare email marketing e tanto altro ancora.

L’ecommerce è un mondo in continua evoluzione e in questi tempi occorre più che mai rimanere aggiornati sempre sulle ultime novità del settore, in modo da non rimanere mai indietro.

Creare un ecommerce non è un gioco da ragazzi come può sembrare. Le attività da svolgere sono di vario tipo e devono essere tutte quante svolte nel migliore dei modi. Farsi seguire da un’agenzia o da dei professionisti è la via migliore per creare un ecommerce di successo.


Condividi l'articolo:



Chi sono


Edoardo Valenza

Edoardo Valenza

Appassionato fin da sempre del mondo web mi sono specializzato nella creazione di siti ecommerce, creazione di siti web e in strategie di digital marketing.

BigCommerce: come funziona e quali sono i costi


Una delle piattaforme di e-commerce più amate nel mondo è sicuramente BigCommerce, che negli ultimi mesi ha raggiunto la cifra record di 95mila siti che utilizzano le sue funzionalità. Ma perché è così apprezzata e quali sono le caratteristiche del suo funzionamento? Ecco tutto quello che c’è da sapere prima di sceglierla. Che cos’è BigCommerce…


LEGGI

Altri articoli





BigCommerce: come funziona e quali sono i costi


Una delle piattaforme di e-commerce più amate nel mondo è sicuramente BigCommerce, che negli ultimi…


LEGGI


Quanto costa vendere online


Chi decide di intraprendere l’attività di vendita online, partendo da zero oppure affiancando questa soluzione…


LEGGI


E-commerce: vantaggi e svantaggi


Sbarcare nel mercato digitale e iniziare a vendere online sembra la sola soluzione per tutti…


LEGGI