May 02 2004
I nuovi software per progettare/prototipare le interfacce

Denim, Omnigraffle, Curio & gli altri!
Tipicamente non recensisco software, e non è questa l’ottica del mio
intervento. Il punto è che la progettazione delle interfacce sta -FINALMENTE-
riuscendo ad avere degli strumenti adeguati. Parlarne è importante.
In questa pagina
- Tools per la progettazione delle interfacce
- La prototipazione di carta
- Le librerie OmniGraffle & le idee di CURIO
- DENIM & la prossima generazione di software
- Conclusioni
Tools per la progettazione
delle interfacce
Vi darò subito una grande notizia: PHOTOSHOP NON E’ UN TOOLS DI PROGETTAZIONE!
Delusi? Lo sapevate già? Eppure
io continuo a vedere moltissime persone (spesso designers) che progettano
le proprie interfacce direttamente in Photoshop.
Ovviamente non c’è nulla di male, soltanto che questo può portare a distorsioni
(e qualche volta errori) che sono direttamente dipendenti dal "tool" utilizzato.
Vi faccio un esempio: io stesso, dal 2000 sino al 2002 fa, ho spesso
"ragionato" per immagini ed usato Photoshop per dar forma immediata
alle mie idee. Così facendo, io ero molto produttivo (per anni Photoshop è stato
l’equivalente del mio videogames preferito), ma avevo parecchi problemi
sia nel condividere deliverables e visioni più d’insieme, che qualche "dipendenza"
da uso automatico di photoshop. Ad esempio: partivo per fare un wireframe,
e mi ritrovavo con un prototipo completo di homepage. Certamente bruciando
i tempi, ma -qualche volta- accollandomi alcuni rischi relati al fatto
diaver saltato qualche passaggio logico o creativo.
Successivamente, e non per un breve
periodo, ho pensato di usare software vettoriali come Illustrator. Così,
mi sono detto, avrei potuto rimanere focalizzato sui miei wireframe senza
lasciarmi prendere dal colorare le celle e finire con mettere troppe indicazioni
di forma o di conteuto, in quello che avrebbe dovuto essere uno schema
di contenitori.
Certo, Illustrator non è esattamente "leggero" e "predisposto" per il wireframing.
Ha molte funzioni evolute e neanche una libreria pronta per fare qualche
celere copia/incolla. Così, ho anche cominciato a "tener buoni" alcuni
oggetti che costruivo e pensato di farmi delle mie librerie. Ovviamente,
questo approccio e questo rendermi conto dei constrain e delle conseguenze d’uso
di un software inadatto, mi ha convinto a non abbandonare mai la progettazione
con carta e matita, ma anche lì, vedremo non sono mancate inefficienze
e problemi.
Sono
un progettista che -dal 1997- presta parte del suo tempo al management, ma
preferisco i dockers agli ab iti formali, e le mie matite LAMY alle mont blanc.
Lo sò, per qualcuno questa è una imperdonabile eresia, ma che
volete farci, sono cresciuto con rock irlandese…
Tra
le tecnologie a cui non vorrò mai rinunciare,
una è la carta. L’altra è rappresentata dalle mie due matite.
Usare la carta per rappresentare le proprie idee è un
fatto naturale, come è naturale aiutarsi con dei disegni sul foglio quando
si tenta di condividere il proprio ragionamento con altri. Ma questo
approccio "naturale" può anche essere aiutato con tecniche, processi,
tecnologie atte a migliorare l’efficienza di questi strumenti. Inoltre,
la carta da la possibilità immediata di fare dei primi test. Anche
se capire COME farli perchè siano validi, è tutta una questione da
affrontare.
Comunque sia, sul wireframing fatto con matita e carta, io insisto
da anni (gli studenti dei MIU lo sanno bene), e su
come fare i TEST -quest’anno- mi sono ispirato ai consigli del NormanNielsen
Group.
Guardate le immagini sottostanti. Nella prima si vede il test di una
pagina il cui design è in fase avanzata, mentre in quella sottostante si
può osservare il setup sperimentale.
Il Setup mostra: a sx il soggetto (in maglietta verde) con dinanzi
a se il FRAME che rappresenta e le SCHERMATE simulate con la carta.
Un pò più indietro, sempre a sx c’è la psicologa che da le istruzioni
(e recepisce i commenti) al soggetto. Dall’altro lato del tavolo l’assistente,
che interpreta il ruolo del SISTEMA, sostituendo i fogli (schermate
simulate) che sono richieste dal soggetto e comprese nel test.

NOTA: il fatto di NON poter fare uno screen-shot di un DVD originale non è accettabile
e -sopratutto- mi ha negato l’opportunità di farvi vedere cosa -dal mio punto
di vista- è importante nel prodotto NNG. Questi screenshot sono quelli che passa
il convento di Jakob Nielsen, e sono piuttosto scialbi.
Eccovi la pagina del sito NormanNielsenGroup dove viene venduto il DVD
sul paper prototyping.
Una prima conclusione:
Pur rimanendo estremamente favorevole al PROTOTYPING su carta, qualche volta
ho il dubbio che NON sia un setup felice per il testing. Chiarisco: qualunque
TEST è meglio di nessun test. Al contempo è evidente che: testare su carta
qualcosa che è stato prodotto su un computer e che dagli utenti reali
sarà fruito su un monitor, per assurdo rappresenta un test NON ecologico. Se
vuoi testare un interfaccia destinata ad essere fruita su un monitor per computer,
meglio testarla su un monitor (e non su carta).
E’ ovvio che il test su carta è tenuto in grande considerazione sopratutto per
il fatto che COSTA POCO, ma testare su un monitor non necessariamente costa di
più.
Un distinguo: cosa diversa è testare un wireframe a monitor. Va benissimo se
puoi usare un eye-tracker, mentre se si tratta di FARE CLICK, allora può essere
meglio usare la carta. Perchè? due ragioni:
1- se siete a livello di wireframe, raramente avete un modello interattivo. Come
fate a registrare dunque DOVE ha cliccato il soggetto? Con la carta, ed un bel
matitone rosso, il problema è risolto.
2- siamo abituati a vedere sul monitor immagini più o meno complesse. A volte,
un wireframe può essere vuoto e brutto sino ad essere sconsolante. Sulla carta
questo genere di "difetti" è reso quasi invisibile dalle diverse aspettative
del soggetto.
Ma con tutto questo know-how sulla carta e sul ruolo che ricopre nella progettazione,
perchè non esistono software specializzati per questo tipo di attività? …e
chi ha detto che NON esistono!
Le librerie di Omnigraffle
& le idee di CURIO
Come vedete dal titolo di questo paragrafo specifico "le librerie" di
OmniGraffle e non parlo in generale del software. Ma cos’è OmniGraffle?
Omnigraffle è un software di disegno dall’ispirazione CAD che consente
di creare DIAGRAMMI, PIANTINE, SCHEMI, etc (elenco
di features). Potete progettare il vostro
arredo per il giardino o persino una brochure, ma sopratutto -usando le
librerie
(gratuite) giuste- avrete dinanzi un incredibile software
per la prototipazione rapida delle interfacce.
Ma vediamo subito una immagine…
L’interfaccia di OmniGraffle è una delle migliori degli ultimi anni. Finalmente
non un "albero di Natale" alla WORD di casa Gate$, ma un vero software
che FA BENE LE POCHE COSE che è preposto a fare. Dove aver detto "poche"
è -in effetti- soltanto un paragone con i colossi da 0,3Gb a cui Microsoft
e le altre ci hanno abituato, ma OmniGraffle tutto quello che serve, lo
ha.
Tre esempi
rapidi di quanto sia buona l’interfaccia:
1- dalla libreria alla pagina, ogni azione è fattibile via DRAG’N DROP
2- organizzazione della palette per LIBRERIE
3- persino le icone "nuove" sono immediate (ovvero si capiscono dopo averle
cliccate almeno una volta) e vorresti trovarle anche in tutti gli altri
software.
OCCHIO: Non soltanto nelle librerie sono compresi praticamente tutti i
simboli/oggetti utili a prototipare una pagina web, ma anche: tutti
questi oggetti sono EDITABILI.
Come per l’immagine precedente: in OmniGraffle il DRAG’N DROP ti consente
di costruire un modello di pagina web o di interfaccia software in pochi minuti.
C’è tutto, desktop, menu, icone, pulsanti, dialog box, etc.
Ovviamente, il modello costruito NON E’ INTERATTIVO, e per essere testato
bisogna esportare il disegno prodotto come immagine (per testarlo a
video), oppure stamparlo su carta (e tornare al testing alla NNG).
CURIO
Un altro software che val la pena di citare è CURIO.
Per quel che ho visto provandolo, non c’è un motivo tecnico per
preferire CURIO ad un uso promiscuo di software come Illustrator (oltre
600 €), Freehand (quasi
1000€) o persino Powerpoint, se non perchè CURIO:
- costa soltanto 99$
- è semplicissimo da usare (l’interfaccia è sintetica e gradevole)
- produce oggetti/etichette ricercabili attraverso il SEARCH interno
- tenta di sostenere il ragionamento creativo con appositi tools (o almeno ci
prova)

Oltre ai tanti ed interessanti tools di disegno, CURIO è reso unico dal suo modo
di "ragionare" per fogli di lavoro (più brutalmente si potrebbe dire
SLIDE alla powerpoint), ed organizzare i fogli cartelle. La Zengobi (casa che
produre Curio) dice che è perfetto per le menti creative… Io non sono così
convinto di tutta questa enfasi "creativa", ma se non ci si può permettere altro,
CURIO può rappresentare un buon affare.

Ripeto: molto raffinate alcune soluzioni per
aggregare e rendere immediato l’uso dei tools di disegno, ma in particolare questa
funzione di SEARCH interno ci piacerebbe averlo in tutti i software di disegno.
Certo, lavorando sull’impostazione a SLIDE, si può pensare
di utilizzare ogni slide per una rappresentazione di livello
diverso (PAGINA, MAPPA DEL SITO) e guadagnare punti verso la minore
flessibilità di OmniGraffle, ma per chi sta cercando il software ideale per
la progettazione, questo non basta. Infatti, anche con CURIO, di content DINAMICI
non si può parlare e per il testing non c’è nulla di rilevante…
Denim & la prossima
generazione di software
Denim
è la prova che il software andrebbe progettato per la singola attività che
si propone di risolvere! Pensate che sia una cosa scontata?
In un mondo di software TUTTO FARE, Denim si propone di risolvere un solo problema:
consentire di fare fast-prototyping per la progettazione web.
Ma cominciamo dall’inizio: all’ Università della
California c’è un gruppo di ragazzi veramente
forti. Il loro ragionamento sui tools di progettazione è stato fonte di un
notevole numero di pubblicazioni,
ha coinvolto esperti ed utenti, ma sopratutto si è concentrato su METODI e
PROCESSI. …e -guarda caso- è ripartito dalla carta!
Denim è un software utile a strutturare il progetto web quando si è
proprio nelle primissime fasi di progetto. Il suo approccio è legato alla carta
e si sposa benissimo con l’uso dei tablet-computer. NDA: …personalmente
è la prima volta che vedo una utilità concreta nell’usare un tablet.
DENIM è un software universitario gratuito e sviluppato in JAVA. In
questa frase ci trovate tutti i PRO e tutti i CONTRO, ovvero: è gratis!
funziona ovunque! …ma anche: lento nell’avvio, nelle transizioni,
etc! …insomma, non è quello che ci si attende da un
software "professionale".
Comunque sia, per introdurre Denim si potrebbero fare molti preamboli, oppure
-banda permettendo- partire
da questo video in real e farsi una idea più chiara.

Tra le cose belle di DENIM ce ne sono alcune assolutamente uniche.
Questo innovativo software consente infatti di:
- lavorare -in un unico documento- sia a livello
di pagina che di sito (vedi colonna di SX nella schermata nell’immagine)
-
passare da un livello all’altro attraverso una transizione
di ZOOM,
che non è un fatto solo "grafico", ma anche e sopratutto di comprensibilità
del modello mentale.
-
creare link, che consentono di rendere DINAMICO il documento
- fare browsing attraverso i movimenti della
penna (non solo click ma anche trascinamento)
-
sperimentare un tipo di menu tutto nuovo, il pie-menu. Ideale
quando si usa come strumento di puntamento una penna (tutte le opzioni sono
appunto "in punta di penna").

ma
sopratutto,
- DENIM può esportare -in un click- un HTML
navigabile ed interattivo,
utile per demo e test!
Un Software innovativo che ha avuto origine dallo studio approfondito
del contesto e degli utenti, dal rispetto delle pratiche e dei tools, capace
di introdurre una interfaccia nella quale il mouse convive con l’uso di pie-menu
o la lettura dei movimenti effettuati con la penna. Assolutamente niente male!
Conclusioni
Siamo partiti con il dire che rispetto all’uso
di Photoshop per far prototipi etc, c’erano una serie di problemi. Poi abbiamo
visto "n" software che -a livelli diversi- hanno affrontato il problema della
progettazione e testing delle interfacce. Alla fine ci siamo imbattuti in
DENIM, un prodotto freeware universitario che riesce a dar punti a software
costosi, raffinati e professionali. Ed allora, cosa vuole dire tutto ciò?
Dal mio punto di vista, tutto questo significa che studiare in modo approfondito
il tema e gli utenti da supportare può far vincere partite difficili.
Ogni giorno vedo il software nascere concentrandosi sulle funzionalità da
sciorinare e non dagli utenti e dai processi da sostenere. Ecco cosa significa!
C’è spazio (ed è tempo) per una nuova generazione di software:
specializzati, multipiattaforma, poco costosi, adatti ad hardware innovativi. Niente
a che fare con Micro$oft WORD ed i suoi stupidi fermagli saccenti.
No responses yet


Leandro Agrò - 10+ anni di Design & Management
(short