Recentemente mi sono accorto di come a volte risulti difficile presentare dei wireframe ad un cliente ed essere efficaci nell’esprimere il messaggio corretto.
Wireframe, prototipi e mock-up spesso, se guardati con occhio “inesperto” ed in maniera superficiale, possono apparire come un insieme quasi banale di linee, box e testi, posizionati all’interno di una schermata dove l’aspetto che conta maggiormente è quello grafico/visivo a discapito dei contenuti. In realtà non è così.
Andando più in profondità, un artefatto digitale (o cartaceo) rivela dinamiche che, come i segni rupestri lasciati dai nostri antenati all’interno delle caverne, vogliono raccontare un’esperienza ed esprimere un’idea tracciando un percorso chiaro. Essere un bravo UX Designer vuol dire accompagnare il cliente oltre il primo strato dell’artefatto realizzato, guidare “l’occhio inesperto” all’interno di contenuti nuovi e sconosciuti, ma sempre progettati attraverso definiti criteri di buona progettazione.
Spesso nell’ambito web i termini wireframe, mock-up e prototipo vengono utilizzati erroneamente come sinonimi.
In accordo con i manuali di Interaction design e le definizioni presenti nel web è necessario fare chiarezza e distinzione tra i termini. Nel dettaglio:
- i wireframe sono una rappresentazione logica, un documento digitale o cartaceo, una prima proposta del lavoro che verrà svolto a bassa-fedeltà, non navigabile e senza interazioni in cui vengono definite le posizioni degli elementi e il layout;
- i mock-up si caratterizzano per una visualizzazione statica e una rappresentazione a fedeltà medio-alta dei wireframe iniziali. Il visual in questo caso è maggiormente dettagliato, ma ancora abbozzato rispetto a quello che sarà il risultato finale del prodotto;
- infine i prototipi sono una rappresentazione a fedeltà medio-alta del prodotto finale, in cui è possibile simulare la navigazione e le interazioni.
I termini utilizzati rappresentano differenti fasi della realizzazione dell’artefatto, tutte fondamentali per consolidare i punti che poi andranno a definire quello che sarà il prodotto finito e a comprendere in tempo eventuali pain points o criticità nella fase progettuale.
L’immagine di copertina raffigura una serie di incisioni rupestri della Valcamonica risalenti al I millennio A.C. Questi antichi manufatti secondo Wikipedia presentano immagini a volte semplicemente sovrapposte, in alcuni casi senza un ordine apparente, ma spesso in relazione logica tra loro di illustrazioni di un rito religioso o di una scena di caccia o di lotta.
Ecco che segni realizzati in ordine apparentemente casuale da popolazioni ancestrali in realtà, se letti correttamente (come per i wireframe), acquisiscono un significato logico.
Inoltre Wikipedia ci spiega come la struttura di queste immagini non sia l’esatta riproduzione di quello che esiste realmente, ma più che altro una sua semplificazione o per meglio dire, una sua schematizzazione ragionata.
…lo schematismo delle immagini […] rappresenta non tanto l’oggetto reale, ma la sua “idea”…
Wireframe, mock-up, prototipi ed incisioni primitive condividono tramite output differenti la medesima funzione: esprimere un messaggio attraverso una rappresentazione chiara e schematica del concetto.
Comprendere un wireframe, mockup o prototipo nella sua completezza non è semplice visto che rappresentano fasi differenti dell’evoluzione di un unico artefatto. Attraverso wireframe e mockup la rappresentazione del prodotto è solamente abbozzata, per poi essere definita e dettagliata nella fase di prototipazione. Questi tipi di documenti digitali vanno pertanto colti nella loro interezza progettuale, senza soffermarsi sul solo aspetto grafico.
Che si tratti di segni rupestri di millenni fa o deliverable realizzati nel XXI secolo, la storia ci insegna come semplici ed elementari tratti possano concretizzare un’idea altrimenti astratta.
Amazing
Good
Bad
Meh
Pff
