Sei qui: Homepage » usabilità, web design » Checklist per un sito usabile
mag 04 2009
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.
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.
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.
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.
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.

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.
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.
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.
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.
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:
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.
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.
Classificato in usabilità, web design.
TomStardust.com è realizzato secondo i canoni dell'accessibilità, le normative del W3C, e la legge Stanca, pur non essendo il sito di una pubblica amministrazione e non avendo nessun obbligo a riguardo.
Poter navigare su internet ed accedere alle informazioni sulla rete è un diritto di tutti, realizzare siti che rispondano agli standard web dovrebbe essere un dovere di ogni sviluppatore.
Questo sito e tutti i suoi contenuti, compresi i temi Wordpress, sono pubblicati sotto licenza Creative Commons 2.5.
Questo sito non rappresenta una testata giornalistica e viene aggiornato senza alcuna periodicità.
Powered by Wordpress
4 maggio 2009 alle 08:15
Laurynun 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!
4 maggio 2009 alle 10:18
TomGrazie Lauryn, penso che sia fondamentale avere delle buone basi per poter puntare in alto :)
5 maggio 2009 alle 08:35
Mauro AccorneroUn buon articolo senza dubbio.
5 maggio 2009 alle 14:17
SimoneBello 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?
5 maggio 2009 alle 15:24
Tom@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!
6 maggio 2009 alle 13:09
grazianoBellissimo post Tom, ti sei superato ;)
6 maggio 2009 alle 17:58
StefanoGrande 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!!!
6 maggio 2009 alle 23:43
GiorgioOttimo articolo Tom! Mi ricorda molto Krug con il suo “Don’t Make Me Think” :)
8 maggio 2009 alle 23:24
Marco Pedota - Studio grafico ArtistikoEh 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 :-)
18 giugno 2009 alle 22:08
marcoComplimenti per l’articolo e soprattutto per i temi wordpress. Avresti consigli su dove trovare altri temi usabili in italiano?! grazie!