Checklist per un sito usabile

Nove punti da seguire per migliorare il proprio sito.

Navigando in rete ho spesso la sensazione che l’usabilità sia spesso trascurata. E’ davvero inutile prestare attenzione all’esperienza dei propri visitatori? Ovviamente no.

Quelle che seguono sono indicazioni il più possibile generiche per migliorare l’usabilità del vostro sito. Non diventerà usabile semplicemente seguendo questi 9 punti, ma penso siano un buon punto di partenza.

1. Nome del sito

Il titolo del sito deve essere chiaro e visibile in ogni pagina, così come il logo (se esiste). E’ consuetudine inoltre che l’area occupata da questi elementi abbia un link alla homepage: è frustrante tentare di cliccare un elemento e scoprire che non porta da nessuna parte.

2. Tagline / Sottotitolo

Esempio di tagline su sohtanaka.com

La tagline è una breve frase che comunica velocemente lo scopo del sito che si sta visitando. Difficile farne a meno: che si tratti di un portfolio, di un blog o di un sito aziendale, è bene che il visitatore capisca subito l’argomento trattato.

3. Titolo della pagina

E’ essenziale che ogni pagina sia identificata in maniera univoca. Il titolo della pagina dovrebbe essere presente anche tra i tag <title></title>: questo permetterà di riconoscere un sito anche se sono aperte più finestre (o più tab) del browser.

4. Breadcrumb / Path / Briciole di pane

Esempio di breadcrumb sul sito Apple

E’ il modo migliore per far capire ad un visitatore dove si trova. In italiano il breadcrumb viene chiamato anche “briciole di pane”, e la sua funzione è evidente. Se avete un sito su più livelli non potete farne a meno.

5. Navigazione principale

Esempio di menu su thuiven.com

La navigazione deve essere chiara e coerente tra tutte le sezioni. Non cambiate mai posizione ad un menu, è bene che ogni visitatore sia in grado di orientarsi. Un’eccezione a questa regola è rappresentata dai menu secondari, che possono apparire o meno a seconda della pagina e della presenza di sottosezioni.

Nella navigazione è importante anche contrassegnare la pagina corrente, se presente nei menu, magari rendendola anche non cliccabile.

6. Box di Ricerca

Anche la ricerca è un metodo di navigazione. In certi casi è il modo più veloce per raggiungere informazioni presenti sul vostro sito, magari non più recenti. Se decidete di implementare la ricerca, fate in modo che il box sia visibile e presente in ogni pagina.

7. Link testuali

Uno dei problemi più fastidiosi è trovare in un sito dei link di testo che non appaiono come tali. Se i collegamenti si confondono con il testo normale, è il caso di modificarne l’aspetto. Trovate maggiori informazioni in un articolo sui link che ho scritto qualche settimana fa.

8. Colori e grafica

Così come per la navigazione, anche la grafica deve mantenere una sua coerenza tra le varie sezioni di un sito. E’ bene che i colori utilizzati non cambino tra le varie pagine per non confondere le idee. E’ possibile distinguere sezioni diverse con colori differenti, ma è una soluzione rischiosa se applicata male, spesso è meglio non rischiare.

9. Avvisi

Esempio di avviso su googlisti.com

Se sul sito compaiono degli avvisi, è bene che la loro funzione sia chiara. Possono essere contrassegnati da un’icona e da colori differenti, tenendo presenti alcune consuetudini:

  • il rosso indica un errore o un avviso importante
  • il verde una conferma
  • il giallo un avviso generico

E’ bene utilizzare delle notifiche di questo tipo quando vengono eseguite azioni importanti, come una procedura di acquisto. L’utente deve capire senza problemi quello che sta facendo e quali azioni può compiere.

In conclusione

Non è possibile imparare in poco tempo a realizzare un sito usabile, ma avere una checklist da controllare spero possa esservi utile. Tenete comunque presente che queste raccomandazioni non sono universali, potrebbero esserci delle eccezioni a seconda del sito.

Tommaso Baldovino

UX/UI Designer di Firenze, appassionato di tecnologia e accessibilità, esperto di WordPress, blogger, gamer e amante della fotografia.

12 commenti su “Checklist per un sito usabile”

  1. un ottimo articolo di base. addentrandosi nello specifico del codice, pensa che gli ultimi partecipanti all’Iwd Award non avevano neanche usato l’h1 per il nome del sito o della pagina. In questo modo disattivando i css non si sapeva minimamente dove si fosse.
    Penso che lo riproporrò ai miei utenti, grazie!

  2. Bello l’articolo, però mi spiace che si cerca di ridurre sempre tutto a pochi punti (i 10 cardini del design … i 5 metodi per non sbagliare mai).
    La realizzazione un sito è talmente complessa che ci vorrebbero pagine per parlarne, serebbe bello avere un sequel di questo articolo da un buon comunicatore… e visto questo articolo.. ti andrebbe di arrivare al 100° punto?

  3. @Simone: ti ringrazio per il feedback, anche io non sono un amante delle liste, cerco spesso di limitarmi.

    Come ho cercato di spiegare ad inizio articolo, un sito non può diventare usabile semplicemente seguendo una breve checklist, ho voluto però dare delle buone basi da seguire.

    Continuerò a trattare l’argomento nei miei post, se non l’hai già fatto ti consiglio anche di dare un’occhiata alla categoria usabilità, e se hai argomenti che ti interessano in particolare suggerisci pure!

  4. Grande Tom, ottimo articolo. La cosa che più mi fa piacere è aver potuto dire “CE L’HO” a tutti i 9 punti della guida…peccato che in testa avessi il nuovo tema del mio blog che è ancora da finire :P

    Grazie mille in ogni caso!!!

  5. Eh Tom, hai davvero ragione, e delle volte mi tocca lottare con i grafici dell’azienda per realizzare siti accessibili ed usabili al posto di siti “diversi dal solito” :-)
    Un caso è un sito quasi finito, ancora in costruzione, ora è visionabile all’indirizzo http://www.benvenuti-srl.it/test
    Il principale problema di accessibilità e usabilità è il menù principale, sempre sotto i contenuti di pagina! Almeno abbiamo inserito i contenuti in modo che non ci sia troppo scolling verticale.
    Avevo “rimediato” in parte mettendo un titolo e un menù principale in alto nel codice, nascosto con display:none: disabilitando i css la navigazione è maggiormente agevolata…. solo che l’ultimo articolo di Tom mi fa pensare che forse dovrei usare un’altro metodo :-)

  6. Complimenti per l’articolo e soprattutto per i temi wordpress. Avresti consigli su dove trovare altri temi usabili in italiano?! grazie!