designing the user experience
Post on 17-Oct-2014
503 views
DESCRIPTION
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/sistinfoTRANSCRIPT
![Page 1: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/1.jpg)
Designing the User Experience
Sistemi Informativi Aziendali – A.A. 2013/2014
![Page 2: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/2.jpg)
Obiettivi
A.A. 2012/2013 Sistemi Informativi Aziendali 2
1. Sviluppare un design incentrato sull’utente
2. Regole con cui viene sviluppato il design
3. Integrarsi nel ciclo si sviluppo del Sistema Informativo
![Page 3: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/3.jpg)
Argomenti
A.A. 2012/2013 Sistemi Informativi Aziendali 3
Introduzione all’usabilità
Progettazione human centered
Mockup di interfacce
![Page 4: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/4.jpg)
Il ruolo dell’interfaccia
A.A. 2012/2013 Sistemi Informativi Aziendali 4
![Page 5: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/5.jpg)
Come?
A.A. 2012/2013 Sistemi Informativi Aziendali 5
![Page 6: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/6.jpg)
Sensi e strumenti
A.A. 2012/2013 Sistemi Informativi Aziendali 6
INP
UT
![Page 7: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/7.jpg)
Livelli di complessità
A.A. 2012/2013 Sistemi Informativi Aziendali 7
![Page 8: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/8.jpg)
Livelli di complessità
A.A. 2012/2013 Sistemi Informativi Aziendali 8
![Page 9: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/9.jpg)
Progettazione dell’usabilità
A.A. 2012/2013 Sistemi Informativi Aziendali 9
![Page 10: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/10.jpg)
Tecnologie di interazione
A.A. 2012/2013 Sistemi Informativi Aziendali 10
Wearable
![Page 11: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/11.jpg)
User goals
A.A. 2012/2013 Sistemi Informativi Aziendali 11
![Page 12: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/12.jpg)
Il modello di Norman
A.A. 2012/2013 Sistemi Informativi Aziendali 12
![Page 13: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/13.jpg)
Donald Norman
A.A. 2012/2013 Sistemi Informativi Aziendali 13
http://it.wikipedia.org/wiki/Donald_Norman
![Page 14: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/14.jpg)
Nielsen Norman Group
A.A. 2012/2013 Sistemi Informativi Aziendali 14
Jakob Nielsen
Co-founded with Don
Norman
http://www.nngroup.com/a
rticles/
![Page 15: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/15.jpg)
Don’t make me think
A.A. 2012/2013 Sistemi Informativi Aziendali 15
The “motto” of usability
Steve Krug, http://www.sensible.com/
![Page 16: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/16.jpg)
Affordance: fornelli
A.A. 2012/2013 Sistemi Informativi Aziendali 16
![Page 17: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/17.jpg)
Feedback
A.A. 2012/2013 Sistemi Informativi Aziendali 17
![Page 18: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/18.jpg)
Discipline coinvolte
A.A. 2012/2013 Sistemi Informativi Aziendali 18
http://userflow.tumblr.com/post/3877937295/uxd-ia-ui-ixd
![Page 19: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/19.jpg)
A.A. 2012/2013 Sistemi Informativi Aziendali 19
![Page 20: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/20.jpg)
L’approccio tradizionale
20 R.Polillo - Marzo 2013
![Page 21: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/21.jpg)
L’approccio tradizionale
Ci chiediamo quali funzioni
il sistema deve fornire al suo utente,
le progettiamo e le realizziamo
(Progettazione orientata al sistema)
21
Es.: Ascensore
- Andare al piano n
- Aprire / chiudere porta
- Fermarsi
- Inviare allarme
R.Polillo - Marzo 2013
![Page 22: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/22.jpg)
Il nuovo approccio
Ci chiediamo quali sono i “casi d’uso”
dell’utente rispetto al sistema...
(Progettazione orientata all'utente)
22
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
R.Polillo - Marzo 2013
![Page 23: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/23.jpg)
… e progettiamo l’interazione di
conseguenza
(Interaction Design)
Il nuovo approccio
23 R.Polillo - Marzo 2013
Alarm
Stop
0
1
2
3
2 Es.: Ascensore - Chiama l'ascensore - Entra nell'ascensore - Seleziona un piano - Ferma l'ascensore - Chiede aiuto - Esce dall'ascensore
CALL
CALL
3
![Page 24: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/24.jpg)
Esempio: Un altro ascensore
R.Polillo - Marzo 2013 24
Dentro
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
![Page 25: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/25.jpg)
Progettazione human centered
A.A. 2012/2013 Sistemi Informativi Aziendali 25
![Page 26: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/26.jpg)
Definire i
requisiti
insieme
all’utente
A.A. 2012/2013 Sistemi Informativi Aziendali 26
![Page 27: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/27.jpg)
Step di progettazione
Schizzo
Wireframes
Immagine statica (static comps)
Functional mockups
![Page 28: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/28.jpg)
Le 3 interfacce
A.A. 2012/2013 Sistemi Informativi Aziendali 28
Web Desktop Mobile
![Page 29: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/29.jpg)
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
![Page 30: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/30.jpg)
Prototipi
A.A. 2012/2013 Sistemi Informativi Aziendali 30
Prototype =
An easily modified and extensible model (representation,
simulation or demonstration) of a planned software
system, likely including its interface and input/output
functionality
![Page 31: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/31.jpg)
Procedere per prototipi
A.A. 2012/2013 Sistemi Informativi Aziendali 31
![Page 32: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/32.jpg)
Caratteristiche dei prototipi
A.A. 2012/2013 Sistemi Informativi Aziendali 32
![Page 33: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/33.jpg)
Prototipi: caratteristiche
A.A. 2012/2013 Sistemi Informativi Aziendali 33
![Page 34: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/34.jpg)
Prototipi: caratteristiche
A.A. 2012/2013 Sistemi Informativi Aziendali 34
![Page 35: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/35.jpg)
Prototipi: caratteristiche
A.A. 2012/2013 Sistemi Informativi Aziendali 35
![Page 36: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/36.jpg)
Prototipi: caratteristiche
A.A. 2012/2013 Sistemi Informativi Aziendali 36
![Page 37: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/37.jpg)
Prototipi: caratteristiche
A.A. 2012/2013 Sistemi Informativi Aziendali 37
![Page 38: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/38.jpg)
Prototipi: caratteristiche
A.A. 2012/2013 Sistemi Informativi Aziendali 38
![Page 39: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/39.jpg)
Schizzo: step 0
![Page 40: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/40.jpg)
Schizzi / Storyboard
A.A. 2012/2013 Sistemi Informativi Aziendali 40
![Page 41: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/41.jpg)
Metriche di Usabilità
Facilità di apprendimento
Efficienza d’uso
Memorizzazione
Frequenza e gravità di errori
Soddisfazione
![Page 42: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/42.jpg)
Problematiche del progetto
Come costruisco la navigazione?
Quale ordine di lettura dare?
Che elementi visualizzare?
![Page 43: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/43.jpg)
Mockup vs Wireframe
A.A. 2012/2013 Sistemi Informativi Aziendali 43
![Page 44: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/44.jpg)
Prototipi di carta
A.A. 2012/2013 Sistemi Informativi Aziendali 44
![Page 45: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/45.jpg)
Prototipi ipertestuali (es. Powerpoint)
A.A. 2012/2013 Sistemi Informativi Aziendali 45
![Page 46: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/46.jpg)
Stencil per prototipi ipertestuali
A.A. 2012/2013 Sistemi Informativi Aziendali 46
![Page 47: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/47.jpg)
La grammatica dell’interfaccia
A.A. 2012/2013 Sistemi Informativi Aziendali 47
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?
![Page 48: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/48.jpg)
Interaction: cosa può fare l’utente?
A.A. 2012/2013 Sistemi Informativi Aziendali 48
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, …)
![Page 49: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/49.jpg)
Controls / Widgets
A.A. 2012/2013 Sistemi Informativi Aziendali 49
Button
Text (but also numbers, dates, …)
Single line / multiple lines
Display only / editable
Radio buttons
Check box
List box
Visible
Drop down
Combo box
![Page 50: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/50.jpg)
Windows XP widgets
A.A. 2012/2013 Sistemi Informativi Aziendali 50
![Page 51: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/51.jpg)
JavaFX widgets
A.A. 2012/2013 Sistemi Informativi Aziendali 51
![Page 52: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/52.jpg)
iPhone widgets
A.A. 2012/2013 Sistemi Informativi Aziendali 52
![Page 53: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/53.jpg)
Android widgets
A.A. 2012/2013 Sistemi Informativi Aziendali 53
![Page 54: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/54.jpg)
Mockup design guidelines
Sistemi Informativi Aziendali – A.A. 2012/2013
![Page 55: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/55.jpg)
Choosing controls
A.A. 2012/2013 Sistemi Informativi Aziendali 55
![Page 56: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/56.jpg)
A.A. 2012/2013 Sistemi Informativi Aziendali 56
![Page 57: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/57.jpg)
A.A. 2012/2013 Sistemi Informativi Aziendali 57
![Page 58: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/58.jpg)
A.A. 2012/2013 Sistemi Informativi Aziendali 58
![Page 59: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/59.jpg)
A.A. 2012/2013 Sistemi Informativi Aziendali 59
![Page 60: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/60.jpg)
Grouping
A.A. 2012/2013 Sistemi Informativi Aziendali 60
Border
Tabs
Accordion
Pop-up
Menu
![Page 61: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/61.jpg)
Layout
A.A. 2012/2013 Sistemi Informativi Aziendali 61
Gerarchia degli spazi
Riconoscibilità delle funzioni
Spazi
Include la navigazione
“Scannable”
Adattabile al dispositivo?
![Page 62: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/62.jpg)
Use cases vs UI Mockups
A.A. 2012/2013 Sistemi Informativi Aziendali 62
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
![Page 63: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/63.jpg)
Esempi
Sistemi Informativi Aziendali – A.A. 2012/2013
![Page 64: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/64.jpg)
Esempio
![Page 65: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/65.jpg)
Esempio
![Page 66: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/66.jpg)
Esempio
![Page 67: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/67.jpg)
Look & Feel
![Page 68: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/68.jpg)
Pattern: alcuni esempi
Menu’ di navigazione
Login e registrazione
Search e pagine di risultati
Paging o scrolling
Date Picker o Compilazione
Call for action
![Page 69: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/69.jpg)
Pattern References
http://quince.infragistics.com/
http://interface.fh-
potsdam.de/infodesignpatterns/patterns.php
http://www.welie.com/patterns/index.php
http://patterntap.com/
![Page 70: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/70.jpg)
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
![Page 71: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/71.jpg)
Riferimenti e fonti
A.A. 2012/2013 Sistemi Informativi Aziendali 71
Facile da Usare - Una Moderna Introduzione all’Ingegneria
dell’Usabilità, R. Polillo,
http://www.slideshare.net/rpolillo/facile-da-usare-una-
moderna-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-di-
interfaccie-e-tassonomia
![Page 72: Designing the User Experience](https://reader034.vdocuments.net/reader034/viewer/2022051512/54416fefafaf9f56208b46d3/html5/thumbnails/72.jpg)
Licenza d’uso
A.A. 2012/2013 Sistemi Informativi Aziendali 72
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.
http://creativecommons.org/licenses/by-nc-sa/2.5/it/