Il sito di UNI

Nel precedente articolo abbiamo parlato di cosa rappresenti l’accessibilità nella realizzazione di siti e applicazioni e di come essa non vada vista come “accessorio”, per quanto importante, ma come elemento che si integra nel prodotto — e nel processo seguito dal team di sviluppo — fin dalle primissime fasi della creazione. In questo articolo, vogliamo raccontare come il tema si è inserito nel nostro percorso progettuale, presentaando un caso di studio che per noi è stato molto significativo e sfidante: il sito uni.com

Chi è UNI

UNI (Ente Italiano di Normazione) è l’organismo di riferimento in Italia per la creazione di norme tecniche. Si occupa di mettere in contatto i diversi esperti di uno specifico settore in modo da definire quelli che diventano gli standard in termini di qualità e sicurezza dei più diversi prodotti e servizi che ci circondano nella vita di tutti i giorni.

Anche la già citata norma UNI CEI EN 301549:2021, riferimento della normativa sull’accessibilità, ha visto la luce in questo modo.

 

Il progetto

Siamo stati coinvolti da UNI a cavallo tra il 2022 e il 2023 per ripensare l’esperienza utente e la UI del portale uni.com

A livello progettuale la sfida principale è stata far convivere le due anime del portale — quella istituzionale e l’e-commerce — garantendo un’esperienza unica, coerente e accessibile all’interno di tutto il sito.

Le persone coinvolte

Oltre al team di Thanks Design, è stato importante coinvolgere, fin dalle fasi iniziali, i diversi referenti dei dipartimenti UNI — ognuno con le proprie specificità ed esigenze in termini di obiettivi — insieme ai due team di sviluppo e ai consulenti esterni lato accessibilità in modo da definire un approccio condiviso.

Fasi e tempi

In sei mesi, partendo dal primo wireframe, siamo arrivati al go-live, passando per una fase di analisi e ricerca iniziale. Vediamo di seguito le varie fasi e I diversi passaggi che ci hanno condotto in questo viaggio.

 

Starting: gettare le basi per l’accessibilità

Il primo passo fondamentale in qualsiasi prodotto digitale è la creazione di una base solida da cui partire; questo è ancora più vero avendo l’accessibilità come obiettivo. La fase di “starting” serve per allineare il team, definire gli obiettivi e identificare le prime linee guida da seguire.

1. Product envisioning e obiettivo di accessibilità

In un primo momento, abbiamo organizzato un workshop per definire le ipotesi sugli utenti, le loro necessità e le funzionalità chiave del prodotto. L’obiettivo era allineare il team su un framework condiviso, chiarendo fin da subito le aspettative e gli obiettivi di accessibilità.

2. User & Experience mapping e analisi accessibilità

Abbiamo dedicato poi del tempo a mappare gli utenti e i loro journey, analizzando come interagiscono con il sito esistente e dove potessero sorgere delle barriere. Un’analisi approfondita dell’accessibilità del sito che esisteva al momento ci ha permesso di identificare le aree più critiche da migliorare.

3. UX report con pain point e opportunità

Una volta completata la mappatura e l’analisi, abbiamo redatto un report UX che riassumeva i principali pain points emersi e le opportunità per migliorare l’esperienza degli utenti nel nuovo sito. Questo documento, contenente appunto le criticità e la possibili soluzioni, è stato fondamentale per indirizzare le scelte progettuali nelle fasi successive.

4. Definizione wireframe e architettura dell’informazione

Abbiamo iniziato a progettare il nuovo sito con una serie di wireframe, ipotizzando e validando le prime strutture e I primi layout. Questa fase ha incluso anche la definizione dell’architettura dell’informazione, per garantire che il contenuto fosse facilmente fruibile e comprensibile.

5. Definizione del look & feel delle pagine principali

Parallelamente alla progettazione della struttura del sito, abbiamo iniziato a definire l’aspetto visivo delle pagine principali, lavorando sul look&feel del portale per assicurarci che fosse moderno, funzionale e accessibile. Questa fase ha incluso la scelta di colori, tipografia e stili visivi che rispondessero alle esigenze di accessibilità.

6. Validazione accessibilità delle UI

Abbiamo effettuato una prima verifica dell’accessibilità direttamente sui mockup grafici, valutando come i vari componenti della UI si adattassero ai principi delle WCAG (Web Content Accessibility Guidelines) [1]. Questo controllo ha dato al team la possibilità di correggere eventuali problemi di accessibilità prima di passare alla fase di sviluppo.

 

Design e sviluppo: implementazione dell’accessibilità

Durante questa fase, ci siamo concentrati sull’attuazione pratica dell’accessibilità, lavorando in stretta collaborazione con il team di sviluppo per tradurre i concetti progettuali in realtà e costruire un prodotto che fosse effettivamente accessibile.

1. Formare il team e concordare un approccio condiviso

Il primo passo in questa fase è stato formare il team su tematiche specifiche dell’accessibilità, assicurandoci che ogni membro fosse consapevole delle best practice e degli standard da seguire. Abbiamo inoltre concordato un approccio condiviso che prevedesse iterazioni settimanali di monitoraggio e testing dei progressi.

2. Costruire un design system accessibile

Abbiamo quindi dato vita a una libreria di componenti accessibili, tanto dal punto di vista del design quanto dello sviluppo, per garantire che tutte le interfacce fossero facilmente fruibili da tutti gli utenti. Questo design system ha incluso componenti riutilizzabili, come pulsanti, moduli e navigazione, tutti progettati per rispettare i requisiti di accessibilità.

3. Validare l’accessibilità del frontend il prima possibile

Durante lo sviluppo del sito, abbiamo cercato di validare l’accessibilità in modo continuo, eseguendo controlli sulle porzioni di codice via via sviluppate. Questo approccio ha permesso di identificare e correggere rapidamente eventuali problemi, garantendo che l’accessibilità fosse integrata fin da subito in ogni fase dello sviluppo.

4. Formare il personale di UNI su accessibilità e utilizzo del CMS

Abbiamo organizzato specifiche sessioni di formazione per il team UNI, focalizzandoci sull’accessibilità e sull’utilizzo corretto del CMS.

Abbiamo fornito loro le indicazioni necessarie per creare contenuti accessibili, illustrando, ad esempio:

• come strutturare il contenuto in modo semantico;
• evitare l’uso di testo all’interno delle immagini;
• fornire descrizioni alternative per le immagini e i contenuti multimediali;
• mantenere i contenuti chiari e concisi;
• garantire che le istruzioni e i messaggi di errore siano facilmente comprensibili.

5. Rilascio in preproduzione e validazione finale

Prima di lanciare il sito in produzione, abbiamo effettuato un’ultima fase di validazione, dove abbiamo verificato ogni dettaglio, identificato la figura responsabile dell’accessibilità e definito un workflow per il monitoraggio e la gestione di eventuali problematiche post-lancio. Abbiamo anche redatto la dichiarazione di accessibilità, un documento che trova uno spazio dedicato all’interno del sito e garantisce la trasparenza con gli utenti.

 

Rilascio in produzione: monitoraggio e ottimizzazione continua

L’ultima fase è, ovviamente, quella in cui il sito diventa operativo; essa, ovviamente, non si esaurisce con la messa online, ma prevede anche un controllo post-lancio e una ottimizzazione continua.

Il sito viene messo in produzione

Dopo aver validato tutti gli aspetti e aver ricevuto l’approvazione finale, il sito è stato lanciato ufficialmente. Durante questa fase, è stata monitorata la performance del sito, cercando di risolvere tempestivamente eventuali problemi legati all’accessibilità che potessero emergere.

Monitoraggio delle segnalazioni e presa in carico

Una volta online, è fondamentale che l’azienda resti attenta alle segnalazioni degli utenti. Abbiamo implementato un sistema per raccogliere e gestire eventuali problematiche segnalate, in modo da intervenire tempestivamente e garantire che il sito rimanesse sempre accessibile.

 

Conclusione

La trasformazione accessibile è un percorso alla portata di ogni azienda, che non deve essere né sottovalutato né temuto, ma visto come una grande opportunità di miglioramento dei propri prodotti e servizi.

Siamo sicuri che, all’interno dei team, con il tempo, anche l’accessibilità diventerà un tema consolidato nel flusso di lavoro, un po’ come è avvenuto per il concetto di esperienza responsive in passato.

Similmente all’approccio “mobile first”, l’accessibilità al centro della progettazione “by design” permetterà di migliorare l’esperienza, non solo delle persone con disabilità, ma di tutti gli utenti.

 

 

Riferimenti

[1] Web Content Accessibility Guidelines
https://wcag.it