1.
HCI to UX to HCI
cLà I GenrA (IvrIà dgI Ud I Esi) rEì 0 CebE 01

2.
Hello
Passato
index Apple
Presente
Futuro

3.
Hello
Una mia breve presentazione

4.
Chi sono
• Area Web = Cristiano Rastelli & Liliana Bragadin
• miei clienti diretti + freelance per agenzie
• attivita' = lavoro + passione
• ogni lavoro e' un progetto a se'
• web-oriented da oltre 15 anni

5.
Competenze
web development
interface & web design
interaction/ux design

6.
Strumenti
DESIGN DEVELOPMENT TEST & DEBUG

7.
Alcuni esempi del mio lavoro
Siti web

8.
Il Foglio Quotidiano Editoria

9.
Il Foglio Quotidiano Editoria

10.
Multiutility Energia

11.
Multiutility Energia

12.
Multiutility Energia

13.
CT Crane Industria

14.
CA Scale PMI

15.
TM Sportmanagement Sport

16.
TM Sportmanagement Sport

17.
Elena Ziletti Servizi

18.
Scuola Chizzolini Educazione

19.
Scuola Chizzolini Educazione

20.
WEBdeBS No-profit

21.
Mosaico (Banca Intesa) Intranet

22.
NoSQL Day / Node.js Conf / For Real Conf Eventi

23.
Maya Spettacolo

24.
Camillo Blog Personali

25.
Alcuni esempi del mio lavoro
Applicazioni

26.
Codice Plastico User-Interface
N .D.A.

27.
Codice Plastico User-Interface
N .D.A.

28.
Codice Plastico User-Interface
N.D.A.

29.
Codice Plastico User-Interface
N .D.A.

30.
Codice Plastico User-Interface
N .D.A.

31.
Eliwell User-Interface
N.D.A.

32.
Evoluzione Telematica User-Interface
N .D.A.

33.
I progetti di cui ci occupiamo
{
piccoli
progetti medi
grandi

34.
Quello che voglio raccontarvi oggi...
job-oriented

35.
Quello che voglio raccontarvi oggi...
job-oriented

36.
Passato
Human-Computer-Interaction

37.
Il mio primo impatto con l'HCI

38.
Il mio primo impatto con l'HCI
icon-based interfaces

39.
Il mio primo impatto con l'HCI
touch-screens

40.
Il mio primo impatto con l'HCI

41.
Il mio primo impatto con l'HCI
Mac System 7

42.
Il mio primo impatto con l'HCI
1992
Mac System 7

43.
Il mio primo impatto con l'HCI
praticamente stiamo parlando di
decine di anni
epoche geologiche nell'informatica

44.
La mia sensazione e' stata questa...
1700
1900

45.
Il mio primo impatto con l'HCI
tutto da buttare?

46.
Approcci empirici, non regole matematiche!

47.
Metodi di lavoro

48.
Metodi di lavoro
ATTENZIONE: anche questi possono diventare obsoleti !

49.
"The man on the mirror"
vs.

50.
La relazione uomo-macchina

51.
Approccio meccanicistico

52.
La relazione uomo-macchina
uomo macchina

53.
L'uomo e' un essere complesso

54.
L'uomo non e' [solo] un essere razionale

55.
I miei primi passi come UX designer
Usability

56.
C'era una volta l'usabilita'

57.
Un grosso malinteso
accessibile
vs.
usabile

58.
Linee guida per l'accessibilita'
Le presenti linee guida spiegano
come rendere i contenuti web
accessibili a persone disabili.

59.
Accessibilita'
• interlocutori: persone disabili = disabilita'
• scopo: accesso ai contenuti
• azioni messe in atto:
• semantica del codice
• contenuti alternativi per dare maggiore significato
• comandi/interazioni che facilitino la navigazione
• compatibilita' con qualsiasi hardware/software

60.
Le disabilita' possono essere codificate

61.
Linee guida per l'usabilita'
?

62.
Usabilita' / Interlocutori
users / utenti

63.
Usabilita' / Scopo
websites / applications

64.
Usabilita' / Azioni
• navigabilita'
• interattivita'
• completezza dei contenuti
• organizzazione delle informazioni
• efficacia comunicativa
• attrattiva grafica
• tempi di attesa

65.
Usabilita' / Azioni
• navigabilita'
• interattivita'
?
• completezza dei contenuti
• organizzazione delle informazioni
• efficacia comunicativa
• attrattiva grafica
• tempi di attesa

66.
La guerra dei browser

67.
Flash, le intro animate e le RIA

68.
Please, wait loading...
the loadbar of death

69.
Un problema inaspettato
interattivo
vs.
usabile

70.
L'avvento dello user-experience design
UX design

71.
Le diverse facce della UX

72.
Gli elementi dello UX design

73.
Le colonne dello UX design

74.
La ruota del valore della UX

75.
L'importanza della UX

76.
L'iceberg dello UX design

77.
Il percorso dello UX design

78.
Il terreno dello UX design

79.
Perche' tutti questi schemi?
“Se nessuno me lo chiede, lo so.
Se voglio spiegarlo a chi me lo chiede,
non lo so più.”
S. Agostino
La UX come semi-cosa. Karim Ben Hamida – UX conference 2011

80.
Una definizione che estende e include altre discipline
“I invented the term UX because
I thought human interface and usability were
too narrow. I wanted to cover
all aspects of the person’s experience with
the system including industrial design,
graphics, the interface, the physical
interaction, and the manual.”
Donald Norman
La UX come semi-cosa. Karim Ben Hamida – UX conference 2011

81.
Una definizione classica
“User experience is about how a
person feels about using a product,
system or service.
Is subjective in nature, because it’s
about an individual’s feelings and
thoughts about the system.
Is dynamic, because it changes over
time as the circumstances change.”
Wikipedia

82.
Una definizione minimale
“It’s all about People, their Activities,
and the Context of those activities.”
Stephen P. Anderson

83.
La mia definizione, con una domanda
“Dovendo dare al maggior numero di utenti la miglior
esperienza possibile nell’impiego di una applicazione,
quali strumenti decido di utilizzare?”

84.
La UX per come la conosco io
Architettura delle informazioni Trovabilità Usabilità
Etnografia Psicologia Empatia Marketing Business
Content strategy Copywriting Storytelling Tono
Visual design Tipografia Colore Estetica Griglie
Interaction design Motivational design Gamification
User-centered design Personas Scenari User-testing
Prototipazione rapida Metodi agili Iterazioni Metriche

85.
La mela che ha cambiato il mondo

86.
Le rivoluzioni: iPhone e iPad

87.
I prodromi della rivoluzione

88.
I prodromi della rivoluzione

89.
Diverse sfaccettature della stessa rivoluzione

90.
Il secondo segno di una rivoluzione?

91.
La musica in formato digitale?
+

92.
Applicazione per gestire una libreria di canzoni?
+

93.
Uno negozio dove acquistare brani?
+

94.
Una serie di accessori "cool"?
+

95.
Una scelta di possibili colori?

96.
E' tutto questo assieme!
device "perfetti"
applicazione iTunes
negozio iTunes
+ sincronizzazione
catalogo immenso di contenuti
semplicita' nell'acquisto
one click pay
search & download
disponibilita' di accessori

97.
E' tutta una questione di eco-sistema

98.
The iTunes world

99.
L'eco-sistema dell'esperienza

100.
L'eco-sistema dell'esperienza

101.
Giardinetto della felicita'

102.
Cosa pensate che siano le "app"?

103.
Cosa hanno in comune?

104.
Amore per la bellezza

105.
Amore per la bellezza

106.
Un "dettaglio" apparentemente inutile

107.
Un "dettaglio" apparentemente inutile

108.
Un semplice led lampeggiante?
Breathing status LED indicator
United States Patent 6658577
“A new and improved status LED indicator
provides a pleasing visual appeal.
An embodiment of the present invention
includes a sleep-mode indicator for laptop computers.
The LED indicator is energized by pulse-width modulated
electrical pulses. The effect of these pulses on the indicator
varies in intensity and mimics a rhythm typical of breathing.
It is another aspect of the invention to provide an electrical
apparatus that generates a sleep-mode indicator blinking
pattern based on a sinusoidal function using PWM (pulse width
modulation) designs.”

109.
La porta sul mondo

110.
La porta sul mondo

111.
L'impatto di Apple sul nostro lavoro

112.
Il costo della qualita'
qualità
perfezione
sforzo = tempo = denaro

113.
Il costo della qualita'
qualità
perfezione
1
incrementi diversi
di qualità...
10
...a parità di tempo dedicato
10 10
sforzo = tempo = denaro

114.
15 minuti di pausa