Grafica e e-commerce: quando l’abito fa il monaco sul web

Grafica e e-commerce: quando l’abito fa il monaco sul web La grafica può determinare il successo di un e-commerce, ma così come succede con un abito sartoriale, anche l'interfaccia di un negozio web deve essere cucita perfettamente addosso al progetto online per essere funzionale ed efficace per le vendite. Il web designer è come un sarto che, dopo aver preso le misure, crea un'opera completamente personalizzata e funzionale. La grafica, per funzionare efficacemente, deve seguire delle norme precise.

Grafica ed e-commerce: un abito adatto per le tue pagine online

Finalmente hai scelto un bellissimo abito da indossare ad una festa importante. Tutti ti sorridono ma tu pensi esclusivamente alla linguetta della camicia che ti punge la nuca, ai polsini troppo stretti e alle scarpe che ti bloccano il piede. Il vestito sul manichino era perfetto, ma forse non è adatto a te. Non ti stai neanche godendo la festa, per colpa sua. Abbiamo fatto questo esempio, perché la stessa situazione di disagio potrebbe essere vissuta dall'utente che entra nel tuo e-commerce. Deve riuscire a navigare spedito verso l'acquisto, trovare ciò che cerca senza pensare troppo. Per questo, prima di creare un negozio online è necessario mettere in chiaro alcuni aspetti fondamentali che poi dovranno essere trasmessi in forma grafica. Do not disturb La grafica dell'e-commerce non deve disturbare, ma accompagnare lo sguardo nei punti focali del sito, dove sono collocate le informazioni essenziali. Ogni elemento è parte di un sistema che deve accompagnare l'utente verso l'acquisto in modo chiaro. Quindi bando alla creatività eccessiva: lasciamo a Van Gogh il lusso di far sognare, tu devi vendere. Per questo il tuo sito web deve essere prima di tutto usabile. Minimizza il rumore. Evita elementi che possano disturbare il lettore, che lo facciano allontanare dall'obiettivo. Fallo sentire a casa, ripeti nel tuo sito degli standard a cui è abituato: per esempio un menù che raccolga le pagine principali, un motore di ricerca interno e il catalogo dei prodotti diviso per categorie. Inserisci nella Home i prodotti in promozione con il prezzo ben visibile: si deve capire sin da subito che siamo dentro un e-commerce. Colòr, colòr....verde! Quando si parla di leggibilità e armonia grafica di un e-commerce non possiamo trascurare i colori che, insieme alle forme, vestono le pagine del sito web. I colori sono percezioni capaci di trasformarsi (anche a livello inconscio) in emozione. Questi elementi comunicano molto di te, del tuo brand e dei valori che intendi veicolare. e-commerce colori e messaggi Le immagini Le immagini riescono a trasmettere immediatamente il messaggio che si vuole inviare: in un sito di viaggi online, due volti sorridenti che scelgono la prossima meta dalla loro cartina fanno venire voglia di acquistare un biglietto aereo. Le immagini però devono essere di qualità sennò rischiano di compromettere tutto il lavoro. Di particolare importanza sono le immagini dei prodotti dentro le schede dettagliate: devono donare la sensazione di toccare il prodotto con mano. Quindi largo a diverse prospettive, alle zoomate con il passaggio del mouse e anche a fotografie in alta definizione (stando attento ai KB). L'immagine principale della scheda prodotto è come il cantante di una rock band: sta in prima linea, è il front man e da lui dipende il successo di ogni serata. Per mostrare il prodotto ai clienti puoi veramente sbizzarrirti. Ecco alcuni esempi: scarpa ecommerceimmagine e-commerce con zoom Dove li metto? Basta che non scrolli Ora facciamo un gioco: cerchiamo di posizionare tutti gli elementi importanti nella zona più alta della pagina in modo da offrire le informazioni principali (inclusa la call to action) senza fare scrollare l'utente con il mouse. Fatto? Ora confronta la tua pagina con quella di Amazon, un guru quando si tratta di vendere online:   Pagina prodotto Amazon Come è andata? Dove hai posizionato il tasto per l'acquisto? Nelle schede prodotto questo bottone è molto importante. Deve essere in evidenza e contenere una call to action diretta e semplice: Compra, Acquista, Prenota sono le più gettonate. Altri usano espressioni più complesse come Procedi all'acquisto o Aggiungi al carrello. Amazon sceglie l'ultima espressione e colloca gli elementi essenziali nella prima parte della pagina: la fotografia principale e il prodotto ripreso da diverse prospettive, le opzioni (inclusi i colori disponibili con tanto di fotografia), le caratteristiche del prodotto, il prezzo ed infine il bottone con la call to action bene in evidenza. Eye tracking Pensi di non poter sapere dove l'utente guarderà e quindi non sai dove concentrare gli elementi essenziali del tuo ecommerce? Niente panico, esiste una ricerca su qualunque cosa esista al mondo (e anche su ciò che non esiste). L'Eye Tracking (in italiano oculometria) fa al caso tuo: analizza i movimenti dello sguardo su una pagina web, evidenziando i punti in cui si focalizza l'attenzione dell'utente. I suoi occhi si muovono sullo schermo disegnando una F : inizialmente legge le linea orizzontale nella zona superiore della pagina poi sposta lo sguardo verso il basso, scorrendo con lo sguardo una linea più corta ed infine la sua attenzione si sposta lungo la porzione sinistra della pagina. Questi studi ci permettono di capire dove posizionare le informazioni principali nella pagina e soprattutto quali elementi grafici utilizzare e quali evitare. Secondo te, quale delle due immagini è più efficace? Leggi l'articolo fino alla fine e lo scoprirai ;-) heat-map-bebe1 eye tracking Per terminare, cerca di pensare sin da subito che la tua veste grafica dovrà essere visualizzata dallo smartphone. Tutto ciò che abbiamo detto fin'ora, dovrà essere realizzato in ottica responsive: adattato alla navigazione da un dispositivo mobile.

Benissimo, ora il tuo sito web è ben vestito, i colori sono perfettamente abbinati, gli accessori sono al punto giusto e gli utenti potranno acquistare online senza perdersi.

Ti chiediamo solo una cortesia: condividi questo post perché siamo stanchi di vedere certi spettacoli...

grafica ecommerce

 P.S. L'immagine più efficace per la vendita è la seconda, dove gli occhi del bambino, rivolti verso destra, accompagnano lo sguardo del lettore verso l'offerta. Mentre nella prima immagine, il piccolo guarda davanti; in questo caso l'utente tende a concentrare la sua attenzione sugli occhi del bambino, trascurando il messaggio promozionale sulla destra. L'eye tracking, infatti, rileva con il colore rosso il punto su cui si concentra maggiormente lo sguardo dell'utente.


Lascia un commento

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