5 Gennaio 2023

Le 10 euristiche di usabilità di Jakob Nielsen

Home / News / Approfondimenti / Le 10 euristiche di usabilità di Jakob Nielsen

Autore

Team di Wave Informatica

Categoria

Approfondimenti

Le euristiche di usabilità sono delle linee guida generiche da tenere in considerazione nel misurare il livello di usabilità di un prodotto.

Chi ha definito le euristiche di usabilità?

Le 10 euristiche sono state definite nel 1990 da Jakob Nielsen, che insieme a Don Norman ha fondato il Nielsen Norman Group, il punto di riferimento per tutti i professionisti di UX Design.

A cosa servono le euristiche di usabilità?

Come già detto, le euristiche sono delle linee guida generali utili per valutare il grado di usabilità di un prodotto (sito web, software, app…).

Dopo che avrai letto la definizione delle 10 euristiche, avrai un’idea più precisa di come dovrebbe essere un prodotto tecnologico per essere definito “usabile”, anche se non ti occupi principalmente di UX Design.

Definizione delle 10 euristiche di usabilità

01 – Visibilità dello stato del sistema

L’utente ha bisogno di ricevere informazioni sullo stato del sistema, in modo da sapere cosa sta succedendo, dove si trova e cosa può fare.

È sempre una buona idea, quindi, utilizzare testi, immagini, icone, colori, forme e tutto ciò che può essere utile per comunicare in maniera efficace lo stato del sistema, ed eventuali conseguenze delle azioni dell’utente.

Esempi dell'euristica di usabilità 1: visibilità del sistema
Alcuni degli elementi che servono a mostrare lo stato del sistema: percentuale di completamento, notifica di azione completata con successo, percentuale di caricamento.

Esempi positivi: mostrare la percentuale di caricamento di un allegato, visualizzare un messaggio di conferma quando viene compilato correttamente un form, inviare un’email di avvenuta registrazione alla fine del processo di sign up.

Esempi negativi: feedback generici (ad esempio “Errore 5xx”, “Qualcosa non ha funzionato”), non mostrare un messaggio di conferma dopo che l’utente ha completato un acquisto, non usare tratti distintivi per un elemento selezionato rispetto a uno non selezionato.

02 – Corrispondenza tra il sistema ed il mondo reale

Il mondo delle interfacce digitali è inevitabilmente ispirato al mondo reale, questo perché fin dai primi sistemi operativi è stato necessario creare un linguaggio comprensibile per l’utente.

È per questo che si è deciso che i contenitori di file si chiamassero e avessero l’icona di “Cartelle”, o ancora che gli elementi eliminati finissero in un “Cestino”.

Nella scelta di parole e immagini bisogna tenere in considerazione quali sono gli oggetti con cui il nostro utente ha a che fare, e decidere di conseguenza.

Questa euristica è di fondamentale importanza soprattutto quando ci si trova davanti a concetti poco battuti da altre interfacce.

Pensa ad esempio ai primi e-commerce: qualcuno ad un certo punto ha deciso che il concetto giusto per la sezione in cui venivano salvati gli articoli da acquistare fosse il “Carrello”, e così da allora abbiamo iniziato tutti ad usare la parola carrello e individuiamo quella sezione con l’icona di un vero e proprio carrello, come quelli che usiamo al supermercato.

Esempi dell'euristica di usabilità 2: corrispondenza tra il sistema ed il mondo reale
L’icona della cartella e del cestino sono un classico esempio di corrispondenza tra sistema e mondo reale. Nella terza immagine un form in cui i dati richiesti vengono spiegati attraverso didascalie e immagini realistiche di una carta di credito.

Esempi positivi: usare icone di oggetti che corrispondono alla parola o al contesto.

Esempi negativi: usare icone di oggetti che NON corrispondono alla parola o al contesto, usare icone obsolete che non corrispondono agli oggetti utilizzati dal target di riferimento (ad esempio, l’utilizzo dell’icona a forma di floppy disk per l’azione di salvataggio: chi è nato dopo il 2000 probabilmente non sa di cosa si tratta!).

03 – Controllo e libertà dell’utente

L’utente ha bisogno di avere il controllo e poter decidere in ogni momento di uscire, annullare un’azione o tornare allo stato in cui si trovava precedentemente.

Pensa ad esempio all’utilità del bottone “Annulla” (ctrl + Z o command + Z) o ai breadcrumb che trovi all’inizio di questa pagina.

Prevedi dunque in ogni schermata dei link per tornare indietro, bottoni di reset e tutto ciò che può fungere da uscita di emergenza.

Esempi dell'euristica di usabilità 3: controllo e libertà dell'utente
Il bottone per tornare indietro permette all’utente di uscire dalla schermata attuale e spostarsi a quella precedente. Le notifiche di azione avvenuta con successo possono contenere un bottone per annullare l’azione appena eseguita.

Esempi positivi: breadcrumb, bottone “Annulla”, shortcut ctrl + Z da tastiera, funzionalità di modifica ed eliminazione di dati, tasto di chiusura nelle finestre pop-up.

Esempi negativi: non è possibile modificare o eliminare un oggetto creato, se l’utente apre per sbaglio una finestra pop-up non può chiuderla, assenza di bottoni “Torna indietro”.

04 – Coerenza e standard

Non solo devi usare un linguaggio coerente all’interno dello stesso prodotto, o di prodotti della stessa suite, ma anche tenere in considerazione immagini e concetti usati da altri prodotti simili.

Come ci ricorda Jakob Nielsen in questo video sulla legge della user experience su internet, gli utenti trascorrono la maggior parte del tempo su altri siti web, dunque il tuo sito dovrà usare un linguaggio simile a quello che già conoscono.

Questo vale anche per applicazioni mobile, software, piattaforme ecc…

Non si tratta di copiare, ma di usare il buon senso ed evitare immagini o testi completamente nuovi per concetti che gli utenti già conoscono da altri siti (come si dice spesso nel settore dello sviluppo software, “non reinventare la ruota“!).

Esempi dell'euristica di usabilità 4: coerenza e standard
In questa figura sono estratti i componenti bottoni di tre design system: iOS, Carbon (IBM), Material UI. Il Design System permette di definire gli elementi dell’interfaccia e usarli in maniera coerente.

Esempi positivi: usare sempre la parola “Annulla” per annullare una azione e “Conferma” per confermarla, utilizzare correttamente icone di librerie ampiamente conosciute come Material UI.

Esempi negativi: usare termini diversi per indicare la stessa azione nello stesso prodotto, mostrare elementi essenziali come navbar e bottoni di azione ogni volta in un posto diverso della schermata.

05 – Prevenzione degli errori

Per questo possibile, fai in modo che gli utenti non possano incorrere in errori ed evita che si verifichino problemi, soprattutto se sai già che sarebbero complessi da risolvere.

Usa messaggi di conferma chiari prima che un’azione importante venga eseguita, evita fraintendimenti, assicurati che gli elementi di azione siano ben visibili e separati fra loro e, in generale, crea un percorso utente semplice e intuitivo.

Esempi dell'euristica di usabilità 5: prevenzione degli errori
Nella figura sono rappresentati avvisi di errore e finestre pop-up di conferma, che servono a prevenire errori da parte dell’utente.

Esempi positivi: bottoni ben staccati fra loro, richieste di conferma con messaggi e bottoni chiari, testi informativi che aiutano a scegliere l’oggetto giusto da una lista o una select.

Esempi negativi: finestra modale di conferma che utilizza i bottoni “Ok” e “Annulla”, select con opzioni poco parlanti, assenza di richiesta di conferma su azioni che comportano la perdita di dati.

06 – Prediligi il riconoscimento al ricordo 

Riconoscere un’informazione anziché ricordarla da zero è molto più semplice.

Pensa ad esempio alla tendina di scelta del font tipografico, che oltre al nome del font ti mostra già il suo aspetto: molto utile, no? Anche perché quasi nessuno riesce a ricordare perfettamente l’aspetto di ogni singolo font, o il suo nome.

Per questo è buona pratica aiutare l’utente mostrando le informazioni utili a raggiungere il suo obiettivo ogni volta che sia necessario.

Esempi dell'euristica di usabilità 6: prediligi il riconoscimento al ricordo
Visual Studio Code suggerisce nomi di funzioni, variabili e molto altro. Google mostra l’aspetto dei font tipografici e dei loro pesi e suggerisce nomi di file e cartelle in base alle lettere inserite nella ricerca.

Esempi positivi: tendine di scelta con opzioni complete di dati, campi in cui basta scrivere le prime tre lettere per trovare le opzioni corrispondenti, pagine di riepilogo prima della conferma di un ordine.

Esempi negativi: lunghe procedure a step in cui i dati non vengono riepilogati, tabelle di oggetti in cui non vengono riportati i dati essenziali di ogni oggetto ma solo un codice o un titolo.

07 – Flessibilità ed efficienza d’uso

Quando parliamo di flessibilità del sistema, in ambito UX, ci riferiamo alla possibilità da parte dell’utente di utilizzare scorciatoie e acceleratori per compiere le azioni in maniera più rapida.

Un classico esempio sono gli shortcut, ovvero combinazioni di tasti come ctrl + z / command + z per annullare l’ultima operazione o ctrl + c / command + c per copiare un testo selezionato.

Un altro modo per velocizzare l’operatività dell’utente è mostrare azioni rapide, attraverso bottoni o gesture (se parliamo di un’applicazione mobile), tenendo in considerazione quali sono le operazioni che vengono usate più spesso.

Esempi dell'euristica di usabilità 7: flessibilità ed efficienza d'uso
Gli shortcut e le azioni rapide permettono di abbreviare il percorso dell’utente e ottimizzare i tempi. In questo esempio, gli shortcut di Figma, Microsoft Outlook e Medium.

Esempi positivi: shortcut da tastiera, azioni rapide attivabili con il tasto destro del mouse, swipe a sinistra o a destra da mobile per attivare una funzionalità.

Esempi negativi: totale assenza di azioni rapide contestuali, shortcut assenti o diversi da quelli più comunemente utilizzati (ad es. usare la combinazione ctrl + v / command + v per sottolineare un testo anziché per incollare un appunto).

08 – Estetica e progettazione minimalista

Less is more.

Oggi la nostra attenzione è più delicata che mai, dunque ci risulta difficile interagire con interfacce che includono molti elementi visivi e che non ci permettono di individuare immediatamente le informazioni realmente utili.

Evita di ingombrare la pagina o la schermata di immagini, testi, decorazioni, colori diversi o icone: ogni elemento dovrebbe avere un ruolo ben definito, uno scopo.

Gli spazi bianchi hanno un loro peso e vanno utilizzati con buon senso, per garantire leggibilità e conferire ad ogni elemento la giusta importanza.

Esempi dell'euristica di usabilità 8: estetica e design minimalista
Anche nel nostro sito waveinformatica.com abbiamo optato per ampi spazi bianchi e una gerarchia dei testi ben definita. Anche il sito Think with Google e la homepage di Bing hanno un aspetto minimal.

Esempi positivi: testi con gerarchie visive ben organizzate, spazio bianco sufficiente tra le sezioni della pagina, form che richiedono solo le informazioni necessarie.

Esempi negativi: utilizzo di molti colori diversi nella stessa pagina, assembramento di testi e immagini senza spazi bianchi.

09 – Aiuta gli utenti a riconoscere, diagnosticare ed uscire dalle situazioni di errore

Gli utenti sbagliano, questo è inevitabile.

L’errore può verificarsi per moltissime ragioni, non ultima un bug del sistema o una momentanea interruzione del servizio.

Quando l’utente ha commesso un errore, deve capire cosa è successo, e avere la possibilità di rimediare.

Usa dunque messaggi di errore chiari e non generici, e suggerisci all’utente cosa fare per risolvere il problema.

Esempi dell'euristica di usabilità 9: aiuta a riconoscere ed uscire dalle situazioni di errore
Un messaggio di errore completo, in cui viene spiegato cosa è successo, il motivo e cosa l’utente può fare per rimediare. In basso, la pagina 404 del sito waveinformatica.com, in cui l’utente riceve una spiegazione chiara e diverse opzioni di risoluzione.

Esempi positivi: messaggi di errore esplicativi, come “l’indirizzo email inserito non è scritto correttamente”, pagina 404 con suggerimenti di altre pagine da visitare (guarda la pagina 404 di Wave Informatica).

Esempi negativi: messaggi di errore con codice, come “Error 500: service not available”, form in cui gli errori di validazione non sono espliciti.

10 – Supporto e documentazione 

A volte un ottimo studio della UX non è sufficiente, e l’utente ha bisogno di essere istruito su come usare il sistema.

Inoltre, per alcune situazioni potrebbe essere utile fornire un buon supporto per portare a termine i task e risolvere gli errori.

Includi una documentazione pratica, incentrata sui percorsi dell’utente, compatta, che utilizzi una terminologia comprensibile.

Se necessario puoi usare anche dei suggerimenti contestuali attivabili al click o al passaggio del mouse.

Esempi dell'euristica di usabilità 10: supporto e documentazione
La guida in linea dei prodotti della suite Microsoft 365 permette di consultare rapidamente la documentazione, mentre il tour guidato di Google Drive istruisce l’utente all’uso efficiente dell’applicazione.

Esempi positivi: documentazione in linea ben organizzata, tour dell’applicazione che mostrano all’utente come usare il sistema con azioni pratiche, chat in tempo reale con il supporto clienti.

Esempi negativi: documentazione che usa termini tecnici avanzati, assenza di un servizio di supporto o supporto con tempistiche di risposta insoddisfacenti.

Conclusioni

Abbiamo visto insieme le 10 euristiche di usabilità, utilizzate da UX/UI designer in fase di progettazione e di valutazione delle interfacce.

Ogni prodotto ha caratteristiche e necessità diverse, ma queste linee guida sono universali e potrai usarle per valutare il livello di usabilità di qualsiasi interfaccia, sia che si tratti di un sito web istituzionale, un software gestionale o un’applicazione mobile.

FAQ sulle euristiche di usabilità

Cosa sono le euristiche di usabilità?

Sono 10 regole generali utili per valutare il livello di usabilità di un sistema.

Chi ha definito le euristiche di usabilità?

Jakob Nielsen, guru della User Experience, ha definito all’inizio degli anni ’90 le 10 euristiche.

Cos’è la valutazione euristica?

Si tratta di un test in cui si eseguono vari task su un sito web, un software o un’applicazione, e si valuta quando vengono rispettate le 10 euristiche di usabilità di Nielsen. Per ogni problema di usabilità individuato si definisce il grado di severità e la priorità con cui va risolto.