Pensa al tuo sito web o alla tua app preferiti. Che cosa li rende i tuoi preferiti? Ora, pensa a un sito web o a 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.
L'esperienza può variare in base all'ora del giorno, al tipo di dispositivo utilizzato, se la persona ha dormito a sufficienza la notte precedente, se non sta bene, se utilizza tecnologie assistive e molto altro ancora. Con quasi otto miliardi di persone in tutto il mondo, le possibilità di come le persone utilizzano e vivono le tue creazioni sono illimitate.
Progettazione inclusiva
Come possiamo soddisfare tutte le potenziali esigenze degli utenti contemporaneamente? Inserisci la progettazione inclusiva. La progettazione inclusiva utilizza un approccio incentrato sulla persona che intreccia inclusività, usabilità e accessibilità in un unico concetto.
A differenza del design universale, che si concentra su un unico design che possa essere utilizzato dal maggior numero di persone possibile, i principi di progettazione inclusiva si concentrano sulla progettazione per un individuo o un caso d'uso specifico, per poi estendere il design ad altri.
Esistono sette principi di progettazione inclusiva incentrati sull'accessibilità:
- Offri un'esperienza comparabile: assicurati che la tua interfaccia offra un'esperienza equa per tutti, in modo che le persone possano svolgere le attività in modo adatto alle loro esigenze senza compromettere la qualità dei contenuti.
- Considera la situazione: assicurati che la tua interfaccia offra un'esperienza valida alle persone, indipendentemente dalle loro circostanze.
- Coerenza: utilizza convenzioni familiari e applicale in modo logico.
- Dare il controllo: assicurati che le persone possano accedere ai contenuti e interagire con loro nel modo che preferiscono.
- Offri scelta: valuta la possibilità di fornire diversi modi per completare le attività, soprattutto quelle complesse o non standard.
- Dai la priorità ai contenuti: aiuta gli utenti a concentrarsi su attività, funzionalità e informazioni principali disponendo questi elementi nell'ordine preferito all'interno dei contenuti e del layout.
- Aggiungi valore: considera lo scopo e il significato delle funzionalità e in che modo migliorano l'esperienza per i diversi utenti.
Utenti tipo
Quando sviluppano un nuovo design o una nuova funzionalità, molti team si affidano alle persona utente per guidarli durante il processo. Le buyer persona sono personaggi fittizi che utilizzano i tuoi prodotti digitali, spesso basati su ricerche quantitative e qualitative sugli utenti.
Le buyer persona offrono anche 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 del mondo reale alla conversazione per allineare la strategia e creare obiettivi incentrati su gruppi di utenti specifici.
Includere le disabilità
"Le persone sono tutte diverse. Posso parlare solo della mia esperienza. Quando incontri una persona sorda, hai incontrato una persona sorda, non tutte le persone sorde".
Meryl Evans dell'intervento ID24 Deaf Tech: Travel Through Time from Past to Future.
I profili possono essere utilizzati come strumento di progettazione inclusiva quando includi persone con disabilità. Esistono molti modi diversi per farlo. Puoi creare personaggi specifici per la disabilità, aggiungere disabilità ai personaggi utente esistenti o persino creare uno spettro di personaggi per riflettere la realtà dinamica delle disabilità situazionali, temporanee e permanenti.
Indipendentemente da come includi le persone con disabilità nelle tue buyer persona, queste non devono basarsi su persone reali o stereotipi. Inoltre, le buyer persona non sostituiscono mai i test degli utenti.
- Nome: Jane Bennet
- Età: 57 anni
- Sede: Essex, Regno Unito
- Professione: specialista UX
- Disabilità: tremore alla mano dovuto al morbo di Parkinson a esordio precoce
- Obiettivi: utilizza l'input vocale per semplificare l'aggiunta di suggerimenti di codice; trova attrezzature per il ciclismo online con il minimo numero di tasti.
- Frustrazioni: siti web che non supportano solo la tastiera; app di progettazione con piccole aree per l'interazione touch.
In qualità di ingegnere UX, Jane progetta e crea pagine fondamentali per mantenere il sito della sua azienda pertinente. Supporta molti membri del team durante la giornata. È la regina della risoluzione dei problemi tecnici e il punto di riferimento di tutti nel reparto quando qualcosa non funziona come dovrebbe.
La perdita della motricità fine a causa dei tremori rende sempre più difficile l'utilizzo del 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 motivo, la diagnosi di malattia di Parkinson a esordio precoce ricevuta l'anno scorso è stata un duro colpo.
Simulatori di disabilità
Presta estrema attenzione quando utilizzi i simulatori di disabilità per emulare o integrare le tue buyer persona.
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 contrari all'utilizzo di strumenti di simulazione di disabilità e consigliano di cercare film, demo, tutorial e altri contenuti creati da persone con disabilità e di conoscere le loro esperienze in prima persona.
"Penso che dobbiamo essere completamente onesti nel dire che qualsiasi attività di simulazione non influisce su alcune delle comprensioni più importanti che vogliamo che le persone vedenti conoscano nel loro cuore e nella loro mente. La cecità non è la caratteristica che ci definisce, ma i malintesi e le basse aspettative sulla cecità sono il nostro ostacolo più grande.
Questi malintesi creano barriere artificiali che ci impediscono di partecipare pienamente e queste false limitazioni si trasformano in qualcosa che ci frena".
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 delle tue buyer persona e dei tuoi progetti. Le euristiche sono regole per la progettazione 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'ingegneria dell'usabilità e sono stati utilizzati da allora nei programmi di progettazione e interazione uomo-computer.
Nel 2019, il team di progettazione di Deque ha creato e condiviso un nuovo insieme di euristiche incentrate sull'accessibilità digitale. Secondo le loro ricerche, è possibile evitare fino al 67% di tutti i bug di accessibilità per un sito web o un'app se l'accessibilità fa parte del processo di progettazione. Si tratta di un impatto enorme che può essere ottenuto prima ancora di scrivere una riga di codice.
Analogamente al set originale di euristiche, esistono dieci euristiche di accessibilità da considerare quando pianifichi il design.
- Metodi e modalità di interazione: gli utenti possono interagire in modo efficiente con il sistema utilizzando il metodo di input che preferiscono (ad esempio mouse, tastiera, tocco e così via).
- Navigazione e orientamento: gli utenti possono navigare, trovare contenuti e determinare la propria posizione in qualsiasi momento all'interno del sistema.
- Struttura e semantica: gli utenti possono comprendere la struttura dei contenuti di ogni pagina e capire come operare all'interno del sistema.
- Prevenzione e stati di errore: i controlli interattivi hanno istruzioni persistenti e significative per evitare errori e forniscono agli utenti stati di errore chiari che indicano i problemi e come risolverli ogni volta che vengono restituiti 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 il modo in cui ogni elemento si relaziona al sistema nel suo complesso.
- Tempistiche e conservazione: gli utenti hanno tempo sufficiente per completare le loro attività e non perdono informazioni se il tempo (ad es. una sessione) scade.
- Movimento e lampeggio: gli utenti possono interrompere gli elementi della pagina che si muovono, lampeggiano o sono animati. Gli utenti non devono essere distratti o subire danni in altro modo da questi elementi.
- Alternative visive e uditive: gli utenti possono accedere ad alternative basate su testo per qualsiasi contenuto visivo o uditivo che trasmette informazioni.
Una volta acquisita una conoscenza di base di queste euristiche di accessibilità, puoi applicarle a una persona o a un design utilizzando il foglio di lavoro delle euristiche di accessibilità e seguendo le istruzioni fornite. Questo esercizio è più illuminante quando raccogli più punti di vista.
Un esempio di revisione euristica dell'accessibilità per il checkpoint di navigazione e orientamento potrebbe avere il seguente aspetto:
| Checkpoint per la navigazione e l'orientamento | Eccelle (+2 pt) | Passaggi (+1 pt) | Controllo non superato (-1 punto) | N/A (0 pt) |
|---|---|---|---|---|
| Su tutti gli elementi attivi è impostato un indicatore chiaro e visibile quando vengono selezionati? | ||||
| La pagina ha un testo del titolo significativo, con le informazioni specifiche della pagina per prime? | ||||
| L'elemento del titolo della pagina e H1 sono uguali o simili? | ||||
| Esistono intestazioni significative per ogni sezione principale? | ||||
| Lo scopo dei link è definito solo dal testo del link o dal suo contesto immediato? | ||||
| Nella parte superiore della pagina è presente un link di salto che viene visualizzato quando viene selezionato? | ||||
| L'organizzazione degli elementi di navigazione facilita l'orientamento? |
Dopo che tutti i membri del team hanno esaminato la pagina o il componente e hanno condotto la revisione euristica dell'accessibilità, vengono conteggiati i totali per ogni checkpoint. A questo punto, puoi decidere come risolvere eventuali problemi riscontrati o correggere eventuali omissioni fondamentali per supportare l'accessibilità digitale.
Annotazioni di accessibilità
Prima di consegnare il progetto al team di sviluppo, ti consigliamo di aggiungere annotazioni di accessibilità.
In generale, le annotazioni vengono utilizzate per spiegare le scelte creative e descrivere diversi aspetti del design. Le annotazioni di 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 di accessibilità possono essere applicate in qualsiasi fase del processo di progettazione, dai wireframe ai mockup ad alta fedeltà. Possono includere flussi utente, stati condizionali e funzionalità. Spesso utilizzano simboli ed etichette per semplificare il processo e mantenere il design come focus principale.
I seguenti esempi di illustrazioni di design provengono dal kit di annotazioni per l'accessibilità di Indeed.com per Figma.
A seconda del programma di progettazione, dovresti avere a disposizione diversi starter kit di annotazioni di 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 funziona meglio.
Alcune aree da considerare per le annotazioni di accessibilità includono:
- Colore: includi i rapporti di contrasto di tutte le diverse combinazioni di colori nella tavolozza.
- Pulsanti e link: identifica gli stati predefinito, al passaggio del mouse, attivo, selezionato e disattivato.
- Link di salto: evidenzia gli aspetti di design nascosti e visibili e i punti a cui rimandano nella pagina.
- Immagini e icone: aggiungi consigli per il testo alternativo per immagini e 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 un'intestazione.
- Punti di riferimento: evidenzia le diverse sezioni del design con HTML o ARIA.
- Componenti interattivi: identifica elementi cliccabili, effetti al passaggio del mouse, area di messa a fuoco.
- Tastiera: identifica il punto di partenza dell'elemento attivo (interruzione alfabetica) e l'ordine di tabulazione successivo.
- Moduli: aggiungi etichette dei campi, testo di assistenza, messaggi di errore e messaggi di esito positivo.
- Nomi accessibili: identifica il modo in cui la tecnologia assistiva deve riconoscere l'elemento.