Designing the User experience. Sistemi Informativi Aziendali A.A. 2016/2017

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Designing the User experience. Sistemi Informativi Aziendali A.A. 2016/2017"

Veronica Micheli
4 anni fa
Visualizzazioni

1 Designing the User experience A.A. 2016/2017

2 Obiettivi 1. Sviluppare un design incentrato sull utente 2. Regole con cui viene sviluppato il design 3. Integrarsi nel ciclo si sviluppo del Sistema Informativo 2

3 Argomenti Introduzione all usabilità Progettazione human centered Mockup di interfacce 3

4 Il ruolo dell interfaccia 4

5 Come? 5

6 Sensi e strumenti INPUT 6

7 Livelli di complessità 7

8 Livelli di complessità 8

9 Complexity 9

10 Progettazione dell usabilità 10

11 Tecnologie di interazione Wearable 11

12 User goals 12

13 Il modello di Norman 13

14 Donald Norman 14

15 Nielsen Norman Group Jakob Nielsen Co-founded with Don Norman rticles/ 15

16 Don t make me think The motto of usability Steve Krug, 16

17 Affordance: fornelli 17

18 Affordance 18

19 19

20 Feedback 20

21 UX Honeycomb 21

22 Discipline coinvolte 22

23 23

24 L approccio tradizionale 24

25 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) 25

26 Il nuovo approccio Es.: Ascensore - Andare al piano n - Aprire / chiudere porta - Fermarsi - Inviare allarme Es.: Ascensore - Chiama l'ascensore - Entra nell'ascensore - Seleziona un piano - Ferma l'ascensore - Chiede aiuto - Esce dall'ascensore Ci chiediamo quali sono i casi d uso dell utente rispetto al sistema... (Progettazione orientata all'utente) 26

Il nuovo approccio 3 CALL CALL 2 3 2 1 0 Es.

27 Il nuovo approccio 3 CALL CALL Es.: Ascensore - Chiama l'ascensore - Entra nell'ascensore - Seleziona un piano - Ferma l'ascensore - Chiede aiuto - Esce dall'ascensore Stop Alarm e progettiamo l interazione di conseguenza (Interaction Design) 27

28 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 28

29 Misteri. 29

30 Progettazione human centered 30

31 Definire i requisiti insieme all utente 31

32 Step di progettazione Schizzo Wireframes Immagine statica (static comps) Functional mockups 32

33 Le 3 interfacce Web Desktop Mobile 33

34 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 34

35 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 35

36 Procedere per prototipi 36

37 Caratteristiche dei prototipi 37

38 Prototipi: caratteristiche 38

39 Prototipi: caratteristiche 39

40 Prototipi: caratteristiche 40

41 Prototipi: caratteristiche 41

42 Prototipi: caratteristiche 42

43 Prototipi: caratteristiche 43

44 Schizzo: step 0 44

45 Schizzi / Storyboard 45

46 Metriche di Usabilità Facilità di apprendimento Efficienza d uso Memorizzazione Frequenza e gravità di errori Soddisfazione 46

47 Problematiche del progetto Come costruisco la navigazione? Quale ordine di lettura dare? Che elementi visualizzare? 47

48 Mockup vs Wireframe 48

49 Prototipi di carta 49

50 Prototipi ipertestuali (es. Powerpoint) 50

51 Stencil per prototipi ipertestuali 51

52 La grammatica dell interfaccia Information architecture Organizzazione delle informazioni Layout Organizzazione degli spazi Ogni spazio ha una valenza informativa specifica ( cosa contiene?) Ogni spazio ha una valenza funzionale specifica ( a che cosa serve?) Interaction Quali tecniche offro all utente per interagire con i dati? Quali widget utilizzo? 52

53 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, ) 53

54 Controls / Widgets Button Text (but also numbers, dates, ) Single line / multiple lines Display only / editable Radio buttons Check box List box Visible Drop down Combo box 54

55 Windows XP widgets 55

56 JavaFX widgets 56

57 iphone widgets 57

58 Android widgets 58

59 Mockup design guidelines A.A. 2015/2016

60 Choosing controls 60

61 61

62 62

63 63

64 64

65 Grouping Border Tabs Accordion Pop-up Menu 65

66 Layout Gerarchia degli spazi Riconoscibilità delle funzioni Spazi Include la navigazione Scannable Adattabile al dispositivo? 66

67 Use cases vs UI Mockups Use cases (normally) describe round-trips between the system and the user System-to-user: Some information to show (for the user to read/view) A set of interactive controls User-to-system 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 67

68 Esempi A.A. 2012/2013

69 Esempio 69

70 Esempio 70

71 Esempio 71

72 Look & Feel 72

73 Pattern: alcuni esempi Menu di navigazione Login e registrazione Search e pagine di risultati Paging o scrolling Date Picker o Compilazione Call for action 73

74 Pattern References

75 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 75

76 Riferimenti e fonti Facile da Usare - Una Moderna Introduzione all Ingegneria dell Usabilità, R. Polillo, The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and Techniques, W.O. Galitz, Wiley, 2007, ISBN:

77 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: di riprodurre, distribuire, comunicare al pubblico, esporre in pubblico, rappresentare, eseguire e recitare quest'opera di modificare quest'opera Alle seguenti condizioni: 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. 77

Documenti analoghi

Designing the User Experience. Sistemi Informativi Aziendali A.A. 2014/2015

Designing the User Experience. Sistemi Informativi Aziendali A.A. 2014/2015 Designing the User Experience A.A. 2014/2015 Obiettivi 1. Sviluppare un design incentrato sull utente 2. Regole con cui viene sviluppato il design 3. Integrarsi nel ciclo si sviluppo del Sistema Informativo