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
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.
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
Struttura del IDD
Cover page
Tabella dei contenuti
Adobe.com Homepage – Not logged in
Descrizione del progetto
Wireframes
Componenti ed elementi specifici
visti nel dettaglio
WIREFRAMES AND INTERACTION DESIGN DOCUMENTS
P02
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
Utilizzate testi realistici..
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 concentrarsi sulla
struttura del sito, e sulle funzionalità, sulle informazioni veicolati.
Nella fase di progettazione del visual, il testo invece dovra
essere fittizio
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
Attenti alle proporzioni
Punti ed elementi vettoriali possono avere dimensioni
differenti…usate testi corti!
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 static
Sono radiografie di come sarà il sito finite.
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)
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