Dopo questa prima serie di post introduttivi dedicati ad una veloce overview dell’ambiente di lavoro e degli strumenti per la condivisione del prototipo, entriamo finalmente nel vivo di SketchFlow!
Quale modo migliore per descrivere ed affrontare le potenzialità dello strumento se non con un esempio reale?

Ecco il link al prototipo che andremo a realizzare nel corso dei prossimi post.

>> Contoso MyMovies (Sketch Flow Dynamic Prototype)
(alcune funzionalità e pagine non sono ancora visibili e saranno completate nel corso delle esercitazioni proposte)

Ho ipotizzato di dover realizzare un nuovo portale specializzato nel booking di biglietti per il cinema su un network di sale cinematografiche a copertura nazionale. Premetto i contenuti e i servizi sono stati solo "abozzati" e sicuramente possono essere presenti delle mancanze e criticità nell’usabilità e nella “user experience” dell’applicativo. Il tutto vuole essere una semplice esercitazione di carattere formativo che vi permetta di vedere ed apprendere alcune delle principali funzionalità disponibili in SketchFlow.

L’ipotesi di interfaccia per la home page del portale è costituita da una serie di “moduli” facilmente riconoscibili:
• un motore di ricerca che permetta di acquistare in “one click” il biglietto
• un player in Silverlight che visualizza una serie di contenuti multimediali “premium” a rotazione.
• un oggetto che ti permetta di selezionare rapidamente il film – suddivisi per categoria
• un’area riservata agli utenti registrati al portale
• un’area dedicata alla navigazione
• un menù per accedere a servizi secondari fruibili attraverso il portale
• un paio di spazio riservati ai banner



Il portale sarà quindi costituito da una serie di pagine editoriali e pagine specifiche per la fruizione dei servizi proposti: acquisto dei biglietti, contenuti promozionali, trailer, contributi social, etc.

Come rappresentato, nell’immagine qui sotto, sono ben riconoscibili 4 Component Screen, in questo modo ho cercato di ottimizzare il tutto con dei moduli che potrebbero essere impiegati in comune su più pagine che costituiscono il progetto. Per semplicità ho introdotto un aggiuntivo ComponentScreen che contiene al suo interno il logo dell’ipotetica azienda per gestire la navigazione in tutte le pagine con la Home Page.


Come potete notare, ho scelto di utilizzare un component screen anche per i menù di navigazione, in questo modo i collegamenti tra le pagine possono essere gestiti in modo centralizzato in un unico punto e chiaramente, le eventuali successive modifiche verranno replicate in tutte le pagine in cui è inserito.

Per definire un ComponentScreen, ci sono due possibili modalità nel procedere:
- convertire alcuni elementi/controlli già inseriti nell’interfaccia in component screen;
- creare un component screen vuoto.
Nella prima ipotesi, è possibile procedere selezionando i controlli che devono essere raggruppati nel Component Screen, già inseriti nella pagina sull’artboard, e semplicemente facendo “tasto destro del mouse” attivando il comando per la conversione “Make into Component Screen”. La stessa funzionalità può essere attivata dal menù “Tool”, sempre con gli elementi da convertire selezionati sull’area di lavoro. Come ho già descritto in precedenza se notate nella SketchFLow Map, a seguito di questa operazione vi sarà apparso un elemento di forma diversa rispetto alle schermate standard che costituiscono il prototipo. L’elemento in questo caso risulterà collegato alla pagina in cui erano presenti i componenti nativi che sono stati trasformati in “Component Screen”. Il tutto è intervallato da uno step intermedio in cui viene richiesto di definire un nome e decidere se mantenere comunque nel prototipo una copia dei controlli originali che stanno per essere convertiti in Component Screen o trasformarli direttamente in Component.
Il secondo “modus operandi”, permette di creare un “Component Screen”, ex-novo e quindi vuoto. In questo caso si procede direttamente nella SketchFlow Map associando e collegando il Component Screen da una pagina già presente nel prototipo, come raffigurato nell’immagine a seguire.



Per inserire il component screen in altre pagine che costituiscono il prototipo, basta semplicemente trascinare sulla SketchFlow Map l’elemento Component Screen sulle pagine in cui dovrà essere inserito.
Se visualizzate la pagina in cui è stato inserito, posizionandovi direttamente sulla sketchflow map avrete modo di posizionare il component screen appena inserito.

Fino a questo punto, nulla di nuovo, più o meno avevamo già visto come effettuare queste operazioni di base. A questo punto vediamo invece come inserire e gestire dei collegamenti, o megli presupponiamo di dover definire la navigazione dei bottoni che caratterizzano il menù principale (MainMenu).
In questo caso, ho già inserito nel prototipo una serie di pagine, temporaneamente vuote, in cui andremo a definire i collegamenti nel “main menu”. L’idea è quella di sfruttare le potenzialità del component screen come risorsa esterna alle pagine in modo da gestire in modo centralizzato i collegamenti alle pagine disponibili nel prototipo. Personalmente, ho preferito inserire gli elementi che costituiranno il “MainMenu” - button - nella home page del prototipo per poi procedere a trasformarli come component screen.
A questo punto, direttamente all’interno del component screen è possibile associare i collegamenti ai button in esso contenuti. Selezionate un “button”, fate semplicemente tasto destro del mouse, e nella maschera selezionate l’opzione “Navigate to…”. Vi verranno visualizzate l’elenco delle pagine che costituiscono il prototipo e semplicemente selezionando la pagina da collegare al button, sarete in grado di definirne la navigazione in modo rapido.



Per curiosità, ma credo possa essere utile a molti, se andiamo a vedere dietro le quinte come Blend sia in grado gestire il collegamento, vi invito ad aprire il pannello “Object & Timeline”, se selezionate il button a cui si è associato la navigazione, noterete che Blend non ha fatto altro che agganciare un semplice “behavior” in cui nelle properties sono state definite il collegamento alla pagina selezionata nella tendina precedente.

Vi ricordo che i collegamenti definiti a livello di component screen verranno poi replicati in tutte le pagine in cui il controllo risulta inserito, del resto anche le eventuali modifiche che verranno apportate nel component saranno quindi replicate in tutte le pagine. Per vedere visualizzate e aggiornate le modifiche sull’artboard è necessario effettuare un “build” dell’applicazione (da tastiera ctrl+shift+b) o comunque lanciare il testing del prototipo.
Questo “modus operandi”, per la definizione dei collegamenti all’interno di un prototipo è valida anche al di fuori del contesto specifico di un component screen, ma può essere impiegata genericamente per ogni controllo che costituisce l’interfaccia utente della pagina. In questo modo sarete in grado di definire i collegamenti all’interno dei controlli che costituiscono l’applicazione in aggiunta alle funzionalità offerte di default dallo “sketch flow player”.



Vi do quindi appuntamento al prossimo post, dedicato alla gestione avanzata dei menù: come poter attivare il corrispondente “button” del menù di navigazione in relazione alla pagina del prototipo in cui si trova l’utente.