Upload
acrmnet-srl
View
150
Download
0
Embed Size (px)
DESCRIPTION
Citation preview
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) [email protected] +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!