lunedì 18 gennaio 2016

Design, Strumenti e Processi colloborativi per il Web Design

Strumenti e approcci all'interno di un workflow collaborativo

Mi ricordo, ancora imberbe, un designer che impostava a 1024px o a 960px sull’asse orizzontale il proprio spazio di lavoro destinato al web e ricordo come il layout venisse concepito come un oggetto statico, l’influenza di un approccio ancora prettamente cartaceo era evidente. Eravamo a cavallo fra i due secoli e la nostra formazione ci faceva ragionare in A4. Da quel giorno, fortunatamente o sfortunatamente, molta acqua è passata sotto i ponti, i designer hanno iniziato a pensare, già dal wireframe, ad un nuovo approccio fluido e i nuovi software di wireframing, prototipizzazione e mockup ci hanno affidato strumenti software totalmente nuovi: Balsamiq Mockups, Axure RP Pro, Sketch 3 per citare i primi tre, degni di nota, che mi vengono in mente.


Il wireframe viene considerato un documento a bassa-fedeltà, in parole povere non è altro che una bozza del lavoro che verrà svolto. Può essere considerato come lo scheletro del front-end dell’applicazione web, dove viene assicurata la giusta posizione dei blocchi principali del contenuto, una corretta struttura delle informazioni e descritte le principali interazioni utente-interfaccia.

Il Wireframe ha la funzione di:

  • comunicare l’idea iniziale del progetto;
  • focalizzare l’attenzione solo su architettura e contenuti;
  • evitare le “distrazioni” della parte grafica;
  • comunicare i bloccchi/contenuto;
  • essere event. alla base di un successivo prototipo.
La produzione di un wireframe deve coinvolgere le diverse figure del team: web project manager, sviluppatore, designer, copywriter... e può servire anche in fase di test di usabilità, oltre che nel momento in cui si sottopone al cliente la struttura prima che prenda forma attraverso grafica e codice. In questa fase il lavoro in team è fondamentale; non coinvolgere tutte le parti in causa durante questa fase iniziale potrebbe avere ripercussioni sull'intero sviluppo: tempo, soldi, qualità.


Prototipo

Produrre un prototipo, solitamente successivo al wireframe, è estramamente utile, rappresenta, secondo me, il mezzo più potente in fase di testing e documentazione in quanto questo genere di elaborato rappresenta il vero prototipo del sito (realizzato solitamete in HTML/CSS/JS) e permette all’utente di testare l’esperienza di navigazione. Il prototipo serve anche a validare specifiche fattibilità tecniche.

Prototipi condivisi come antidoti al vicolo cieco

La prototipazione, fatta bene, è un processo impegnativo ma fondamentale, serve a validare specifiche fattibilità tecniche e a costringere le diverse figure di un team alla concretezza del prodotto evitando così di ritornare a considerare eventuali variazioni che possano portare a vicoli ciechi. Frizzi e lazzi vengono facilmente additati.

Mockup

Il mockup è una rappresentazione del prodotto realizzato con il più alto livello di dettaglio e fedeltà possibile. Presa la struttura definitiva del wireframe vengono inseriti le parti visual. Un mockup serve a rendere l’idea del progetto finale rappresentando nel dettaglio i vari contenuti e le funzionalità base dell’applicazione web in maniera statica. I mockup rappresentano il modello più comprensibile e più vicino al prodotto finale.
Il designer può partire dal mockup come elemento di riferimento dello sviluppo?
Dipende dalle competenze del designer. Mi è capitato durante la fase di sviluppo di lavorare su mockup ottimi, pensati e strutturati in maniera multi-device. Inutile dire che può capitare, ancora oggi, di tornare a cavallo dei due secoli: accozzaglie visual prive di pensiero critico riguardo alla responsività e all'ergonomia del prodotto sono problematiche ancora cogenti. In questi casi accompagnare il designer su un tool di wirefreming non è tempo perso.
Ho notato come sia a livello commerciale, sia in ambito accademico, si sia affermato Balsamiq Mockups un valido tool grafico per sviluppatori, designer e progettisti che permette di "schizzare" interfacce utente e schermate (wireframe) per siti web e applicazioni con elementi dal look "sketchy" (abbozzato). I prodotti finali possono essere esportati in formato PNG, PDF o XML.


Anche Axure RP Pro consente wireframe a bassa e alta fedeltà, oltre che a prototipi navigabili: Axure RP Pro è senz’altro fra le migliori soluzioni; di questo software si apprezza soprattutto la velocità e facilità con cui permette di eseguire i wireframe e di convertirli in prototipi interattivi navigabili. La gestione drag&drop degli oggetti rende immediato l'utilizzo nella progettazione incentrata alla costruzione di UI per diversi device.


Discorso a parte va fatto per Sketch, l’applicazione sviluppata da Bohemian Coding, che sta velocemente prendendo piede tra i designer come alternativa ai più celebri software Adobe. Photoshop non è di certo nato per progettare UI. Il software Adobe, usato dalla quasi totalità dei designer è, come suggerisce il nome, un editor di foto e immagini. Successivamente, grazie alla sua potenza e alla varietà delle sue funzioni, è stato adattato/declinato a strumento per la progettazione web. Grande/piccola pecca di Sketch: è disponibile unicamente per Mac OS.


Seguimi tramite Email

Twitter