HCI to UX to HCI - Parte A

HCI to UX to HCI

rEì 0 CebE 01cLà I GenrA (IvrIà dgI Ud I Esi)

indexHello

Passato

Apple

Presente

Futuro

HelloUna mia breve presentazione

• 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

Chi sono

Competenze

interaction/ux design

interface & web design

web development

Strumenti

DEVELOPMENT TEST & DEBUGDESIGN

Alcuni esempi del mio lavoro

Siti web

Il Foglio Quotidiano Editoria

Multiutility Energia

CT Crane Industria

CA Scale PMI

TM Sportmanagement Sport

Elena Ziletti Servizi

Scuola Chizzolini Educazione

WEBdeBS No-profit

Mosaico (Banca Intesa) Intranet

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

Maya Spettacolo

Camillo Blog Personali

Alcuni esempi del mio lavoro

Applicazioni

Codice Plastico User-Interface

N.D.A.

Eliwell User-Interface

N.D.A.

Evoluzione Telematica User-Interface

N.D.A.

I progetti di cui ci occupiamo

piccoli

medi

grandiprogetti {

Quello che voglio raccontarvi oggi...

job-oriented

PassatoHuman-Computer-Interaction

Il mio primo impatto con l'HCI


icon-based interfaces


touch-screens


Mac System 7


Mac System 7

1992


decine di anniepoche geologiche nell'informatica

praticamente stiamo parlando di

La mia sensazione e' stata questa...

1700

1900


tutto da buttare?

Approcci empirici, non regole matematiche!

Metodi di lavoro

Metodi di lavoro

ATTENZIONE: anche questi possono diventare obsoleti !

"The man on the mirror"

vs.

La relazione uomo-macchina

Approccio meccanicistico

La relazione uomo-macchina

uomo macchina

L'uomo e' un essere complesso

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

I miei primi passi come UX designer

Usability

C'era una volta l'usabilita'

Un grosso malinteso

accessibilevs.

usabile

Linee guida per l'accessibilita'

Le presenti linee guida spiegano come rendere i contenuti web accessibili a persone disabili.

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

Le disabilita' possono essere codificate

Linee guida per l'usabilita'

?

Usabilita' / Interlocutori

users / utenti

Usabilita' / Scopo

websites / applications

Usabilita' / Azioni

• navigabilita'

• interattivita'

• completezza dei contenuti

• organizzazione delle informazioni

• efficacia comunicativa

• attrattiva grafica

• tempi di attesa

Usabilita' / Azioni

• navigabilita'

• interattivita'

• completezza dei contenuti

• organizzazione delle informazioni

• efficacia comunicativa

• attrattiva grafica

• tempi di attesa

?

La guerra dei browser

Flash, le intro animate e le RIA

Please, wait loading...

the loadbar of death

Un problema inaspettato

interattivovs.

usabile

L'avvento dello user-experience design

UX design

Le diverse facce della UX

Gli elementi dello UX design

Le colonne dello UX design

La ruota del valore della UX

L'importanza della UX

L'iceberg dello UX design

Il percorso dello UX design

Il terreno dello UX design

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

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

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

Una definizione minimale

“It’s all about People, their Activities, and the Context of those activities.”

Stephen P. Anderson

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?”

La UX per come la conosco io

Architettura delle informazioni

Etnografia Psicologia

Content strategy Copywriting

Interaction design Motivational design

Marketing

User-testing

Trovabilità Usabilità

Gamification

Personas Scenari

Storytelling Tono

Empatia

User-centered design

Prototipazione rapida Metodi agili Iterazioni

Visual design Tipografia Colore Estetica

Metriche

Griglie

Business

La mela che ha cambiato il mondo

Le rivoluzioni: iPhone e iPad

I prodromi della rivoluzione

Diverse sfaccettature della stessa rivoluzione

Il secondo segno di una rivoluzione?

La musica in formato digitale?

+

Applicazione per gestire una libreria di canzoni?

+

Uno negozio dove acquistare brani?

+

Una serie di accessori "cool"?

+

Una scelta di possibili colori?

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

+

E' tutta una questione di eco-sistema

The iTunes world

L'eco-sistema dell'esperienza

Giardinetto della felicita'

Cosa pensate che siano le "app"?

Cosa hanno in comune?

Amore per la bellezza

Un "dettaglio" apparentemente inutile

Un semplice led lampeggiante?

Breathing status LED indicatorUnited States Patent 6658577

“A new and improved status LED indicatorprovides 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.”

La porta sul mondo

L'impatto di Apple sul nostro lavoro

Il costo della qualita'

perfezione

sforzo = tempo = denaro

qualitàperfezione


qualità

Il costo della qualita'

perfezione


qualitàperfezione


qualità

...a parità di tempo dedicato

incrementi diversidi qualità...

1

10

10 10

15 minuti di pausa

HCI to UX to HCI - Parte A

Technology

Transcript of HCI to UX to HCI - Parte A