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 ne...
Argomenti
Introduzione all’usabilità
Progettazione human centered
Mockup di interfacce





3

Sistemi Informativi Azie...
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 Inform...
Don’t make me think



The “motto” of usability
Steve Krug, http://www.sensible.com/

15

Sistemi Informativi Aziendali
...
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. 201...
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 chi...
Il nuovo approccio
Es.: Ascensore
- Chiama l'ascensore
- Entra nell'ascensore
- Seleziona un piano
- Ferma l'ascensore
- C...
Il nuovo approccio
CALL

3

2

CALL

Es.: Ascensore
- Chiama l'ascensore
- Entra nell'ascensore
- Seleziona un piano
- Fer...
Esempio: Un altro ascensore

Casi d'uso
- Chiama l'ascensore
per scendere
per salire
- Entra nell'ascensore
- Seleziona un...
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 cos...
Prototipi



Prototype =
An easily modified and extensible model (representation,
simulation or demonstration) of a plan...
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
S...
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
Organi...
Interaction: cosa può fare l’utente?











Leggere, visualizzare (testi, immagini, …)
Analizzare (elenchi, ...
Controls / Widgets



Button
Text (but also numbers, dates, …)








Radio buttons
Check box
List box






Si...
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...
Use cases vs UI Mockups


Use cases (normally) describe round-trips between the
system and the user


System-to-user:

...
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 scrol...
Pattern References





http://quince.infragistics.com/
http://interface.fhpotsdam.de/infodesignpatterns/patterns.php
...
Best Practice: alcuni esempi







Gestione dello spazio: all in one window, scrolling,
ridimensionamento
Selezione ...
Riferimenti e fonti






Facile da Usare - Una Moderna Introduzione all’Ingegneria
dell’Usabilità, R. Polillo,
http://...
Licenza d’uso




Queste diapositive sono distribuite con licenza Creative Commons
“Attribuzione - Non commerciale - Con...
Upcoming SlideShare
Loading in...5
×

Designing the User Experience

438

Published on

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

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
438
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Designing the User Experience

  1. 1. Designing the User Experience Sistemi Informativi Aziendali – A.A. 2013/2014
  2. 2. 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
  3. 3. Argomenti Introduzione all’usabilità Progettazione human centered Mockup di interfacce    3 Sistemi Informativi Aziendali A.A. 2012/2013
  4. 4. Il ruolo dell’interfaccia 4 Sistemi Informativi Aziendali A.A. 2012/2013
  5. 5. Come? 5 Sistemi Informativi Aziendali A.A. 2012/2013
  6. 6. Sensi e strumenti INPUT 6 Sistemi Informativi Aziendali A.A. 2012/2013
  7. 7. Livelli di complessità 7 Sistemi Informativi Aziendali A.A. 2012/2013
  8. 8. Livelli di complessità 8 Sistemi Informativi Aziendali A.A. 2012/2013
  9. 9. Progettazione dell’usabilità 9 Sistemi Informativi Aziendali A.A. 2012/2013
  10. 10. Tecnologie di interazione Wearable 10 Sistemi Informativi Aziendali A.A. 2012/2013
  11. 11. User goals 11 Sistemi Informativi Aziendali A.A. 2012/2013
  12. 12. Il modello di Norman 12 Sistemi Informativi Aziendali A.A. 2012/2013
  13. 13. Donald Norman http://it.wikipedia.org/wiki/Donald_Norman 13 Sistemi Informativi Aziendali A.A. 2012/2013
  14. 14. Nielsen Norman Group    14 Jakob Nielsen Co-founded with Don Norman http://www.nngroup.com/a rticles/ Sistemi Informativi Aziendali A.A. 2012/2013
  15. 15. Don’t make me think   The “motto” of usability Steve Krug, http://www.sensible.com/ 15 Sistemi Informativi Aziendali A.A. 2012/2013
  16. 16. Affordance: fornelli 16 Sistemi Informativi Aziendali A.A. 2012/2013
  17. 17. Feedback 17 Sistemi Informativi Aziendali A.A. 2012/2013
  18. 18. Discipline coinvolte http://userflow.tumblr.com/post/3877937295/uxd-ia-ui-ixd 18 Sistemi Informativi Aziendali A.A. 2012/2013
  19. 19. 19 Sistemi Informativi Aziendali A.A. 2012/2013
  20. 20. L’approccio tradizionale 20 R.Polillo - Marzo 2013
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. Progettazione human centered 25 Sistemi Informativi Aziendali A.A. 2012/2013
  26. 26. Definire i requisiti insieme all’utente 26 Sistemi Informativi Aziendali A.A. 2012/2013
  27. 27. Step di progettazione     Schizzo Wireframes Immagine statica (static comps) Functional mockups
  28. 28. Le 3 interfacce Web 28 Desktop Sistemi Informativi Aziendali Mobile A.A. 2012/2013
  29. 29. 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
  30. 30. 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
  31. 31. Procedere per prototipi 31 Sistemi Informativi Aziendali A.A. 2012/2013
  32. 32. Caratteristiche dei prototipi 32 Sistemi Informativi Aziendali A.A. 2012/2013
  33. 33. Prototipi: caratteristiche 33 Sistemi Informativi Aziendali A.A. 2012/2013
  34. 34. Prototipi: caratteristiche 34 Sistemi Informativi Aziendali A.A. 2012/2013
  35. 35. Prototipi: caratteristiche 35 Sistemi Informativi Aziendali A.A. 2012/2013
  36. 36. Prototipi: caratteristiche 36 Sistemi Informativi Aziendali A.A. 2012/2013
  37. 37. Prototipi: caratteristiche 37 Sistemi Informativi Aziendali A.A. 2012/2013
  38. 38. Prototipi: caratteristiche 38 Sistemi Informativi Aziendali A.A. 2012/2013
  39. 39. Schizzo: step 0
  40. 40. Schizzi / Storyboard 40 Sistemi Informativi Aziendali A.A. 2012/2013
  41. 41. Metriche di Usabilità      Facilità di apprendimento Efficienza d’uso Memorizzazione Frequenza e gravità di errori Soddisfazione
  42. 42. Problematiche del progetto    Come costruisco la navigazione? Quale ordine di lettura dare? Che elementi visualizzare?
  43. 43. Mockup vs Wireframe 43 Sistemi Informativi Aziendali A.A. 2012/2013
  44. 44. Prototipi di carta 44 Sistemi Informativi Aziendali A.A. 2012/2013
  45. 45. Prototipi ipertestuali (es. Powerpoint) 45 Sistemi Informativi Aziendali A.A. 2012/2013
  46. 46. Stencil per prototipi ipertestuali 46 Sistemi Informativi Aziendali A.A. 2012/2013
  47. 47. 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
  48. 48. 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
  49. 49. 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
  50. 50. Windows XP widgets 50 Sistemi Informativi Aziendali A.A. 2012/2013
  51. 51. JavaFX widgets 51 Sistemi Informativi Aziendali A.A. 2012/2013
  52. 52. iPhone widgets 52 Sistemi Informativi Aziendali A.A. 2012/2013
  53. 53. Android widgets 53 Sistemi Informativi Aziendali A.A. 2012/2013
  54. 54. Mockup design guidelines Sistemi Informativi Aziendali – A.A. 2012/2013
  55. 55. Choosing controls 55 Sistemi Informativi Aziendali A.A. 2012/2013
  56. 56. 56 Sistemi Informativi Aziendali A.A. 2012/2013
  57. 57. 57 Sistemi Informativi Aziendali A.A. 2012/2013
  58. 58. 58 Sistemi Informativi Aziendali A.A. 2012/2013
  59. 59. 59 Sistemi Informativi Aziendali A.A. 2012/2013
  60. 60. Grouping      Border Tabs Accordion Pop-up Menu 60 Sistemi Informativi Aziendali A.A. 2012/2013
  61. 61. Layout  Gerarchia degli spazi Riconoscibilità delle funzioni Spazi Include la navigazione “Scannable”  Adattabile al dispositivo?     61 Sistemi Informativi Aziendali A.A. 2012/2013
  62. 62. 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
  63. 63. Esempi Sistemi Informativi Aziendali – A.A. 2012/2013
  64. 64. Esempio
  65. 65. Esempio
  66. 66. Esempio
  67. 67. Look & Feel
  68. 68. Pattern: alcuni esempi       Menu’ di navigazione Login e registrazione Search e pagine di risultati Paging o scrolling Date Picker o Compilazione Call for action
  69. 69. Pattern References     http://quince.infragistics.com/ http://interface.fhpotsdam.de/infodesignpatterns/patterns.php http://www.welie.com/patterns/index.php http://patterntap.com/
  70. 70. 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
  71. 71. 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
  72. 72. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×