wireframes?
WIREFRAMES AND INTERACTION DESIGN DOCUMENTS
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.
Questi non sono esempi
corretti di wireframing
WIREFRAMES AND INTERACTION DESIGN DOCUMENTS
wireframes?
Rappresentazione dei
contenuti
gerarchia
relazioni
Disposizione dei contenuti
Come essi sono rappresentati
La loro funzione
Interazione con I contenuti
wireframes?
• 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?
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.
Tipologie di wireframes
Sketches
Rapidi e adatti al brainstorming
Buoni per feedback iniziali a stretto giro
LOW-FI wireframes
Diagrammi a blocchi
Ottimi per il flusso della pagina
HI_FI wireframes
Versione dettagliata
Commentati e descritti a parole
Descrizione delle azioni
Descrizione delle funzionalità (x il successive sviluppo)
Devono essere comprensibili senza essere spiegati
types of wireframes
Sketches
Rapidi e adatti al brainstorming
Buoni per feedback iniziali a stretto giro
LOW-FI wireframes
Diagrammi a blocchi
Ottimi per il flusso della pagina
HI_FI wireframes
Versione dettagliata
Commentati e descritti a parole
Descrizione delle azioni
Descrizione delle funzionalità (x il successive sviluppo)
Devono essere comprensibili senza essere spiegati
WIREFRAMES AND INTERACTION DESIGN DOCUMENTS
types of wireframes
Sketches
Rapidi e adatti al brainstorming
Buoni per feedback iniziali a stretto giro
LOW-FI wireframes
Diagrammi a blocchi
Ottimi per il flusso della pagina
HI_FI wireframes
Versione dettagliata
Commentati e descritti a parole
Descrizione delle azioni
Descrizione delle funzionalità
Devono essere comprensibili senza essere spiegati
WIREFRAMES AND INTERACTION DESIGN DOCUMENTS
WIREFRAMES AND INTERACTION DESIGN DOCUMENTS
DESIGN TIMELINE
WIREFRAMES AND INTERACTION DESIGN DOCUMENTS
DESIGN TIMELINE
WIREFRAMES AND INTERACTION DESIGN DOCUMENTS
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
Il wireframe è un modello
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
IDD : interaction
design document
Interaction
design
documents
Interaction Design
Document
(IDD)
WIREFRAMES AND INTERACTION DESIGN DOCUMENTS
what are they?
E’ un documento contenente una collezione di
wireframes ad alto livello descrivendo
contenuti, azioni e scenari/interazioni
dell’interfaccia.
Struttura del IDD
- Cover page e Tabella dei contenuti (indice)
- Descrizione del progetto
(riassunto del progetto,
Adobe.com Homepage – Not logged in
dei goal e degli obbiettivi )
- User personas
- Alberatura del sito
- Wireframes
- Componenti ed elementi specifici visti nel dettaglio
WIREFRAMES AND INTERACTION DESIGN DOCUMENTS
P02
Descrizione del progetto goal e obiettivi
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.
User personas
Alberatura del sito
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
Requisiti minimi – pagina del IDD
1. 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
Adobe.com Homepage – Not logged in
P02
Commenti e descrizioni
WIREFRAMES AND INTERACTION DESIGN DOCUMENTS
WIREFRAMES AND INTERACTION DESIGN DOCUMENTS
Componenti ed elementi specifici?
WIREFRAMES AND INTERACTION DESIGN DOCUMENTS
‘wireflows’
Descrivono le funzionalità di una
porzione del sito interattiva, che non
puo essere descritta dalla staticità
del wireframe classic
Descrivono lo scorrere
dell’infromazione
WIREFRAMES AND INTERACTION DESIGN DOCUMENTS
wireframes: DIMENTICATE il visual design
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 AND INTERACTION DESIGN DOCUMENTS
Non reinventiamo l’acqua calda!
Design patterns: “re-usable solution to a commonly occurring
problem”
http://developer.yahoo.com/ypatterns/
http://www.welie.com/
WIREFRAMES AND INTERACTION DESIGN DOCUMENTS
Design Patterns (cont)
Sono soluzioni a problemi specifici
Facilmente riutilizzabili e facili da comprendere
Fanno risparmiare un sacco di tempo!
WIREFRAMES AND INTERACTION DESIGN DOCUMENTS
Dinamicità nei wireframe
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
WIREFRAMES AND INTERACTION DESIGN DOCUMENTS
Frame-by-frame
WIREFRAMES AND INTERACTION DESIGN DOCUMENTS
Wireframes with keyframes
WIREFRAMES AND INTERACTION DESIGN DOCUMENTS
‘3 keys to success’
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)
WIREFRAMES AND INTERACTION DESIGN DOCUMENTS
Quali software utilizzare?
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)
Ad esempio potete usare anche illustrator
MA anche a mano libera
Alcuni esempi di wireframe
testi nei wireframes realistici..o fittizi?
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
Goals
User
person
as
Sketchi
ng
Alberat
ura
Low-fi
wirefra
mes
Hi-fi
wirefra
mes
Visual
&
graphic
s
design
Coding
Esercizio (gruppi di 2 persone)
1. Scegliete una pagina web
Navigation tabs
Drag &
drop
collapse
2. Analizzate gli elementi della pagina
3. 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