Definizione di usabilità e le regole base da conoscere
Per comprendere cosa si intende per usabilità del web occorre prima definire questa parola, nella sua accezione più larga.
Possiamo riassumere che l’ usabilità è la capacità di un sistema che, grazie ad un insieme di caratteristiche e qualità (efficacia, efficienza, semplicità), gli permette di essere compreso, appreso, utilizzato e di essere “attraente” per una certa tipologia di utenti, permettendo loro di raggiungere determinati obiettivi in condizioni specifiche. In pratica l’usabilità è basata sul concetto interazione uomo – strumento/sistema (es. interazione con interfacce grafiche, console di varia natura, e così via…)
Un po’ di storia…
Si inizia a parlare di usabilità già negli anni ’60, (che tempi dovevano essere a livello culturale… la Swinging London, l’estate del ’69, varie rivoluzioni, vabeh… non divaghiamo! 🙂 ), quando venivano studiate le interazioni dell’uomo con l’esterno, basandosi sui suoi vincoli fisici e cognitivi (ergonomia cognitiva). Negli anni seguenti, siamo nei mitici quanto movimentati anni ’70, l’usabilità era considerata cosa di poco conto perché chi progettava un sistema sapeva anche utilizzarlo e non interessava altro.
Arriviamo agli anni ’80, poi ai ’90 e il tema si fa più “caldo”, in quanto man mano che vengono sviluppati sistemi più complessi, tecnologie più avanzate e di conseguenza computer più evoluti si rende quindi necessario rendere queste apparecchiature più “user-friendly”. Esiste dunque un contesto in fermento, dentro al quale il concetto di usabilità viene a germogliare e prendere sempre più campo, grazie anche a studi sempre più approfonditi che uniscono la psicologia all’intelligenza artificiale, l’informatica al design.
Ecco che all’epoca la Apple-Macintosh inizia a realizzare i primi computer usabili da persone che fino ad allora non ne avevano mai visto uno… Li seguirà qualche anno dopo la Microsoft con le conseguenze che tutti abbiamo più o meno presenti, diventando uno dei più grandi colossi del mondo IT che si contenderà il mercato con Apple.
Arriva internet, e con il suo massiccio utilizzo nel mondo dell’informatica e la sua diffusione in tutto il globo, il concetto di usabilità si focalizza sempre più sull’interazione utente – sistema (con particolare riferimento ad applicativi e siti web) alla quale sono strettamente collegate l’ interfaccia grafica (Graphic User Interface) e l’esperienza utente (User Experience) da essa derivante.
Siamo ai nostri giorni, dove questi concetti sono diventati pilastri fondamentali perché determinano la buona riuscita di un progetto, la sua diffusione, la capacità di comunicare ed essere compreso senza troppi sforzi, nonché la possibilità di essere utilizzato da parte dell’utente e quindi anche una possibilità in più di soddisfare un bisogno in modo efficiente e gratificante. Non dimentichiamoci che tutto ruota intorno all’utente…
Le condizioni basilari della usabilità
Abbiamo accennato sopra a determinate caratteristiche che deve esprimere il concetto di usabilità. Quindi il sistema viene definito usabile quando soddisfa queste condizioni:
La comprensibilità: il sito web (o sistema) deve essere comprensibile, l’utente deve capire subito dove si trova, non deve provare smarrimento o lo abbandonerà in un attimo (con molta probabilità alzando l’indice di rimbalzo).
La facilità di apprendimento: il sito deve essere semplice da capire e l’utente non dovrebbe fare un eccessivo sforzo nell’apprendimento al suo utilizzo.
L’utilizzabilità: l’utente deve poter utilizzare il sistema o il sito senza eccessive difficoltà, utilizzando i suoi controlli.
L’ efficacia: l’utente deve raggiungere ciò che cerca in modo preciso e completo
L’ efficienza: simile alla condizione precedente, per raggiungere ciò che cerca in modo preciso e completo l’utente impiegherà delle risorse (ad esempio un certo tempo per trovare le informazioni in un blog)
La facilità di ricordo: la capacità di interazione, anche dopo un lungo periodo di inutilizzo, da parte dell’utente con l’interfaccia senza doverla imparare nuovamente da capo.
Utilizzo confortevole: deriva dal fatto che l’utente si deve sentire “a proprio agio” e confortevole nell’utilizzo del sistema e al raggiungimento dell’obiettivo specifico.
Quando siamo nel tema usabilità ci troviamo solitamente di fronte a due realtà:
quella del progettista (fatta di idee sul funzionamento del prodotto, di funzionalità, ecc trasferite infine sul design) e quella dell’utente, con le sue aspettative sul funzionamento del prodotto. A volte queste due realtà non collimano. Più le due realtà coincidono più il grado di usabilità sarà elevato…
Bene, abbiamo già diverse informazioni su cui lavorare… tenendole presenti riusciamo quindi a elaborare ulteriori concetti che entrano più nello specifico dell’ambito web.
I “comandamenti” della web usability
Con web usability identifichiamo in genere il corretto approccio alla progettazione che serve a rendere i siti web facili da navigare in modo del tutto naturale e senza una formazione specifica per l’utilizzo. La cosa fondamentale è che l’utente trovi facilmente i contenuti in modo intuitivo, efficiente ed “amichevole” (da qui user-friendly), riproducendo anche azioni che compie nel quotidiano (come premere un pulsante, leggere, sfogliare una pagina, ecc)
Queste sono alcune delle (numerose) linee guida di un sito web che si definisce usabile:
1) Processo di design e valutazione
Fornire contenuti coinvolgenti, rilevanti e appropriati al target a cui è destinato.
Capire le richieste degli utenti: maggiore è lo scambio di informazioni con gli utenti maggiore sarà il successo di un sito web, poiché andrà incontro alle sue aspettative.
Prima di iniziare a lavorare al progetto, identificare quali sono gli obiettivi della comunicazione (un sito aziendale piuttosto di un e-commerce, ecc). L’obiettivo serve ad individuare il target, le funzionalità, il look e l’appeal del sito web.
Considerare, ancor prima dell’aspetto estetico, le prestazioni del sito web, la navigabilità, la velocità del caricamento delle immagini, la formattazione del contenuto e l’impatto che avrà quando sarà on line.
2) Esperienza utente
Da evitare assolutamente azioni non richieste o non gradite dall’utente, come ad esempio quei pop up (a parer mio molesti) che si aprono appena si entra in una pagina, il rischio è che l’utente abbandoni il sito.
Fornire le informazioni che l’utente cerca in modo organizzato, magari creando degli archivi, dando sempre un aspetto di professionalità nel design. La parola chiave è autorevolezza, da cui deriva credibilità (nelle fonti, nei contenuti ecc).
Ci sono delle sequenze che l’utente compie durante la navigazione di un sito, come ad esempio cercare alcune informazioni in posizioni particolari del sito, operazioni tipo il processo di acquisto di un prodotto ed altre simili debbono avere una sequenza logica tale da permettere il compimento di un’azione in pochi click (i famosi 3 click).
Ottimizzare i tempi di scaricamento della pagina nel sito: pagine troppo pesanti da scaricare non incentivano l’utente a rimanervi a lungo. Ottimizzate le immagini, i css e gli script in modo tale che si accorci il tempo di caricamento ed il “peso” della pagina. Ovviamente su questo si ripercuote anche la scelta di un server performante piuttosto di uno economico ma più lento.
Su certi siti web sarebbe opportuno inserire un avviso che avverte l’utente che la pagina potrebbe richiedere di essere ricaricata, per motivi di sicurezza. Paypal ne è un esempio…
Nei lunghi tempi di attesa, ad esempio per un caricamento di un media, un download, ecc sarebbe opportuno mostrare un avviso che avverte l’utente dei tempi di attesa, il peso di un’immagine scaricabile ad un dato tipo di connessione, in modo tale che l’utente possa decidere se e quando effettuare il download ed attendere.
Alcuni utenti stampano le pagine dei siti web, contemplare anche una giusta formattazione con le misure di stampa appropriate. Esistono ad esempio per wordpress dei plugin che convertono in pdf la pagina.
3) Accessibilità
Se inserite moduli di contatto e quant’altro utilizzate tecnologia di supporto (assistive technology) per guidare l’utente nella compilazione dei moduli on line.
Se utilizzate il colore per evidenziare delle informazioni, queste debbono potersi vedere anche senza. La scelta della scala cromatica e dell’abbinamento dei colori è fondamentale per rendere il sito gradevole alla vista ma anche fruibile e leggibile in tutte le sue parti.
Inserite sempre un testo che sostituisca un elemento non testuale (dalle immagini ai filmati, a pulsanti grafici, ecc)
Le pagine di un sito dovrebbero potersi leggere anche senza l’utilizzo dei css e dei vari stili e/o grafiche, anche con browser testuali, sempre in maniera ordinata, contemplando anche la lettura delle pagine da parte di persone non vedenti.
4) Hardware e Software
Nella realizzazione di un sito web contemplatelo sempre per essere utilizzato dai browser più comuni e per i sistemi operativi più diffusi. Occorre anche tener conto che gli utenti utilizzano sì browser più comuni nella maggiorparte dei casi, ma anche che non tutti hanno le stesse impostazioni di default e che non tutti hanno lo stesso tipo di connessione internet.
Rispettare gli standard odierni delle risoluzioni degli schermi più diffusi (desktop), generalmente è quella 1024×768.
5) Home page – struttura
La homepage deve essere sempre raggiungibile da qualsiasi parte ci si trovi nel sito.
E’ molto importante posizionare le giuste informazioni e le varie opzioni nella homepage, da cui poi l’utente potra iniziare la sua esperienza di navigazione. Gerarchia delle informazioni, dei link e delle azioni che si vogliono far compiere.
La homepage è importante in quanto offre all’utente la possibilità di valutare la qualità del sito in cui si trova, e di conseguenza anche eventuali azioni successive, come una conversione, l’iscrizione ad una mailing list, ecc ecc.
Quando si atterra sull’homepage occorre farsi questa domanda: dove mi trovo? Importantissimo dunque che la pagina presenti subito chiaramente quelle risposte all’utente. Una buona pratica è quella di evidenziare ciò che il sito offre, produce o realizza, in modo tale da fornire subito quel valore (e caso mai una risoluzione ad un problema) che l’utente va cercando. Parola chiave: evitare di essere fraintesi.
Scivere testi concisi e non troppo lunghi, l’utente ha ridotte capacità di lettura on line, quindi meglio non esagerare con presentazioni troppo prolisse e piene di tecnicismi.
Nel caso in cui ci si trovi a inserire testi parecchio lunghi (come questo che sto scrivendo!!!), spezzare i paragrafi in periodi e utilizzare le intestazioni (headings) per enfatizzarli e non affaticare il lettore.
Si dà per scontato ma…. occorre dare subito l’impressione che l’utente si trova effettivamente nella homepage di un sito! 🙂
Evitare possibilmente una pagina lunga in verticale, scrollabile (l’utente in genere non ama farlo), a meno che non si tratti di un articolo di blog, ecc, quindi le informazioni interessanti dovrebbero essere inserite nella sezione alta (“above the fold”) del sito, onde evitare che l’utente abbandoni il sito.
6) Layout pagina
Evitare “pastrocchi” e sovraffollamento di contenuti nella pagina (come spesso capita di vedere in portali et similia!) E’ importantissimo non creare confusione nell’utente, dando una chiara disposizione alle informazioni, ai contenuti, ecc. Una pagina non troppo carica ne guadagna anche in performance di caricamento.
Posizionare gli elementi cliccabili vicino alla parte alta della pagina, così che l’utente potrà anche darli più importanza. Così facendo anticipiamo anche le sue aspettative, poiché si troverà l’elemento proprio nella posizione attesa.
Le informazioni devono essere organizzate e strutturate in modo tale da essere facilmente leggibili e fruibili, sempre con facilità. Gerarchia delle informazioni!
Un pagina con gli elementi ben allineati, risulta più gradevole e confortevole da navigare e da leggere, un po’ come un libro o una rivista ben impaginata ed equilibrata.
Utilizzare layout fluidi (meglio se responsive) che si adattano a varie dimensioni di schermi e dispositivi.
Non dimenticate di utilizzare lo spazio! Come nel visual design, armonia ed equilibrio sono fondamentali e anche gli spazi giocano un ruolo molto importante!
Utilizzare possibilmente una lunghezza delle linee compresa tra 75 e 100 caratteri.
7) Navigazione
Evitare di utilizzare pagine che non hanno opzioni di navigazione, magari senza il menù o altro che renda l’utente incapace di ritrovare il percorso da dove è venuto, a tal proposito risulta utile il pulsante o link “torna indietro”.
In maniera simile alle informazioni, anche le voci di menù devono essere organizzate in modo logico, così da creare una navigazione agevole e non caotica. E soprattutto si devono trovare bene!!!
Altro elemento che potrebbe risultare utile sono i cosiddetti “breadcrumbs” (briciole di pane) che permettono all’utente di sapere sempre dove si trova e da dove è arrivato.
La posizione del menù primario può essere o in alto oppure sulla sinistra, mentre quello secondario e via dicendo possono essere posti insieme sotto.
L’uso della site map può aiutare l’utente a capire l’albero gerarchico delle pagine, non strettamente necessario, ma in caso di siti corposi può essere gradito.
8) Intestazioni, titoli ed etichette
I titoli così come le intestazioni o altre etichette devono rispecchiare le informazioni che fornite nel sito web. Un titolo fuorviante, ambiguo o incomprensibile non è sicuramente appetibile all’utente in cerca di contenuti. Parola chiave: coerenza!
Catturare l’attenzione dell’utente con intestazioni, font e dimensioni appropriate.
Se utilizzate tabelle assicuratevi che abbiano le intestazioni nelle righe e nelle colonne, in modo da spiegare bene di che si tratta.
Le intestazioni vanno utilizzate secondo l’ordine HTML, h1, h2, h3, ecc
Ogni pagina deve avere un titolo unico, descrittivo e conciso per rappresentare il contenuto.
Le intestazioni (headings) devono essere ben scritte, chiare in modo che l’utente riesca subito a comprenderli.
9) Links
I links devono essere collegati in modo coerente e portare alla pagina che realmente rappresentano.
In caso di immagini cliccabili assicurarsi che l’intera immagine lo sia, altrimenti evidenziarne la parte.
I link testuali sono preferibili da usare, anche in ottica di SEO.
10) Aspetto del testo
Per quanto riguarda il testo occorre tener presente il contrasto con lo sfondo, la leggibilità è fondamentale, scegliere dunque appropriati font ma anche sfondi che non appesantiscano la lettura o la rendano addirittura impossibile.
È preferibile usare un testo di grandezza di default a 12pt su tutte le pagine web e un font che sia leggibile su tutti i browser. Anche qui è importante la velocità di caricamento del font, consultabile ad esempio su google Fonts.
Enfatizzare, ma senza esagerare, le parole più importanti sulle quali si vuol far attrarre l’attenzione dell’utente con il tag “<strong></strong>” .
11) Liste
Le liste devono essere organizzate, utilizzare i simboli delle liste appropriati: quelli neutri per elementi di pari valore, quelle numerate per dare un senso di importanza e di ordine.
12) Grafica, immagini e media
Utilizzare immagini di sfondo non troppo pesanti, come accennato sopra, che non pregiudichino l’ottimale leggibilità del testo.
Aggiungere gli attributi “alt” e “title” alle immagini, per far capire all’utente di che si tratta nel caso disattivasse il caricamento dei media, in ogni caso fa molto bene al SEO :).
Su ogni pagina porre sempre il logo, in una parte alta ad esempio, che riconduca alla home page.
Video ed altri media sono utili quando apportano informazioni in più o spiegano meglio il contenuto delle informazioni. Evitare video che si attivano da sé come avviene in molti siti web, che non c’entrano nulla coi contenuti del sito. Sono solo fastidiosi e penalizzano le performance del sito.
Le immagini dovrebbero apparire non come banner pubblicitari distaccati dal contesto del sito, ma come corredo dell’articolo o della pagina.
13) Contenuti web
Come già accennato, utilizzare parole comprensibili, utilizzate nel quotidiano, già conosciute dall’utente e spiegare eventuali acronimi o abbreviazioni. Più il linguaggio è semplice più si avvicina all’utente.
Per dare maggior leggibilità al testo si possono utlizzare alcune parole in maiuscolo, in grassetto, per focalizzare l’attenzione dell’utente.
14) Organizzazione dei contenuti
Organizzare i contenuti per ogni livello del sito web, in modo gerarchico, ordinato e strutturato così da far trovare all’utente ciò che va cercando.
Per facilitare la scansione dell’occhio umano le pagine dovrebbero essere create rispettando un ordine di posizionamento degli elementi: intestazione, eventuale breve sottotitolo, testo in paragrafi brevi.
Per concludere… tutte le informazioni presenti in un sito web debbono essere trovate facilmente e in tempi abbastanza rapidi, pena l’abbandono del sito e soprattutto… “economizzare” i click!
Se anche voi volete aggiungere qualche altra informazione utile all’usabilità web non vi resta che inserirla nei commenti! Buon web design! 🙂
