➡️Realizzare interfacce: la prototipazione

Il tutorial presenta i diversi tipi di prototipo utili nella costruzione delle interfacce.

Introduzione

Spesso quando si progetta un’area urbana, dopo aver raccolto idee e coinvolto le figure professionali necessarie, si realizza un modello in scala dell’area, per visualizzarne l'aspetto finale e testare la fattibilità del progetto; solo dopo si comincia a costruire.

Analogamente in ambito manifatturiero, prima di mettere in produzione un oggetto, se ne realizza una versione in miniatura per testare i processi di produzione e per verificarne la funzionalità e l'ergonomia.

Questa importante fase del processo di progettazione è detta prototipazione e si applica anche all’ambito dei servizi digitali Vediamo in questo caso cosa sono i prototipi, a cosa servono e come possono essere realizzati.

Il prototipo di un servizio digitale

Nell’ambito dei servizi digitali, i prototipi sono visualizzazioni grafiche, a diverso grado di fedeltà, degli elementi costitutivi di un'applicazione o di un sito web, che consentono di immaginare e simulare in parte l’interazione e testare la funzionalità dell'interfaccia utente.

Sono prodotti in un numero necessario a coprire i principali flussi di interazione e sono collegati fra loro a simulare link e interazioni.

Realizzare un prototipo consente quindi di:

• dare rapidamente forma al servizio (o touchpoint), prima di investire tempo e denaro nello sviluppo vero e proprio;

• esplorare le caratteristiche della soluzione progettata per verificarne le principali funzioni;

• affinare la progettazione dei contenuti e definire il modello interattivo che caratterizzerà l’esperienza-utente.

In sostanza, permette di simulare le principali casistiche d’uso del servizio digitale ed effettuare per tempo gli opportuni ‘aggiustamenti’, indirizzando e ottimizzando le scelte per la progettazione di dettaglio.

I prototipi possono essere distinti in:

• prototipi a bassa fedeltà, definiti anche low-fi o wireframe e

• prototipi ad alta fedeltà, definiti anche hi-fi o mockup In entrambi i casi non viene prodotto alcun codice informatico.

Prototipi a bassa fedeltà

I prototipi a bassa fedeltà, i wireframe, sono una rappresentazione semplificata e approssimativa di un'interfaccia utente e vengono utilizzati nella fase iniziale di progettazione di un prodotto o servizio Gli elementi che li compongono rappresentano solo le varie funzioni dell’interfaccia, in questo modo è possibile verificare rapidamente e a basso costo le caratteristiche di efficienza ed efficacia del servizio digitale.

Per costruire un wireframe si possono usare diversi metodi: oltre ai numerosi software specifici presenti sul mercato, è possibile realizzarli anche in modo analogico, facendo semplici disegni o utilizzando il kit per i wireframe di carta.

Il kit Prototipazione di Designers Italia offre una serie di strumenti per costruire e visualizzare i flussi di interazione, e per progettare, sulla base di questi, i wireframe dell’interfaccia.

I prototipi a bassa fedeltà hanno numerosi vantaggi:

• eliminano potenziali distrazioni derivanti da elementi grafici e contenuti dettagliati, dando quindi la possibilità di concentrarsi solamente sulle funzionalità e i flussi;

• sono economici e rapidi da produrre;

• permettono al designer di rielaborare in tempi ridotti i feedback ricevuti da altri membri del team o dagli stakeholder e definire il modello d’interazione desiderato.

Prototipi ad alta fedeltà

La prototipazione ad alta fedeltà interviene quando l’organizzazione semantica e i flussi di interazione sono stati validati grazie al prototipo a bassa fedeltà ed è possibile progredire nella progettazione delle schermate inserendo e dettagliando meglio gli elementi di interfaccia.

I prototipi ad alta fedeltà, i mockup, sono quindi molto simili, anche nell’aspetto grafico, alla versione definitiva dell’interfaccia e possono contenere interazioni simulate più estese.

Il mock-up agevola la comprensione e la condivisione del progetto, consente la realizzazione dei primi test di usabilità e facilita l’avvio della fase di sviluppo.

A supporto della realizzazione del prototipo ad alta fedeltà, è possibile consultare le seguenti risorse:

• la sezione del manuale operativo di design relativa alla progettazione dell’interfaccia utente e all’architettura dell’informazione;

• il kit Progettazione interfaccia di Designers Italia, un set di componenti visive già pronte per assemblare l’interfaccia di un sito o di un’app;

• la sezione del manuale operativo relativa al content design e il kit Contenuti e linguaggio.

Il prototipo ad alta fedeltà prevede la definizione precisa di tutti gli elementi di interfaccia e design dei contenuti, lavorando in tre direzioni:

• alimenta il processo di condivisione con gli stakeholder e gli altri membri della squadra di progetto;

• consente di indirizzare e documentare il lavoro di sviluppo front-end del servizio digitale, facilitando la collaborazione di designer e sviluppatori;

• permette di validare l’interfaccia e le scelte progettuali attraverso sessioni di test di usabilità con utenti finali.

I prototipi interattivi

I prototipi, siano essi a bassa o alta fedeltà, possono essere più o meno interattivi. I prototipi interattivi sono costituiti da una serie di schermate collegate fra loro attraverso link e menu di navigazione che permettono di simulare il percorso interattivo dell’utente.

Possono essere realizzati e modificati facilmente, a costi molto limitati e con vari strumenti, anche open source, e la simulazione risulta più realistica e fluida rispetto ai prototipi realizzati su carta.

Esiste tuttavia anche qualche svantaggio: le interazioni più complesse non sono realizzabili a costi ragionevoli, e dovranno quindi essere simulate in modo semplificato e approssimativo, o solo immaginate.

Conclusioni

In sintesi, la prototipazione è un processo molto importante nella progettazione di siti e servizi digitali, in quanto orienta e conduce la progettazione e le fasi successive in modo corretto. Aiuta a verificare le idee, a migliorare l'usabilità, a coinvolgere tutti gli attori, a ridurre i rischi e a velocizzare il processo di sviluppo.

___

Anno di riferimento: 2023

Seguici su Open Gov https://open.gov.it/ e su twitter @opengovitaly