Web usability: Anatomia di un sito web ben progettato

Web usability: Anatomia di un sito web ben progettato

E’ passato un po’ di tempo dall’ultima volta che abbiamo condiviso un articolo sul nostro blog, siamo stati molto indaffarati tra Siti Web in cantiere e nuovi progetti di Web Marketing!

Ma prima di Natale, abbiamo pensato di ritagliarci del tempo per farvi un piccolo regalo e condividere con voi alcuni suggerimenti utili per la realizzazione di un sito web, in particolare per quanto riguarda l’usabilità.

Per creare un sito web, è infatti indispensabile occuparsi anche della sua progettazione ed in particolare dello studio della sua architettura: quali contenuti scegliere? Come organizzarli? In che modo gestirli attraverso il layout grafico? Muoviamo dunque insieme i primi passi nel mondo dell’usabilità.

Partiamo dalle basi

Nel 2017 per rispondere ai parametri dell’usabilità, un sito deve essere responsive (abbiamo parlato di responsiveness in alcuni articoli precedenti, per approfondire vi suggeriamo ad esempio “Dove vai se un sito responsive non ce l’hai?”) e dunque adattarssi completamente ai vari dispositivi su cui viene visualizzato. Pensate infatti che ormai, il traffico internet generato dagli smartphone è pari al 60% del totale, superando di diverse lunghezze il traffico desktop!

Oltre a questo dato quantitativo, anche dal punto di vista qualitativo, la navigazione da mobile non può essere ignorata: come dimostrano i dati analitici, quando i siti non sono ottimizzati per la visualizzazione mobile, ne risente gravemente la qualità della visita stessa, i tempi di permanenza sul sito si dimezzano e le percentuali di abbandono si alzano. Ovviamente questo dipende dalla diversa modalità di navigazione: chi accede a un sito da cellulare, deve poter fruire dei contenuti in maniera ancora più immediata e rapida.

Se tutto questo non bastasse, sappiate che Google tende a penalizzare i siti che non sono ottimizzati per cellulare in SERP (la pagina dei risultati di ricerca).

Menu

Per entrare nel merito della creazione di un sito internet, seguendo i dettami dell’usabilità, occorre occuparsi della sua architettura interna e della definizione dei contenuti.

Come dobbiamo gestire tutte le varie pagine?  Il menu è il fulcro che guida l’organizzazione dei contenuti. Partiamo con lo stabilire le varie voci che guideranno l’utente nella navigazione, cercando di permettergli di raggiungere le pagine principali con il minor numero di clic possibile. Non è una sfida semplice, ma vi assicuriamo che può fare la differenza.

Meglio non essere troppo creativi nella scelta dei nomi che daremo alle voci di menu e al loro ordinamento: il nostro obiettivo non è stupire in questo caso, ma essere chiari per l’utente. Cerchiamo di non spiazzarelo con termini troppo originali e di mantenere una successione classica delle varie voci. Ecco la sequenza più classica:

  • Home: la prima voce dovrebbe essere sempre la Homepage, la pagina principale del sito. Per molti utenti potrebbe non essere sufficiente il solo logo cliccabile per farvi ritorno, meglio quindi scegliere una soluzione testuale, magari accompagnata anche dal simbolo di una casina 🙂
  • Chi siamo: inseriamo sempre una pagina per presentare all’utente la nostra azienda e il nostro staff. In questo caso va benissimo anche variare il nome con “About”, “Lo studio”, “La nostra Azienda”, …
  • Servizi/Progetti/Clienti
  • Blog
  • Contatti: eventualmente, oltre al modulo, possiamo aggiungere anche una mappa che consenta all’utente di avere le indicazioni per raggiungere la nostra sede (nei siti delle attività locali, anzi, è opportuno inserire una pagina “Dove Siamo” apposita, che preceda i contatti)

webusability2

Profondità del Menu

Fatta eccezione per siti fisiologicamente sterminati (pensate ad esempio al sito dell’Università di Bologna, che necessita inevitabilmente di molti moduli di navigazione) la profondità di navigazione deve essere minima: come abbiamo già anticipato, ogni pagina dovrebbe essere raggiungibile con un solo clic.

Per raggiungere questo obiettivo, possiamo usare menu a tendina che compaiono quando il visitatore passa con il mouse sopra le voci principali, in modo da offrire un modello di navigazione più complesso. Evitiamo però strutture tentacolari e cerchiamo di usare un solo livello di menu a tendina, ed evitiamo che le sotto-voci abbiano a loro volta altre sotto categorizzazioni, o la navigazione sarà completamente inficiata.

Pagine di smistamento

Quando abbiamo un menu a tendina, è bene che anche la voce principale sia cliccabile. Sì, ma cosa ci mettiamo?  Creeremo una pagina di smistamento che mostri tutti gli elementi presenti nel drop-down menu: in questo modo chi arriva dal menu principale, può agevolmente raggiungere la pagina desiderata con un solo clic!

Questa accortezza è particolarmente utile per i siti che vengono visualizzati da tablet: spesso, il menu mostrato è quello in versione desktop con tanto di tendine, voci e sottovoci. La cosa può complicare la navigazione per utenti meno esperti (pensateci: dovreste cliccare su una voce di menu, dunque far comparire la tendina e infine scegliere la sottovoce desiderata), ma con una pagina di smistamento risolviamo ogni problema

Burger Menu

Si tratta del menu in formato burger, ovvero panino!  Ovviamente è il tasto che da mobile consente di visualizzare il menu solitamente in formato verticale, non con la classica barra di navigazione disposta orizzontalmente sul sito. Deve essere presente, ma solo per chi visualizza il sito da mobile.

Proprio per garantire agli utenti una navigazione rapida tra le pagine, se il nostro menu è ricco di tendine, possiamo scegliere di mettere solo le voci principali nel burger menu: le sotto-pagine saranno comunque raggiungibili grazie ai link riportati nelle pagine di smistamento (ora capite perché non sono opzionali? J)

3

Testi

Contrariamente a quanto sentiamo spesso sostenere, nel web sono ben accetti testi lunghi e ricchi di contenuto: faremo contenti gli utenti e Google!

Tuttavia è fondamentale prendere alcune accortezze quando scriviamo per il web: usiamo con intelligenza la formattazione e inseriamo elementi anche grafici che permettano all’utente di cogliere a colpo d’occhio le diverse sezioni nella pagina e i relativi contenuti, anche con un semplice scroll.

Prendiamo come esempio questa pagina di un Corso in Partenza di inSegno, una scuola di informatica a Bologna per cui abbiamo realizzato il sito web.

Essendo il testo della pagina molto lungo, abbiamo evidenziato opportunamente le diverse sezioni (usando h2 e h3), e implementato (solo nella versione desktop) un menu che segue l’utente nella lettura e permette di passare rapidamente alla sezione desiderata

insegno

Call To Action

È utile inoltre evidenziare i messaggi principali di ogni pagina, definiti in gergo Call To Action, ovvero “chiamate all’azione” che possiamo usare per invitare l’utente a contattarci, iscriversi alla newsletter, comprare un prodotto…  La Call-To-Action dovrebbe essere ben in evidenza  above the fold (ovvero nella prima parte della pagina, quella che compare aprendo il sito senza scrollare con il mouse).Attenzione: se il vostro sito è responsive, l’above the fold varia da dispositivo a dispositivo, ed è importante assicurarci che la nostra CTA si veda in tutti i vari device.

Immagini

Le strutture grafiche dei siti moderni sono infatti estremamente minimal ed è anche per questo che le immagini sono così importanti.

Volete una dimostrazione? I più tecnici di voi possono installare l’estensione “Web developer toolbar” su Mozilla Firefox, e aprire un sito qualunque. Provate ad esempio con Yoox. A questo punto cliccate sulla voce  “Images “e “Disable all images”.  Come vedete, anche il sito più bello risulta un po’ scarno senza immagini!

A maggior ragione è importante che le immagini siano di buona qualità. Ottimo se sonno anche originali (ovvero scattate direttamente da noi), buono se le acquistiamo di stock (ci sono diversi siti che consentono di farlo da 123rf.com a depositphoto.com), male se sono foto originali ma di qualità scadente.


QuoLAB
Via Longhena 15/A, 40139 Bologna tel. 051 188 99 318 - mail: info@quolab.it
Copyright © 2018 QuoLAB. Tutti i diritti riservati. QuoLAB by Studio SBS - P.IVA 03437511201