Download ppt - Wireframes? WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 1

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.


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



LOW-FI wireframes D



HI_FI wireframes V




escrizione delle funzionalità (x il successive sviluppo) D



8

types of wireframes

Sketches R



LOW-FI wireframes D



HI_FI wireframes V




escrizione delle funzionalità D



9


10

DESIGN TIMELINE


11

DESIGN TIMELINE


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


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!


15

IDD : interaction design document

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


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


24

Adobe.com Homepage – Not logged in P02

Commenti e descrizioni


25


26

Componenti ed elementi specifici?


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’


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


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!


30

http://developer.yahoo.com/ypatterns/

http://www.welie.com/

Sono soluzioni a problemi specifici

Facilmente riutilizzabili e facili da comprendere

Fanno risparmiare un sacco di tempo!

Design Patterns (cont)


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


32


33

Frame-by-frame


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’


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