May 02 2004

    I nuovi software per progettare/prototipare le interfacce

    Posted at 7:03 pm under lamy, denim, omnigraffle, prototyping

    matite LAMY, Omnigraffle, CURIO, DENIM e altri strumenti
    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.

    TORNA IN ALTO


    La prototipazione di
    carta

    La più affidabile delle tecnologie! Leeander a queste LAMY non rinuncia!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.

    Uno screenshot del DVD sul Paper Prototyping dal sito http://www.nngroup.com/

    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.

    Uno screenshot del DVD sul Paper Prototyping dal sito http://www.nngroup.com/
    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!

    TORNA IN ALTO


    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…

    Un wireframe disegnato con OmniGraffle

    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.

    icone di OmniGraffleTre 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
    .


    GUI Design con Omnigraffle
    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)

    uno screenahot dal sito originale di CURIO - http://www.zengobi.com/

    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.

    CURIO consente la ricerca per oggetti

    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…

    TORNA IN ALTO


    Denim & la prossima
    generazione di software



    una immagine di DENIM, tratta dal sito ufficiale http://guir.berkeley.edu/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.

    Usare i tablet-pc non sempre è davvero utile: con DENIM si!

    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").

    Il pie-menu di DENIM

    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!

    TORNA IN ALTO


    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.

    TORNA IN ALTO

    No responses yet

    Comments are closed at this time.