Cours (A) Gobelins Master 2 MICNI

CONCEPTION

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

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

Janvier 2010 Ecole des GobelinsDavid 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é


1. Contexte2. Définir 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

A. Introduction au design d’expérience utilisateur


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



Media

MobileWeb

Porosité des secteurs



TV mobile

Web

Press

Press

mobileTVGame

Game

Social

Interactive

SocialGame

PressRadio

Music

VirtualiTunes

e-commerce

Service

Porosité des secteurs


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 final

Années 70 - 80

Ventes / Réparation

Produit technologique traditionnel

Utilisateur




Années 90Logiciel de bureautique traditionnel

Ventes

Support

Utilisateur




Années 2000Sites web

FAI

Fournisseur du site

Utilisateur




Années 2000Mobile

Utilisateur

Fabriquant du mobile

Fournisseur du réseau

Fournisseur de l’application

Fournisseur de contenus



prosommation

piratage / hacking opensource

co-innovation

Coévolution



temps

Coévolution


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

2. Définir l’expérience utilisateur (UX)3. Fondements de l’UX Design



6. Références



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.

«»


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

useful

usable desirable

findable accessible

valuable

credible

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

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



1. Contexte

2. Définir l’expérience utilisateur (UX)

3. Fondements de l’UX Design4. Les domaines de l’UXD


6. Références



3. Fondements de l’UX Design / Origines

Les 3 influences de l’UXD

Design

d’interactionUtilisabilité

Design d’interface

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

Ergonomie Design industriel


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

Ergonomie Design industriel

Jenifer Tidwell

Louis Rosenfeld

Donald Norman

3. Fondements de l’UX Design / Origines

Les 3 influences de l’UXD


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

“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

Premiers pas vers le design centré sur l’utilisateur



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éfinit 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écifie pas exactement la méthode.



Identifier les besoins pour le design centré utilisateur

Spécifier le contexte d’utilisation

Spécifier les exigences utilisateurs

Produire des solutions de conceptions

Evaluer les solutions de conception

Les exigences sont atteintes

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



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

‣ Modifier la conception itérativement tant que les tests ne sont pas satisfaisants

Test utilisateur et évaluation

Prototype

Design

itérations



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


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

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

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

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

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

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


1. Contexte



4. Les domaines de l’UXD5. L’UXD et l’entreprise

6. Références



4. Les domaines de l’UXD / Pluridisciplinarité

IA! Parcours utilisateurs

! Organisation de contenu

! Wireframes

! Plannification 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

! Recommandation et

rapport d’utilisabilité

Prototype! Simulation du

comportement d’interface

! Composants Front

! Librairie d’objets

UX Strategy! Definition des besoins

! Etude de contextes d’usage

! Strategie fonctionnelle

! Strategie des contenus

UX DESIGN


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

tacticstrategic

stratégie périmètre structure squelette surface

Design d’interface

Prototypage

UX Stratégie Architecture d’information

Design d’interaction

Utilisabilité

UX Design

Utilisabilité

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


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




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.




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

Audiovisuel Informationnel

Applicatif

Desktop, bornes, autres...

News

Mondes virtuels




Applicatif


News

Mondes virtuels

mouvements 2D/3Dtravelling, panoramiquetrajectoire, rotation, zoom...

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

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

réponse sonorepan stéréo, filtres, intensité...




Applicatif


Social

Transactionnel

Blogs

News

Mondes virtuels

Publicitaire, Evt, Portfolio...

Films, doc interactifs

Jeux en ligne

RDA : Rich Desktop Application

RIA : Rich Internet Application

RMA : Rich Mobile Application




Applicatif


Social

Transactionnel

Blogs

News

Mondes virtuels



Jeux en ligne







Applicatif


Social

Transactionnel

Blogs

News

Mondes virtuels



Jeux en ligne







Applicatif


Social

Transactionnel

Blogs

News

Mondes virtuels



Jeux en ligne







Applicatif


Social

Transactionnel

Blogs

News

Mondes virtuels



Jeux en ligne







Applicatif


Social

Transactionnel

Blogs

News

Mondes virtuels



Jeux en ligne







Applicatif


Social

Transactionnel

Blogs

News

Mondes virtuels



Jeux en ligne






Informationnel

User researcher



Ergonome Web / Expert Utilisabilité

Designer d’interface

UX Designer

Affectation des métiers par typologie



User researcher





UX Designer

Applicatif




User researcher





UX Designer

Audiovisuel



1. Contexte




5. L’UXD et l’entreprise6. Références



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

TYPE APPROCHE PRODUITS EXEMPLE

SSII InformatiqueCMS, applications, Intranets,e-commerce... SQLI

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

Ogilvy Interactive

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

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

Cabinet de consultants UX

UX DesignLivrables UX, recherche utilisateur, tests, rapports de tests, audits Adaptive Path


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

Stratégie de l’entreprise

Devenir leader sur le marché de l’industrie X

Générer l’engouementparmi nos client

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



Gagner de l’argent

Objectifs utilisateurs

Rendre plus pratique sa vie quotidienne...

Susciter l’admiration de ses proches



Objectifs utilisateursStratégie de l’entreprise



Objectifs utilisateursStratégie de l’entreprise Stratégie UX

Définition des business goal

Filtrage des objectifs

utilisateurs

Définitiondu projet


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

Manifeste UX

Le cas Google

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

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

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


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

Philosophie de l’entreprise

Le cas Google

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

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

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


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

concrete design

technology implementation

content production

technologystrategy

content strategy

abstract design

site strategy

user research

project management

tactic

strategic


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

concrete design

technology implementation

content production

technologystrategy

content strategy

abstract design

site strategy

user research

project management

tactic

strategic

Usability

UID

Prototype

IxD

UX Strat.

IA

IxD

IA

Usability


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



TempsStrategy Design Development

Quality

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



Approche agile



Approche hybride pragmatique



Temps

UX

UX

UX

UX

Strategy Design Development

Quality

Augmentation de la qualité dans une approche hybride pragmatique


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

Bénéfices

‣ 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

Interaction Design

http://www.ixda.org/

http://www.cooper.com/

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

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

User Design Interface

http://ui-patterns.com/

http://uie.com/

Usability

http://www.clearleft.com

http://www.useit.com/

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

Actualités sur l’UX

http://www.uxmag.com/

http://boxesandarrows.com

http://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.com

http://www.visual-literacy.org/periodic_table/periodic_table.html

http://www.communicatingdesign.com/

http://www.thebackofthenapkin.com/

Architecture d’information

http://www.iainstitute.org/

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

http://informationarchitects.jp/

http://iatelevision.blogspot.com/











http://uie.com/

http://uie.com/



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

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



http://www.uxmag.com

http://www.uxmag.com



http://adaptivepath.com

http://adaptivepath.com



http://www.digitaldesignblog.com/

http://www.digitaldesignblog.com/



http://%22

http://%22

http://%22

http://%22

http://www.thebackofthenapkin.com

http://www.thebackofthenapkin.com

http://%22

http://%22



http://informationarchitects.jp

http://informationarchitects.jp

http://iatelevision.blogspot.com

http://iatelevision.blogspot.com

http://www.slideshare.net/davethepreacher



Cours (A) Gobelins Master 2 MICNI

Text of Cours (A) Gobelins Master 2 MICNI

Bande Traduite - Gobelins

cours master SSI.pdf

Copie de cours master

Cours Master 2R1

Curriculum Vitae détaillé - IMMD€¦ · SPSS) Cours Master 2 21 HTD ... distribution Stratégies internationales de distribution Cours Cours Master 1 Master 2 23 HTD 32 ... Diop-Sall

Master Mecatronique Cours Fabrication Akourri

Info Gobelins 2

BANDE TRADUITE - Orques Et Gobelins

Cours (C) Gobelins Master 2 MICNI

Master 2 Cours Assemblages Cm

01 assemblage organique gobelins

Warhammer Armées - V8 - Orques & Gobelins

Cours (E) Gobelins Master 2 MICNI

06 floraison gobelins

de la Céramique. - GOBELINS

Cours Tns Master It

Portfolio Gobelins 2017 - Lauréline Reynaud · Portfolio Gobelins 2017 Lauréline Reynaud

Cours Catia Master GI

Présentation du master Les cours du master Les débouchés

09 pyjarama gobelins

cours master BC commun

2021 - Ecole de l'image GOBELINS

Cours de Reseaux Master 1

Cours Image Master

black hammer : Orques Et Gobelins

PRÉSENTATIONDU CONCOURS - GOBELINS

Info Gobelins

04 ecosysteme gobelins

cours seisme master

Cours Consolidation Master 2 CCA