Wireframe, mockup e prototipo: come progettare un sito web UX

I concetti di wireframe, mockup e prototipo sono strettamente legati a quello di UX (User Experience). In quest'articolo spiegheremo perché è importante conoscere questi termini.


Come può un imprenditore, o l'ideatore di un progetto, sapere con certezza se la propria idea verrà realizzata fedelmente? Come si fa, quindi, a sapere in anticipo come risulterà il sito, l'app per dispositivi mobili o la piattaforma Web (o e-commerce) per la quale si commissiona lo sviluppo?

Per essere soddisfatti del risultato, e per garantire che siano soddisfatti anche gli utenti, è necessario concordare in anticipo tutti i dettagli di un progetto e averne un'anteprima visiva. L'utilizzo di wireframe, prototipi e mockup ha esattamente questo scopo, e non solo. Vediamo prima cosa significano questi tre termini e analizziamo poi i vantaggi.

 

Cos'è un wireframe?

Il wireframe è uno schema statico, non interattivo, che ha lo scopo di definire le linee guida del progetto. È una prima bozza, per iniziare a mettere nero su bianco un'idea e organizzare contenuti e spazi della piattaforma.

La grafica del wireframe è molto povera, semplice e, spesso, viene realizzato senza l'impiego di colori. Questo avviene sia perché si tratta di un primo step, sia perché in questa fase contano più gli elementi strutturali rispetto a quelli di design.

Tempi e costi di realizzazione sono più bassi rispetto alle altre tipologie di preview di un progetto.


SocialCities è un'azienda specializzata in tema di User Experience, User Interface e Usabilità dei siti Web. Chiedi una consulenza UX al nostro team!

Contattaci


Cos'è un mockup?

Il mockup è uno schema statico, evoluzione del wireframe, che aggiunge fedeltà al progetto finale, cercando di mostrare tutti i dettagli sia a livello di contenuti che di funzionalità.

I mockup richiedono un maggiore tempo di realizzazione rispetto ai wireframe, ma meno rispetto ai prototipi: pertanto sono indicati in situazioni in cui ci siano deadline molto ravvicinate. Anche il costo, di conseguenza, è superiore a quello per un wireframe ed è inferiore rispetto al prototipo.

 

Cos'è un prototipo?

Il prototipo è uno schema interattivo che permette di fare i primi test di usabilità del progetto. Un gruppo di utenti campione può infatti utilizzare il prototipo, navigare tra le pagine, cliccare i pulsanti, ecc, esprimendo un giudizio sulla facilità o meno di utilizzo e permettendo quindi di apportare le giuste modifiche.

Grande vantaggio è quello di riuscire a testare la fattibilità tecnica del progetto. Dal punto di vista grafico, il prototipo è molto simile al risultato finale, ma non è curato nel dettaglio, in quanto dev'essere facilmente e velocemente modificabile in caso di necessità. I contenuti inseriti sono quelli indispensabili per poter mostrare tutte le funzioni del progetto, quindi viene fatta una scrematura e non vengono inseriti tutti.


Abbiamo visto insieme tre tipologie di schemi per la corretta creazione o revisione di un sito Web a regola d'arte per favorire la User Experience dell'utente. SocialCities, forte della sua esperienza nel campo della realizzazione di siti per aziende, può fornirti le soluzioni più adatte alla realtà aziendale. Contattaci, se vuoi saperne di più!

Contattaci, senza impegno