Tecniche di usabilità
Sviluppare siti web usabili
Avevamo già parlato di siti web usabili ed accessibili in questo articolo.
Analizziamo invece quali sono le migliori tecniche e strategie per rendere un sito web usabile, cioè veramente consultabile e navigabile.
Nelle tecniche e consigli sottostanti abbiamo anche tenuto in considerazione, a livello di usabilità, la percezione che il visitatore ha dei contenuti.
Le tecniche
Utilizzo dei CSS:
Cosa centrano i css con l'usabilità?! E' un argomento da ottimizzazione di pagine... apparentemente si. Pensiamo ad esempio ad un sito che permette di modificare la grandezza del font. Questa è usabilità.
Sviluppando un sito con i CSS si rende più usabile un sito perchè il visitatore può cambiare dinamicamente i contenuti e renderli più leggibili.
Usare un buon server:
Usa un buon provider con una banda che dia risposte immediate. A nostro avviso un sito lento da navigare è già poco usabile.
Javascript:
Utilizza javascript per proporre gli ingrandimenti delle immagini e non linkare assolutamente un'immagine che faccia aprire una nuova pagina. Meglio usare una pop-up.
Formattazione:
Usa i <div> ed i paragrafi <p> per separare le frasi e poni attenzione a dare sempre un titolo (<h1> <h2> ecc.) a tutte le pagine cercando di non utilizzare più di un titolo <h1> e 3/4 titoli <h2>per pagina.
Metti in evidenza i link con un rollover.
Per creare siti Internet usabili può essere anche utile formattare (ad esempio con un riquadro) un riassunto della pagina da posizionare sotto il titolo: trovate molti esempi di questa tecnica in blog e portali quotati (vedi repubblica.it tanto per fare un esempio).
Il testo giustificato è più gradevole e più leggibile. Non utilizzarlo però in colonne di testo troppo strette.
Utilizzo del grassetto: leggendo in sequenza solo le parole in grassetto si dovrebbe capire il senso della pagina. Il grassetto non serve per evidenziare il testo: serve per evidenziare gli argomenti chiave del testo senza leggere tutta la pagina.
Le strategie
Navigabilità:
Tre accorgimenti da tenere presenti per creare siti web usabili sono:
- linkare le pagine interne per contenuti pertinenti in modo da non dover
saltare tra 200 pagine per trovare approfondimenti di un argomento.
- offrire un percorso di ricerca e posizione che indichi il punto del
sito in cui stiamo navigando tipo:
CASA -> elettrodomestici -> aspirapolvere
- organizzare i link con una struttura ad albero: dentro la pagina linka
solamente i contenuti pertinenti al tema trattato.
Posizione dei contenuti:
Crea su carta uno storyboard completo del sito e poni in cima alla pagina i contenuti più importanti. In home page ad esempio scrivi testi molto brevi che riconducano ad altre pagine. Se una pagina è piena di contenuti trasformala in una pagina simile ad una home page che tratta uno specifico argomento.
Sposta poi i contenuti in pagine differenti e collocale in sottodomini o sub-directory.
Link:
Immagine con didascalia in testo: rendi linkabili entrambi.
Colori:
Non utilizzare 7 milioni di colori per fare un sito web "standard" ma scegli 5 colori gradevoli e che non affatichino la vista. Preparati una tavola dei colori prima di sviluppare il sito: link con questi colori, rollover con questi, sfondo con questo... fai in modo che i colori siano tra loro armonizzati.
Stampa magari dei quadratini di 3/4 centimetri con i colori che vuoi utilizzare oppure crea delle pagine web bianche di prova con dei fondini in jpeg che rappresentano i colori che utiilizzerai. Uno strumento molto valido per giocare con i set di colori è Kuler
Immagini:
Utilizza immagini non troppo invasive. Usando javascript puoi proporre gli ingrandimenti delle immagini più interessanti. Non linkare assolutamente un'immagine che faccia aprire una nuova pagina: ci sono migliaia di siti web aziendali che usano questa orribile "tecnica". Meglio usare una pop-up in stile WEB 2.0.
E' impressionante il numero di grafici e web designer che non hanno ancora capito quando si usano le gif/png e quando le jpeg. Se vuoi un sito usabile devi usare il formato che pesa meno dando risultati migliori: fai sempre una prova.
Queste sono due immagini identiche a livello di numero di pexel/colore. La seconda è solamente ruotata di 90°. Sono entrambi in formato gif. La seconda pesa il doppio della prima. Rifletti su questo esempio...
 |
 |
389 byte |
742 byte (+190%) |
Prima si apre il sito e più questo è usabile.
Usa pure immagini stilose, basta che riassumano il concetto della pagina o dell'argomento in cui sono posizionate.
Logo/marchio:
Metti il logo bene in evidenza ma senza strafare: i più grandi siti web del mondo non usano loghi superiori ai 2/300 px di larghezza. Anche in questo caso usa colori armoniosi e possibilmente in tinta piatta.
Perchè parliamo di colore in campo di usabilità?! Semplice: ci sono milioni di siti strutturati in modo uguale ma l'occhio non trova o non percorre in modo logico i link disposti nelle pagine in egual misura su tutti questi siti.
Il motivo risiede nel fatto che molto spesso c'è un caos di colori ed immagini. Se metti 300 colori, gradienti ecc. stai certo che a parità di contenuti avrai meno navigazione perchè le informazioni sono presentate in modo dispersivo e caotico.
Evita quindi fondini troppo creativi per presentare il marchio (e anche altri elementi grafici) a meno che tu non sia un asso della grafica. La regola è: semplificare, semplificare e semplificare.
Testi lunghi :
Per testi molto lunghi hai 2 strade: posizionare ogni 800/1000 px (a piacere) un pulsante che permetta di tornare in cima alla pagina oppure creare un sistema di paginazione usando magari un database. Pare che gli utenti preferiscano il secondo sistema, anche perchè possono bookmarkare il contenuto specifico o la pagina piùù interessante di un intero argomento.
Prepara tutto il testo e poi dividilo in pagine diverse in un secondo momento: questa soluzione rende il sito web realmente più usabile.
Permetti inoltre al tuo visitatore di linkare sempre tutte le pagine del testo paginato.
