wireframe prototyping

23
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

Upload: acrmnet-srl

Post on 06-Dec-2014

149 views

Category:

Presentations & Public Speaking


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: 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

Page 2: wireframe prototyping

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) [email protected] +39 06 95214464Fax +39 06 92913681

Le nostre APPS

HERMES HEALTY SPIECES PET ISLAND SWAP ISLAND MORE OR LESS NAPOMEMO

Page 3: wireframe prototyping

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

Page 4: wireframe prototyping

4

Wireframe: alcuni esempi

aCrm net training course Apr 2014

Il wireframe è una rappresentazione schematica di una singola pagina

Page 5: wireframe prototyping

5

Wireframe: alcuni esempi

aCrm net training course Apr 2014

Page 6: wireframe prototyping

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.

Page 7: wireframe prototyping

7

Storyboard: alcuni esempi

aCrm net training course Apr 2014

Lo storyboard è una serie di wireframe legati tra loro

Page 8: wireframe prototyping

8

Storyboard: alcuni esempi

aCrm net training course Apr 2014

Page 9: wireframe prototyping

9

Prototipi: Alcuni esempi

aCrm net training course Apr 2014

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

Page 10: wireframe prototyping

10

Prototipi: Alcuni esempi

aCrm net training course Apr 2014

Page 11: wireframe prototyping

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

Page 12: wireframe prototyping

12

Wireframing e Storyboarding

aCrm net training course Apr 2014

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

Page 13: wireframe prototyping

13

Prototipo: Indigo Studio

aCrm net training course Apr 2014

Se non siete amanti del bricolage

Interaction Design Tool

Page 14: wireframe prototyping

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

Page 15: wireframe prototyping

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)

Page 16: wireframe prototyping

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

Page 17: wireframe prototyping

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

Page 18: wireframe prototyping

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)

Page 19: wireframe prototyping

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.

Page 20: wireframe prototyping

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.

Page 21: wireframe prototyping

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 .

Page 22: wireframe prototyping

22

Prototipo: Indigo Studio

aCrm net training course Apr 2014

Navigation• Esempio di navigazione

all’interno del progetto.

Page 23: wireframe prototyping

23

Prototipo: Indigo Studio

aCrm net training course Apr 2014

Proviamo a fare qualche esempio pratico!