In questo articolo, vedremo in dettaglio le principali funzionalità introdotte e supportate dalla SketchFlow Map nella realizzazione di un prototipo dinamico attraverso SketchFlow ed Expression Blend 3. Altri tre miei precedenti contributi trattano queste tematiche e sono disponibili sul blog di team MSDN.

Vi riporto i riferimenti ai precedenti post:
- “Design, User eXperience e tecnologia: sinergia in un progetto digitale.” (published 07 Gennaio 2010)
- Sketching & Dynamic Prototyping: "dal concept al progetto finale" con SketchFlow” (published 11 Gennaio 2010)

SketchFlow Map può essere considerata "il cuore del nostro prototipo", nello sperimentare la realizzazione dei primi progetti vi accorgerete che gran parte delle attività saranno collegate agli elementi – screen – presenti nella SketchFlow Map. Come ho già accennato nell’articolo di overview, all’interno della SketchFlow Map vengono anche rappresentate e definite le interazioni tra le pagine che caratterizzano il prototipo.
Di “default”, in fase di definizione di un nuovo progetto SketchFlow, all’interno della Map è presente un solo “screen” (rettangolo blu) che corrisponde all’area di lavoro che è visualizzata inizialmente nell’artboard (spazio bianco).

Se a questo punto vi posizionate con il mouse sullo “Screen 1”, vi verrà visualizzato un pannello aggiuntivo in cui sono contenuti una serie di comandi che vi permettono di creare e definire delle funzionalità specifiche correlate allo screen.


1. Creare un nuovo “screen” collegato di “default” al medesimo.
2. Collegare il medesimo screen con un altro già presente nella sketchflow map.
3. Creare ed inserire un “ComponentScreen” – elemento con funzionalità specifiche che verrà descritto nei prossimi post.
4. Cambiare il VisualTag (codice colore applicato allo screen) – funzionalità utile per suddividere otticamente aree diverse che costituiscono il prototipo, banalmente per tipologia di servizi, area tematica, etc.

Per semplicità, a questo punto, vediamo il tutto con un esempio.
Presupponiamo di voler progettare una semplice applicazione costituita paradossalmente da tre sezioni: services, products e contact ed un’area dedicata alla gestione della login utenti per la fruizione di servizi specifici che potranno essere aggiunti in un secondo momento.

Il tutto potrebbe essere rappresentato all’interno della SketchFlow Map in questo modo.

Come potete notare, nella Map vengono visualizzate gli screen che rappresentano l’applicazione e i collegamenti logici che sono stati predefiniti nelle pagine. Ho anche un minimo classificato e suddiviso, attraverso l’uso del codice colore, le pagine che caratterizzano il prototipo a seconda delle funzionalità.
In questo modo a colpo d’occhio è possibile individuare le “macro-sezioni” che caratterizzano il progetto ad esempio a seconda dei diversi servizi proposti: info istituzionali, catalogo prodotti, carrello elettronico, etc. Non è fondamentale, ma potrebbe diventare utili in contesti progettuali più complessi ad esempio di applicazioni RIA e LOB.
Le relazioni e i collegamenti tra le pagine, vengono rappresentate da “linee continue” ed anche in questo caso possono essere personalizzate attraverso il codice colore. I collegamenti visualizzati corrispondono all’interazione di “default” che può essere gestita attraverso lo SketchFlow Player, ma anche tra gli elementi e controlli inseriti negli screen definiti nel prototipo. Per intenderci se si inserisce all’interno di una specifica pagina un “button” che rimandi ad un’altra pagine presente nel prototipo, anche in questo caso questa specifica relazione verrà visualizzata sottoforma di “linea continua” all’interno della Map.
Osservando con attenzione la Map, noterete inoltre che è presente uno screen di colore verde che ha una forma diversa rispetto a tutti gli altri screen. Questa particolare iconografia identifica un “Component Screen”, una sorta di “user control” che può essere condiviso su più pagine. Come per gli abituali “user control” in applicazioni Silverlight e WPF, all’interno del “component screen” tendenzialmente si inseriscono degli elementi comuni che saranno presenti e condivisi su più pagine. Un esempio comune di utilizzo, soprattutto nei prototipi potrebbe essere quello di contenere nei “component screen” i menù di navigazione. Se guardiamo il nostro esempio, il “MenuNavigation” è condiviso sia in Home, Contact, Products e Services – tali collegamenti sono rappresentati nella SketchFlow Map dalle linee tratteggiate in verde. Per definire un component screen ci sono due modalità possibili, o come abbiamo visto in precedenza operando dal menù a comparsa sugli “screen” ed in questo caso selezionando la terza opzione, o selezionando alcuni elementi/controlli presenti nell’artboard di uno screen e convertendoli in component screen.
Vediamo velocemente il tutto con un esempio, ho aggiunto alcune pagine collegate alla sezione dedicata ai prodotti: mutui, assicurazioni e conti correnti. A questo punto l’obiettivo sarà quello di realizzare un menu comune di seconda navigazione che permetterà all’utente di accedere a queste sezioni dove verranno descritti in dettaglio i prodotti del nostro ipotetico istituto bancario.
Nella pagina prodotti, ho operato inserendo i nuovi tre button sul lato sinistro e un background di sfondo composto da un semplice rettangolo che caratterizzera il nostro nuovo menù. A questo punto selezioniamo tutti gli elementi che devono essere contenuti nel nuovo “component screen” e facendo tasto destro del mouse selezioniamo il comando “Make in to Component Screen”. Tale comando è disponibile anche all’interno del menu “Tools” o con la scorciatoia da tastiera “Shift+F8”. Nella successiva maschera inseriamo quindi un nome da associare al nostro nuovo “Component Screen”, notate che è anche presente un “check box” opzionale per specificare se si vuole procedere creandolo il component come copia degli elementi selezionati o se si può trasformare direttamente gli elementi in “component screen”.



Fatto ciò, nella SketchFlow Map vi sarà apparso il nuovo component screen “NavProducts”, che attualmente risulta collegato allo solo screen “Products”. Sempre operando nella “SketchFlow Map” e facendo un semplice “drag & drop” del component screen sulle pagine in cui dovrà essere presente questo menù di seconda navigazione è possibile definirne le correlazioni.



Attualmente ai bottoni che costituiscono il menù, non è ancora stato assegnato nessuna interazione, ma come potete intuire una volta definiti i collegamenti a livello di “component screen” verranno poi replicati per tutte le pagine che contengono tale elemento.
Come definire i collegamenti tra gli elementi che costituiscono il prototipo e la visualizzazione di eventuali “states” presenti nelle pagine, sarà argomento del prossimo post.

Per concludere, la carrellata sulle funzionalità della SketchFlow Map, nell’angolo in basso a destra del pannello sono disponibili una serie di opzioni inerenti alla visualizzazione della mappa prototipo piuttosto che per le azioni di “undo & redo” inerenti alle operazioni effettuate sulla mappa.

Un ulteriore considerazione inerente alla fruizione del prototipo attraverso lo SketchFlow Player, a fianco del pannello dedicato ai feedback è presente un tab “Map” che vi abilità alla visualizzazione della mappa del prototipo anche all’interno del Player, nell’area in basso a sinistra o mandando a “full screen” in overlay al prototipo (icona in alto a destra del pannello). Con la mappa a “full screen” sarete in grado di visualizzare in background il contenuto delle pagine interagendo direttamente sugli screen che costituiscono la mappa sarà possibile navigare nelle pagine che costituiscono il prototipo.