Nell'articolo dedicato agli step della progettazione, tra le altre cose, ti abbiamo parlato brevemente di alcuni metodi di progettazione utili per strutturare il prodotto visivamente. Nonostante facciano parte del medesimo processo di realizzazione, wireframe, mockup e prototipo rientrano in fasi diverse e consecutive della progettazione. Tutti e tre permettono di valutare assieme al cliente le necessità e le aspettative dell'applicazione o del sito web.
In questo articolo vogliamo fare luce sulle differenze tra wireframe, mockup e prototipo.
Di cosa parliamo in questo articolo:
I wireframe servono a dare un'iniziale rappresentazione degli elementi delle interfacce e ordinarle. Si possono realizzare con carta e penna o, preferibilmente, su software. Prima di disegnare un wireframe, però, è utile partire da uno sketch, ovvero da una semplice e veloce bozza in modo da iniziare ad organizzare le idee con il cliente.
Il wireframe fornisce un'idea approssimativa sull'organizzazione delle informazioni sullo schermo, sugli input forniti all'utente e sul modo in cui questi input rispondono. Inoltre, vengono rappresentati gli elementi presenti sullo schermo, come i bottoni, le headings e i campi, e come questi elementi interagiscono. Non è necessario includere stili, colori e grafiche.
Dalla struttura definita con il wireframe, si realizza un mockup, che come suggerisce la parola stessa è un modello. Partendo dal wireframe infatti vengono aggiunti colori, stile e tipografia alla semplice struttura e si realizza una raffigurazione del risultato finale sul/sui device. Gli elementi dello schermo vengono rappresentati come saranno sul prodotto finale.
La realizzazione del mockup è la fase intermedia della progettazione, nella quale si ha una raffigurazione più dettagliata e fedele alla versione finale. Il mockup è molto utile per la presentazione dell'idea al cliente, così che sia più facile per lui immaginare il prodotto finito e come saranno le varie trasposizioni su smartphone, pc e tablet.
Un prototipo è una rappresentazione molto più accurata del prodotto finale. Esso contiene link ed elementi cliccabili. Permette di svolgere test di usabilità, nelle fasi finali di progettazione, prima della realizzazione della versione finale.
Proprio perché si tratta di una versione su cui si baserà un giudizio che determinerà l'effettiva realizzazione del prodotto, è importante che il prototipo sia costruito con cura e precisione.Inoltre, è fondamentale che la versione finale sia il più possibile identica a quella del prototipo, così che i risultati ottenuti nel test di usabilità siano ancora validi.
Sebbene il wireframe possa dare un'idea della strutturazione delle informazioni e del layout, il mockup consente di visualizzare e valutare anche la componente grafica e di presentarla al cliente. Il prototipo invece è pressoché identico al prodotto reale, permettendo di interagire con vari elementi e assicurarsi che l'esperienza sia fluida e intuitiva.
La realizzazione di tutti e tre i modelli consente di seguire un processo di progettazione con meno rischi di intoppi, oltre a facilitare la comunicazione tra i designer e il cliente e a permettere di risparmiare risorse e tempo.
Tra gli strumenti più popolari per realizzare wireframe (oltre alla tradizionale carta e penna), mockup e prototipi, ricordiamo InVision Studio, Adobe XD, Sketch e Figma.
Fonti:
- Lucidchart Content Team - Wireframes vs mockups: Determining the right level of fidelity for your project.
- UX Planet - Wireframe, Mockup, Prototype: What is What?, scritto da Rafayel Mkrtchyan.
Il prototipo e una simulazione dell interazione finale tra l utente e l interfaccia. Puo non essere esattamente uguale al prodotto finale, ma dovrebbe essere molto simile. A differenza di wireframe e mockup, un prototipo e cliccabile e consente quindi all utente di sperimentare contenuti e interagire con l interfaccia. La principale differenza tra il prodotto finale e il prototipo e che l interfaccia e il backend non sono collegati tra loro. Una volta che il prototipo e stato testato e l interfaccia finale approvata, il team puo procedere con lo sviluppo del collegamento con il backend. In questo modo e possibile iterare piu velocemente sul design del prodotto e minimizzare i costi di sviluppo.