wireframe prototyping

Storyboarding, Wireframing, and Code-Free Prototyping for Your Web, Desktop, and Mobile Apps

Goal : Progettare le interazioni e l’interfaccia utente mantenendo il focus sulla User Experience

Chi è Acrm net

-aCrm net è una società italiana specializzata nello sviluppo di CRMopen source e di soluzioni ad hoc per il web e il mobile.

- aCrm net vanta più di 50 dipendenti che coprono una vasta gamma di figure professionali e ha ben due sedi in Europa: Roma e Ginevra.

ContattiaCrm Via Enrico Berlinguer, 18 (00054)Fiumicino (Roma) Italiawww.acrmnet.cominfo_net@acrmnet.itPhone +39 06 95214464Fax +39 06 92913681

Le nostre APPS

HERMES HEALTY SPIECES PET ISLAND SWAP ISLAND MORE OR LESS NAPOMEMO

3

Considerazioni generali

• Cos’è un wireframe?– E’ la prima bozza di un’applicazione/sito una specie di radiografia della struttura.– definisce visivamente la struttura del sito e traduce in immagine ciò che, prima, era solo

testo scritto– lo scopo è quello di descrivere e tenere traccia della disposizione dei vari elementi

all’interno del layout, senza disegni, immagini o colori.– Il wireframe presenta, sotto forma di immagine, gli elementi di una pagina e le modalità di

navigazione: e proprio in quanto immagine, anche se grigia e spoglia, comunica in modo più chiaro e più immediato di tante parole.

• Cos’è uno storyboard?– Molto semplice, l’insieme dei wireframe.– Lo storyboard deve mostrare l'integrazione delle varie pagine/contenuti con i controlli e le

loro funzionalità

• Cos’è un prototipo?– Un prototipo è l’evoluzione dello storyboard– definisce l’interfaccia utente UI– Aiuta a progettare e a verificare la User Experience UX

aCrm net training course Apr 2014

4

Wireframe: alcuni esempi

aCrm net training course Apr 2014

Il wireframe è una rappresentazione schematica di una singola pagina

5

Wireframe: alcuni esempi

aCrm net training course Apr 2014

6

Wireframe: Sketching Your App

aCrm net training course Apr 2014

• Partire da semplici schizzi/bozze è uno dei metodi migliori per iniziare a disegnare la UI di un progetto, inoltre è veloce, facile da modificare e può aiutare a far visualizzare una soluzione ad un cliente.

• Disegnare la vostra applicazione permette di mostrare ai clienti le vostre idee e consente di illustrare come un'idea può scalare da un telefono a un tablet da 7 pollici ad altri schermi. In pratica, i disegni sono il primo passo da compiere nella creazione di un’app.

7

Storyboard: alcuni esempi

aCrm net training course Apr 2014

Lo storyboard è una serie di wireframe legati tra loro

8

Storyboard: alcuni esempi

aCrm net training course Apr 2014

9

Prototipi: Alcuni esempi

aCrm net training course Apr 2014

Un prototipo è la rappresentazione completa o parziale di un progetto o di un prodotto

10

Prototipi: Alcuni esempi

aCrm net training course Apr 2014

11

Considerazioni generali

• Il wireframe e lo storyboard sono rappresentazioni statiche del design di un progetto e non simulano i suoi vari stati.

• Un prototipo, a prescindere da come è fatto, coglie l’intento di un progetto e ne simula i molteplici stati.(tratto dal libro “Prototyping” di Todd Zaki Warfel)

aCrm net training course Apr 2014

12

Wireframing e Storyboarding

aCrm net training course Apr 2014

E’ ora di fare qualche esempio pratico e alcune esercitazioni!

13

Prototipo: Indigo Studio

aCrm net training course Apr 2014

Se non siete amanti del bricolage

Interaction Design Tool

14

Prototipo: Indigo Studio

aCrm net training course Apr 2014

• Indigo Studio è un software in grado di aiutare nella costruzione della GUI utente, permettendo di includere interazioni e gesture.

• E’ possibile creare prototipi funzionanti senza l’aggiunta di codice

15

Prototipo: Indigo Studio

aCrm net training course Apr 2014

• I concetti base del software Indigo:– Screen elements (blocchi visuali che si combinano per formare una schermata)– Interactions (azioni dell’utente che comportano variazioni nella schermata o

navigazione)– Animations (le modifiche alla visualizzazione della schermata nel tempo)– States (il punto di attesa del prototipo prima di un’azione dell’utente)– Navigation (il passaggio da una schermata all’altra o ad un URL esterno)

16

Prototipo: Indigo Studio

aCrm net training course Apr 2014

Screen Elements:• Gli screen elements sono elementi utilizzati

per la creazione dell’interfaccia utente del prototipo, sono divisi in:– Layout– Common content– Lists & pickers– Shapes– Stencils– Annotations/markup

17

Prototipo: Indigo Studio

aCrm net training course Apr 2014

Screen Elements - Layers:• Gli screen elements organizzati in Layers

(livelli) in modo che vi sia un ordine di visualizzazione, ovviamente è possibile modificare l’ordine

18

Prototipo: Indigo Studio

aCrm net training course Apr 2014

Interactions• Le interazioni accadono quando l’utente compie un’azione e possono essere

cambiamenti di schermo (in-screen interaction) o di schermata (navigazione)

19

Prototipo: Indigo Studio

aCrm net training course Apr 2014

Animations• Le animazioni consentono di “animare” lo schermata con movimento, cambio di

colori o dimensione e dissolvenza.

20

Prototipo: Indigo Studio

aCrm net training course Apr 2014

States• Ogni schermata ha uno stato iniziale chiamato “start”. L’interazione con gli

elementi all’interno della schermata si traduce in cambiamenti di stato.

21

Prototipo: Indigo Studio

aCrm net training course Apr 2014

Navigation• Alcune azioni dell’utente possono portare alla navigazione tra schermate dello

stesso progetto o URL esterni .

22

Prototipo: Indigo Studio

aCrm net training course Apr 2014

Navigation• Esempio di navigazione

all’interno del progetto.

23

Prototipo: Indigo Studio

aCrm net training course Apr 2014

Proviamo a fare qualche esempio pratico!