Sketching & Dynamic Prototyping: "dal concept al progetto finale" con SketchFlow

Mi ricollego al precedente post in cui una delle principali tematiche trattate parlava di "tecnologia" ed “esperienza utente”. Attraverso una serie di stimoli vi invitavo a riflettere su come le potenzialità offerte dalle nuove tecnologie permettono ulteriormente di ampliare i confini progettuali e la nostra creatività nel pensare nuovi prodotti digitali.
Sulla base di questa considerazione, che in questo caso vuole essere solo un semplice punto di partenza, risulta molto importante adottare una metodologia progettuale “efficace” ed “efficiente” che permetta di esplorare in tempi rapidi le “idee”, le possibili soluzioni progettuali, sia interoperabile con il team di progetto e sia perfettamente integrata nel processo di “concept/ideazione – condivisione/approvazione - sviluppo” del progetto digitale. Dove in termini di “sviluppo”, in questo contesto, si intende in modo trasversale sia lo sviluppo tecnico sia la progettazione ed il design dell’interfaccia utente. Per esperienza mi rendo conto che l’approccio e le fasi che progettuali possono essere suddivise e classificate in diverse modalità a seconda dell’organizzazione aziendale in cui si opera, inoltre, che sia fondamentale affrontare la fase “condivisione/approvazione” in modo strutturato e documentato. Quante volte vi sarà capitato di avere a che fare con interminabili loop di modifiche generati da imprevisti step di revisione dettati da ulteriori richieste funzionali da parte del cliente. E’ basilare in questa fase raccogliere e razionalizzare nello specifico le funzionalità e i servizi che devono essere implementati nel progetto in modo da eliminare fin dall'inizio ogni possibile ulteriore modifica e concepire il progetto sugli elementi che abiliteranno un’esperienza utente in linea con i requisiti di progetto raccolti e condivisi con il committente. Un altro lato della medaglia non trascurabile è strettamente legato alle tempistiche e al costo effettivo di progetto, tema di vitale importanza soprattutto in questi ultimi mesi in cui i budget risultano sempre più risicati e viene dato sempre più per scontato una certa flessibilità e agilità nell’apportare le eventuali modifiche. 
Ipotizziamo a questo punto, di tralasciare volontariamente la descrizione della fase di sviluppo in cui si andrà effettivamente a sviluppare l’interfaccia e la logica del progetto che verrà proposta in uno dei prossimi post e proviamo ad analizzare alcuni processi che potrebbe essere utile prendere in considerazione nella fase di “concept/ideazione”, fase che abitualmente viene tradotta in realizzazione del prototipo funzionale dell’applicazione. Ho volutamente introdotto il termine di “prototipo” e mi rendo pienamente conto che tale terminologia implica una miriade di concetti ad esso correlati: mock-up funzionale, flusso/logica dell’applicativo, ipertesto dei contenuti/funzionalità, text-only, etc. Esistono e vengono impiegate una miriade di definizioni di ogni “forma e colore” e non è mia intenzione provare a darne una nuova. La mia idea è quella di segnalarvi una serie di stimoli e suggerimenti che vi possano esssere utili per strutturare e perfezionare un vostro “modus operandi” nell’affrontare questi step di progetto utilizzando Blend e SketchFlow quale strumento per realizzare “prototipi dinamici”. Sottolineo il termine “dinamico” – qualcosa di interattivo –una metodologia progettuale che vi permetta di esplorare e dar forma alle vostre idee in modo dinamico, in cui si possa facilmente rappresentare e simulare il comportamento e l’interazione dell’utente con l’applicativo. Una delle possibili difficoltà che potreste incontrare nello sviluppare una RIA o un applicativo desktop di ultima generazione potrebbe essere di non riuscire a rappresentare velocemente l’interazione e la modalità di fruizione dei contenuti. In precedenza operare su carta/post-it o attraverso i classici “schemi di flusso” in Power Point poteva essere sufficiente, ma mano a mano che supportati dalla tecnologia si possa concepire degli applicativi dinamici e più complessi, risulta importante impiegare degli strumenti che siano in grado di rappresentare tale complessità mantenendo un grado di libertà e una flessibilità di lavoro che credo sia fondamentale soprattutto in questa fase di progetto.

Dynamic PrototypingQuesta prima fase di progetto dedicata alla realizzazione del prototipo, credo possa essere riassunta in questi 4 semplici step.
Alla base di tutto e in comune per qualsiasi tipologia di progetto c’è “l’idea” o meglio una serie di “idee” che verranno poi sviluppate e argomentate nel prodotto [CREATE]. Il concetto di “idea” può essere abbastanza aleatorio e difficile da rappresentare, per esperienza ritengo che sia consigliabile ancora prima di iniziare a lavorare sul progetto anticipare il tutto con un classico “brainstorming” che coinvolga a 360° tutte le diverse figure che lavoreranno sul progetto (PM, Account, UX & Design, Interaction, Architect, Development, etc.). E’ importante che tutto il materiale prodotto in questa fase venga raccolto e archiviato – vi ricordo che una delle caratteristiche di SketchFlow è la possibilità di integrare nei prototipi documentazione cartacea (JPEG, PSD, etc) e presentazioni Power Point. Esistono miriade di tecniche per guidare ed alimentare un “brainstorming”, ma è importante che ogni team di progetto ne perfezioni una che sia conforme alla propria natura e agli “skill” delle persone coinvolte nell’attività. Il risultato di questo primo step, sarà idealmente una serie di “idee” che andranno poi esplorare e sviluppate in modo da verificarne la fattibilità ed il valore in relazione agli obiettivi di progetto condivisi dal cliente [EXPLORE]. Nonostante questa fase sia per la gran parte dei casi curata da uno staff ristretto è importante condividere sempre lo status di avanzamento del progetto in modo che ogni figura sia in grado di esprimere eventuali suggerimenti e criticità [EVOLVE]. Anche in questa fase SketchFlow può essere d’aiuto, attraverso lo SketchFlow Player è possibile condividere il prototipo Silverlight (in hosting in una pagina HTML) e WPF condividendo l’applicazione, visualizzare tutte le funzionalità che sono state progettate e segnalare/inviare eventuali feedback al team di progetto. SketchFlow Player è utilizzabile in qualsiasi PC ed in ambiente MAC per prototipi in Silverlight e non richiede di aver installato l’ambiente di authoring (Expression Blend 3).
L’evoluzione naturale di questa prima fase dedicata alla prototipazione, sarà quella dedicata alla condivisione del progetto con il cliente [REVIEW]. Anche in questa fase SketchFlow si integra supportando le gestione e condivisione delle eventuali modifiche che andranno apportate al progetto con la stessa modalità descritta in precedenza e permette di redigere la documentazione in supporto al progetto preparando dietro le quinte un documento Word personalizzabile. Anche questa funzionalità verrà poi descritta in dettaglio nei prossimi post.

Riassumendo il tutto, SketchFlow può essere un ottimo strumento per realizzare in modo rapido ed efficace i prototipi dinamici ed interattivi di progetto. L’attenzione andrà posta su “cosa fare” e non sul “come farlo” , all’interno del prototipo è possibile definire l’interazione e le animazioni senza dover scrivere una riga di codice, ottimizzando le tempistiche di progetto e di approvazione. Il prototipo può essere integrato anche con “schizzi” e “bozzetti grafici” realizzati su carta, quante volte vi sarà capitato di iniziare a lavorare su un progetto in location impensabili e utilizzando il classico fazzoletto/tovagliolo di carta per abozzare una prima idea, che sicuramente richiederà poi di essere sviluppata.

SketchFlow Blend 3Una volta consolidato il prototipo dinamico condiviso con il cliente, si potrà quindi procedere alla realizzazione del progetto iniziando a lavorare in parallelo sia sull’interfaccia utente (design) sia sulla logica e l’architettura del progetto (sviluppo). Fino a questo momento non ho volontariamente mai parlato di “design”, ritengo che gli aspetti di design dell’interfaccia utente fino a questo momento debbano essere trascurati il rischio è che si potrebbe finire a discutere del “pixel” e del “colore” in contesti in cui l’aspetto formale e grafico non ha senso che venga affrontato. Gli elementi di design devono essere presi in considerazione in un “meta-livello” trasversale su tutto il progetto e non in riferimento agli aspetti legati alla pura interfaccia utente, come descritto nel precedente post, il concetto di “user experience”, implica al suo interno anche delle tematiche di “design”, ma a 360° su tutto il progetto di ingegnerizzazione.
Se vogliamo quindi riassumere alcuni dei principali benefici nell’adottare SketchFlow all’interno del workflow:

Esplorare “idee e concetti” – in modo semplice, dinamico, interattivo ed efficace –rappresentando anche il comportamento reale dell’utente all’interno dell’applicazione.

“Condividere il progetto con tutto il team coinvolto ed il cliente finale”   - senza bisogno di step intermedi, ma direttamente il prototipo su cui si sta lavorando.

- “Raccogliere e collezionare i commenti e feedback” – attraverso lo SketchFlow Player è possibile inserire e gestire i commenti degli utenti.

“Redigere la documentazione in supporto al progetto” – dietro le quinte SketchFlow crea la documentazione in formato Word del progetto integrando anche gli screen-shot che rappresentano le funzionalità che caratterizzano l’applicativo.

Blend 3

Il prototipo creato, è a tutti gli effetti un’applicazione Silverlight e WPF reale, per definire la navigazione e l’interazione all’interno degli elementi che caratterizzano l’applicazione Blend, non fa altro che utilizzare i “behavior” – molto utili per definire l’interazione dell’applicazione senza scrivere una riga di codice, mentre i controlli “sketches” non sono altro che dei veri e propri controlli reali a cui è stato associato uno “styles” specifico dedicato agli step di prototipazione.
Concludo con una semplice e forse ovvia riflessione, ho ricevute molte richieste sulla possibilità di convertire il prototipo realizzato con “SketchFlow” in progetto reale in modo da partire come base; idealmente basta editare lo XAML dell’applicazione e fare il “detach” di SketchFlow Player dal progetto. Operazione abbastanza semplice ed ampliamente documentata nella guida di Expression Blend. Personalmente sconsiglio vivamente questa operazione, propro trattandosi di un prototipo funzionale, la sua efficacia nella realizzazione è di avere un ottimo risultato di rappresentazione delle funzionalità dedicandoci il minor tempo possibile. Gli elementi e i controlli che rappresentano le funzionalità e i servizi disponibili nelle pagine sono stati inseriti in “modo instintivo” e senza nessuna concezione di architettura dell’applicazione, con un semplice “drag & drop” dall’asset library contenente gli stili dedicati alla fase di prototipazione. Va tenuto in considerazione che SketchFlow è uno strumento estremamente semplice da utilizzare e può essere impiegato anche da figure professionali con un minimo “skill” tecnico. In certi casi può aver più senso “riutilizzare” in parte alcuni controlli presenti nel prototipo, ma effettuando una classica operazione di “cut” & “paste” dal progetto SketchFlow ad un progetto reale.
Avremo modo di trattare tutte queste tematiche nei prossimi post di approfondimento.