Il ciclo di vita di un progetto digitale prevede quattro macrofasi principali: Ideazione, Design, Sviluppo e Rilascio. Le prime due fasi sono le più critiche in quanto prevedono una stretta collaborazione tra diversi team, figure professionali e spesso direttamente con il cliente.
Ovviamente durante questo processo colui che disegna e progetta l’interfaccia del progetto deve essere bravo a scegliere l’architettura del prodotto e descriverla. Successivamente bisogna descrivere il funzionamento dei servizi (concetti legati alle idee e desideri del cliente tramutate in requisiti) e costruire un prodotto tangibile da far provare e testare agli utenti.
E proprio nella fase di definizione dell’interfaccia di un progetto web vengono utilizzati wireframe, prototipi e mockup ovvero artefatti intermedi che consentono di accorciare il processo ciclico di feedback e proposte con il cliente.
Wireframe
Il wireframe non è altro che una bozza del lavoro che verrà svolto, è un documento a bassa-fedeltà: non sarà navigabile (essendo un’immagine statica) e descriverà la giusta posizione degli elementi all’interno della vista (pagina web).
Può essere considerato come lo scheletro del front-end dell’applicazione web, dove viene assicurata la giusta posizione dei blocchi principali del contenuto, una corretta struttura delle informazioni e descritte le principali interazioni utente-interfaccia.
Il wireframe ha la funzione di:
- comunicare l’idea iniziale del progetto
- focalizzare l’attenzione solo su architettura e contenuti, senza le “distrazioni” della grafica
- comunicare cosa si vedrà
- essere la base del prototipo
La produzione di un wireframe coinvolge diverse figure del team: project manager, business analyst, sviluppatore, designer, copywriter e possono servire anche in fase di test di usabilità nel momento in cui si sottopone al cliente la struttura prima che prenda forma attraverso grafica e codice.
Prototipo
Il prototipo rappresenta la creazione di quello che sarà verosimilmente il prodotto finale. A differenza del wireframe che può essere considerato un artefatto statico, il prototipo è interattivo ma valgono in linea di massima le stesse regole legate alla realizzazione dei wireframe come la flessibilità (facilità nell’apportare modifiche) e la bassa fedeltà rispetto al prodotto finale.
Sicuramente produrre un prototipo costa molto più tempo rispetto ad un wireframe, ma rappresenta il mezzo più potente in fase di testing e documentazione in quanto questo genere di documentazione rappresenta un vero prototipo del sito (realizzato in html/css) e permette all’utente di testare l’esperienza di navigazione.
Il prototipo serve anche a validare specifiche fattibilità tecniche.
Le pagine di un prototipo possono essere graficizzate in maniera molto simile al sito finale, ma saranno composte da pochi contenuti indispensabili, giusto quelle necessarie ad esporre in maniera esauriente il progetto.
La prototipazione è un processo impegnativo dal punto di vista dei costi, delle risorse e del tempo che serve anche a validare specifiche fattibilità tecniche e a costringere le diverse figure di un team alla concretezza del prodotto evitando così di ritornare a considerare eventuali variazioni che possano portare a vicoli ciechi.
Mockup
Come il wireframe, il mockup è una rappresentazione statica del prodotto finale però con la differenza che viene realizzato con il più alto livello di dettaglio e fedeltà possibile. Presa la struttura definitiva del wireframe vengono inseriti colori, stili visuali (spesso scelti dal cliente), immagini, font e altri elementi visivi (anche quelli del brand del cliente).
Un mockup serve a rendere l’idea del progetto finale ma senza l’interattività di un prototipo, rappresentando nel dettaglio i vari contenuti e le funzionalità base dell’applicazione web in maniera statica.
I mockup costituiscono la soluzione migliore se bisogna farsi approvare un lavoro nel minor tempo possibile perché sono relativamente brevi da realizzare e rappresentano il modello più comprensibile e più vicino al prodotto finale.