Cours (A) Gobelins Master 2 MICNI

CONCEPTION
Master 2 : Management et Ingénierie de la Communication Numérique Interactive

A. Introduction au design d'expérience utilisateur (UXD)

Janvier 2010
Ecole des Gobelins
David Raichman
Senior UX Designer @ OgilvyInteractive

Conception | Introduction au design d’expérience utilisateur

Les cours de conception

A. Introduction au design d’expérience utilisateur (UXD)

B. Les livrables de l’UXD

C. La recherche utilisateur

D. Framework fonctionnel et stratégie des contenus

E. Design d’interaction, design d’interface et protoypage

F. Utilisabilité


A. Introduction au design d’expérience utilisateur

1. Contexte
2. Déﬁnir l’expérience utilisateur (UX)
3. Fondements de l’UX Design
4. Les domaines de l’UXD
5. L’UXD et l’entreprise
6. Références


1. Contexte / Préambule

Dans ce cours, on se focalisera sur le design d’expérience utilisateur
dans le contexte digital (web, mobile...)


1. Contexte / Un marché en permanente évolution

‣Globalisation
‣Enjeux environnementaux
‣Digitalisation



Porosité des secteurs

Media

Web
Mobile



Porosité des secteurs

Radio
Press
Music

Virtual
Game Web Social
iTunes
e-
commerce
Service

mobile TV
Game
Interactive TV mobile
Game

Press
Press Social


1. Contexte / Accélération technologique

Croissance du nombre de sites web par ans


1. Contexte / Accélération technologique

Croissance du nombre d’utilisateurs par ans


1. Contexte / Nouveaux rapports aux produits et services

Evolution du nombre d’organisations dans la relation avec un utilisateur ﬁnal

Années 70 - 80
Produit technologique traditionnel

Utilisateur Ventes / Réparation




Années 90
Logiciel de bureautique traditionnel

Ventes

Utilisateur

Support




Années 2000
Sites web

FAI

Utilisateur

Fournisseur du site




Années 2000
Mobile

Fabriquant du mobile

Fournisseur du réseau

Utilisateur

Fournisseur de l’application

Fournisseur de contenus



Coévolution

prosommation co-innovation

piratage / hacking opensource



Coévolution

temps


1. Contexte / Apparition de nouveaux métiers

Architecte de l’information



Ergonome web



Motion designer



Content strategist



Flash designer



Interaction designer



UX architect



...


1. Contexte / Importance du design

Le design joue un rôle croissant dans la création de produits
et de services
Deux idées reçues :
‣ «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
‣ Résolution de problèmes
‣ 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
‣ Graphisme
‣ Son
‣ Automobile
‣ Les technologies de l’information
‣ L’expérience utilisateur
‣ ...


1. Contexte

6. Références


2. Déﬁnir l’expérience utilisateur / Déﬁnition

« 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. »


2. Déﬁnir 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éﬁnir 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. Norman
The design of everyday things, 1988, Basic books


2. Déﬁnir 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 Garett
The elements of user experience, 2002, New Riders


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

useful

usable desirable

valuable

findable accessible

credible

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


1. Contexte

6. Références


3. Fondements de l’UX Design / Origines

Les 3 inﬂuences de l’UXD HCI

Computer graphics

Design d’interface

Ergonomie Design industriel
Design
Utilisabilité d’interaction
UXD
Recherche
Segmentation Méta-données
utilisateurs
utilisateurs Architecture
de l’information

Marque Stratégie Archivage

CRM Taxonomie
Marketing Library Science

Etude de marché Documentalisme


3. Fondements de l’UX Design / Origines

Les 3 inﬂuences de l’UXD HCI

Computer graphics

Mark Boulton
Douglas Bowman
Jenifer Tidwell
Ergonomie Design industriel
Donald Norman
Don Norman Alan Cooper
Jakob Nielsen Bill Moggridge
UXD
Segmentation Méta-données
utilisateurs
Jesse James Garett Peter Morville

Marque Louis Rosenfeld Archivage

CRM Taxonomie
Marketing Library Science

Etude de marché Documentalisme


3. Fondements de l’UX Design / Design centré sur utilisateur (UCD)

Premiers pas vers le design centré sur l’utilisateur

“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,1955
Designing for People, Allworth Press



L’UCD s’est formalisée grâce à la standardisation de la
conception des applications informatiques (ISO 13407),
nommée «conception centré sur l’humain»

Le processus de conception centré sur l’humain déﬁnit un
processus général incluant les activité centrés sur les
humains par le biais d’un cycle de développement, mais ne
spéciﬁe pas exactement la méthode.



Processus de conception centré sur l’humain (norme ISO 13407)

Identifier les besoins pour
le design centré utilisateur

Spécifier le contexte d’utilisation

Evaluer les solutions Spécifier les exigences
Les exigences sont atteintes
de conception utilisateurs

Produire des solutions
de conceptions



Ce qu’il faut retenir sur l’UCD :

‣ Comprendre les besoins des utilisateurs (Recherche utilisateur)
‣ Concevoir des solutions qui répondent à ces besoins
‣ Faire participer les utilisateurs dans le processus de conception
‣ Conduire des tests avec les utilisateurs
‣ Modiﬁer la conception itérativement tant que les tests ne sont
pas satisfaisants

Design

itérations
Test utilisateur
Prototype
et évaluation



L’UX Design est un processus centré sur l’utilisateur


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

5 plans
Surface : rassemblons tout. Quelle
est l’apparence du produit ﬁni ?

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

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

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

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

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


1. Contexte

6. Références


4. Les domaines de l’UXD / Pluridisciplinarité

UX Strategy
! Definition des besoins
! Etude de contextes d’usage
! Strategie fonctionnelle
IA ! Strategie des contenus

! Parcours utilisateurs
UID
! Organisation de contenu ! Design d’interface

! Wireframes ! Spécifications graphiques

! Plannification fonctionnelle ! Catalogue d’objets

UX DESIGN

IxD Usability
! Modélisation des objets ! Conception des tests
! Comportement d’interface ! Recommandation et
! Organisation des gabarits rapport d’utilisabilité
! Spéc. fonctionnelles
! Process Flow
Prototype
! Simulation du
comportement d’interface
! Composants Front
! Librairie d’objets


4. Les domaines de l’UXD / Six pôles

Répartition des pôles par éléments

UX Design

Prototypage

Utilisabilité Utilisabilité

Design d’interaction

UX Stratégie Architecture d’information Design d’interface

stratégie périmètre structure squelette surface

strategic tactic


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

Graphiste(s) Développeur(s)

Chef de projet



Graphiste / User Architecte Designer Ergonome web / Développeur /
Designer d’interface researcher d’information d’interaction Expert en utilisabilité Prototype front

Content strategist Technology Chef de projet Rédacteur SEO expert
strategist / CTO



organise, 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.



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é.



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 interactif

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


4. Les domaines de l’UXD / Typologies des systèmes digitaux

Applicatif

Desktop, bornes, autres...

N
M

ew
on

s
de
s
vi
rtu
el
s

Audiovisuel Informationnel



Applicatif


mouvements 2D/3D
travelling, panoramique
trajectoire, rotation, zoom...

transitions 2D/3D
fade, iris, wipe...

filtres 2D/3D
blur, glow, bevel...

réponse sonore
pan stéréo, filtres, intensité...

N
M

ew
on

s
d
es
vi
rtu
el
s




Applicatif


RDA : Rich Desktop Application

RMA : Rich Mobile Application

RIA : Rich Internet Application

Tr

Bl

N
So
Je

Fi

Pu

a
M

ew
og
lm

ns
ux

ci
bl
on

s
s
s,

al

a
ic
en
d

ct
ita
do
es

io
lig

ire
c

nn
vi

ne

in

,E
rtu

el
te

vt
el

ra

,P
s

ct

or
ifs

tfo
lio
...




Affectation des métiers par typologie

Informationnel

User researcher



Ergonome Web / Expert Utilisabilité

Designer d’interface

UX Designer




Applicatif

User researcher





UX Designer




Audiovisuel

User researcher





UX Designer


1. Contexte

6. Références


5. L’UXD et l’entreprise / Typologie des entreprises

TYPE APPROCHE PRODUITS EXEMPLE

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

Campagnes marketing online, contenus,
Web agency Communication applications, intranets, e-commerces, Ogilvy Interactive
réseaux sociaux, chartes graphiques...

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

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

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


5. L’UXD et l’entreprise / Stratégie de l’entreprise vs objectifs de l’utilisateur

Devenir leader
sur le marché
de l’industrie X

Générer
Stratégie de l’entreprise
l’engouement
parmi nos client

Augmenter la
fréquentation de
notre site web...



Gagner de
l’argent

Susciter Objectifs utilisateurs
l’admiration de
ses proches

Rendre plus
pratique sa vie
quotidienne...



Stratégie de l’entreprise Objectifs utilisateurs



Déﬁnition
du projet

Déﬁnition des
business goal

Stratégie de l’entreprise Stratégie UX Objectifs utilisateurs
Filtrage des
objectifs
utilisateurs


5. L’UXD et l’entreprise / Quand l’UX devient philosophie

Le cas Google

Manifeste UX

1. Focus on people – their lives, their work, their dreams.
2. Every millisecond counts.
3. Simplicity is powerful.
4. Engage beginners and attract experts.
5. Dare to innovate.
6. Design for the world.
7. Plan for today's and tomorrow's business.
8. Delight the eye without distracting the mind.
9. Be worthy of people's trust.
10.Add a human touch.

Sources : http://www.google.com/corporate/ux.html


5. L’UXD et l’entreprise / Quand l’UX devient philosophie

Le cas Google

Philosophie de l’entreprise

1. Focus on the user and all else will follow.
2. It’s best to do one thing really, really well.
3. Fast is better than slow.
4. Democracy on the web works.
5. You don’t need to be at your desk to need an answer.
6. You can make money without doing evil.
7. There’s always more information out there.
8. The need for information crosses all borders.
9. You can be serious without a suit.
10.Great just isn’t good enough.

Sources :http://www.google.com/corporate/tenthings.html


5. L’UXD et l’entreprise / L’UXD dans les projets digitaux

project management

concrete
design

technology content
implementation production

tactic
abstract
design
strategic
technology content
strategy strategy

site strategy

user research


5. L’UXD et l’entreprise / L’UXD dans les projets digitaux

project management
Usability
UID
concrete
design
Prototype
technology content
implementation IxD production

tactic
abstract
IxD IA
design
strategic
technology content
strategy IA strategy

Usability
site strategy

UX Strat.

user research


5. L’UXD et l’entreprise / Une nouvelle approche de la gestion de projet

D’après Mr. Patrick J. Lynch & Ms. Sarah Horton,
Web Style Guide, 3rd edition, 2009, Yale University Press



Approche classique en cascade



Déperdition de la qualité dans une approche en cascade

Quality

Temps
Strategy Design Development



Approche agile



Approche hybride pragmatique



Augmentation de la qualité dans une approche hybride pragmatique

Quality

UX

UX

UX

UX
Temps
Strategy Design Development


6. L’UXD et l’entreprise / Enjeux et bénéfices

Enjeux
‣ Composer et connaître la culture de l’entreprise
‣ Faire comprendre que :
Process existant + UXD + bénéfices <= coût du process existant

et que :
Nouveau process UXD orienté + bénéfices << coût ancien process

‣ La mutation des process est souvent perçue comme une
menace par l’entreprise


6. L’UXD et l’entreprise / Enjeux et bénéﬁces

Bénéﬁces
‣ ROI
‣ Augmentation du taux de conversion des utilisateurs
‣ Fidélisation des utilisateurs
‣ Avantage compétitif


1. Contexte

6. Références


7. Références / Bibliographie

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

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

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

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

Actualités sur l’UX
Interaction Design
http://www.uxmag.com/
http://www.ixda.org/
http://boxesandarrows.com
http://www.cooper.com/
http://adaptivepath.com/
http://www.odannyboy.com/portfolio/index.html
http://semanticstudios.com/publications/semantics/000228.php
(sur les livrables UX) http://developer.yahoo.com/ypatterns/

http://www.digitaldesignblog.com/ (blog UX de Razorﬁsh)

Strategic Design et design d’information User Design Interface

http://www.visualcomplexity.com http://ui-patterns.com/
http://www.visual-literacy.org/periodic_table/periodic_table.html http://uie.com/
http://www.communicatingdesign.com/
http://www.thebackofthenapkin.com/ Usability
Architecture d’information http://www.clearleft.com

http://www.iainstitute.org/ http://www.useit.com/

http://www.jjg.net/ia/ http://www.sensible.com/index.html

http://informationarchitects.jp/
http://iatelevision.blogspot.com/

http://www.slideshare.net/davethepreacher

Cours (A) Gobelins Master 2 MICNI

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Cours (A) Gobelins Master 2 MICNI

Ähnlich wie Cours (A) Gobelins Master 2 MICNI (20)

Cours (A) Gobelins Master 2 MICNI