I mockup sono croce e delizia di ogni team di progettazione e sviluppo. In un processo progettuale sano, gli sviluppatori hanno il via libera per dare forma a oggetti, routine e template solo quando i clienti approvano i mockup. È il “visto, si sviluppi”: ma purtroppo non è sempre così.

I mockup sono un’insidiosa tentazione. Sono l’esca con cui catturare il cliente frettoloso, che spesso non ha le capacità d’astrazione necessarie per comprendere l’utilità delle tassonomie su excel o l’essenza di un wireframe. Forse è anche per questo che i Project Manager meno accorti accelerano la fase progettuale tanto da allertare sin dalle prime battute il Visual Designer. Ma è un bruciare le tappe che riduce la progettazione di una UI ad abbellimento, a “vestito” da confezionare per una generica interfaccia: come pretendere di acquistare l’abito da sposa in un outlet.

I mockup vanno maneggiati con cura. Ecco allora 5 consigli utili per risultati ottimali.

1. I mockup sono l’ultimo step della progettazione

È davvero inutile e controproducente iniziare dai mockup l’analisi di un’applicazione. È come pretendere di innalzare un palazzo senza aver realizzato le fondamenta: o ci si accontenta di un prefabbricato o si corre il consapevole rischio di un crollo futuro.

Un Visual designer ha un’idea idilliaca delle interfacce. Devono essere belle, armoniche, ricche di funzionalità lato client. È il suo lavoro, lo pagano per questo ed è giusto che sia così. Ma un Visual designer ingaggiato senza una cornice progettuale di riferimento metterà su carta oggetti senza preoccuparsi della loro fattibilità. Perché, per esempio, dovrebbe conoscere il funzionamento di un database e di query custom?

Il peggior pericolo della progettazione centrata sul mockup è vendere qualcosa di bello ma infattibile. Crea insanabili rotture fra designer e sviluppatori, perché si guarderanno come la reciproca causa dei loro mali. E il risultato finale non sarà mai come quello promesso, con buona pace della fiducia del cliente.

2. L’alfabeto del mockup

Arrivare alla realizzazione dei mockup con le idee chiare può orientare il lavoro del visual designer dal punto di vista tecnico. Se la fase di progettazione indirizza lo sviluppo della UI verso l’uso di un particolare framework – come Bootstrap o Instant Developer Foundation, per esempio – il designer non sarà travolto dall’ansia della tavola bianca: avrà a disposizione un alfabeto di controlli, pulsanti e widget – scrollbar, tabs e accordion – che gli permetterà di discutere con gli sviluppatori in una sorta di lingua franca.

I tool di prototipazione più diffusi permettono l’importazione delle componenti dei più comuni framework front-end. Il lavoro del Visual designer diventa così propedeutico allo sviluppo dell’interfaccia e non una frizione fra due figure che si percepiscono altrimenti in antitesi. 

3. I mockup parlano a tutti: progettazione, sviluppo e cliente

Attorno al tavolo di progettazione siedono competenze e necessità diverse. Secondo la logica de “il cliente ha sempre ragione”, l’optimum è realizzare un prodotto funzionale e usabile, con un’ottima user experience e una piacevole interfaccia utente nel minor tempo possibile.  Anche per il Project Manager la variabile tempo è cruciale: può significare un cliente soddisfatto ma soprattutto costi di realizzazione più bassi. Ma la qualità dov’è?

La progettazione di un’app è una staffetta. Se il passaggio del testimone è lento e farraginoso, si perde. Un passaggio fluido invece dà allo staffettista che segue una spinta in più.

Il passaggio dei mockup da designer a sviluppatore deve essere supportato da tool in grado di automatizzare il lavoro sporco, ovvero l’esportazione dei componenti grafici e la traduzione in css di colori, font, bordi, margini e padding. 

4. I mockup non sono semplicemente tavole piatte

Portali, siti e app sono soprattutto interazione. A differenza di una pubblicazione a stampa, inerme di fronte al lettore che la guarda e al limite la sfoglia, una pagina web risponde a click, scroll e passaggi di mouse. Con le app la situazione è più complessa: touch e gesture hanno disintermediato il rapporto delle persone con le interfacce. La risposta delle app deve sembrare la più naturale e coerente possibile. Sin dal mockup.

I mockup devono pertanto progettare non solo il primo “colpo d’occhio” ma anche tutte le reazioni dell’applicazione alle interazioni degli utenti. Devono saper trasferire agli sviluppatori gli effetti di hover e le transizioni, i menù a comparsa e le animazioni.

5. I mockup sono utili se hanno qualcosa da dire

Solo grafica? No. O almeno, non più. È giunta l’ora di dare anche alle parole la giusta dignità. Sin dalla fase progettuale. Accanto agli UX Designer si stanno affacciando gli UX Writer, figure che si occupano della stesura dei microtesti che guidano l’utente nell’uso delle interfacce. Non solo Call to action ma messaggi d’errore, pagine 404, guide alla compilazione dei form. Piccole porzioni di testo che devono avere la capacità di essere allo stesso tempo invisibili e presenti al momento del bisogno, come buoni amici, per chiarire dubbi e appianare ansie da utilizzo.

Un buon mockup dovrebbe già contenere le proposte dei microtesti al posto dell’imperante lorem ipsum, perché completano l’interfaccia e perché, soprattutto, nulla simula il reale funzionamento degli spazi e degli ingombri meglio di un testo vero.

Far tesoro dei mockup durante le fasi decisive della progettazione porta evidenti vantaggi, soprattutto se facilitano il processo di sviluppo. Un obiettivo condiviso anche da Instant Developer e dai suoi strumenti per la progettazione di app. Prova gratuitamente le nostre piattaforme di sviluppo!

C’mon, let’s code.