wireframes?
Wireframes and Interaction Design Documents
1
About wireframes
Sono un modo rapido e semplice per mostrare la struttura di un prodotto (es. sito web)… di fatto rappresentano un versione preliminare di prototipo.
Non mirano a rappresentare il visual design (ad esempio caratteri, colori), Gli elementi grafici, in questa fase, possono introdure rumore di fondo e distrazioni nella analisi del wireframe
Servono per discutere e raffinazione il processo di progettazione - il numero di pagine, il tipo di immagini, il numero di immagini e di tool accessori
Il wireframe puo includere parti ipertestuali cliccabili permettendo di testare anche il flusso di navigazione vero e proprio.
Non possono includere la versione reale del prodotto finale, ma devono includere una descrizione di come sarà il prodotto finale.
Wireframes and Interaction Design Documents
4
Questi non sono esempi corretti di wireframing
wireframes?
Rappresentazione dei contenuti
gerarchia
relazioni
Disposizione dei contenuti C
ome essi sono rappresentati L
a loro funzione
Interazione con I contenuti
5
• Non rappresentano il visual del sito
• Non contengono elementi grafici definiti, ma solo rappresentazioni degli elementi grafici
• Non trasmettono lidentità aziendale o del brand per cui il sito nasce
wireframes?
In sostanza rappresentnao la struttura e le funzionalità che avrà il sito, descrivendolo nei dettagli ma senza entrare nel merito dell’aspetto grafico che lo caratterizzera.
6
Tipologie di wireframes
Sketches R
apidi e adatti al brainstorming B
uoni per feedback iniziali a stretto giro
LOW-FI wireframes D
iagrammi a blocchi O
ttimi per il flusso della pagina
HI_FI wireframes V
ersione dettagliata C
ommentati e descritti a parole D
escrizione delle azioni D
escrizione delle funzionalità (x il successive sviluppo) D
evono essere comprensibili senza essere spiegati
7
types of wireframes
Sketches R
apidi e adatti al brainstorming B
uoni per feedback iniziali a stretto giro
LOW-FI wireframes D
iagrammi a blocchi O
ttimi per il flusso della pagina
HI_FI wireframes V
ersione dettagliata C
ommentati e descritti a parole D
escrizione delle azioni D
escrizione delle funzionalità (x il successive sviluppo) D
evono essere comprensibili senza essere spiegati
Wireframes and Interaction Design Documents
8
types of wireframes
Sketches R
apidi e adatti al brainstorming B
uoni per feedback iniziali a stretto giro
LOW-FI wireframes D
iagrammi a blocchi O
ttimi per il flusso della pagina
HI_FI wireframes V
ersione dettagliata C
ommentati e descritti a parole D
escrizione delle azioni D
escrizione delle funzionalità D
evono essere comprensibili senza essere spiegati
Wireframes and Interaction Design Documents
9
Wireframes and Interaction Design Documents
10
DESIGN TIMELINE
Wireframes and Interaction Design Documents
11
DESIGN TIMELINE
Wireframes and Interaction Design Documents
12
Obiettivi dei wireframes
Individuare soluzioni a problemi di progettazione
Comunicare le scelte principali di progettazione
Fare in modo che tutti (sviluppatori, progettisti e committenti) si concentrino sugli stessi problemi
Wireframes and Interaction Design Documents
13
Il wireframe è un modello
14
Obiettivi dei wireframes
Differenti wireframes per obiettivi diversi: Flussi, user testing, revisioni dei contenuti, etc
Teniamo sempre presente quale è il nostro obiettivo!
Wireframes and Interaction Design Documents
15
IDD : interaction design document
Interaction design documents
Wireframes and Interaction Design Documents
17
Interaction Design Document (IDD)
what are they?
18
E’ un documento contenente una collezione di wireframes ad alto livello descrivendo contenuti, azioni e scenari/interazioni dell’interfaccia.
- Cover page e Tabella dei contenuti (indice)
- Descrizione del progetto
(riassunto del progetto,
dei goal e degli obbiettivi )
- User personas
- Alberatura del sito
- Wireframes
- Componenti ed elementi specifici visti nel dettaglio
Struttura del IDD
Wireframes and Interaction Design Documents
19
Cover pageCover page
Table of ContentsTable of Contents
Descriptions & ScenariosDescriptions & Scenarios
Adobe.com Homepage – Not logged in P02
E ’ una breve intro al progetto, che ne descrive I tratti principali e aiuta il lettore dell’IDD a comprendere quali sono I goal del sito web.
Descrizione del progetto goal e obiettivi
20
Descriptions & ScenariosDescriptions & Scenarios
User personas
21
Viene descritta la possibile alberatura del sito web, per capire quante e quali pagine andranno progettate e verificate.
Lo si esplica attraverso una descrizione testuale o meglio ancora, un grafo
Alberatura del sito
22
Alberatura
23
Requisiti minimi – pagina del IDD1. Titolo della tavola e descrizione
2. Numero della tavola
3. Diagrammi e blocchi contenuti
4. Spazio per le annotazioni e
le descrizioni principali
Wireframes and Interaction Design Documents
24
Adobe.com Homepage – Not logged in P02
Commenti e descrizioni
Wireframes and Interaction Design Documents
25
Wireframes and Interaction Design Documents
26
Componenti ed elementi specifici?
Wireframes and Interaction Design Documents
27
Descrivono le funzionalità di una porzione del sito interattiva, che non puo essere descritta dalla staticità del wireframe classic
Descrivono lo scorrere dell’infromazione
‘wireflows’
Wireframes and Interaction Design Documents
28
Dimenticare I colori!
(A meno che non siano necessari per descrivere l’esperienza utente, come semafori rossi/Verdi)
Utilizzate forme il piu semplici possibili
‘boxes and arrows’
Non usate angoli arrotondati, ombreggiture, decorazioni…
wireframes: DIMENTICATE il visual design
Wireframes and Interaction Design Documents
29
Concentratevi
sull’interazione!Concentratevi
sull’interazione!
Design patterns: “re-usable solution to a commonly occurring problem”
http://developer.yahoo.com/ypatterns/
http://www.welie.com/
Non reinventiamo l’acqua calda!
Wireframes and Interaction Design Documents
30
Sono soluzioni a problemi specifici
Facilmente riutilizzabili e facili da comprendere
Fanno risparmiare un sacco di tempo!
Design Patterns (cont)
Wireframes and Interaction Design Documents
31
I wireframe sono estremamente statici
Sono sostanzialmente delle radiografie di come sarà il sito finito dal punto di vista strutturale e comunicativo.
Come modellare aspetti dinamici dell’interfaccia?
Frame-by-frame wireframing
Lo-fi Animations
Wireframes with keyframes
Dinamicità nei wireframe
Wireframes and Interaction Design Documents
32
Wireframes and Interaction Design Documents
33
Frame-by-frame
Wireframes and Interaction Design Documents
34
Wireframes with keyframes
I wireframe sono un buon punto di partenza nella
progettazione
Sono la base di un buon progetto finale
Permettono di concentrarsi tutti sugli stessi aspetti
(designer, developer, project leader, etc)
‘3 keys to success’
Wireframes and Interaction Design Documents
35
Visio (OsX, Windows)
OmniGraffle (OsX)
InDesign (OsX, Windows)
Illustrator (OsX, Windows)
Powerpoint (OsX, Windows)
Impress (OsX, Windows, Linux)
Dia (OsX, Windows, Linux)
Balsamiq (OsX, Windows, Linux)
Quali software utilizzare?
Ad esempio potete usare anche illustrator
37
MA anche a mano libera
38
Alcuni esempi di wireframe
39
40
41
42
Lorem ipsum dolor sit atem…
Text goes here. Text goes here. Text goes here. Text goes here. Text goes here.
http://www.google.com
http://www.google.com http://www.google.com http://www.google.com
Questo perche nei wireframes è giusto in prima battuta concentrarsi sulla struttura del sito, e sulle funzionalità.
Solo nei wireframes hi-fi potete usare testi verosimili.
Nella fase di progettazione del visual, il testo dovra essere fittizio
testi nei wireframes realistici..o fittizi?
43
44
Esercizio (gruppi di 2 persone)
1. Scegliete una pagina web
2. Analizzate gli elementi della pagina3. Analizzate gli elementi interattivi e
dinamici della pagina
4. Provate a realizzare un low-fi wireframe della pagina
5. Provate a realizzare un low-fi wirflow della parte dinamica
Drag &drop
collapse
Navigation tabs