Atelier pour l'École de communication visuelle d'Aix-en-Provence (ECV Aix-en-Provence)

1. Le design
UX

2. Le design
d’expérience
u0lisateur
Atelier
École de communica0on visuelle
Aix-en-Provence, 14-15 avril 2016

3. Le design
d’expérience
u0lisateur

4. Le design

5. Le design
Quel(s) sens pour un
mot?

6. Le design
Quel(s) sens pour un
mot?
Contrairement aux idées reçues, le terme
« design » n’est pas tant un anglicisme qu’un
la:nisme. (…) Il signifie « marquer d’un signe »
- Stéphane Vial, Court traité du design

7. Le design
Quel(s) sens pour un
mot?
Cependant, le verbe anglais to design a deux
sens : celui de « dessiner » (...) mais aussi celui de
projeter en fonc>on d’un « dessein » …
- Stéphane Vial, Court traité du design

8. Pourquoi ces sens du
mot « design » sont-ils
importants lorsqu’on
aborde la ques8on du
design UX ?

9. Pourquoi ces sens du
mot « design » sont-ils
importants lorsqu’on
aborde la ques8on du
design UX ?

10. Pourquoi ces sens du
mot « design » sont-ils
importants lorsqu’on
aborde la ques8on du
design UX ?
Kids using Dynabook. Alan Kay

11. Pourquoi ces sens du
mot « design » sont-ils
importants lorsqu’on
aborde la ques8on du
design UX ?

12. Quels « desseins »
derrière l’évolu2on
des interfaces ?

13. Peut-on designer une
expérience ?
design visuel
design d’interfaces
design d’interac8on
architecture d’informa8on
spécifica8ons
fonc8onnelles & formelles
objec8fs u8lisateur
Selon Jesse James Garret,
The Elements of User Experience
objec8fs système interac8f

14. Peut-on designer une
expérience ?
complé2on
concep2onabstrait
concret
design visuel
design d’interfaces
design d’interac2on
architecture d’informa2on
spécifica2ons
fonc2onnelles & formelles
objec2fs u2lisateur
Selon Jesse James Garret,
The Elements of User Experience
objec2fs système interac2f

15. Peut-on designer une
expérience ?
surface
skeleton
structure
scope
srategy
Selon Jesse James Garret,
The Elements of User Experience

16. Peut-on designer une
expérience ?
prototyper & valider
décider
diverger
définir
découvrir & comprendre
Selon Google Ventures adapté de IDEO
et Stanford Design School

17. Peut-on designer une
expérience ?
prototypage & itéra4on
pensée plateforme
(pla2orm thinking)
design pa6erns
découverte
&
compréhension
mode(s) d’interac4on
Nouvelles tendances du design UX

18. Peut-on designer une
expérience ?
prototypage & itéra4on
découverte
&
compréhension
mode(s) d’interac4on
design pa4erns
pensée plateforme
(pla8orm thinking)
Nouvelles tendances du design UX
Source: UI Flat Design Mega Collec6ons - h9p://www.shu9erstock.com/

19. Peut-on designer une
expérience ?
prototypage & itéra4on
pa*erns & principes
découverte
&
compréhension
mode(s) d’interac4on
Source: Gesture Cards byByCraigVillamor, DanWillis, and LukeWroblewski
pensée plateforme
(pla8orm thinking)
Nouvelles tendances du design UX

20. Peut-on designer une
expérience ?
prototypage & itéra4on
pa*erns & principes
découverte
&
compréhension
mode(s) d’interac4on
Source: h*p://www.yelvington.com/files/pla:orm.png
pensée plateforme
(pla8orm thinking)
Nouvelles tendances du design UX

21. Peut-on designer une
expérience ?
« Now, let’s talk about that word “experience”. A
lot of people have trouble with this word,
especially paired with the word “design”. “You
can’t call it experience design!” they say. “How
can you possibly control someone else’s
experience?” they demand. »
- Jesse James Garret, InformaJon Architecture Summit 2009

22. Peut-on designer une
expérience ?
« Well, wait a minute — who said anything
about control? »
- Jesse James Garret, Informa?on Architecture Summit 2009

23. Peut-on designer une
expérience ?
« Experience is too ephemeral, they say »
- Jesse James Garret, Informa<on Architecture Summit 2009

24. Peut-on designer une
expérience ?
The en+re hypothesis of experience design (and
it is a hypothesis at this point) is that the
ephemeral and insubstan+al can be designed.
And that there is a kind of design that can be
prac+ced independent of medium and across
media.
- Jesse James Garret, Informa+on Architecture Summit 2009

25. Peut-on designer une
expérience ?
Percep0on
Ac0on
Cogni0on
Émo0on
Compréhension
Basé sur Jesse James Garret, Informa5on Architecture Summit 2009

26. Peut-on designer une
expérience ?
Le design thinking
- IDEO
Empathize
Prototype
Test
Define
Ideate

27. Peut-on designer une
expérience ?
UX is not UI
- by Erik Flowers
Define

28. Le spectre du design
d’expérience u1lisateur
Peut-on designer une
expérience ?

29. Étude de cas

30. Étude de cas

31. Étude de cas
par un pe-t
design fic*on

32. Unlaboratoired’innovationenpolitiquepubliquevient
derecevoirunfinancement.
Ilpeutmaintenantdéveloppersonprojetd’application.
Ceprojetacommeobjectifd’inciterl’implicationdansla
viecollectiveetdenouvellesrelationsentrecitoyensd’un
mêmequartier.
Leprojets’orienteversuneapplicationquiintègreréalité
augmentée,cartographieinteractiveetréseausocial.
Ilsouhaitearticulerlesphasesdedesignetde
développementnumériquesuivantuneapprocheagile.

33. Celaboratoirevousapprocheafindedéfinirundesignqui
répondauxobjectifsduprojet:
•protégerl’anonymatetlavieprivée;
•visualiserlesdonnéescaptéesparlesobjets
connectésprésentsdansl’entourage;
•favoriserlaparticipationsocialeetlatransparence
politique;
•encouragerl’économiedupartagenon-marchanddans
levoisinage;
•valoriserl’économielocale,socialeetsolidaire.

34. Méthode -
Brainstorming

35. Méthode -
Brainstorming

36. Méthode -
Brainstorming
Comment nous?pourrions

37. Méthode -
Brainstorming
Comment pourrions nous?

38. Méthode -
Brainstorming
• Rester ouvert
• Rester concentré
sur le projet
• Viser la quan8té
• Encourager
toutes les idées
• Voter pour
recentrer et pré-
sélec8onner

39. Méthode -
Brainstorming
• Rester ouvert Le brainstorming
est plus efficace
lorsqu’on ouvre
d’abord pour
recentrer par la
suite…
• Rester concentré
sur le projet
• Viser la quan8té
• Encourager
toutes les idées
• Voter pour
recentrer et pré-
sélec8onner

40. Méthode -
Interviews

41. Méthode -
Interviews
“Actually, we don’t
use the term user at
Facebook. We kind of
stopped using it
because we want to
call them people »
Margaret Gould Stewart, Director of
product design

42. Méthode -
Interviews
u+lisateurs

43. Méthode -
Interviews
u+lisateurs

44. Méthode -
Interviews
u+lisateurs

45. Méthode -
Interviews
u+lisateurs
Analyse de pa+erns (source: Shlomo Goltz, Smashing Magazine 2014)

46. Méthode -
Interviews
u+lisateurs
« When the creators of
so.ware-based products
examine their handiwork,
they overlook how bad it
is.» - Alan Cooper, The Inmates Are Running The
Asylum

47. Méthode -
Interviews
u+lisateurs
« Programming is such a
difficult and absorbing task
that it dominates all other
considera6ons, including
the concerns of the user. » -
Alan Cooper, The Inmates Are Running The Asylum

48. Quel écho ont aujourd’hui
ces propos alors qu’émergent
des enjeux autour de
technologies telles l’internet
des objets ou l’intelligence
ar9ficielle ?

49. Méthode -
Persona

50. Méthode -
Persona

51. Méthode -
Persona
Biographie
Mo+va+on
ou
objec+f
Design dédié
Scénario
d’usage
ou
d’interac+on
Une journée
dans la vie
de ...

52. Méthode -
Persona
Prénom
Biographie
Mo/va/on
ou
objec/f
Design dédié
Scénario
d’usage
ou
d’interac/on
Une journée
dans la vie
de ...

53. Méthode -
Persona
Prénom
Biographie
Mo/va/on
ou
objec/f
Design dédié
Scénario
d’usage
ou
d’interac/on
Une journée
dans la vie
de ...
Tagline

54. Méthode -
Persona

55. « We believe
that basing
personas on
real data is
well worth
the effort ...
…in terms of establishing
credibility and achieving
successful outcomes. » - John Prui+ and
Jonathan Grudin - Design Studies: Human-Centered Design

56. « We don’t
use personas.
We use
ourselves. »
« I believe personas lead to a false
sense of understanding at the
deepest, most cri<cal levels. »
- Jason Fried, Founder of 37signals, Signal vs. Noise blog

57. « For a start,
personas
don’t
subs1tute the
need to do
your
homework...
…talk to real people and test your
assump1ons on a live audience.»-
Andy Budd, UX Designer and founder of Clearle7

58. Pourquoi considère-t-on
ce0e forme de synthèse
de la recherche sur les
u7lisateurs ?

59. Méthode -
Bodystorming

60. Méthode -
Bodystorming
people byirene hoffman @ the Noun Project

61. Méthode -
Bodystorming
people byirene hoffman @ the Noun Project

62. Méthode -
Bodystorming

63. Méthode -
Bodystorming
• Se lever
• Le faire!
• Considérer
des accessoires
• Répar9r les rôles
• Documenter en
images et en sons
• Observer et noter

64. Méthode -
Bodystorming
We bodystorm to generate
unexpected ideas that
might not be realized by
talking orsketching.- Standford
DSchool

65. Méthode -
Bodystorming
Un bodystorm permet
d’imaginer et de définir
en contexte et à travers
des comportements.

66. Méthode -
Bodystorming
Ce contexte interac,f
peut être perçu à
travers différentes
« len,lles ».

67. Ce contexte interac,f
peut être perçu à
travers différentes
« len,lles ».
Mental Notes Cards
de Stephen P. Anderson

68. Ce contexte interac,f
peut être perçu à
travers différentes
« len,lles ».
Game Design
A Deck of Lenses
de Jesse Schell

69. Ce contexte interac,f
peut être perçu à
travers différentes
« len,lles ».

70. Méthode -
Cartographie
d'expérience

71. Méthode -
Cartographie
d'expérience
PENSE ET SENS
FAIS
ENTENDS
VOIS
ESPACES
ÉTAPES
PERSONA
Cartographie d’expérience
adapté du JX DESIGN KIT by tlabmars
(QUI ?)
(OÙ ?)
(QUOI ?)
(QUOI ?)
(COMMENT?)
(POURQUOI?)
DESIGNER :
DATE :
VERSION :
PENSE ET SENS
FAIS
ENTENDS
VOIS
ESPACES
ÉTAPES
PERSONA
Cartographie d’expérience
adapté du JX DESIGN KIT by tlabmars
(QUI ?)
(OÙ ?)
(QUOI ?)
(QUOI ?)
(COMMENT?)
(POURQUOI?)
DESIGNER :
DATE :
VERSION :

72. Méthode -
Cartographie
d'expérience
PENSE ET SENS
FAIS
ENTENDS
VOIS
ESPACES
ÉTAPES
PERSONA
Cartographie d’expérience
adapté du JX DESIGN KIT by tlabmars
(QUI ?)
(OÙ ?)
(QUOI ?)
(QUOI ?)
(COMMENT?)
(POURQUOI?)
DESIGNER :
DATE :
VERSION :
PENSE ET SENS
FAIS
ENTENDS
VOIS
ESPACES
ÉTAPES
PERSONA
Cartographie d’expérience
adapté du JX DESIGN KIT by tlabmars
(QUI ?)
(OÙ ?)
(QUOI ?)
(QUOI ?)
(COMMENT?)
(POURQUOI?)
DESIGNER :
DATE :
VERSION :
La carte documente de façon
exhaus2ve l’expérience (interac(ons,
canaux) qu’une personne peut avoir
avec un produit ou un service, et elle
sert de base à la phase de design.
- Sylvie Daumal, Design d'expérience u>lisateur

73. Méthode -
Cartographie
d'expérience
PENSE ET SENS
FAIS
ENTENDS
VOIS
ESPACES
ÉTAPES
PERSONA
Cartographie d’expérience
adapté du JX DESIGN KIT by tlabmars
(QUI ?)
(OÙ ?)
(QUOI ?)
(QUOI ?)
(COMMENT?)
(POURQUOI?)
DESIGNER :
DATE :
VERSION :
PENSE ET SENS
FAIS
ENTENDS
VOIS
ESPACES
ÉTAPES
PERSONA
Cartographie d’expérience
adapté du JX DESIGN KIT by tlabmars
(QUI ?)
(OÙ ?)
(QUOI ?)
(QUOI ?)
(COMMENT?)
(POURQUOI?)
DESIGNER :
DATE :
VERSION :
« Pour construire ce-e cartographie,
il convient d’établir l’inventaire de
tous les points de contact ... »
- Sylvie Daumal, Design d'expérience u<lisateur

74. Méthode -
Cartographie
d'expérience
PENSE ET SENS
FAIS
ENTENDS
VOIS
ESPACES
ÉTAPES
PERSONA
Cartographie d’expérience
adapté du JX DESIGN KIT by tlabmars
(QUI ?)
(OÙ ?)
(QUOI ?)
(QUOI ?)
(COMMENT?)
(POURQUOI?)
DESIGNER :
DATE :
VERSION :
PENSE ET SENS
FAIS
ENTENDS
VOIS
ESPACES
ÉTAPES
PERSONA
Cartographie d’expérience
adapté du JX DESIGN KIT by tlabmars
(QUI ?)
(OÙ ?)
(QUOI ?)
(QUOI ?)
(COMMENT?)
(POURQUOI?)
DESIGNER :
DATE :
VERSION :
« The ac(vity of mapping builds
knowledge and consensus across teams
and stakeholders, and the mapas
ar1fact allows you to create and
support be<er customer experiences.»
- Adap4ve Path's Guide To Experience Mapping

75. Méthode -
Wireframing

76. Méthode -
Wireframing

77. Méthode -
Wireframing

78. Méthode -
Wireframing
Les
wireframes
sontdes
structures
schéma0ques
d’interfaces.
Ils
communiquent
la rela0on
entre les
éléments
perçus par
l’u0lisateur.
Ils peuvent
avoir
différents
niveaux de
«fidélité» par
rapport à
l’interface
finale.

79. Méthode -
Wireframing
Awireframeisalowfidelity
representa3onofadesign.
Itshouldclearlyshow:
–themaingroupsof
content(what?)
–adescrip3onandbasic
visualisa3onoftheuser–
interfaceinterac3on
(how?)
-MarcinTreder,CEOdela
plateformeUXPin
–thestructureof
informa3on(where?)

80. Méthode -
User Stories

81. Méthode -
User Stories

82. Méthode -
User Stories
- Lindsay Ratcliffe and
Marc McNeill,
Agile Experience Design

83. Méthode -
User Stories
- Lindsay Ratcliffe and
Marc McNeill,
Agile Experience Design

84. Méthode -
Social Business
Canvas

85. Méthode -
Social Business
Canvas

86. Méthode -
Social Business
Canvas

87. Méthode -
Social Business
Canvas
Le businesscanvas
permet de
structurerla
conversa1on
autourd’unevision
entrepreneuriale.

88. Méthode -
Social Business
Canvas
Desversionsdu
businesscanvas
penséparAlexander
Osterwalder
existentpour
différentstypesde
projets.

89. Unedernièrenote
pourlaroute…

90. LesdiversesméthodesdudesignUX
mènentdoncàlacréa8ondedivers
livrables…

91. Ceslivrablesperme-entde
communiquerlesface-esd’unprojet
auxcollaborateurs(informa:ques,
financiers,graphiques,etc.)

92. Leslivrablesontdéfinilapra2quedu
designUX.MaisledesignUXnese
résumepasàseslivrables.

93. «Valuehasul'mately
beenplacedonthe
deliverable,noton
theexperiencebeing
created.
Withinterac've
experiencesevolving
rapidly,the
deliverableisjustnot
enough.»
- Jeff Gothelf, Lean UX - Ge=ng out
of the deliverables business

94. «Youcan’thide
behindyourmonitor
anymore!
Seriously.It’s9meto
comeout.
Getitoutthere.Fast.
Inpublic.(Yes,where
peoplecanseeit.)»
- Jeff Gothelf, Lean UX - Ge5ng out
of the deliverables business

95. Ressources &
Références

96. Ressources &
Références
Court traité du design
The Elements of
User Experience
IDEO Design KitsInVision e-courses
Boxes and Arrows Designers interacDfs
UX MaGers
Standford DSchool IA InsDtute & Summit

97. Smashing Magazine
Smashing Magazine
Google Design Sprint
Design Fic6on’s
Vimeo Channel
The Inmates are
Running the Asylum
Get the SWAG on!
Design d’expérience
u6lisateur
Agile Experience
Design
UX Republic
Ressources &
Références

98. Pale%e de couleurs de 2001 Odyssée de l’espace (source: moviesincolor.com)

99. Pale%e de couleurs de 2001 Odyssée de l’espace (source: moviesincolor.com)
Merci pourvotre par-cipa-on!
Djela Djamba Okoko
Designer d’interac-on
h<p://rizomer.org/
djela@rizomer.org
@rizomer