Quando si parla di design o re-design di un sito web spesso è facile perdersi in aspetti legati esclusivamente all’aspetto estetico del progetto. Se si punta però a ottenere risultati concreti, quali ad esempio lead generation, brand awareness o incremento delle conversioni, è necessario concentrarsi sul miglioramento della user experience dell’utente.

Nella realtà odierna in cui le persone hanno la possibilità di visitare più di un milione di siti web, è fondamentale assicurasi che il web design sia ottimizzato per l’usabilità, ovvero quanto il website sia facile da utilizzare, e per l’esperienza degli utenti, quanto è piacevole interagire con un sito.

Si potrebbero scrivere intere pagine per indagare i pro e contro di usabilità e UX ma, per delineare un punto di partenza, vi presentiamo 8 linee guida applicabili a un progetto di web design.

1. Semplicità

Il look&feel di un sito web è importante, ma la maggior parte dei visitatori che atterrano su un sito sono alla ricerca di qualche informazione o desiderano completare un’azione. Il design deve colpire, non confondere. In questo contesto, l’aggiunta di elementi di design non necessari può rendere più complessa e difficoltosa la navigazione del sito, ostacolando gli utenti nel raggiungimento di specifici obiettivi. Dal punto di vista dell’usabilità e dell’UX, la semplicità è un aspetto chiave per realizzare un sito web efficace, chiaro e piacevole. Ecco alcuni aspetti che, a livello di web design, devono implementare questa caratteristica:

Colori: non usarne troppi. Il consiglio è prevederne un massimo di cinque.
Caratteri di stampa (typefaces): prediligere font leggibili e chiari.
Elementi grafici: da implementare solo se utili al completamento di un’azione o all’esecuzione di una funzione specifica.

La homepage di Rockaway Relief è un ottimo esempio di design semplice:

2. Gerarchia visiva

Strettamente interconnesso al principio di semplicità è l’aspetto della gerarchia visiva, che riguarda l’architettura e l’organizzazione degli elementi, tale per cui gli utenti siano veicolati verso le parti più importanti e centrali del sito. Infatti, quanto si parla di ottimizzazione in termini di usabilità e UX, l’obiettivo è quello di portare i visitatori a completare un’azione desiderata in modo però naturale, piacevole e spontaneo. Studiando la posizione, il colore e la dimensione di ogni elemento è possibile strutturare il sito in modo da attirare su di essi l’attenzione degli utenti e incentivare l’esecuzione di uno specifico task.

Nell’esempio che segue, relativo a Spotify, è possibile vedere come la CTA “Get Spotify Free”ricopra una posizione primaria nella gerarchia visiva.

La scelta del colore e il posizionamento a sinistra (la maggior parte delle persona scansiona visivamente i siti guardando da sinistra a destra), sopra la piega, attira in modo naturale l’attenzione dell’utente.

3.Navigabilità

Progettare una navigazione intuitiva del sito è fondamentale per garantire agli utenti di trovare ciò che stanno cercando. Idealmente, un visitatore che atterra su un sito dovrebbe essere messo nella condizione di non pensare al passo successivo da compire, in quanto l’architettura informativa dovrebbe guidare verso l’esecuzione di un’azione. Di seguito vi riportiamo alcuni consigli per ottimizzare la navigazione di un sito:

Prevedere una struttura semplice e immediata per la navigazione primaria (generalmente vicina alla parte superiore della pagina)
Includere la navigazione anche nel footer del sito
Utilizzare i breadcrumbs in tutte le pagine (a eccezione della homepage) in modo che gli utenti siano consapevoli del percorso intrapreso.
Includere una casella di ricerca nella parte superiore del sito, in modo che gli utenti possano effettuare search per parole chiave.
Non prevedere troppe opzioni di navigazioni all’interno di una stessa pagina.
È preferibile strutturare una navigazione con un massimo di tre livelli.
Includere link e collegamenti tra le pagine del sito, soprattutto se si ha un blog a disposizione. Esprimere in modo chiaro a quale contenuto punta il link di riferimento.
Mantenere la navigazione coerente in tutte le pagine. Le etichette e la posizione del menu di navigazione devono essere i medesimi per tutto il sito.

Di seguito un esempio tratto dal sito di InVision:

4.Coerenza

Oltre alla navigazione, ad essere coerenti deve essere anche il look&feel del sito: background, combinazioni di colori e caratteri tipografici devono essere omogenei al fine di ottenere un impatto positivo a livello di usabilità e UX. Questo non implica che tutte le pagine di un sito debbano avere la stessa struttura. È importante creare layout differenti e dedicati alle diverse sezioni (ad esempio per le pagine di atterraggio e per i contenuti informativi) che abbiano in comune coerenza comunicativa, estetica e di linguaggio, in modo che l’utente riconosca in modo immediato i diversi tipi di informazioni. Nell’immagine che segue è possibile vedere come Airbnb utilizzi lo stesso layout per tutte le pagine “Help” in modo da essere immediatamente trovata dall’utente.

5.Accessibilità

Secondo un recente studio di ComScore, l’accesso a internet da tablet è cresciuto del 30% dal 2013 al 2015, mentre da smartphone la crescita è addirittura del 78%. Il focus è proprio qui: per fornire la migliore esperienza utente è fondamentale che il sito sia ottimizzato e fruibile da tutti i differenti device (mobile e desktop). A livello progettuale questo comporta la realizzazione di una struttura flessibile e responsive. Il contenuto viene ridimensionato per adattarsi alle dimensioni di qualsiasi dispositivo. Quando un sito web è accessibile, chiunque può navigarlo, indipendentemente dalle proprie capacità psico-motorie e dal dispositivo utilizzato . L’accessibilità dei siti web è uno degli obiettivi primari del W3C, il consorzio degli standard web. Nell’immagine che segue vi portiamo un esempio di responsive design che Boraso ha realizzato per il sito professionisti di Bticino. È quindi fondamentale che un sito fornisca la miglior esperienza utente su tutte le diverse piattaforme.

6.Convenzionalità

Nel web design esistono alcune convenzioni che, nel corso degli anni,sono diventate familiari e note agli utenti.

Avere la navigazione principale nella parte superiore, o a sinistra, della pagina.
Avere il logo posizionato in alto a sinistra (o al centro) della pagina.
Avere la possibilità di cliccare sul logo per tornare in homepage.
La presenza dell’effetto hover su link, bottoni o collegamenti al passaggio o al click del mouse.

Anche se a volte si ha la tentazione di evitare queste convenzioni per creare un design originale e unico, rispettare questi criteri è fondamentale alla realizzazione di un’interazione (utente-sito) immediata e comprensibile. Infatti, per fornire una buona esperienza utente si deve far leva su ciò che l’utente conosce e comprende. È quindi opportuno utilizzare queste convenzioni per rendere la navigazione del sito più facile e fluida. Uno degli esempi più comuni di convenzionalità nel web design è l’utilizzo dell’icona di un carrello della spesa su un eCommerce. Nell’immagine che segue è possibile vedere (da sinistra a destra) le proposte di Amazon, Wayfair, e Best Buy.

7. Credibilità

La scelta di utilizzare le convenzioni di web design presentate contribuisce a rendere un sito credibile. Per migliorare la credibilità di un website è opportuno essere chiari e onesti rispetto al proprio prodotto/servizio, facendo emergere il valore unico che la proposta racchiude, tale da essere la soluzione ideale alle richieste dell’utente. Un accorgimento in questa direzione è prevedere una pagina dedicata ai prezzi, che aumenterà la percezione di affidabilità e trasparenza dell’azienda. Riportiamo di seguito l’esempio della pagina prezzi di Box.com.

8. La centralità dell’utente

Usabilità e User eXperience devono essere cucite introno ai bisogni, richieste e desideri degli utenti finali. Anche se i principi indicati in questo articolo sono un ottimo punto di partenza, la vera chiave per migliorare la progettazione di un sito è quella di condurre test utente, raccogliere feedback e apportare modifiche su quanto è stato raccolto. In merito a questi aspetti vi presentiamo alcuni tool utili per condurre indagini utente:

Crazy Egg: mostra le aree del sito che catturano l’attenzione dei visitatori. È possibile includere questa preziosa informazione nel set degli obiettivi e rappresentare percorsi dei visitatori più realistici.
Loop11: questo tool consente di creare con facilità test di usabilità, anche se non si ha alcuna esperienza di HTML.

Secondo una recente ricerca di Vitamin T, il 68% dei visitatori non converte perché ritengono che il brand non si preoccupi di fornire loro un’esperienza memorabile.

Mettetevi quindi sempre nei panni degli utenti del vostro sito e accompagnateli lungo tutto il customer journey.