Spesso e volentieri capita di trovarsi davanti a dei clienti insoddisfatti dalle bozze e dalle varie documentazioni a loro proposte, non tanto dal punto di vista qualitativo del lavoro, piuttosto perchè si aspettavano un’anteprima più “realistica” mentre avevate concordato per un WireFrame in bianco e nero.
La soluzione migliore, per non incorrere in questi inconvenienti che possono far immeritatamente crollare l’opinione del cliente nei vostri confronti, è sempre la stessa: educarlo!
Al vostro primo incontro, dovrete mettere in chiaro che ogni vostra bozza e ogni vostro progetto valgono tempo, perciò anche denaro e che esistono vari metodi per poter presentare il lavoro; solo dopo averli esposti tutti, specificando costi e tempistiche di ognuno di essi sarà il momento di discutere quali metodi sviluppare per esporre un’accurata e documentata anteprima del progetto.
Questo semplice passaggio eviterà frasi del tipo: “Come mai questi pulsanti non sono cliccabili?” o “Non volevo un sito completamente in bianco e nero…”.
Ma incominciamo a fare un po’ di chiarezza: quali sono i principali sistemi per presentare un lavoro? Quanto tempo impiegherò per svilupparli? Per cosa si distinguono tra di loro?
I principali tipi di documentazione, per quanto riguarda l’User Experience ed il design di un sito sono tre: WireFrame, Prototype e MockUp.
Per rispondere con chiarezza alle domande precedenti e provare a darvi qualche consiglio, andiamo ad osservare nel dettaglio ognuno di essi:
WireFrame
Utilizzo: Immaginiamoci un WireFrame come un progetto di un palazzo: esso avrà tutte le caratteristiche del prodotto finale ma sarà pur sempre un disegno e, non credo ci sia bisogno di dirlo, non sarà possibile abitarci dentro.
Un WireFrame, infatti, non sarà altro che una bozza in bianco e nero del lavoro che abbiamo intenzione di svolgere: non sarà navigabile poichè consiste in un’immagine statica ed avrà la funzione di delineare la giusta posizione di ogni elemento all’interno di una pagina web.
Il cliente dovrà vederlo un po’ come lo scheletro del sito vero e proprio, con la funzione di assicurarci che ogni cosa andrà al posto giusto e con il giusto livello di importanza.
Tempo di realizzazione: Realizzare un WireFrame non richiede molto tempo dal punto di vista pratico, se vogliamo, la parte più difficile sta nel pensarlo e nel riuscire a creare l’interfaccia che più si addice al progetto stesso.
Esistono dei software appositi per la creazione dei WireFrame che contengono tutti gli elementi necessari a portata di mano. Personalmente non ne faccio uso: preferisco stilizzare il tutto su carta e riportarlo al computer con FireWorks, del pacchetto Adobe, per poter personalizzare ogni progetto come meglio credo, senza le varie limitazioni che un programma per il Wireframing comporta.
Costo da proporre al cliente: Basso – Molto semplice da realizzare.
Wireframe e Mockup del sito della CNN messi a confronto.
Prototype
Utilizzo: Restando nell’ambito dell’architettura, se il WireFrame equivale ad un progetto cartaceo, possiamo vedere il prototype (prototipo) come il modellino del nostro palazzo.
I prototypes sono il mezzo più potente nella fase di testing e di documentazione, questo genere di bozza, infatti, rappresenta un vero e proprio prototipo funzionante del sito, il quale verrà realizzato con i codici HTML e CSS per permettere al cliente di testare con mano l’esperienza di navigazione. Le pagine proposte saranno anche graficizzate in maniera molto simile al sito finale ma sarà pur sempre un prototipo, quindi sarà composto da pochi contenuti, il minimo indispensabile per esporre in maniera esauriente il progetto.
Tempo di realizzazione: Realizzare un Prototype richiede molto tempo della comunicazione del vostro design poiché, oltre a dover pensare al layout, si dovranno anche sviluppare dei documenti HTML e CSS.
Il consiglio che posso darvi è quello di realizzare dei prototipi che possono essere in seguito riutilizzati in fase di sviluppo, in maniera tale da non dover riscrivere per due volte i codici.
Costo da proporre al cliente: Medio/Alto – È l’anteprima di un sito più lunga e laboriosa da realizzare, richiede anche la conoscenza dei codici HTML e CSS.
Mockup
Utilizzo: Un Mockup è una rappresentazione statica del progetto finale dalla qualità medio-alta: di solito è un progetto grafico molto dettagliato, a volte coincide con il progetto finale vero e proprio, così come verrà presentato a lavoro finito.
Un Mockup ben realizzato ha la funzione di:
- Rappresentare nel dettaglio i vari contenuti;
- Dimostrare le funzionalità base in maniera statica;
- Mostrare anche il lato grafico del progetto;
Tempo di realizzazione: Essendo un’immagine statica, un Mockup sarà molto più veloce da realizzare rispetto ad un Prototype. Inoltre, grazie al suo alto livello grafico, sarà molto più esaustivo rispetto ad un WireFrame.
I Mockups sono la soluzione migliore se abbiamo bisogno di farci approvare un lavoro nel minor tempo possibile poichè, se studiati bene, possono non essere accompagnati da altri tipi di materiali illustrativi e sono relativamente brevi da realizzare.
Costo da proporre al cliente: Medio/Basso.
N.B: Spesso i termini WireFrame e Mockup vengono confusi tra loro, basta provare a scrivere su Immagini di Google, la parola “Mockup” per vedere quanti schemi in bianco e nero (Wireframe) appariranno.
