I CSS, se usati seguendo determinate norme e buone pratiche, possono fare la differenza nel migliorare l'esperienza degli utenti sui nostri siti. In tutti questi anni ho notato come stili sbagliati siano dannosi per l'usabilità dei siti web perchè realizzati seguendo più l'estetica che non la funzionalità. Il segreto è nel trovare il giusto mezzo tra i due estremi. Ecco alcuni consigli.
Bottoni e pulsanti
I bottoni dei form possono avere tutti gli stili immaginabili, ma una cosa deve essere predominante: devono essere subito riconoscibili e devono assolutamente sembrare cliccabili. In tal senso la pratica di usare come immagini di sfondo lenti di ingrandimento o freccie non è del tutto priva di conseguenze sull'esperienza utente.
L'utente deve percepire subito la cliccabilità dell'oggetto. La call-to-action deve essere chiara e incisiva: l'utente non deve esitare, l'utente non deve pensare.
Link
I link devono essere riconoscibili dal resto del testo. Devono avere un colore che sia diverso da quello del testo, senza abusare delle sfumature. Anche in questo caso, l'utente non deve avere dubbi sul fatto che quella che vede sia una call-to-action e non del normale testo. Il principio è sempre lo stesso: ridurre al minimo i tempi di incertezza da parte dell'utente.
Box in evidenza (callout, teaser ecc.)
Un box in evidenza non necessariamente lo sarà per via del colore di sfondo o del testo dell'elemento che lo marca nel sorgente. Si possono usare i font (peso, stile, capitalizzazione eccetera), le immagini di sfondo, i bordi e anche il posizionamento (floating, posizionamento relativo o assoluto). In altre parole, il box sarà evidente se l'occhio del visitatore vi verrà attratto. Usate una combinazione di queste tecniche e valutatene gli effetti.
Bordi dei campi dei form
I bordi dei campi dei form non dovrebbero apparire troppo sottili per via del colore scelto per il loro bordo, perchè in questo caso l'utente fa fatica a identificare con esattezza l'area editabile. Bisogna fare in modo che l'utente non perda tempo durante la compilazione di un form.
Icone
Le icone, se cliccabili, non dovrebbero essere di dimensioni troppo ridotte. Se lo sono, l'utente fa fatica a posizionare il puntatore del mouse sull'icona e quindi a cliccare. Icone di 12, 16 o anche 24 pixel di larghezza possono mettere in difficoltà gli utenti, specie se si tratta di utenti poco esperti o di persone con deficit visivi. Melius abundare quam deficere.
Intestazioni
Gli utenti, come ricordava Sofia Postai, molto spesso scorrono il testo a salti, usando le intestazioni (h1, h2 eccetera) come punti per orientarsi nel testo. Quindi bisogna dare il giusto rilievo a questi elementi, usando stili incisivi, come gli stili dei font, la capitalizzazione, il colore del testo, l'indentazione del testo o anche i bordi.
Blocchi di testo
I blocchi di testo non dovrebbero essere troppo lunghi e avere un'interlinea adeguata. Ciò facilita la lettura e la consultazione da parte dell'utente. Possiamo ottenere questo effetto regolando le proprietà width, max-width e line-height:
p {
width: 80%;
max-width: 40em;
line-height: 1.4;
}
Per evitare che i link troppo lunghi fuoriescano dal blocco, possiamo usare la proprietà CSS3 word-wrap:
p {
word-wrap: break-word;
}
Questa proprietà viene supportata da tutti i browser, inclusi Internet Explorer 8 ed inferiori.
Menu di navigazione
Le voci di un menu di navigazione dovrebbero essere i rilievo e facilmente cliccabili. Sconsiglio caldamente l'utilizzo di menu a discesa o comunque dinamici realizzati solo con i CSS. Infatti questa soluzione non ci consente di controllare i tempi di apertura e di chiusura dei sottomenu, per cui l'utente spesso non ha il tempo di scorrere con calma le voci dei sottomenu. Per questo motivo consiglio di combinare i CSS con JavaScript.