Design ed esperienza utente

Pensa al tuo sito web o alla tua app preferita: cosa la rende la tua app preferita? Pensa a un sito web o a un'app che non ti piace: cosa non ti piace? Il modo in cui gli utenti interagiscono con il tuo design e la loro esperienza sul tuo sito web e nella loro app può variare.

Questa esperienza può cambiare in base all'ora del giorno, al tipo di dispositivo utilizzato, se la notte precedente ha dormito a sufficienza, se gli utenti non stanno bene, se stanno usando tecnologie per la disabilità e molto altro ancora. Con circa 8 miliardi di persone in tutto il mondo, le possibilità di utilizzo e utilizzo dei tuoi progetti sono infinite.

Design inclusivo

Come possiamo soddisfare contemporaneamente tutte le potenziali esigenze degli utenti? Scegli il design inclusivo. Il design inclusivo si basa su un approccio incentrato sulla persona che combina inclusività, usabilità e accessibilità.

Un diagramma di Venn in cui accessibilità, inclusività e usabilità si incontrano nel mezzo di un design inclusivo.

E a differenza del design universale, che si concentra su un unico design utilizzabile dal maggior numero possibile di persone, i principi di progettazione inclusiva sono incentrati sulla progettazione per un individuo o un caso d'uso specifico, quindi estendendo tale design ad altri.

Esistono sette principi del design inclusivo incentrati sull'accessibilità:

  1. Offrire un'esperienza paragonabile: assicurati che la tua interfaccia offra un'esperienza uguale per tutti, in modo che gli utenti possano svolgere le attività nel modo più adatto alle loro esigenze, senza compromettere la qualità dei contenuti.
  2. Tieni conto della situazione: assicurati che la tua interfaccia offra agli utenti un'esperienza di valore, indipendentemente dalle circostanze.
  3. Sii coerente: utilizza convenzioni familiari e applicale in modo logico.
  4. Controllo: assicurati che le persone possano accedere ai contenuti e interagire come preferiscono.
  5. Offri possibilità di scelta: valuta la possibilità di offrire alle persone diversi modi per completare le attività, in particolare quelle complesse o non standard.
  6. Assegnare priorità ai contenuti: aiuta gli utenti a concentrarsi su attività principali, funzionalità e informazioni disponendo questi elementi nell'ordine che preferisci all'interno dei contenuti e del layout.
  7. Aggiungere valore: considera lo scopo e l'importanza delle funzionalità e in che modo migliorano l'esperienza per utenti diversi.

Utenti tipo

Durante lo sviluppo di un nuovo design o di una nuova funzionalità, molti team si affidano agli utenti per guidarli nel processo. Gli utenti tipo sono personaggi fittizi che usano i tuoi prodotti digitali, spesso basati su ricerche quantitative e qualitative sugli utenti.

Gli utenti tipo offrono anche un modo rapido ed economico per testare e assegnare la priorità a queste funzionalità durante il processo di progettazione e sviluppo. Aiutano a focalizzare le decisioni relative ai componenti del sito aggiungendo un livello di considerazione nel mondo reale alla conversazione per allineare la strategia e creare obiettivi incentrati su gruppi di utenti specifici.

Inclusione di disabilità

Le disabilità possono essere permanenti, temporanee o situazionali. Queste disabilità possono interessare il tatto, la vista, l'udito e il parlare.
The Persona Spectrum del Microsoft's Inclusive 101 Toolkit.

"Le persone sono tutte diverse. Posso parlare solo per esperienza personale. Quando conosci una persona Sorda, hai incontrato una sola persona Sorda, non tutti."

Meryl Evans dell'ID24 talk Deaf Tech: Travel Through Time from Past to Future.

Gli utenti tipo possono essere utilizzati come strumento di progettazione inclusiva quando incorpori le persone con disabilità nei tuoi utenti tipo. Ci sono molti modi per farlo. Puoi creare utenti tipo specifici per la disabilità, aggiungere disabilità a quelli esistenti o persino creare uno spettro di utenti tipo per riflettere la realtà dinamica delle disabilità situazionali, temporanee e permanenti.

Indipendentemente da come incorpori le persone con disabilità nei tuoi utenti tipo, queste non devono essere basate su persone reali o stereotipi. Inoltre, gli utenti tipo non sostituiscono mai i test degli utenti.

Persona: Jane Bennet
Guarda un esempio di utente tipo che supporta casi d'uso specifici.
Jane Smith è alta con lunghi capelli scuri e indossa una camicia grigia a maniche lunghe e jeans
  • Nome: Jane Bennet
  • Età: 57 anni
  • Sede: Essex, Regno Unito
  • Professione: UX engineer
  • Disabilità: tremore alle mani provocato dal morbo di Parkinson a insorgenza giovanile (YOPD)
  • Obiettivi: utilizzare l'inserimento della voce in testo per semplificare l'aggiunta di suggerimenti di codice; trovare attrezzature per ciclismo online con pressioni di tasti minime.
  • Frazioni: siti web che non supportano soltanto la tastiera; app per la progettazione con piccole aree per l'interazione touch.

In qualità di UX engineer, Jane progetta e crea pagine essenziali per mantenere pertinente il sito della sua azienda. Supporta molti membri del team durante il giorno. È la regina degli incendi tecnici, e tutti sono al passo con il reparto se qualcosa va inaspettatamente.

Perdendo le sue capacità motorie a causa del tremore le rende sempre più difficile usare un mouse. Da sempre si affida sempre alla tastiera per navigare sul web. Jane si è sempre dedicata alla sua forma fisica. Ama le corse su strada e il BMX. Tutto questo ha reso tutto più un duro colpo quando l'anno scorso le è stato diagnosticato il morbo di Parkinson a insorgenza giovanile.

Simulatori di disabilità

Presta la massima attenzione quando utilizzi simulatori di disabilità per emulare o integrare i tuoi utenti tipo.

I simulatori di disabilità sono una spada a doppio taglio in quanto possono creare simpatia o empatia: possono dipendere dall'individuo, dal contesto in cui il simulatore viene utilizzato e da molti altri fattori incontrollabili. Molti sostenitori dell'accessibilità controversiano l'uso degli strumenti di simulazione della disabilità e consigliano di cercare film, demo, tutorial e altri contenuti creati da persone con disabilità, per poi informarsi in prima persona sulle proprie esperienze.

"Penso che dobbiamo essere completamente onesti sul fatto che qualsiasi attività di simulazione non influisca su alcune delle conoscenze più importanti che vogliamo che le persone vedenti sappiano nel loro cuore e nella loro testa. La cecità non è la caratteristica che ci definisce, che i malintesi e le basse aspettative riguardo alla cecità sono il nostro più grande ostacolo.

Questi malintesi creano barriere artificiali che ci impediscono di partecipare pienamente e quelle false limitazioni si trasformano in qualcosa che ci frena".

Mark Riccobono, Presidente della National Federation of the Blind

Euristica di accessibilità

Valuta la possibilità di aggiungere heuristics al flusso di lavoro mentre crei utenti tipo e progetti. L'euristica è una semplice regola per la progettazione dell'interazione, introdotta nel 1990 da Jakob Nielsen e Rolf Molich. Questi dieci principi sono stati sviluppati sulla base di anni di esperienza nel campo dell'ingegneria dell'usabilità e da allora sono stati utilizzati nella progettazione e nei programmi di interazione tra computer e uomo.

Nel 2019, il team di progettazione di Deque ha creato e condiviso una nuova serie di euristiche incentrate sull'accessibilità digitale. Secondo la loro ricerca, fino al 67% di tutti i bug di accessibilità per un sito web o un'app può essere evitato quando l'accessibilità fa parte del processo di progettazione. Si tratta di un impatto enorme che può essere ottenuto ancora prima che venga scritta una sola riga di codice.

Analogamente all'insieme originale di euristiche, ci sono dieci euristiche sull'accessibilità da considerare quando pianifichi il tuo progetto.

  1. Modalità e metodi di interazione: gli utenti possono interagire in modo efficiente con il sistema utilizzando il metodo di inserimento di loro scelta (ad esempio mouse, tastiera, tocco e così via).
  2. Navigazione e indicazioni di percorso: gli utenti possono facilmente navigare, trovare contenuti e determinare in qualsiasi momento dove si trovano all'interno del sistema.
  3. Struttura e semantica: gli utenti possono comprendere la struttura dei contenuti di ogni pagina e capire come operare all'interno del sistema.
  4. Stati e prevenzione degli errori: i controlli interattivi hanno istruzioni persistenti e significative per evitare errori e forniscono agli utenti stati di errore chiari che indicano quali sono i problemi e come correggerli ogni volta che vengono restituiti errori.
  5. Contrasto e leggibilità: gli utenti possono distinguere e leggere facilmente il testo e altre informazioni significative.
  6. Lingua e leggibilità: gli utenti possono leggere e comprendere facilmente i contenuti.
  7. Prevedibilità e coerenza: gli utenti possono prevedere lo scopo di ogni elemento. È chiaro in che modo ogni elemento è correlato all'intero sistema.
  8. Tempistiche e conservazione: agli utenti viene dato tempo sufficiente per completare le loro attività e non perdono informazioni se il loro tempo (ad esempio una sessione) scade.
  9. Movimento e lampeggiamento: gli utenti possono interrompere gli elementi della pagina che si muovono, lampeggiano o sono animati. Gli utenti non devono essere distratti o altrimenti danneggiati da questi elementi.
  10. Alternative visive e sonore: gli utenti possono accedere a alternative basate su testo per qualsiasi contenuto visivo o sonoro che trasmetta informazioni.

Una volta che hai acquisito una conoscenza di base di queste euristiche dell'accessibilità, puoi applicarle a un utente tipo o a un design utilizzando il foglio di lavoro dell'euristica dell'accessibilità e seguendo le istruzioni fornite. Questo esercizio è più illuminante quando si raccolgono più punti di vista.

Un esempio di revisione euristica dell'accessibilità per il checkpoint della navigazione e della destinazione potrebbe avere il seguente aspetto:

Punti di controllo per la navigazione e l'individuazione di indicazioni stradali Eccellente (+2 pt) Approvazioni (+1 punto) Non riusciti (-1 pt) N/D (0 pt)
Viene impostato un indicatore chiaro e visibile su tutti gli elementi attivi quando vengono attivati?
Il titolo della pagina ha un testo significativo, con informazioni specifiche per ogni pagina?
L'elemento title e H1 della pagina sono uguali o simili?
Ci sono intestazioni significative per ogni sezione principale?
Lo scopo del link è definito dal solo testo del link o dal suo contesto immediato?
Lo skip link viene fornito nella parte superiore della pagina e viene mostrato in modo attivo?
L'organizzazione degli elementi di navigazione facilita la ricerca di indicazioni stradali?

Dopo che tutti i membri del team hanno esaminato la pagina o il componente ed eseguono la revisione euristica per l'accessibilità, i totali vengono conteggiati per ogni checkpoint. A questo punto, puoi decidere come risolvere eventuali problemi riscontrati o correggere eventuali omissioni fondamentali per il supporto dell'accessibilità digitale.

Annotazioni sull'accessibilità

Prima di consegnare il progetto al team di sviluppo, ti consigliamo di aggiungere annotazioni per l'accessibilità. Le annotazioni, in generale, vengono utilizzate per spiegare le scelte creative e descrivere i diversi aspetti del design. Le annotazioni di accessibilità si concentrano su aree in cui gli sviluppatori possono fare scelte programmatiche più accessibili con la guida del team di progettazione o di uno specialista incentrato sull'accessibilità.

Le annotazioni di accessibilità possono essere applicate in qualsiasi fase del processo di progettazione, dai reticolati ai prototipi ad alta precisione. Possono includere flussi utente, stati condizionali e funzionalità. Spesso utilizzano simboli ed etichette per snellire il processo e mantenere il design al centro dell'attenzione.

I seguenti esempi di illustrazioni di design provengono dal kit di annotazioni sull'accessibilità di Indeed.com per Figma.

Illustrazione delle modifiche visive utilizzate per i vari stati possibili dei pulsanti.
Il design del pulsante di azione varia in base allo stato: predefinito, stato attivo, passaggio del mouse sopra, attivo e disattivato.
Illustrazione di tre diverse icone utilizzate su una scheda di offerta di lavoro.
Tre icone con testo alternativo evidenziato. Le icone "Salva lavoro" e "Non mi interessa" fungono da pulsanti, pertanto il testo alternativo è fondamentale per comprendere l'azione da eseguire. L'icona accanto a"Presenta domanda con il tuo curriculum di Indeed" è puramente decorativa e pertanto non ha bisogno di testo alternativo.
Illustrazione della relazione che le etichette dei moduli devono avere sui relativi input per mese e anno.
È possibile associare più etichette di input a ciascun input per aiutare gli utenti a comprendere il contesto.

A seconda del programma di progettazione in uso, dovresti scegliere tra più starter kit per le annotazioni per l'accessibilità. In alternativa, se preferisci, puoi creare un insieme personalizzato. In entrambi i casi, devi decidere quali informazioni devono essere comunicate al team che si occupa del passaggio e quale formato funziona meglio.

Ecco alcune aree da considerare per le annotazioni relative all'accessibilità:

  • Colore: include i rapporti di contrasto per tutte le diverse combinazioni di colori nella tavolozza.
  • Pulsanti e link: identificano gli stati predefinito, al passaggio del mouse, attivo, con stato attivo e disattivato.
  • Salta link: evidenzia gli aspetti del design nascosti/visibili e il punto di collegamento nella pagina.
  • Immagini e icone: aggiungi consigli di testo alternativo per immagini/icone essenziali.
  • Audio e video: evidenzia aree/link per sottotitoli, trascrizioni e descrizioni audio.
  • Titoli: aggiungi livelli di pubblicità programmatica e includi tutto ciò che assomiglia a un'intestazione.
  • Punti di riferimento: evidenzia le diverse sezioni del design con HTML o ARIA.
  • Componenti interattivi: identifica gli elementi cliccabili, gli effetti al passaggio del mouse, l'area di messa a fuoco.
  • Tastiera: identifica il punto in cui deve iniziare lo stato attivo (interruzione alfa) e il seguente ordine delle schede.
  • Moduli: aggiungi etichette di campo, testo di supporto, messaggi di errore e messaggi di operazione riuscita.
  • Nomi accessibili: indicano in che modo le tecnologie per la disabilità devono riconoscere l'elemento.