Leon Zernitsky (Moscow, 1949 - Thornhill, Ontario, Canada) – Technology and Working Woman
Perché il tuo sito fa schifo, e come puoi migliorarlo
di Federico Torrielli
Dall’alba del web, fino ad oggi, sono cambiate talmente tante specifiche web che pure un esperto di web design fa fatica a stare dietro al turbinoso circolare dei cambiamenti. Tutto quello che so io, però, è che la maggior parte dei siti che risiedono nel web sono fatti male, pieni di falle e disgustosi pure all’uomo, oltre che alla macchina su cui risiede il sito.
Ho voluto allora mettere su una piccola guida in grado di aiutare neofiti e non a capire come massimizzare il rapporto d’efficienza che l’utente può avere nei confronti del sito, eliminando le barriere che separano un sito pessimo da un sito apprezzabile.
Partiamo dalle basi: il nostro sito web dovrebbe teoricamente fare parte di quello che T.B. Lee (l’inventore del www) definisce come “Web For All”. Per accessibilità (definizione W3C) diciamo che affronta gli aspetti discriminatori relativi all’esperienza utente equivalente per le persone con disabilità. L’accessibilità del Web significa che “le persone con disabilità possono ugualmente percepire, comprendere, navigare e interagire con siti Web e strumenti. Significa anche che possono contribuire allo stesso modo senza barriere”.
Un sito web, come un documento, dovrebbe essere leggibile (o ascoltabile) da un utente con qualsiasi tipo di disabilità. Spesso gli standard come HTML5 fanno già la maggior parte del lavoro, ma alle volte è necessario fare quel piccolo sforzo in più per rendere un sito apprezzabile da tutti, veramente.
Nella pratica, è veramente semplice: utilizzare l’attributo “alt” per descrivere le immagini, mantenere il contenuto sempre scritto, in modo da permettere a sistemi di riconoscimento del testo (vd. VoiceOver) di leggerlo senza problemi. In alternativa, un transcript audio umano è anche una bellissima idea, oltre che divertente da realizzare.
Entriamo nel territorio dove tutti peccano: cosa rende il mio sito apprezzato e facile da usare?
Secondo le idee di Steve Krug, una pagina web come si deve dovrebbe minimizzare lo sforzo cognitivo che un utente pone, aumentando l’attenzione che esso presta nel leggere il suo contenuto. Frasi brevi, concise, metafore semplici ed efficaci, niente ambiguità. Per essere riassuntivo, ecco una lista che potrebbe tornarti utile:
- Minimizza il numero di interazioni: nessuno ha voglia di fare 300 click per accedere ad una specifica risorsa
- Rendi il tuo sito stilisticamente omogeneo, evitando sbalzi di colori e stili grafici diversi per ogni pagina
- Segui la legge di Fitt: il tempo necessario per raggiungere un oggetto è determinato dalla sua distanza e dalla sua dimensione (oggetti più grandi e vicini sono più facili da raggiungere!)
- Rendi un’interfaccia prevedibile: pochi bottoni devono dire tutto all’utente
- Riduci i tempi di attesa: secondo le ricerche di Miller (1968), un utente che aspetta meno di 1/10 di secondo perde già l’attenzione verso la risorsa (NB: nelfuturo.com risponde in ben 10 secondi, inaccettabile per un sito di informazione → https://developers.google.com/speed/pagespeed/insights/?hl=IT&url=http%3A%2F%2Fnelfuturo.com)
- Proteggi sempre il lavoro dell’utente: se ho bisogno di scrivere un commento e chiudo per sbaglio la pagina, voglio che esso resti in attesa di una conferma al mio ritorno
- Elabora una chiara gerarchia visiva: rendi ovvio ciò che è cliccabile e rendi il contenuto principale visibile sopra ogni altra cosa
- Design responsive: il tuo sito deve essere ben fruibile anche da dispositivi diversi da un computer. Ricorda anche che gli utenti mobile possiedono ancora meno pazienza degli utenti davanti ad un computer!
Che sia un sito web di giornalismo o meno, ricordati che ciò che scrivi identifica il tuo sito. La costruzione dell’identità di un sito parte dalla tua homepage. Prova a seguire l’esempio della piramide invertita: prima vengono i contenuti essenziali ed interessanti, poi le informazioni di supporto ed infine contatti ed informative per la privacy: rompere questa gerarchia significa anche rendere il tuo sito un’accozzaglia di informazioni poste a caso. Come per il paragrafo precedente, ti voglio dare qualche consiglio facile e veloce per migliorare il tuo stile:
- Segui la terza legge di Krug: sbarazzati della metà delle parole, e poi, sbarazzati della metà di ciò che resta. Meno dell’1% di chi naviga il web è intenzionato a leggere papiri di parole, a nessuno interessa la tua storia, quello che vuoi fare, sogni e desideri: concentrati sul contenuto essenziale, e supportalo con belle immagini e catchphrases interessanti
- La tua homepage deve poter dare l’accesso a tutto il tuo contenuto principale, e deve evitare ciò che alla gente non piace leggere (prezzi, brutte notizie etc. etc.)
- Includi una semplice barra di ricerca che faccia accedere all’archivio completo delle informazioni del sito: una parola deve portare l’utente esattamente dove vuole in tempo zero
- Evita sfondi: colori a tinta unita sono più accattivanti e gradevoli di foto di cascate e montagne
- Segui le leggi euristiche di Nielsen: rendi lo stato del tuo sistema sempre visibile (sito offline/online), adattati allo standard dei siti che fanno ciò che vorresti fare meglio di te, prevedi gli errori che un utente potrebbe fare e rendi il tuo design minimal
Per affordance si intende la proprietà di un oggetto (reale o virtuale) di influenzare il modo in cui viene usato: un oggetto che possiede una buona affordance si “lascia” usare correttamente. Per fare un esempio, la bellezza e la semplicità del bottone è che dia l’accesso ad un mondo nascosto, con un solo click. Se vuoi che il tuo sito abbia elementi che facciano uso di questa proprietà, è necessario che seguano alcune regole ben stabilite nel mondo della Human Computer Interaction:
- Effettua un buon mapping: a quattro elementi diversi corrispondono sempre quattro bottoni, nella stessa identica posizione degli elementi
- Rendi il tuo sistema a prova di pesce: massimizza l’attenzione e minimizza ciò che l’utente deve ricordarsi. Evita interferenze e distrazioni al task che l’utente deve portare a termine e ricordati che l’automatic processing non gioca sempre a tuo favore: le abitudini di ricerca sono difficili da scalfire.
- Ogni elemento del tuo sito deve essere esattamente corrispondente ad un elemento reale ben conosciuto: documenti come pagine di carta, immagini come piccole miniature appese al muro.
- Se un oggetto ha bisogno di una label, o di una descrizione, ricostruiscilo fino a quando non sarà automaticamente comprensibile solo guardandolo: il tuo sito web NON deve essere un’opera d’arte contemporanea!
Siamo arrivati ad un punto cruciale: come possiamo rendere il tuo contenuto scritto appetibile agli utenti?
Innanzitutto dobbiamo distinguere la leggibilità dalla comprensibilità (legibility, readability).
La legibility è la facilità con cui riusciamo a distinguere le singole lettere di un testo: per ottimizzarla, utilizziamo font sans-serif semplici e ben conosciuti, al termine della nostra progettazione, sarà necessario fare uso di un controllo di struttura tipografica avanzato.
La readability, dalla sua parte, è un concetto leggermente più complicato: è la facilità di comprensione dei contenuti da parte dell’utente. Come riusciamo a valutare un concetto così soggettivo?
Iniziamo dalle basi: dalla prima scrittura, valutiamo il livello lessicale, sintattico e semantico del testo, accorciando paragrafi lunghi ed evidentemente “noiosi”. Spostiamoci poi sull’approccio personale del lettore, valutando l’indice di leggibilità del contenuto: grazie a strumenti come Gulpease, riusciamo a capire a chi può essere indirizzato il nostro contenuto, e come migliorarlo.
Facciamo ora un esempio: l’ultimo bellissimo articolo di Tito Giraudo “Il nostro novecento - capitolo 1” ha un indice di leggibilità Gulpease di 57/100. Ciò non vuol dire che NON sia leggibile, ma che per affrontarne la lettura, sia necessaria in media una licenza superiore (eccezion fatta per i vecchi autodidatti). Potete valutare anche voi il vostro indice sul sito: https://farfalla-project.org/readability_static/.
Alle volte il web può essere confuso, con indizi attentivi che portano l’utente fuori dagli schemi del programmatore. Solitamente, i siti che richiedono apprendimento per l’uso, sono dedicati ad un pubblico “capace” di capire, e che voglia, in cambio del tempo passato a studiare, una ricompensa in termini di usabilità. Certe funzioni tecnologiche non dovrebbero essere infatti per forza comprensibili da tutti, soprattutto se tecnicamente la piattaforma in questione è stata progettata per utenti avanzati: nella maggior parte dei casi, però, è colpa del progettatore se l’utente si perde e rinuncia al proprio goal, per passare ad un sito che faccia la stessa cosa, ma più facilmente. La pazienza perciò non deve mai finire: è facile dire che un sito è fatto bene, se l’hai fatto tu. Prova a chiedere ad amici e perfetti estranei di provarlo con te sul momento della progettazione: un feedback condiviso potrà aiutarti a procedere nella strada giusta ed imparare cosa vuol dire veramente interazione uomo-macchina.
