wireframes? Everyone knows what they are

Presentazione sul tema: "wireframes? Everyone knows what they are"— Transcript della presentazione:

1 wireframes? Everyone knows what they are
Why are we giving this presentation Because people submit things like this (click) Wireframes and Interaction Design Documents adsf

2 Wireframes and Interaction Design Documents

3 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 and Interaction Design Documents

5 wireframes? wireframes? Rappresentazione dei contenuti
gerarchia relazioni Disposizione dei contenuti Come essi sono rappresentati La loro funzione Interazione con I contenuti 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 Illustrating the content in a user interface hierarchy & relationships between elements How is the content displayed? How does it function? What is the interaction with users? adsf

6 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. Illustrating the content in a user interface hierarchy & relationships between elements How is the content displayed? How does it function? What is the interaction with users? adsf

7 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 Sketches – quick, usually first steps, GREAT for getting input from others Content only – simple blocks, good for testing flows, experimenting with layout Hi-fi Detailed description of content, behaviour, function Comments Understood without explanation!!!

8 types of wireframes Sketches LOW-FI wireframes HI_FI wireframes
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 Sketches – quick, usually first steps, GREAT for getting input from others Content only – simple blocks, good for testing flows, experimenting with layout Hi-fi Detailed description of content, behaviour, function Comments Understood without explanation!!! Wireframes and Interaction Design Documents

9 types of wireframes Sketches LOW-FI wireframes HI_FI wireframes
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 Sketches – quick, usually first steps, GREAT for getting input from others Content only – simple blocks, good for testing flows, experimenting with layout Hi-fi Detailed description of content, behaviour, function Comments Understood without explanation!!! Wireframes and Interaction Design Documents

10 Many things happen in the design process, and many decisions are made
Marketing, branding, development, etc. Where do wireframes fit in? Wireframes and Interaction Design Documents adsf

11 DESIGN TIMELINE Jesse James Garrett UCD process model
What happens before / what needs to happen afterwards Wireframes and Interaction Design Documents adsf

12 DESIGN TIMELINE Jesse James Garrett UCD process model
What happens before / what needs to happen afterwards Wireframes and Interaction Design Documents adsf

13 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 are to communicate solutions for design problems Communication fundamental design choices Get everyone on the same page “contract” Wireframes and Interaction Design Documents adsf

14 Il wireframe è un modello
Wireframes and Interaction Design Documents

15 Obiettivi dei wireframes
Differenti wireframes per obiettivi diversi: Flussi, user testing, revisioni dei contenuti, etc Teniamo sempre presente quale è il nostro obiettivo! Always keep in mind WHY you are making the wireframe What are you making? What are you testing? Flow vs content? Wireframes and Interaction Design Documents adsf

16 IDD : interaction design document
Wireframes and Interaction Design Documents

17 Interaction design documents
Interaction Design Document (IDD) Wireframes and Interaction Design Documents

18 what are they? E’ un documento contenente una collezione di wireframes ad alto livello descrivendo contenuti, azioni e scenari/interazioni dell’interfaccia. A document containing a collection of high fidelity wireframes describing the content, behavior, and interaction/scenarios of an interface.

19 Descriptions & Scenarios
Struttura del IDD - 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 Cover page Descriptions & Scenarios Table of Contents Adobe.com Homepage – Not logged in P02 Cover pages ToC Descriptions of interface Wireframes Components & elements Wireframes and Interaction Design Documents adsf

20 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. Descriptions & Scenarios Wireframes and Interaction Design Documents

21 User personas Wireframes and Interaction Design Documents

22 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 Wireframes and Interaction Design Documents

23 Alberatura Wireframes and Interaction Design Documents

24 Requisiti minimi – pagina del IDD
Titolo della tavola e descrizione Numero della tavola Diagrammi e blocchi contenuti Spazio per le annotazioni e le descrizioni principali Adobe.com Homepage – Not logged in P02 Wireframes and Interaction Design Documents

25 Commenti e descrizioni
Annotations on the side Wireframes and Interaction Design Documents

26 Adding comments with boxes & arrows
Make sure it is printable! Wireframes and Interaction Design Documents

27 Componenti ed elementi specifici?
Elements which are used on several pages (e.g. header navigation, footer) Interactive / dynamic elements which need more explaining (e.g. login console) If you change something, you only have to change it 1 time Wireframes and Interaction Design Documents

28 ‘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 Another good example is to use “wireflows” Describe functionality by illustrating scenarios/flows Wireframes and Interaction Design Documents

29 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… Concentratevi sull’interazione! Don’t hint at visual design!! Focus on the interface Wireframes and Interaction Design Documents

30 Non reinventiamo l’acqua calda!
Design patterns: “re-usable solution to a commonly occurring problem” Problems have already been solved, you don’t need to find new solutions “re-usable solution to a commonly occurring problem” Wireframes and Interaction Design Documents

31 Design Patterns (cont)
Sono soluzioni a problemi specifici Facilmente riutilizzabili e facili da comprendere Fanno risparmiare un sacco di tempo! Specific, easy to communicate to eachother Makes Uis more usable and easier to understand Save you time, save them money Online you can find templates, yahoo made some for Visio / Omnigraffel, etc Wireframes and Interaction Design Documents

32 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 3 methods can be used to help document dynamic interaction Wireframes and Interaction Design Documents

33 Frame-by-frame Frame-by-frame
Chart explaining in every frame what happens (mouse over, mouse down, etc) Frame-by-frame Wireframes and Interaction Design Documents

34 Wireframes with keyframes
Illustrate the different states + comments Most frequently used Wireframes with keyframes Wireframes and Interaction Design Documents

35 ‘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) Clear for developers Blueprint for final product Get everyone on the same page (designer, developer, project leader, etc) Wireframes and Interaction Design Documents

36 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) No industry standard =( Pick one for design and documenting

37 Ad esempio potete usare anche illustrator
Wireframes and Interaction Design Documents

38 MA anche a mano libera Wireframes and Interaction Design Documents

39 Alcuni esempi di wireframe
Wireframes and Interaction Design Documents

40 Wireframes and Interaction Design Documents

41 Wireframes and Interaction Design Documents

42 Wireframes and Interaction Design Documents

43 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. 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 You all know: It distracts from the interface, makes it harder to envision what you are trying to show

44 Visual & graphics design
Goals User personas Sketching Alberatura Low-fi wireframes Hi-fi wireframes Visual & graphics design Coding Wireframes and Interaction Design Documents

45 Esercizio (gruppi di 2 persone)
Scegliete una pagina web Analizzate gli elementi della pagina Analizzate gli elementi interattivi e dinamici della pagina Provate a realizzare un low-fi wireframe della pagina Provate a realizzare un low-fi wirflow della parte dinamica Drag & drop collapse Navigation tabs