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