Progettare con strumenti digitali a cura di Paolo Tonon

Avete mai provato a condividere un prototipo su carta del vostro progetto di interaction design con persone al di fuori del vostro ufficio?

Di sicuro avrete affrontato sessioni più o meno lunghe allo scanner, seguite probabilmente da fasi di fotoritocco ed inevitabilmente di  impaginazione.

Saprete anche ogni minima revisione comporta la reiterazione di questo laborioso processo.

Se carta e penna rimangono comunque il mezzo più rapido ed intuitivo per iniziare un prototipo, molti designer, almeno nel campo delle applicazioni web e mobile,  preferiscono lavorare in formati digitali
per sfruttare versatilità e portabilità del medium informatico.

In questo articolo analizzeremo i formati attualmente in uso tra i designer e le motivazioni che hanno portato al loro utilizzo; cercheremo anche di evidenziarne pregi e difetti in modo da potervi
permettere di scegliere, di volta in volta, il migliore per le vostre esigenze.

Ti presento il progetto

Microsoft Powerpoint è senza dubbio il formato più utilizzato per la fase del wireframing.

Prendendo a prestito il concetto dalla modellazione tridimensionale, con wireframe si indica la definizione di spazi e contenuti di una pagina web.

Questa attività, detta anche banalmente “spazi ingombro” precede la declinazione grafica e serve a prepare l’attività dell’art director che su questi spazi definisce il  concept grafico.

Concepito come software  di presentazione di concetti e immagini, Microsoft Powerpoint si presta bene ad essere usato per i wireframe in quanto incorpora basilari strumenti di disegno, gestisce il testo in
vari formati e posizioni, permette di aggiungere commenti e spiegazioni. Il grande vantaggio di usare Microsoft Point è evidente: praticamente ogni persona ai cui lo manderete sarà in grado di vederlo
e, al limite, di modificarlo.

Quando il gioco si fa duro

Il lavoro del progettista web però si complica ( o diventa, da un’altra prospettiva, più interessante ) a partire dall’anno 2000 con la diffusione nel web delle RIA. In modo graduale, grazie alle potenzialità di Macromedia Flash prima e dei browser web in un secondo momento,  le pagine web acquistano funzionalità che le rendono simili alle applicazioni desktop aumentando l’utilità nell’esperienza utente.

In questo passaggio il progettista web diventa interaction designer a tutti gli effetti e con il suo bravo Microsoft Office più che descrivere  pagine statiche deve riuscire a tracciare un flusso di
interazione e a descrivere le modalità in cui l’interfaccia web reagisce agli input dell’utente. Per questo si inizia ad utilizzare tecnica dei casi d’uso,  in cui passo passo, una slide alla volta,
vengono descritte le interazioni  da parte dell’utente e le conseguenti modifiche da parte dell’interfaccia.

Con l’intento di descrivere ogni possibile interazione il numero delle slide inizia a diventare considerevole e proprio qui emergono le prime limitazioni di Microsot Powerpoint. La gestione del page master in questo software è limitata ad un solo elemento che deve stare sullo sfondo rispetto all’interfaccia da progettare.

Se l’interaction designer ha bisogno di cambiare uno o più elementi dell’interfaccia dovrà prendersi la briga di fare la modifica su ciascuna delle tante pagine che descrivono i vari usi del mio prototipo.

Come un colabrodo

A bene vedere le limitazioni di Microsoft Powerpoint nella prototipazione sono molte altre; per citarne solo alcune ricordiamo la difficoltà a visualizzare layout  che si sviluppano in verticale, la limitata gestione sull’interattività delle slide, la laboriosa implementazione di specifiche di progetto che richiede spesso un affollamento di note nel layout. Le valutazioni espresse per Microsoft Powerpoint possono essere ribadite anche per altri software nati per disegnare diagrammi e usati dal’interaction designer, come Microsoft Visio ed Omnigraffle.

Mi presti il tuo software?

Con l’intento di ottimizzare il proprio lavoro l’interaction designer può scegliere di adottare software usati dalle altre figure professionali coinvolte nella produzione di interfacce digitali. Utilizzando i
software di grafica come  Adobe Photoshop, Adobe Illustrator o Adobe Indesign avrà molta più flessibilità negli strumenti di disegno e probabilmente i suoi prototipi miglioreranno nella qualità
dell’aspetto grafico, sia a video che stampata.

Con questi software però non vengono risolte quelle difficoltà gestionali già evidenziate nel gruppo dei software per diagrammi, anzi se ne aggiungeranno delle altre come la difficoltà di apprendimento e la necessità di gestire file multipli per descrivere un unico progetto.
In alternativa il designer può invece indirizzarsi sui software utilizzati dagli sviluppatori come Microsoft Visual Studio o Adobe Dreamweaver. Con questi programmi può abilitare anche la piena
funzionalità nel prototipo che va a progettare e può eventualmente anticipare parte dello sviluppo successivo. Anche se questi software in molti casi implementano l’intuitiva interfaccia visuale WYSIWYG
una certa dose di esperienza nella programmazione e nello sviluppo è necessaria. In ogni caso i software resi “a prestito” da altri ruoli professionali peccano sempre per la difficoltà nel gestire annotazioni
e specifiche, strumenti fondamentali per l’interaction designer.

Alla cuoca il fornello, al pittore il pennello

In questo scenario contraddistinto dalla necessità di “sapersi arrangiare” non poteva che essere colto positivamente Axure,  un software concepito appositamente per supportare l’attività del
progettista di applicazioni web, web based e mobile. Gli ideatori di questo programma hanno saputo raccogliere le specifiche necessità dell’interaction designer e integrarle insieme in un unica interfaccia
di editing. L’interfaccia visuale, purtroppo con strumenti di disegno non ancora all’altezza, integra i comuni oggetti presenti in un’interfaccia web ( form, select, radio button…); con un semplice
trascinamento possono essere inseriti nel prototipo di progetto ed eventualmente personalizzati in colori e dimensioni inoltre un versatile sistema di master permette la creazioni  di oggetti di vario
tipo per cui la gestione delle modifiche diventa centralizzata.

Ogni schermata e ogni elemento hanno relativi spazi per le annotazioni, ogni elemento può avere vari livelli di annotazione per creare specifici corpi  di informazioni per il committente, per il grafico o
per lo sviluppatore. Axure implementa un set di funzioni per implementare l’interattività nel prototipo che non necessità di conoscenze di programmazione; esiste poi la funzionalità per esportare il prototipo in HTML: delle vere e proprie pagine web dove le funzioni descritte possono essere effettivamente sperimentate. In queste pagine le note e le specifiche tecniche possono già essere visualizzate come tooltip a comparsa.

Anche un documento in formato Microsoft Word può essere automaticamente generato dal prototipo Axure, le schermate saranno automaticamente visualizzate come immagini e le annotazioni e
specifiche verranno organizzate in tabelle a commento. Una feature importante permette poi di gestire il lavoro di squadra con una copia condivisa di riferimento sulla quale è attivato un semplice sistema di coda delle modifiche e un relativo riferimento cronologico.

Faber est suae quisque fortunae

Axure segna dunque la direzione rispetto allo sviluppo di software dedicato ai progettisti web. Per molti aspetti si può definire ancora un frutto acerbo; probabilmente maturerà assieme alla cultura dell’interaction design che, soprattutto in Italia, stenta ancora a trovare un propria dignità professionale. Inutile dire che in questo lavoro la parte concettuale è quella realmente rilevante; certo è che un buono strumento può contribuire a forgiare anche il pensiero.

Tags: condivisione, prototipo, revisione, software, specifiche, strumento, web application