Grafica ecommerce: come migliorarla in 10 step con una UI designer

Abbiamo ricevuto un po’ di segnalazioni dai clienti e vorrei migliorare la grafica dell’ecommerce, ci sono alcune cose che non funzionano.

Vediamo nel concreto e nella realtà di tutti i giorni cosa comporta l’esigenza di migliorare un ecommerce esistente e quali sono le fasi di lavoro di una UI Designer per poter fornire una grafica ecommerce che funziona. Perché sia che tu abbia una piccola o una grande azienda devi prenderti cura del design del tuo ecommerce, se vuoi che questo canale ti porti a raggiungere i tuoi obiettivi.

La progettazione di una buona UI (user interface, tradotto: interfaccia grafica) è la base di partenza per avere un ecommerce usabile e piacevole per l’esperienza utente. Per arrivare a questo obiettivo, però, serve metodo ed esperienza. 

Una grafica ecommerce che funziona contribuisce a dare un boost alle tue conversioni. 

Il perché è semplice: navigare un design che non crea frizioni ma risulta ordinato e gradevole, segue gli standard di usabilità e guida la persona a compiere delle azioni senza sforzo, rendendo piacevole l’esperienza sul tuo ecommerce. E, fidati, le persone se lo ricorderanno e torneranno ad acquistare da te.

Indice dei contenuti

Quanto tempo serve per creare l’interfaccia grafica di un ecommerce? 

Quando si inizia una collaborazione, che sia con un’agenzia o con un/a freelance, abbiamo sempre delle tempistiche da rispettare. E, spoiler, raramente sono ben distribuite nel tempo. 

Molti committenti propongono spesso una timeline molto corta per visionare le prime bozze, in realtà il visual è tra gli ultimi step del mio flusso. Mi serve quindi più tempo nella fase iniziale dei progetti.

Partiamo dal presupposto che ogni progetto è un caso a sé perché può essere più o meno corposo, coinvolgere pochi o tanti stakeholder, e così via. 
Ecco perché ho fatto una media degli ultimi anni e penso che la checklist che descrivo in questo articolo possa dare un’idea dei passi che seguo per disegnare l’interfaccia di un ecommerce. 

E alla fine di questa lunga lista cercherò di darti delle tempistiche di realizzazione che potrai usare come riferimento. 

Gli step per ottenere una grafica ecommerce che funziona

Quando devo mettere mano (e testa) a richieste di restyling di ecommerce seguo questi 10 step, che sono frutto dell’esperienza di 10 anni di lavoro. 

Condivido con te quali sono i passi essenziali per produrre un design progettato sulla tua clientela ideale. Un design che accompagnerà le persone in modo gentile verso l’acquisto dei tuoi prodotti o servizi. 

Iniziamo!

1. Studio la concorrenza per individuare punti di forza e di debolezza

Ebbene sì, lo ammetto: prima ancora di vedere cosa fate guardo la vostra concorrenza. Confesso che non sempre questo è il primo passo. A volte è il secondo, ovvero prende il posto dello Studio del Brand, dipende sempre dal tipo di lavoro. Tuttavia in questi anni mi sono accorta che andando ad analizzare prima i competitor e poi il brand riesco a individuare meglio i punti di forza e di debolezza, e trovo anche spunti utili da altri imprenditori e imprenditrici del vostro settore.

2. Studio il brand per individuare la proposta di valore

Dopo aver fatto una panoramica della concorrenza mi concentro sul brand.
Cosa mi interessa? Tutto. 

Dal logo, ai font usati, alle immagini, al tone of voice, ai prodotti. E soprattutto la coerenza della vostra immagine e il tono di voce negli strumenti utilizzati: cartaceo, campagne marketing, ecommerce, pagine istituzionali.
Questa analisi mi permette di entrare nel vostro mood e individuare la vostra proposta di valore sul mercato. 

3. Analizzo i dati per conoscere la clientela ideale

La lettura dei dati è molto importante, perché mi permette di fare delle scelte nella UI centrate sulle persone che visiteranno l’ecommerce. Questo punto varia in funzione del cliente che ho davanti e, se non hai un ecommerce, questa checklist non fa (ancora) al caso tuo 🙂 .

Prendendo in considerazione un ecommerce esistente, a volte l’azienda è già strutturata e c’è chi ha già raccolto dati utili per individuare le persone ideali a cui è rivolto il prodotto o servizio. Altre volte questo aspetto è trascurato e devo fare un po’ di ricerca. La partenza è sicuramente Google Analytics, ma se vorrete condividere con me anche altri dati sarò ben felice di analizzarli e interpretarli.

4. Raccolgo e studio la comunicazione dell’azienda

Una volta che ho capito cosa fate, come lo fate e quali sono le persone a cui vi rivolgete faccio una bella cartella dove raccolgo tutto il materiale della vostra comunicazione: brochure, logo, foto utilizzate, immagini recuperate nei vari social, cataloghi, video. 

Da una panoramica di quello che ho raccolto riesco a capire il visual che lega tutta la comunicazione per poter progettare  una UI coerente. 

A volte succede che l’azienda non ha guide sull’uso del logo e dei colori, né una palette o un archivio di foto. In questo caso raccolgo immagini da foto stock e creo una board visiva per comprendere che stile dare alle parti istituzionali e richiamarlo anche nell’interfaccia grafica.

5. Faccio il test della coerenza tra le personas e la comunicazione

Bene, sono in possesso del materiale visivo e dei dati che mi avete condiviso. 
Ottimo, ora posso iniziare a disegnare. No, non posso ancora iniziare a disegnare. 

Prima mi serve prima un po’ di tempo per elaborare queste informazioni e per capire se quello che vedo è coerente con le persone a cui rivolgete il vostro prodotto. 
Da qui raccolgo un po’ di input e li tengo lì come un “diario delle informazioni” da usare nella progettazione.

Facciamo un esempio, così da rendere più chiaro questo step. 

Poniamo il caso che le personas individuate sono over 40 e la navigazione su Google Analytics mi indica che gli accessi sono all’80% su smartphone. Tenderò a usare colori meno saturi e a dare una rilevanza maggiore al design per smartphone e mobile.

6. Ci confrontiamo sul materiale che ho raccolto

Prima di mettere mano alla fase operativa facciamo una bella chiacchierata durante la quale rivediamo insieme il materiale raccolto finora.

Questo step è cruciale per iniziare al meglio le fasi successive. 

7. Wireframe: definiamo posizioni e contenuti, per mobile e desktop

In questa fase disegno una griglia che rappresenta lo scheletro delle pagine. Non ci sono ancora elementi di design e sai perché? Perché stiamo creando la struttura, decidiamo le posizioni e i contenuti. 

Da qualche device parto? Dipende. 

Molte persone con cui ho lavorato non hanno ancora una mindset pronta ad accogliere a dare precedenza al mobile, anche se è quello che gran parte dei motori di ricerca fa/richiede. 

Per cui quando i tempi sono molto stretti e la persona con cui lavoro vuole vedere qualcosa per poter iniziare un primo giro di bozze progetto prima per il desktop ma nella mia mente il design è già in ottica anche per smartphone. Quando invece i tempi sono rilassati, più o meno il 90% delle volte, preparo entrambi i design già al primo giro di bozze.

8. Condivisione Wireframe per specifiche design

É arrivato il momento di condividere i wireframe che ho realizzato. 
Per fare questo possiamo utilizzare diversi strumenti online, in genere prediligo Invision. 
In questa fase mi confronto con il team per stabilire:

• la struttura
• la posizione degli elementi e il loro peso
• il flusso di navigazione delle pagine 

Senza neanche un pizzico di design. 

Tuttavia a volte questa fase non rientra negli step del progetto perché alcune aziende hanno più facilità a prendere visione della struttura con un design definito. Oppure il sito esiste già e l’obiettivo è dare solo una “rinfrescata” ragionando su un cambio di layout.
Infine, quando non c’è molto budget, questo step viene completamente saltato. 
So cosa stai pensando, in un mondo perfetto ti direi che non si dovrebbe fare.
Ma nella vita reale bisogna essere degli UI Designer abbastanza bravi/e da poter bypassare questo punto sopperendo con una buona interpretazione dei bisogni del cliente e degli utenti.

9. Mockup: disegno la nuova interfaccia grafica per l’ecommerce

Eccoci, finalmente!

Una volta stabilito lo scheletro e definiti i flussi di navigazione inizio a disegnare l’interfaccia grafica dell’ecommerce.
Riprendo tutte le informazioni raccolte nei primi step e le trasformo.
Per quel che mi riguarda la parte difficile del lavoro sta proprio nel primo giro di bozze. Smarcata quella, diventa tutto più fluido.

Tendenzialmente ci si aspetta che inizi dalla home page. Dipende. 
C’è però una costante in tutte le casistiche.
Inizio sempre da header e footer, nella versione desktop e mobile. 
Da lì passo al menu di navigazione e poi al contenuto. 

In genere inizio condividendo 2 o 3 pagine principali: prodotto, categoria, home page. Ci prendiamo un po’ di tempo e ne discutiamo. Solo dopo la raccolta di tutti i feedback produco l’interfaccia per le altre pagine concordate e creo una UI Guide da condividere con il team interno ed esterno (ad esempio chi si occupa del marketing).

10. La grafica e i flussi sono stati validati. E ora?

Potresti pensare che il mio lavoro è terminato.
E invece inizia un’altra fase, sulla quale non mi dilungherò in questo articolo. Si tratta della condivisione della grafica al team di sviluppo. 

Investite qualche ora in più ma fate sempre in modo che le persone che si occupano del design  e  quelle che sviluppano si parlino.
Io lo faccio prima, durante e dopo. Ma ho la fortuna di avere un team interno presso l’agenzia per cui principalmente lavoro.
Fatelo anche voi: allocate delle ore in più sul progetto e fate in modo che il team non lavori a compartimenti stagni.
Vi assicuro che il risultato sull’ecommerce si noterà!

Quanto tempo serve per avere la nuova interfaccia grafica ecommerce?

Bella domanda. Seguendo tutti gli step elencati in questo articolo parliamo di una media di 20/25 giorni di lavoro. In tempi aziendali si traduce in circa 3 mesi, considerando tutti i passaggi, riunioni, tempi di risposta. Ma queste tempistiche non sono scolpite nella pietra e ti spiego perché.