# Realizzare interfacce: la prototipazione Il tutorial presenta i diversi tipi di prototipo utili nella costruzione delle interfacce. {% embed url="" %} ## 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**](https://designers.italia.it/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**](https://designers.italia.it/kit/progettazione-interfaccia/), 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 e su twitter @opengovitaly