• Like
  • Save
Designing the User Experience
Upcoming SlideShare
Loading in...5
×
 

Designing the User Experience

on

  • 458 views

Progettazione dell'interfaccia utente e sviluppo di mock-up legati agli Use Case specificati. ...

Progettazione dell'interfaccia utente e sviluppo di mock-up legati agli Use Case specificati.
Materiale relativo al corso di Sistemi Informativi Aziendali al Politecnico di Torino, a.a. 2013/2014.
Maggiori informaizoni sul corso: http://bit.ly/sistinfo

Statistics

Views

Total Views
458
Views on SlideShare
455
Embed Views
3

Actions

Likes
1
Downloads
3
Comments
0

1 Embed 3

http://www.linkedin.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Designing the User Experience Designing the User Experience Presentation Transcript

    • Designing the User Experience Sistemi Informativi Aziendali – A.A. 2013/2014
    • Obiettivi 1. 2. 3. 2 Sviluppare un design incentrato sull’utente Regole con cui viene sviluppato il design Integrarsi nel ciclo si sviluppo del Sistema Informativo Sistemi Informativi Aziendali A.A. 2012/2013
    • Argomenti Introduzione all’usabilità Progettazione human centered Mockup di interfacce    3 Sistemi Informativi Aziendali A.A. 2012/2013
    • Il ruolo dell’interfaccia 4 Sistemi Informativi Aziendali A.A. 2012/2013
    • Come? 5 Sistemi Informativi Aziendali A.A. 2012/2013
    • Sensi e strumenti INPUT 6 Sistemi Informativi Aziendali A.A. 2012/2013
    • Livelli di complessità 7 Sistemi Informativi Aziendali A.A. 2012/2013
    • Livelli di complessità 8 Sistemi Informativi Aziendali A.A. 2012/2013
    • Progettazione dell’usabilità 9 Sistemi Informativi Aziendali A.A. 2012/2013
    • Tecnologie di interazione Wearable 10 Sistemi Informativi Aziendali A.A. 2012/2013
    • User goals 11 Sistemi Informativi Aziendali A.A. 2012/2013
    • Il modello di Norman 12 Sistemi Informativi Aziendali A.A. 2012/2013
    • Donald Norman http://it.wikipedia.org/wiki/Donald_Norman 13 Sistemi Informativi Aziendali A.A. 2012/2013
    • Nielsen Norman Group    14 Jakob Nielsen Co-founded with Don Norman http://www.nngroup.com/a rticles/ Sistemi Informativi Aziendali A.A. 2012/2013
    • Don’t make me think   The “motto” of usability Steve Krug, http://www.sensible.com/ 15 Sistemi Informativi Aziendali A.A. 2012/2013
    • Affordance: fornelli 16 Sistemi Informativi Aziendali A.A. 2012/2013
    • Feedback 17 Sistemi Informativi Aziendali A.A. 2012/2013
    • Discipline coinvolte http://userflow.tumblr.com/post/3877937295/uxd-ia-ui-ixd 18 Sistemi Informativi Aziendali A.A. 2012/2013
    • 19 Sistemi Informativi Aziendali A.A. 2012/2013
    • L’approccio tradizionale 20 R.Polillo - Marzo 2013
    • L’approccio tradizionale Es.: Ascensore - Andare al piano n - Aprire / chiudere porta - Fermarsi - Inviare allarme Ci chiediamo quali funzioni il sistema deve fornire al suo utente, le progettiamo e le realizziamo (Progettazione orientata al sistema) 21 R.Polillo - Marzo 2013
    • Il nuovo approccio Es.: Ascensore - Chiama l'ascensore - Entra nell'ascensore - Seleziona un piano - Ferma l'ascensore - Chiede aiuto - Esce dall'ascensore Es.: Ascensore - Andare al piano n - Aprire / chiudere porta - Fermarsi - Inviare allarme Ci chiediamo quali sono i “casi d’uso” dell’utente rispetto al sistema... (Progettazione orientata all'utente) 22 R.Polillo - Marzo 2013
    • Il nuovo approccio CALL 3 2 CALL Es.: Ascensore - Chiama l'ascensore - Entra nell'ascensore - Seleziona un piano - Ferma l'ascensore - Chiede aiuto - Esce dall'ascensore 3 2 1 0 Stop Alarm 23 … e progettiamo l’interazione di conseguenza (Interaction Design) R.Polillo - Marzo 2013
    • Esempio: Un altro ascensore Casi d'uso - Chiama l'ascensore per scendere per salire - Entra nell'ascensore - Seleziona un piano - Ferma l'ascensore - Chiede aiuto - Apre porte - Chiude porte - Esce dall'ascensore Fuori Dentro 24 R.Polillo - Marzo 2013
    • Progettazione human centered 25 Sistemi Informativi Aziendali A.A. 2012/2013
    • Definire i requisiti insieme all’utente 26 Sistemi Informativi Aziendali A.A. 2012/2013
    • Step di progettazione     Schizzo Wireframes Immagine statica (static comps) Functional mockups
    • Le 3 interfacce Web 28 Desktop Sistemi Informativi Aziendali Mobile A.A. 2012/2013
    • Problematiche del progetto    Come sono collegati gli elementi tra di loro Come verranno percepiti dall’utente Che cosa deve avere visibilità immediata: meno azioni per raggiungere l’obiettivo
    • Prototipi   Prototype = An easily modified and extensible model (representation, simulation or demonstration) of a planned software system, likely including its interface and input/output functionality 30 Sistemi Informativi Aziendali A.A. 2012/2013
    • Procedere per prototipi 31 Sistemi Informativi Aziendali A.A. 2012/2013
    • Caratteristiche dei prototipi 32 Sistemi Informativi Aziendali A.A. 2012/2013
    • Prototipi: caratteristiche 33 Sistemi Informativi Aziendali A.A. 2012/2013
    • Prototipi: caratteristiche 34 Sistemi Informativi Aziendali A.A. 2012/2013
    • Prototipi: caratteristiche 35 Sistemi Informativi Aziendali A.A. 2012/2013
    • Prototipi: caratteristiche 36 Sistemi Informativi Aziendali A.A. 2012/2013
    • Prototipi: caratteristiche 37 Sistemi Informativi Aziendali A.A. 2012/2013
    • Prototipi: caratteristiche 38 Sistemi Informativi Aziendali A.A. 2012/2013
    • Schizzo: step 0
    • Schizzi / Storyboard 40 Sistemi Informativi Aziendali A.A. 2012/2013
    • Metriche di Usabilità      Facilità di apprendimento Efficienza d’uso Memorizzazione Frequenza e gravità di errori Soddisfazione
    • Problematiche del progetto    Come costruisco la navigazione? Quale ordine di lettura dare? Che elementi visualizzare?
    • Mockup vs Wireframe 43 Sistemi Informativi Aziendali A.A. 2012/2013
    • Prototipi di carta 44 Sistemi Informativi Aziendali A.A. 2012/2013
    • Prototipi ipertestuali (es. Powerpoint) 45 Sistemi Informativi Aziendali A.A. 2012/2013
    • Stencil per prototipi ipertestuali 46 Sistemi Informativi Aziendali A.A. 2012/2013
    • La grammatica dell’interfaccia  Information architecture   Layout     Organizzazione delle informazioni Organizzazione degli spazi Ogni spazio ha una valenza informativa specifica (“cosa” contiene?) Ogni spazio ha una valenza funzionale specifica (“a che cosa” serve?) Interaction   47 Quali tecniche offro all’utente per interagire con i dati? Quali widget utilizzo? Sistemi Informativi Aziendali A.A. 2012/2013
    • Interaction: cosa può fare l’utente?           Leggere, visualizzare (testi, immagini, …) Analizzare (elenchi, tabelle, grafici, …) Inserire (testo, numeri, date, …) Scegliere (da elenchi, liste, …) Ricercare (partendo da criteri) Filtrare (su elenchi esistenti) Confermare (ok, annulla, inserisci, elimina, …) Navigare (slideshow, paginazione, gruppi, tabs, …) Selezionare (uno o più elementi, parti di testo, …) Spostare (drag, swipe, …) 48 Sistemi Informativi Aziendali A.A. 2012/2013
    • Controls / Widgets   Button Text (but also numbers, dates, …)      Radio buttons Check box List box    Single line / multiple lines Display only / editable Visible Drop down Combo box 49 Sistemi Informativi Aziendali A.A. 2012/2013
    • Windows XP widgets 50 Sistemi Informativi Aziendali A.A. 2012/2013
    • JavaFX widgets 51 Sistemi Informativi Aziendali A.A. 2012/2013
    • iPhone widgets 52 Sistemi Informativi Aziendali A.A. 2012/2013
    • Android widgets 53 Sistemi Informativi Aziendali A.A. 2012/2013
    • Mockup design guidelines Sistemi Informativi Aziendali – A.A. 2012/2013
    • Choosing controls 55 Sistemi Informativi Aziendali A.A. 2012/2013
    • 56 Sistemi Informativi Aziendali A.A. 2012/2013
    • 57 Sistemi Informativi Aziendali A.A. 2012/2013
    • 58 Sistemi Informativi Aziendali A.A. 2012/2013
    • 59 Sistemi Informativi Aziendali A.A. 2012/2013
    • Grouping      Border Tabs Accordion Pop-up Menu 60 Sistemi Informativi Aziendali A.A. 2012/2013
    • Layout  Gerarchia degli spazi Riconoscibilità delle funzioni Spazi Include la navigazione “Scannable”  Adattabile al dispositivo?     61 Sistemi Informativi Aziendali A.A. 2012/2013
    • Use cases vs UI Mockups  Use cases (normally) describe round-trips between the system and the user  System-to-user:    User-to-system    Some information to show (for the user to read/view) A set of interactive controls Some specific data (provided by means of interaction with the controls) Main requirement: UI elements should be consistent with the exchanged data Secondary requirements: UI elements should be used correctly, maximizing usability 62 Sistemi Informativi Aziendali A.A. 2012/2013
    • Esempi Sistemi Informativi Aziendali – A.A. 2012/2013
    • Esempio
    • Esempio
    • Esempio
    • Look & Feel
    • Pattern: alcuni esempi       Menu’ di navigazione Login e registrazione Search e pagine di risultati Paging o scrolling Date Picker o Compilazione Call for action
    • Pattern References     http://quince.infragistics.com/ http://interface.fhpotsdam.de/infodesignpatterns/patterns.php http://www.welie.com/patterns/index.php http://patterntap.com/
    • Best Practice: alcuni esempi      Gestione dello spazio: all in one window, scrolling, ridimensionamento Selezione degli oggetti: selezioni multiple da liste, drag&drop, comandi da tastiera Messaggi di errore Pannelli: accordion, modal panel (LightBox) Wizard
    • Riferimenti e fonti    Facile da Usare - Una Moderna Introduzione all’Ingegneria dell’Usabilità, R. Polillo, http://www.slideshare.net/rpolillo/facile-da-usare-unamoderna-introduzione-allingegneria-dellusabilit The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and Techniques , W.O. Galitz, Wiley, 2007, ISBN: 978-0-470-05342-3 http://www.slideshare.net/guestc86d7a4/progettazione-diinterfaccie-e-tassonomia 71 Sistemi Informativi Aziendali A.A. 2012/2013
    • Licenza d’uso   Queste diapositive sono distribuite con licenza Creative Commons “Attribuzione - Non commerciale - Condividi allo stesso modo 2.5 Italia (CC BY-NC-SA 2.5)” Sei libero:    Alle seguenti condizioni:     di riprodurre, distribuire, comunicare al pubblico, esporre in pubblico, rappresentare, eseguire e recitare quest'opera di modificare quest'opera Attribuzione — Devi attribuire la paternità dell'opera agli autori originali e in modo tale da non suggerire che essi avallino te o il modo in cui tu usi l'opera. Non commerciale — Non puoi usare quest'opera per fini commerciali. Condividi allo stesso modo — Se alteri o trasformi quest'opera, o se la usi per crearne un'altra, puoi distribuire l'opera risultante solo con una licenza identica o equivalente a questa. http://creativecommons.org/licenses/by-nc-sa/2.5/it/ 72 Sistemi Informativi Aziendali A.A. 2012/2013