uxd cours mmi1

DESIGN D’EXPÉRIENCE UTILISATEUR (UXD)A. INTRODUCTION

MASTER MULTIMÉDIA INTERACTIF

Décembre 2011 David Raichman Directeur Expérience Utilisateur / Directeur Ogilvy Digital Lab Paris

Design d’expérience utilisateur (UXD) | Introduction

Sommaire


A. Introduction

Sommaire


A. Introduction

B. La recherche utilisateur

Sommaire


A. Introduction


C. Méthode de conception

Sommaire


A. Introduction



D. Framework fonctionnel et stratégie des contenus

Sommaire


A. Introduction



D. Framework fonctionnel et stratégie des contenus

E. Design d’interaction et design d’interface

Sommaire


1. Contexte2. Le design au coeur de l’innovation3. Définir l’expérience utilisateur (UX)4. Fondements de l’UX Design5. Les domaines de l’UXD6. Références

A. INTRODUCTION AU DESIGN D’EXPÉRIENCE UTILISATEUR


1. Contexte / 15 ans de mutation...

http://www.hec.fr

http://www.hec.com

http://www.hec.com


web



web

medias



web

medias

applications



web

mobile

medias

applications



web

produits

mobile

medias

applications



web

produits

mobile

medias

applications

services



web

environnement

produits

mobile

medias

applications

services



1. Contexte / Accélération technologique

Croissance du nombre de sites web par ans



Croissance du nombre d’utilisateurs par ans

MediaMobile

Web

PCTV, Radio, Press... CellPhone

1998

PC

TV Smartphone

TV mobile

Web

Press

Press

mobileTVGameGame

Social

Interactive

SocialGame

PressRadio

Music

Virtual iTunese-

commerce Service

2009

VideosMusic

SocialBooks

e-commerce

Storage

Game

Press

Bank

2012

VideosMusic

SocialBooks

e-commerce

Storage

Game

Press

Bank

Smartphone

PC

Connected TV

Video Game Console

Notebook

TabletLaptop

e-book

2012

VideosMusic

SocialBooks

e-commerce

Storage

Game

Press

Web-connected device





Web-connected deviceWeb-connected device

Bank


2012


1. Contexte / La co-évolution socio-technologique

Coévolution



prosommation

Coévolution



prosommation

piratage / hacking

Coévolution



prosommation

piratage / hacking opensource

Coévolution



prosommation

piratage / hacking opensource

co-innovation

Coévolution



temps

Coévolution


temps

popu

latio

n %

d’après Evrett Rogers (1962)

1. Contexte / Modèle de courbe d’adoption de l'innovation


temps

popu

latio

n %

2,5%

Innovateurs




temps

popu

latio

n %

2,5%

Innovateurs

13,5%

Premiersadopteurs




temps

popu

latio

n %

2,5%

Innovateurs

13,5%

Premiersadopteurs

“ chasm ”




temps

popu

latio

n %

2,5%

Innovateurs

13,5%

Premiersadopteurs

34%

Majoritéavancée

“ chasm ”




temps

popu

latio

n %

2,5%

Innovateurs

13,5%

Premiersadopteurs

34%

Majoritéavancée

34%

Majoritéen

retard

“ chasm ”




temps

popu

latio

n %

2,5%

Innovateurs

13,5%

Premiersadopteurs

34%

Majoritéavancée

34%

Majoritéen

retard

16%

Retardataires

“ chasm ”



Design d’expérience utilisateur (UXD) | Introductioncr

oiss

ance

temps

1. Contexte / Cycle de vie et paradigme technologique


oiss

ance

temps

Début



oiss

ance

temps

Début

Croissance rapide



oiss

ance

temps

Début

Croissance rapide

Stabilisation / Fin



Paradigme 1

croi

ssan

ce

temps

Début

Croissance rapide

Stabilisation / Fin



Paradigme 1

croi

ssan

ce

temps

Début

Croissance rapide

Stabilisation / Fin

Extinction du paradigme



Paradigme 1

croi

ssan

ce

temps

Début

Croissance rapide

Stabilisation / Fin



Paradigme 1 Paradigme 2

croi

ssan

ce

temps

Début

Croissance rapide

Stabilisation / Fin



Paradigme 1 Paradigme 2

croi

ssan

ce

temps

Début

Croissance rapide

Stabilisation / Fin

Début nouveau paradigme



E-commerce

1995

Rich media

Page HTML

VRMLMondes virtuels

2000

Blogs, wiki

Web 1.0

Web 2.0

2004

Réseaux sociaux

Google

1998

Google Maps, Earth

2005 2006

Applications web

Web mobile

Tablettes

2011

Temps-réel

HTML5

CloudWeb 2

20091. Contexte / L’évolution du web


E-commerce

1995

Rich media

Page HTML

VRMLMondes virtuels

2000

Blogs, wiki

Web 1.0

Web 2.0

2004

Réseaux sociaux

Google

1998

Google Maps, Earth

2005 2006

Applications web

Web mobile

Tablettes

2011

Temps-réel

HTML5

CloudWeb 2

2009

1. Contexte / L’évolution du web


E-commerce

1995

Rich media

Page HTML

VRMLMondes virtuels

2000

Blogs, wiki

Web 1.0

Web 2.0

2004

Réseaux sociaux

Google

1998

Google Maps, Earth

2005 2006

Applications web

Web mobile

Tablettes

2011

Temps-réel

HTML5

CloudWeb 2

2009

?1. Contexte / L’évolution du web


1. Contexte

2. Le design au coeur de l’innovation3. Définir l’expérience utilisateur (UX)4. Fondements de l’UX Design5. Les domaines de l’UXD6. Références



2. Le design au coeur de l’innovation / Importance du design



Le design joue un rôle croissant dans la création et la différenciation de produits et services sur le marché




Deux idées reçues :





‣ «le design, c’est une affaire d’esthétique»





‣ «le design, c’est une affaire d’esthétique»

‣ «c’est faire un produit dans la tendance du moment (Apple, Google...)»



Le design est une activité qui repose sur les éléments suivants :




‣ Empathie




‣ Empathie

‣ Résolution de problèmes




‣ Empathie


‣ Création d’idées, de concepts et protoypage




‣ Empathie


‣ Création d’idées, de concepts et protoypage

‣ Recherche d’alternatives, de nouveaux paradigmes



Le design comme méthodologie est applicable à des domaines très différents :




‣ Architecture




‣ Architecture

‣ Graphisme




‣ Architecture

‣ Graphisme

‣ Son




‣ Architecture

‣ Graphisme

‣ Son

‣ Automobile




‣ Architecture

‣ Graphisme

‣ Son

‣ Automobile

‣ Les technologies de l’information




‣ Architecture

‣ Graphisme

‣ Son

‣ Automobile


‣ L’expérience utilisateur




‣ Architecture

‣ Graphisme

‣ Son

‣ Automobile


‣ L’expérience utilisateur

‣ ...


d’après Clayton Christensen2. Le design au coeur de l’innovation / Innovation incrémentale Vs Innovation de rupture

d’après Clayton M. Christensen (1995)




Exigences basses des utilisateurs



Exigences hautes des utilisateurs






Innovation incrémentale








Innov

ation

de ru

pture



d’après Clayton Christensen2. Le design au coeur de l’innovation / Innovation incrémentale Vs Innovation de rupture : exemple



Appareils photo argentiques


Appare

ils ph

oto nu

mériqu

es



Innovation radicale

Performance (technologique)

Signification (langage)

Adaptation à l'évolution des

modèles socioculturels

Génération de nouvelles significations

«push» technologique

«pull» marché(user-centred)

Design-driven«push»

révélation

2. Le design au coeur de l’innovation / «Design-driven innovation»



Innovation radicale









révélation«push» technologique




Innovation radicale














Innovation radicale











« révélatio

n »




Innovation radicale






Ancienne génération

Consoles de jeuxcomme immersion passive dans des mondes virtuels pour des jeunes adeptes

Consoles de jeuxcomme divertissement

physique et actif pour tout le monde

PS3Xbox 360

Perfographiques

Wii

Accéléromètrescapteurs...

2. Le design au coeur de l’innovation / Exemple de la Wii



Innovation radicale






Walkman, MD, CD...

Appareil audio portable Centre musical personnel

MPManRio, Creative...

MP3

Apple iPodItunes

encodeur, Store...

2. Le design au coeur de l’innovation / Exemple de l’iPod


Design

Technologie

Usages

2. Le design au coeur de l’innovation / Une co-évolution à 3 paramètres


1. Contexte2. Le design au coeur de l’innovation

3. Définir l’expérience utilisateur (UX)4. Fondements de l’UX Design5. Les domaines de l’UXD6. Références



2. Définir l’expérience utilisateur / Définition


2. Définir l’expérience utilisateur / Définition

L’expérience utilisateur (en anglais, UX) décrit toute expérience et satisfaction qu’un utilisateur peut vivre et ressentir lorsqu’il utilise un produit ou un système.

«»


“[...] being completely involved in an activity for its own sake. The ego falls away. Time flies. Every action, movement, and thought follows inevitably from the previous one, like playing jazz. Your whole being is involved, and you're using your skills to the utmost”

2. Définir l’expérience utilisateur / Qu’est-ce que l’expérience ?

Mihaly Csikszentmihalyi Flow, The Psychology of Optimal Experience,1990, Harper Perennial

http://en.wikipedia.org/wiki/Jazz

http://en.wikipedia.org/wiki/Jazz


2. Définir l’expérience utilisateur / Expérience et «flow»


2. Définir l’expérience utilisateur / “Experience is the product”

"You press the button, we do the rest."George Eastman, 1888



“When you start looking at a problem and it seems really simple, you don't really understand the complexity of the problem. Then you get into the problem, and you see that it's really complicated, and you come up with all these convoluted solutions.

That's sort of the middle, and that's where most people stop....

But the really great person will keep on going and find the key, the underlying principle of the problem—and come up with an elegant, really beautiful solution that works.”

Steve Jobs, 1984



Produit

Technologie



Produit

Fonctionnalités



Produit

Expérience



Experience IS the product


2. Définir l’expérience utilisateur / L’expérience des objets quotidiens

“Why do we put up with the frustrations of everyday objects, with objects that we can’t figure out how to use, with those neat plastic wrapped packages that seem impossible to open, with doors that trap people, with washing machines and dryers that have become too confusing to [...] ?”

Donald A. NormanThe design of everyday things, 1988, Basic books


2. Définir l’expérience utilisateur / La problématique du digital (web, mobile...)

[...] a web site is a “self-service” product. There is no instruction manual to read beforehand, no training seminar to attend, no customer service representative to help the user through site. There is only the user, facing the site alone with only her wits and experience to guide her.

Jesse James GarettThe elements of user experience, 2002, New Riders


2. Définir l’expérience utilisateur / Les facettes de l’expérience utilisateur digitale

D’après P. Morville, http://semanticstudios.com/publications/semantics/000029.php, 2004

http://semanticstudios.com/publications/semantics/000029.php




valuable






desirable

valuable






desirable

accessible

valuable






desirable

accessible

valuable

credible






desirable

findable accessible

valuable

credible






usable desirable

findable accessible

valuable

credible






useful

usable desirable

findable accessible

valuable

credible





1. Contexte2. Le design au coeur de l’innovation3. Définir l’expérience utilisateur (UX)

4. Fondements de l’UX Design5. Les domaines de l’UXD6. Références



4. Fondements de l’UX Design / Les premiers pas

“We bear in mind that the object being worked on is going to be ridden in, sat upon, looked at, talked into, activated, operated, or in some other way used by people individually or en masse.

When the point of contact between the product and the people becomes a point of friction, then the […] designer has failed.

On the other hand, if people are made safer, more comfortable, more eager to purchase, more efficient—or just plain happier—by contact with the product, then the designer has succeeded.”

Henry Dreyfuss,1955Designing for People, Allworth Press


4. Fondements de l’UX Design / Origines

Les 3 influences de l’UXD

UXD




Design

d’interactionUtilisabilité

Design d’interface

HCI

Computer graphics

Architecture

de l’information

Stratégie

Recherche

utilisateurs

UXD

Ergonomie Design industriel




Design



Library Science

HCI

Taxonomie

Documentalisme

Archivage

Computer graphics

Architecture

de l’information

Stratégie

Recherche

utilisateurs

UXD

Méta-données





Design



Library ScienceMarketing

HCI

Etude de marché

Marque

CRM

Segmentation utilisateurs

Taxonomie

Documentalisme

Archivage

Computer graphics

Architecture

de l’information

Stratégie

Recherche

utilisateurs

UXD

Méta-données


Jakob Nielsen

Mark Boulton

Library ScienceMarketing

HCI

Peter MorvilleJesse James Garett

UXD

Douglas Bowman

Don Norman Alan Cooper

Bill Moggridge

Etude de marché

Marque

CRM

Segmentation utilisateurs

Taxonomie

Documentalisme

Archivage

Computer graphics

Méta-données


Jenifer Tidwell

Louis Rosenfeld

Donald Norman





4. Fondements de l’UX Design / Les éléments de Garett

5 plans

D’après J.J. Garett, The elements of user experiences, 2003, New Riders



5 plans


Strategie : que voulons-nous retirer du site ? Quel sont les besoins des utilisateurs ?



5 plans



Périmètre : transformons la stratégie en recommandation. Quelles sont les fonctionnalités ?



5 plans


Structure : rassemblons les briques. Comment les différents éléments vont-ils se comporter et vivre ensemble ?





5 plans





Squellette : rendons les choses concrètes. Quels composants vont être à la disposition des utilisateurs ?



5 plans





Squellette : rendons les choses concrètes. Quels composants vont être à la disposition des utilisateurs ?

Surface : rassemblons tout. Quelle est l’apparence du produit fini ?


1. Contexte2. Le design au coeur de l’innovation3. Définir l’expérience utilisateur (UX)4. Fondements de l’UX Design

5. Les domaines de l’UXD6. Références



5. Les domaines de l’UXD / Pluridisciplinarité

IA! Parcours utilisateurs

! Organisation de contenu

! Wireframes

! Planification fonctionnelle

IxD! Modélisation des objets

! Comportement d’interface

! Organisation des gabarits

! Spéc. fonctionnelles

! Process Flow

UID! Design d’interface

! Spécifications graphiques

! Catalogue d’objets

Usability! Conception des tests

! Audit et rapport

d’utilisabilité

Prototype! Composants Front Flash

! Gabarits XHTML

! Charte CSS

! Librairie d’objets

UX Strategy

! Définition des besoins

! Etude de contextes d’usage

! Stratégie fonctionnelle

! Stratégie des contenus

UX DESIGN

❖ Tests utilisateurs❖ Composants fronts❖ Gabarits❖ Charte CSS❖ Librairie d’objets


5. Les domaines de l’UXD / Métiers

Graphiste(s) Développeur(s)

Chef de projet



Graphiste / Designer d’interface

Développeur / Prototype front

Chef de projet

User researcher

Designer d’interaction

Ergonome web / Expert en utilisabilité

Architecte d’information

SEO expertContent strategist RédacteurTechnology strategist / CTO



Expert en recherche utilisateur

étudie et modélise les objectifs et besoins des utilisateurs en menant des interviews et des tests dans un contexte d’usage donné.



Architecte de l’informationorganise, modélise et catégorise l’information. Ce qui comprend souvent la mise en place d’un système de classification et de nomenclaturage pour les sites web, ou applications.



Designer d’interaction

définit les comportements des produits et des systèmes avec lesquels un utilisateur peut interagir.



Ergonome web / Expert utilisabilité

évalue la faculté d’un objet, d’un service ou d’un système à être utilisable, en conduisant des tests et des recherches auprès des utilisateurs.



Designer / Architecte Expérience utilisateur

conçoit et produit les éléments de l’expérience d’un utilisateur comme résultante d’une interaction avec un produit, un service ou un système.



Designer d’interface

il conçoit l’expression graphique d’un service ou d’un produit digital. Ce travail demande souvent de mettre en place une direction artistique qui doit prendre en compte les problématiques d’une marque et les contraintes ergonomiques des utilisateurs.



Designer interactif

polyvalent, son activité regroupe souvent le design graphique, le design d’interface web, le design d’interaction et le motion design.


5. Les domaines de l’UXD / Secteurs d’application


TYPE SECTEUR PRODUITS EXEMPLE

SSII Informatique CMS, applications, Intranets,e-commerce... SQLI

Web agency Communication /Publicité

Campagnes marketing online, contenus,applications, intranets, e-commerces,réseaux sociaux, chartes graphiques...

Digitas

Pure player Service Fonctionnalités, contenus, services, tests, relatifs à une plateforme Amazon

Agence de design Design Objets, services, interfaces, applications,chartes graphiques, tests... IDEO

Cabinet de consultants UX UX Design Livrables UX, tests, rapports de tests, audits Adaptive Path

5. Les domaines de l’UXD / Secteurs d’application


A. Introduction au design d’expérience utilisateur

1. Contexte2. Le design au coeur de l’innovation3. Définir l’expérience utilisateur (UX)4. Fondements de l’UX Design5. Les domaines de l’UXD

6. Références


7. Références / Bibliographie

Hunger & Chandler, A project guide to UX Design, 2009, New Riders

Garett, The elements of user experience, 2011, New Riders, O’Reilly

R. Verganti : Design-driven Innovation, 2009, Harvard Business Press

Merholz, Shauer, Verba & Wilkens, Subject to change, 2009

Morville, Rosenfeld, Information Architecture for the World Wide Web, 2002, O’Reilly

Norman, The design of everyday things, 1988, Basic books

The Human-Computer Interaction Handbook, 2008, LEA

Cooper, About Face 3 (The Essentials of Interaction Design), 2007, Wiley

Saffer, Designing for interaction, 2007, New Riders

Moggridge, Designing Interactions, MIT Press, 2006

Tidwell, Designing Interfaces, 2005, O’Reilly


7. Références / Webographie

Interaction Designhttp://www.ixda.org/http://www.cooper.com/http://www.odannyboy.com/portfolio/index.htmlhttp://developer.yahoo.com/ypatterns/

User Design Interface

http://ui-patterns.com/http://uie.com/

Usability

http://www.clearleft.comhttp://www.useit.com/http://www.sensible.com/index.html

Actualités sur l’UX

http://www.uxmag.com/http://boxesandarrows.comhttp://adaptivepath.com/http://semanticstudios.com/publications/semantics/000228.php (sur les livrables UX)http://www.digitaldesignblog.com/ (blog UX de Razorfish)

Strategic Design et design d’information

http://www.visualcomplexity.comhttp://www.visual-literacy.org/periodic_table/periodic_table.htmlhttp://www.communicatingdesign.com/http://www.thebackofthenapkin.com/

Architecture d’informationhttp://www.iainstitute.org/http://www.jjg.net/ia/http://informationarchitects.jp/http://iatelevision.blogspot.com/

http://www.ixda.org/

http://www.ixda.org/

http://www.cooper.com/

http://www.cooper.com/

http://www.odannyboy.com/portfolio/index.html

http://www.odannyboy.com/portfolio/index.html

http://developer.yahoo.com/ypatterns/

http://developer.yahoo.com/ypatterns/

http://ui-patterns.com/

http://ui-patterns.com/

http://uie.com/

http://uie.com/

http://www.clearleft.com

http://www.clearleft.com

http://www.useit.com/%0Ahttp://www.useit.com/%0A

http://www.useit.com/%0Ahttp://www.useit.com/%0A

http://www.sensible.com/index.html

http://www.sensible.com/index.html

http://www.uxmag.com

http://www.uxmag.com

http://boxesandarrows.com

http://boxesandarrows.com

http://adaptivepath.com

http://adaptivepath.com



http://www.digitaldesignblog.com/

http://www.digitaldesignblog.com/

http://www.visualcomplexity.com

http://www.visualcomplexity.com

http://%22

http://%22

http://%22

http://%22

http://www.thebackofthenapkin.com

http://www.thebackofthenapkin.com

http://%22

http://%22

http://www.jjg.net/ia/

http://www.jjg.net/ia/

http://informationarchitects.jp

http://informationarchitects.jp

http://iatelevision.blogspot.com

http://iatelevision.blogspot.com

David Raichman / [email protected] Experience Utilisateur, Directeur Ogilvy Digital Lab Paris

mailto:[email protected]

mailto:[email protected]

uxd cours mmi1

Documents