Introduzione a SketchFlow: “overview dell'area di lavoro e delle nuove funzionalità”

Entriamo nel vivo!
Prima di procedere con la realizzazione del nostro primo prototipo dinamico attraverso Blend e SketchFlow vediamo insieme alcune caratteristiche che differenziamo l’ambiente di lavoro rispetto un progetto standard di un’applicazione Silverlight e WPF.

Una delle prime novità sta proprio nella definizione di un nuovo progetto, come riportato nella figura sotto, tra le opzioni di progetto disponibili in Expression Blend 3 trovate due template di progetto specifci per la realizzazione di prototipi sketchflow: uno per applicazioni Silverlight el’altro per applicazioni WPF.
Oltre alle tradizionali caratteristiche che differenziano un’applicazione Silverlight da WPF, nel caso specifico di un prototipo un’applicazione Silverlight può essere condivisa pubblicando il prototipo e lo SketchFlow Player all’interno di una pagina Web (che risulta accessibile via browser sia in ambiente Win sia Mac), mentre un prototipo WPF può essere condiviso in un “package” ridotto del progetto ottimizzato ad hoc da Blend 3.

Una volta definito un nuovo progetto, noterete subito alcune differenze nell’ambiente di lavoro e la presenza di una serie di pannelli aggiuntivi, specifici per le funzionalità di prototipazione, alcuni pannelli presenti nell’abituale area di lavoro possono essere supplementari per la realizzazione di un prototipo. Blend 3 offre una nuova funzionalità che permette di personalizzare e salvare il “Workspace” di lavoro in funzione delle attività specifiche che si stanno effettuando.
Non esistono dei criteri standard su come personalizzare l’ambiente in relazione alle attività che si stanno sviluppando, a mio avviso, dopo le prime sperimentazioni sarete in grado di salvarvi gli ambienti di lavoro conformi alle vostre esigenze. Per personalizzare, l’area di lavoro (workspaces), una volta organizzato i pannelli “base” da tenere come default, è possibile salvarli dal menu “Windows -> Save a new works”, ricordo inoltre che accedendo a “Manage Worspace…” è possibile rinominare e cancellare i workspace già salvati in precedenza.

Sicuramente fondamentale per realizzare un prototipo è la SketchFlow Map area in cui potrete definire le pagine/screen che costituiscono l’applicazione e le interazioni, i collegamenti “base” tra le pagine. Tale argomento, verrà affontato in dettaglio in uno dei prossimi contributi.

Procedendo con la veloce carrellata sui pannelli, posizionato in alto rispetto all’art board” trovate il pannello dedicato alle SketchFlow Animation, molto utile per visualizzare il comportamento, l’interazione dell’utente nella fruizione dei contenuti proposti dall’applicazione.
In pochi e semplici passaggi è possibile “registrare” delle animazioni che possono essere integrate con tutte le funzionalità disponibili in Blend, un esempio gli “states” per visualizzare delle informazioni che appariranno nell’applicativo solo dopo una precisa azione dell’utente. Come è illustrato nell’immagine qui sotto, la stessa animazione può essere “composta” e segmentata in più “stati”.

Un’altra novità, il pannello dedicato alla gestione dei feedback, com descritto nel precedente post una delle potenzialità di SketchFlow è la possibilità di raccogliere le eventuali modifiche dal team di lavoro o dal cliente in piena integrazione con il processo di prototipazione attraverso lo SkectchFlow Player, dedicato alla visualizzazione dei prototipi SketchFlow. Definito il progetto e lanciato in esecuzione (da tastiera F5) vi verrà caricato il player specifico per la visualizzazione del prototipo, di default il Player permette una serie di interazioni minime tra le schermate che costituiscono il prototipo e presenti all’interno della “SketchFlow Map”.

La definizione dell’interazione evoluta sui controlli delle pagine che costituiscono il prototipo può essere gestita in vari modi. Direttamente dai controlli, tasto destro del mouse “Navigate to >” o creando e definendo “ComponentScreen” degli elementi esterni per la navigazione e riutilizzabili su più pagine.

Ma torniamo al pannello dei feedback disponibile in SketchFlow Player, in questo casò è il pannello che verrà utilizzato per annotare ed inserire eventuali modifiche che andranno implementate nel prototipo. Per utilizzare queste funzionalità, non è necessario aver installato Blend 3 sul proprio PC, ma risultano disponibili direttamente nel player.
Selezionato lo strumento ed attivate le varie opzioni (colori/dimensioni pennello) è possibile inserire direttamente sull’interfaccia le eventuali modifiche che dovranno essere implementate. Il tutto può essere anche correlato da note aggiuntive nell’apposito campo sottostante per poi esportare il tutto ed inviare via mail il file con estensione “.feedback” alla persona incaricata nella progettazione del prototipo.

Preso in consegna il file “.feedback”, interagendo con il pannello dedicato ai feedback in Blend, è possibile importare il file e visualizzare le eventuali note che sono state apportate al prototipo sia nel pannello sia nell’area di lavoro in modo da implementare le eventuali modifiche. Nei prossimi post, avremo modo di vedere in dettaglio come sfruttare tutte queste funzionalità.

Dopo una rapida overview dello strumento SketchFlow, i pannelli descritti sono i principali che differenziano il tradizionale ambiente di lavoro e strettamente dedicati alla progettazione in modo rapido ed efficace di prototipi dinamici. Sempre inerente a questo fine, SketchFlow è provvisto di una funzionalità specifica dedicata alla preparazione/redazione della documentazione a supporto di progetto. Dal menù File è disponibile l’opzione “Export to Microsoft Word” che permette di salvare e documentare tutti gli elementi principali che caratterizzando il protototipo: SketchFlow Map, Component Screen, States, etc.

Tutte le funzionalità descritte in questo post, verranno trattate ed argomentate nei successivi post su questo argomento che pubblicherò sul mio blog personale.
Vi invito quindi a continuare la lettura degli approfondimenti sul mio blog personale “DesigneXperience”.
E’ già online il post intitolato “SketchFlow Map: gestire il flusso, la logica del prototipo”.