Wireframes? WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 1.

  • Published on
    02-May-2015

  • View
    213

  • Download
    1

Transcript

  • Slide 1
  • wireframes? WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 1
  • Slide 2
  • 2
  • Slide 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.
  • Slide 4
  • WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 4 Questi non sono esempi corretti di wireframing
  • Slide 5
  • wireframes? Rappresentazione dei contenuti gerarchia relazioni Disposizione dei contenuti Come essi sono rappresentati La loro funzione Interazione con I contenuti 5 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
  • Slide 6
  • wireframes? In sostanza rappresentnao la struttura e le funzionalit che avr il sito, descrivendolo nei dettagli ma senza entrare nel merito dellaspetto grafico che lo caratterizzera. 6 wireframes?
  • Slide 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 7
  • Slide 8
  • 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 8
  • Slide 9
  • 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 9
  • Slide 10
  • 10
  • Slide 11
  • DESIGN TIMELINE WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 11
  • Slide 12
  • DESIGN TIMELINE WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 12
  • Slide 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 AND INTERACTION DESIGN DOCUMENTS 13
  • Slide 14
  • Il wireframe un modello WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 14
  • Slide 15
  • 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
  • Slide 16
  • IDD : interaction design document WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 16
  • Slide 17
  • Interaction design documents WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 17 Interaction Design Document (IDD)
  • Slide 18
  • what are they? 18 E un documento contenente una collezione di wireframes ad alto livello descrivendo contenuti, azioni e scenari/interazioni dellinterfaccia.
  • Slide 19
  • - 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 page Table of Contents Descriptions & Scenarios Adobe.com Homepage Not logged inP02
  • Slide 20
  • E una breve intro al progetto, che ne descrive I tratti principali e aiuta il lettore dellIDD a comprendere quali sono I goal del sito web. Descrizione del progetto goal e obiettivi WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 20 Descriptions & Scenarios
  • Slide 21
  • User personas WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 21
  • Slide 22
  • 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 WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 22
  • Slide 23
  • Alberatura WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 23
  • Slide 24
  • 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 24 Adobe.com Homepage Not logged inP02
  • Slide 25
  • Commenti e descrizioni WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 25
  • Slide 26
  • WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 26
  • Slide 27
  • Componenti ed elementi specifici? WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 27
  • Slide 28
  • Descrivono le funzionalit di una porzione del sito interattiva, che non puo essere descritta dalla staticit del wireframe classic Descrivono lo scorrere dellinfromazione wireflows WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 28
  • Slide 29
  • Dimenticare I colori! ( A meno che non siano necessari per descrivere lesperienza 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 sullinterazione!
  • Slide 30
  • Design patterns: re-usable solution to a commonly occurring problem http://developer.yahoo.com/ypatterns/ http://www.welie.com/ Non reinventiamo lacqua calda! WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 30
  • Slide 31
  • 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
  • Slide 32
  • 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 dellinterfaccia? Frame-by-frame wireframing Lo-fi Animations Wireframes with keyframes Dinamicit nei wireframe WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 32
  • Slide 33
  • WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 33 Frame-by-frame
  • Slide 34
  • WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 34 Wireframes with keyframes
  • Slide 35
  • 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
  • Slide 36
  • 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?
  • Slide 37
  • Ad esempio potete usare anche illustrator WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 37
  • Slide 38
  • MA anche a mano libera WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 38
  • Slide 39
  • Alcuni esempi di wireframe WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 39
  • Slide 40
  • WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 40
  • Slide 41
  • WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 41
  • Slide 42
  • WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 42
  • Slide 43
  • Lorem ipsum dolor sit atem Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. 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
  • Slide 44
  • WIREFRAMES AND INTERACTION DESIGN DOCUMENTS 44 Goals User person as Sketch ing Albera tura Low-fi wirefra mes Hi-fi wirefra mes Visual & graphi cs design Codin g
  • Slide 45
  • Esercizio (gruppi di 2 persone) 1.Scegliete una pagina web 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 Drag & drop collapse Navigation tabs