L’anatomia di un sito ecommerce Magento

Pubblicato in Architettura dell'Informazione, Esperienza Utente, User interface design | 27 maggio 2015

La progettazione di un sito e-commerce rappresenta una sfida complessa per via delle variabili cognitive ed emotive legate alle abitudini di acquisto, la cui individuazione richiede in molti casi un’attenta analisi del profilo utente. Le aspettative dell’utente finale vanno poi allineate con i bisogni di chi commissiona il lavoro: ad esempio, aumentare il tasso di conversione, incrementare o fidelizzare la clientela, promuovere il prodotto.
Diverse sono le questioni a cui un interface designer deve dare una risposta valida: Come organizzare i contenuti nell’home page? Dove posizionare i filtri nelle categorie o nei moduli di ricerca? Quale autenticazione usare per la pagina d’acquisto? In quest’articolo cercherò di illustrare le soluzioni da me proposte per rispondere a questi e altri interrogativi.

Uno dei miei lavori recenti e tra i più impegnativi è stata la progettazione di un tema personalizzato per la piattaforma e-commerce Magento. Ho vissuto questo lavoro sia come un’occasione di auto-apprendimento – ovvero imparare ad usare uno degli applicativi open source più diffusi sul mercato – sia come un’occasione per mettere alla prova le mie conoscenze di front-end developer, contando sul prezioso aiuto della comunità di sviluppatori Magento e di Stack Overflow.

Un’esperienza indubbiamente positiva sul piano dell’apprendimento: posso ora dire di conoscere a fondo questo corposo – e un pò temuto –  applicativo e-commerce e di aver migliorato molto la mia padronanza dei linguaggi PHP, XML, Javascript. Un pò meno “piacevole” lo è stata quando si è trattato di risolvere i tantissimi inconvenienti tecnici che puntualmente si verificavano: dal funzionamento dei moduli alla compatibilità lato client, dalla gestione della cache all’ottimizzazione del codice.

Progettare per l’e-commerce: perché Magento?

Tra i diversi applicativi e-commerce, la scelta è ricaduta su Magento perché questa piattaforma è tra le più diffuse sul mercato ed è anche quella che conta la più vasta comunità di sviluppatori. Sapevo quindi di trovare online la soluzione a molti – se non tutti – i miei problemi tecnici o di potermi rivolgere all’occorrenza ai tanti programmatori freelance e agenzie certificate. Una volta capita la logica che sta dietro la sua architettura, Magento diventa un validissimo strumento, per di più open source e a mio parere l’applicativo per l’e-commerce più avanzato. Tuttavia è imperativo per lo sviluppatore tenere a mente alcune considerazioni:

Il framework css: Bootstrap

La prima scelta strategica da fare quando si progetta l’interfaccia grafica di un applicativo web è se utilizzare o meno un framework css, ovvero un codice front-end già predefinito. Per progetti complessi come un sito e-commerce, l’interrogativo non è tanto SE ma QUALE utilizzare. Nel mio caso, Magento mette già a disposizione un suo framework e la buona norma prevede che si personalizzi – sovrascrivendolo – il tema predefinito. Nel fare ciò, l’ho integrato all’interno del framework Bootstrap con un attento lavoro di ripulitura e riadattamento del codice.

Tra i vantaggi di un framework css vi è quello di avere a disposizione una griglia flessibile, che possiamo liberamente adattare alle nostre pagine usando i fogli di stile assieme alle eventuali librerie javascript da inserire all’occorrenza. Di framework css ne esistono molti e tutti a vario titolo validi e per scopi diversi: non starò qui a dilungarmi su quale sia il migliore. La mia scelta è tuttavia ricaduta su Bootstrap, perché mi è sembrato quello che offriva il miglior compromesso in termini di flessibilità e funzionalità. Per la progettazione del tema e-commerce, avevo infatti bisogno di una layout facile da modificare e al tempo stesso dotato di componenti javascript pronti per l’uso. A convincermi della scelta è stato poi il fatto che Bootstrap sia tra i framework più diffusi e con una nutrita comunità di sviluppatori. Alla pari di Magento :)

Il menu di navigazione: guidare l’utente senza sorprese

Nel progettare il tema Tema E-commerce Bminimal, ho cercato di seguire un mix di buone pratiche e standard web in fatto di Architettura dell’Informazione e di Esperienza Utente, facendo tesoro di quanto appreso su progetti precedenti e riprendendo le soluzioni adottate da alcuni siti e-commerce: poiché un template deve essere per sua natura versatile, ho cercato una sintesi equilibrata piuttosto che rispondere a singole problematiche. Nel dettaglio:

  • La testata è ridotta al minimo per dare più spazio ai contenuti e rimane fissa per facilitare la navigazione.
  • I link hanno nomi convenzionali e sono posizionati secondo un ordine gerarchico: prima quelli strutturali (login, carrello, contatti, ecc.) poi quelli del catalogo prodotti. Le icone compaiono solo all’occorrenza e hanno sempre una variante testuale.
  • L’amministratore del sito può scegliere tra un menu a cascata multicolonna – quando si hanno molte categorie e contenuti – oppure il più semplice menu a lista.
  • La versione mobile è riconoscibile dall’icona “hamburger” ed ha un aspetto semplificato: sono fissi solo i link carrello e ricerca mentre i link del catalogo prodotti compaiono in una lista verticale.

L’home page: la vetrina del tuo negozio

A meno che il visitatore non sia giunto attraverso link predefiniti, nella stragrande maggioranza dei casi l’home page rappresenta l’approdo naturale al sito dopo una ricerca organica. Come un passante davanti la vetrina di un negozio, il visitatore si aspetta di trovare un assortimento della merce in vendita e una rassegna delle offerte del momento. Diventa cruciale quindi stabilire quali prodotti mettere in evidenza, sapendo bene che il visitatore sul web segue percorsi diversi rispetto ai canali tradizionali.  Inoltre egli cercherà di interpretare il contenuto in base al suo modello mentale ovvero quello che presumibilmente si aspetta di trovare seguendo quel determinato percorso.

Come già detto, nel progettare e sviluppare il tema ho seguito un principio di flessibilità, combinando le varie soluzioni per risolvere il maggior numero di requisiti del cliente ma stando attento a rispettare gli standard della User Centered Design. Così, l’home page diventa una sorta di vetrina in cui esporre gli articoli in maniera personalizzata e gerarchica:

  • Al di sopra dell’area di scorrimento, sono posizionati i prodotti in primo piano e l’amministratore può decidere se inserire o meno i banner testuali e grafici, cambiando così il layout della pagina.
  • C’è un ampio e differente uso della immagini: esse servono a dare risalto ai prodotti e quando sono a sfondo pieno l’intera area diventa un Invito all’Azione, senza bisogno di tasti o link separati.
  • I caroselli sono statici per evitare un eccesso di informazione: l’utente è libero di scegliere cosa vedere. La loro posizione e grandezza varia a seconda dei contenuti mentre le descrizioni, le dissolvenze e le immagini in anteprima aiutano a focalizzare il prodotto e ad “anticipare” quello successivo.
  • Nel piè di pagina compaiono i link “strutturali”, sempre secondo un ordine gerarchico: Chi siamo, Assistenza, Condizioni di vendita e Fidelizzazione del Cliente (Newsletter e Condivisione).

La pagina delle Categorie: i prodotti in rassegna

In questa pagina l’utente può selezionare, filtrare e ordinare i prodotti: è una delle pagine più interattive per un sito di e-commerce. Il tema Tema Bminimal contiene layout personalizzabili per la Categoria Principale e le Sottocategorie con contenuti statici e caroselli dei prodotti in evidenza. Anche l’esperienza utente è rafforzata attraverso alcune funzionalità:

  • Script ajax che semplificano la navigazione e riducono i tempi di caricamento: filtri, ordinamenti, anteprime prodotto, lista desideri, aggiunta al carrello e comparazione prodotti.
  • Possibilità di aggiungere una navigazione laterale della categoria.
  • Miniature alternative dei prodotti con effetto roll-over per mostrare un dettaglio del prodotto.
  • Finestre a comparsa con Anteprima del prodotto, Lista desideri o Tabella comparativa.
  • Etichette visuali per evidenziare novità o sconti.

La pagina prodotto: entriamo nei dettagli

Qui la regola della gerarchia e semplificazione risulta di vitale importanza. Un prodotto o servizio ha molti aspetti e caratteristiche da poter evidenziare evidenziare. Ma se non presentati in maniera logica e selettiva, essi rischiano di distrarre o addirittura confondere l’utente. E’ importante saper scegliere i contenuti, a cominciare dalla descrizione che deve essere sintetica, narrativa e non ridondante. A tal fine, può essere utile affidarsi a un buon redattore o a esperti SEO per ottimizzare i testi e scegliere le parole chiave appropriate.

La pagina prodotto del tema Tema E-commerce Bminimal è stata progettata per dare risalto ai contenuti e offrire all’utente più livelli di interazione:

  • Un ampio spazio per la galleria multimediale: il prodotto è presentato con immagini espandibili e un videoclip promozionale.
  • Indicazioni chiare sulla disponibilità del prodotto: l’utente può richiedere di essere notificato se il prodotto è esaurito.
  • Ciascun prodotto può avere il suo marchio e l’utente ha la possibilità di filtrare la ricerca di prodotti simili.
  • L’utente è invitato a interagire attraverso link discreti ma ben posizionati (tabella comparativa, segnalazione, condivisione e recensione).
  • I dettagli del prodotto sono racchiusi all’interno di un menu a comparsa per ridurre lo spazio e non offuscare l’Invito all’Azione.
  • L’amministratore può inserire un carosello di prodotti simili, cambiandone tipologia (correlati, di fascia superiore o accessori) e aspetto grafico (a griglia o con immagine di sfondo).

Il carrello e la pagina di acquisto: un indicatore del tasso di conversione

A detta di molti, queste sono le pagine cruciali di un sito e-commerce perché è qui che l’utente decide se proseguire nell’acquisto. Al di là delle abitudini di acquisto dell’utente che richiedono specifiche analisi, l’interface designer deve prestare particolare attenzione alla progettazione di queste pagine per ridurre al minimo la possibilità di errori e non compromettere il tasso di conversione del sito.

Nel progettare il tema Tema E-commerce Bminimal, ho cercato di fare tesoro del riadattamento grafico di una precedente pagina di acquisto con migliaia di ordini giornalieri. La pagina di acquisto di Magento utilizza una funzionalità ad “accordion” che a molti gestori dei siti risulta poco agevole perché apparentemente richiede troppi passaggi. Basandosi su questo presupposto e nel cercare di migliorare il tasso di conversione, alcuni ricorrono a moduli esterni per semplificare la pagina d’acquisto a un unico layout: informazioni su indirizzo, spedizione e pagamento. Dopo aver testato senza successo diversi di questi moduli, ho preferito ottimizzare il layout esistente ed eliminare ciò che a mio avviso era ridondante:

  • Nel carrello, l’Invito all’Azione è chiaramente separato dai link secondari (Aggiorna e Svuota Carrello). Sono state poi eliminate le informazioni non indispensabili e che potevano distrarre l’utente: calcolo costi spedizione, prodotti correlati, tagliandi sconto.
  • I prodotti configurabili possono essere modificati (quantità e opzioni) senza bisogno di ricaricare la pagina, usando la funzionalità ajax; lo stesso avviene per l’anteprima dei prodotti reclamizzati quando il carrello è vuoto.
  • Nella pagina di acquisto, l’utente è guidato nell’autenticazione attraverso una semplice navigazione a schede: può usare il suo profilo social oppure le credenziali del sito e le due opzioni sono chiaramente separate senza possibilità di errore.
  • L’elenco delle località è aggiornato dinamicamente dopo aver selezionato il paese.
  • Il tagliando sconto appare in fondo al riepilogo ordine, prima del pagamento.

In conclusione, nel progettare il tema Tema E-commerce Bminimal ho concentrato buona parte di tutta le conoscenze sin qui maturate come interface designer e sviluppatore front end: sicuramente un’esperienza di apprendimento intensa e avvincente.