Pensa al tuo sito web o alla tua app preferita. Cosa la rende la tua preferita? Ora, pensa a un sito web o un'app che non ti piace. Che 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 tua app può variare.
Questa esperienza può cambiare in base all'ora del giorno, al tipo di dispositivo utilizzato, se ha dormito abbastanza la notte prima, se non sta bene, se utilizza una tecnologia per la disabilità e molto altro ancora. Con quasi otto miliardi di persone in tutto il mondo, le possibilità di utilizzo e esperienza delle persone per i tuoi progetti sono illimitate.
Design inclusivo
Come possiamo soddisfare contemporaneamente tutte le esigenze dei potenziali utenti? Inserisci inclusive design. Il design inclusivo utilizza un approccio incentrato sulla persona che combina inclusione, usabilità e accessibilità.
A differenza del design universale, che si concentra su un unico design che può essere utilizzato da un numero il più elevato possibile di persone, i principi di design inclusivo si concentrano sul design per una persona o un caso d'uso specifico, per poi estendere questo design ad altri.
Esistono sette principi di progettazione inclusiva incentrati sull'accessibilità:
- Offri un'esperienza paragonabile: assicurati che l'interfaccia offra un'esperienza uguale per tutti, in modo che le persone possano svolgere le attività in modo adatto alle loro esigenze senza minare la qualità dei contenuti.
- Valuta la situazione: assicurati che l'interfaccia offra un'esperienza utile alle persone, indipendentemente dalle loro circostanze.
- Sii coerente: usa convenzioni familiari e applicale in modo logico.
- Dai il controllo: assicurati che gli utenti possano accedere e interagire con i contenuti nel modo che preferiscono.
- Offri una scelta: valuta la possibilità di offrire agli utenti diversi modi per completare le attività, in particolare quelle complesse o non standard.
- Dai la priorità ai contenuti: aiuta gli utenti a concentrarsi sulle attività, le funzionalità e le informazioni principali organizzando questi elementi nell'ordine preferito all'interno dei contenuti e del layout.
- Aggiungi valore: valuta lo scopo e il significato delle funzionalità e il modo in cui migliorano l'esperienza per utenti diversi.
Utenti tipo
Quando sviluppano un nuovo design o una nuova funzionalità, molti team si affidano agli utenti per guidarli nel processo. Le persone sono personaggi fittizi che utilizzano i tuoi prodotti digitali, spesso in base a ricerche quantitative e qualitative sugli utenti.
Inoltre, le persone offrono un modo rapido ed economico per testare e dare la priorità a queste funzionalità durante il processo di progettazione e sviluppo. Aiutano a concentrare le decisioni relative ai componenti del sito aggiungendo un livello di considerazione reale alla conversazione per allineare la strategia e creare obiettivi incentrati su gruppi di utenti specifici.
Incorporare le disabilità
"Le persone sono tutte diverse. Posso parlare solo in base alla mia esperienza. Quando incontri una persona sorda, hai incontrato una persona sorda, non tutte noi."
Intervista a Meryl Evans del talk ID24 Tecnologia per persone con disabilità uditiva: un viaggio nel tempo dal passato al futuro.
Gli utenti tipo possono essere utilizzati come strumento di progettazione inclusivo quando incorpori le persone con disabilità nei tuoi utenti tipo. Esistono molti modi diversi per farlo. Puoi creare perone specifiche per disabilità, aggiungere disabilità alle persone utente esistenti o persino creare uno spettro di persone per riflettere la realtà dinamica delle disabilità situazionali, temporanee e permanenti.
Indipendentemente da come includi le persone con disabilità nei tuoi profili, questi non devono basarsi su persone reali o stereotipi. Inoltre, i profili non sono mai un sostituto dei test utente.
- Nome: Jane Bennet
- Età: 57 anni
- Località: Essex, Regno Unito
- Professione: specialista UX
- Disabilità: tremore delle mani dovuto al morbo di Parkinson con esordio precoce
- Obiettivi: utilizzare la conversione della voce in testo per semplificare l'aggiunta di suggerimenti di codice; trovare online attrezzature per bici con una pressione minima dei tasti.
- Aspetti frustranti: siti web che non supportano solo la tastiera; app per il design con piccole aree per l'interazione tocco.
In qualità di ingegnere UX, Jane progetta e crea pagine fondamentali per mantenere pertinente il sito della sua azienda. Supporta molti membri del team durante la giornata. È la regina dello spegnimento degli incendi tecnici e il punto di riferimento per tutti nel dipartimento quando qualcosa cade inaspettatamente.
La perdita delle sue capacità motorie finie a causa dei tremori le sta rendendo sempre più difficile usare un mouse. Si affida sempre di più alla tastiera per navigare sul web. Jane si è sempre dedicata alla sua forma fisica. Ama le corse su strada e la BMX. Per questo, lo scorso anno è stato un duro colpo quando le è stato diagnosticato il Parkinson giovanile.
Simulatori di disabilità
Presta estrema cautela quando utilizzi i simulatori di disabilità per emulare o integrare i tuoi utenti tipo.
I simulatori di disabilità sono un'arma a doppio taglio in quanto possono suscitare simpatia o empatia, a seconda della persona, del contesto in cui viene utilizzato il simulatore e di molti altri fattori incontrollabili. Molti sostenitori dell'accessibilità sono contro l'utilizzo di strumenti di simulazione delle disabilità e consigliano di cercare film, demo, tutorial e altri contenuti creati da persone con disabilità e di scoprire le loro esperienze in prima persona.
"Penso che dobbiamo essere completamente onesti e dire che qualsiasi attività di simulazione non influisce su alcuni dei concetti più importanti che vogliamo che le persone sighted conoscano nel cuore e nella mente. La cecità non è la caratteristica che ci definisce, ma le incomprensioni e le basse aspettative sulla cecità sono il nostro più grande ostacolo.
Questi malintesi creano barriere artificiali che ci impediscono di partecipare pienamente e queste false limitazioni diventano un ostacolo."
Mark Riccobono, presidente della National Federation of the Blind.
Euristiche di accessibilità
Valuta la possibilità di aggiungere euristiche al tuo flusso di lavoro durante la creazione di persone e design. Le regole di euristica sono regole per il design dell'interazione, introdotte nel 1990 da Jakob Nielsen e Rolf Molich. Questi dieci principi sono stati sviluppati sulla base di anni di esperienza nel campo dell'usability engineering e da allora sono stati utilizzati nei programmi di progettazione e interazione uomo-computer.
Nel 2019, il team di design 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 se l'accessibilità fa parte del processo di progettazione. Si tratta di un impatto enorme che può essere generato prima ancora di scrivere una riga di codice.
Analogamente all'insieme originale di heurismi, esistono dieci heurismi di accessibilità da prendere in considerazione durante la pianificazione del design.
- Modalità e metodi di interazione: gli utenti possono interagire in modo efficiente con il sistema utilizzando il metodo di immissione di loro scelta (ad esempio un mouse, una tastiera, un tocco e così via).
- Navigazione e indicazioni stradali: gli utenti possono navigare, trovare contenuti e determinare in qualsiasi momento la loro posizione all'interno del sistema.
- Struttura e semantica: gli utenti possono comprendere la struttura dei contenuti su ogni pagina e capire come operare all'interno del sistema.
- Prevenzione e stati degli errori: i controlli interattivi includono istruzioni permanenti e significative per aiutare a prevenire gli errori e fornire agli utenti stati di errore chiari che indicano i problemi e come risolverli ogni volta che si verificano errori.
- Contrasto e leggibilità: gli utenti possono distinguere e leggere facilmente il testo e altre informazioni significative.
- Lingua e leggibilità: gli utenti possono leggere e comprendere facilmente i contenuti.
- Prevedibilità e coerenza: gli utenti possono prevedere lo scopo di ogni elemento. È chiaro come ogni elemento sia correlato al sistema nel suo complesso.
- Tempi e conservazione: agli utenti viene concesso tempo sufficiente per completare le attività e non perdono informazioni se il tempo (ad es. una sessione) finisce.
- Movimento e lampi: gli utenti possono interrompere gli elementi della pagina che si muovono, brillano o sono animati. Questi elementi non devono distrarre o danneggiare gli utenti.
- Alternative visive e uditive: gli utenti possono accedere a alternative basate su testo per qualsiasi contenuto visivo o uditivo che trasmette informazioni.
Dopo aver acquisito una conoscenza di base di queste heurismi di accessibilità, puoi applicarle a una persona o a un design utilizzando il foglio di lavoro delle heurismi di accessibilità e seguendo le istruzioni fornite. Questo esercizio è più illuminante quando si raccolgono più punti di vista.
Un esempio di revisione di euristiche di accessibilità per il controllo di navigazione e orientamento potrebbe essere il seguente:
| Checkpoint per la navigazione e l'orientamento | Excel (+2 pt) | Passaggi (+1 punto) | Mancate (-1 punto) | N/A (0 punti) |
|---|---|---|---|---|
| È impostato un indicatore chiaro e visibile su tutti gli elementi attivi quando ricevono lo stato attivo? | ||||
| Il titolo della pagina contiene un testo significativo che inizia con le informazioni specifiche della pagina? | ||||
| L'elemento del titolo della pagina e l'elemento H1 sono uguali o simili? | ||||
| Esistono intestazioni significative per ogni sezione principale? | ||||
| Lo scopo dei link viene definito dal solo testo o dal contesto immediato dei link? | ||||
| Nella parte superiore della pagina è presente un link per saltare che viene visualizzato al momento del richiamo? | ||||
| L'organizzazione degli elementi di navigazione facilita la ricerca del percorso? |
Dopo che tutti i membri del team hanno esaminato la pagina o il componente e condotto la revisione heuristica dell'accessibilità, i totali vengono conteggiati per ogni checkpoint. A questo punto, puoi decidere come risolvere eventuali problemi rilevati o correggere eventuali omissioni fondamentali per supportare l'accessibilità digitale.
Annotazioni per l'accessibilità
Prima di consegnare il design al team di sviluppo, ti consigliamo di aggiungere annotazioni di accessibilità.
In generale, le annotazioni vengono utilizzate per spiegare le scelte relative alle creatività e descrivere diversi aspetti del design. Le annotazioni relative all'accessibilità si concentrano sulle aree in cui gli sviluppatori possono fare scelte programmatiche più accessibili con la guida del team di progettazione o di uno specialista dell'accessibilità.
Le annotazioni relative all'accessibilità possono essere applicate in qualsiasi fase del processo di progettazione, dai Wireframe ai prototipi ad alta fedeltà. Possono includere flussi dell'utente, stati condizionali e funzionalità. Spesso utilizzano simboli e etichette per semplificare la procedura e mantenere il design come elemento principale.
I seguenti esempi di illustrazioni di progettazione provengono dal kit di annotazioni sull'accessibilità di Indeed.com per Figma.
A seconda del programma di progettazione, dovresti avere a disposizione più starter kit di annotazioni per l'accessibilità tra cui scegliere. In alternativa, se preferisci, puoi creare il tuo set. In entrambi i casi, devi decidere quali informazioni devono essere comunicate al team di trasferimento e quale formato è il migliore.
Ecco alcuni aspetti da considerare per le annotazioni sull'accessibilità:
- Colore: includi i rapporti di contrasto di tutte le diverse combinazioni di colori nella tavolozza.
- Pulsanti e link: identifica gli stati predefinito, con il mouse sopra, attivo, attivo e disattivato.
- Salta link: metti in evidenza gli aspetti di progettazione nascosti e visibili e i relativi link sulla pagina.
- Immagini e icone: aggiungi consigli per il testo alternativo per le immagini e le icone essenziali.
- Audio e video: evidenzia aree e link per sottotitoli codificati, trascrizioni e descrizioni audio.
- Intestazioni: aggiungi livelli programmatici e includi tutto ciò che sembra essere un'intestazione.
- Landmark: metti in evidenza le diverse sezioni del design con HTML o ARIA.
- Componenti interattivi: identifica gli elementi cliccabili, gli effetti di passaggio del mouse e l'area di messa in primo piano.
- Tastiera: identifica dove deve iniziare lo stato attivo (interruzione alfa) e il successivo ordine di tabulazione.
- Moduli: aggiungi etichette dei campi, testo di supporto, messaggi di errore e messaggi di esito positivo.
- Nomi accessibili: identifica in che modo le tecnologie per la disabilità devono riconoscere l'elemento.