Page 1 de 128

Page 2 de 128
Aarron Walter
DESIGN
ÉMOTIONNEL

Page 3 de 128
ÉDITIONS EYROLLES
61, bld Saint-Germain
75240 Paris Cedex 05
www.editions-eyrolles.com

Traduction autorisée de l’ouvrage en langue anglaise intitulé DESIGNING FOR EMOTION d’Aarron
Walter (ISBN : 978-0-937557-3), publié par A Book Apart LLC

Adapté de l’anglais par Charles Robert,

Aux éditions Eyrolles

Dans la même collection :

HTML5 pour les Web Designers, Jeremy Keith, 2010, 96 pages.
CSS3 pour les Web Designers, Dan Cederholm, 2011, 128 pages.
Stratégie de contenu Web, Erin Kissane, 2011, 96 pages.
Responsive Web Design, Ethan Marcotte, 2011, 160 pages
Mobile first, Luke Wroblewski, 2012, 138 pages

Autres ouvrages :
Principes universels du design, Lidwell, Holden, Butler, 2011, 272 pages
Géométrie du design, Elam, 2006, 108 pages

Aux éditions De Boeck

Design émotionnel – Pourquoi aimons-nous ou détestons-nous les objets qui nous entourent ?,
Donald Norman, 2011, 248 pages
© 2011 Aarron Walter pour l’édition en langue anglaise
© Groupe Eyrolles, 2012, pour la présente édition, ISBN : 978-2-212-13398-1

Page 4 de 128
TABLE DES MATIÈRES

CHAPITRE 1
Le design émotionnel

CHAPITRE 2
Concevoir pour les humains

CHAPITRE 3
La personnalité

CHAPITRE 4
L’engagement émotionnel

CHAPITRE 5
Surmonter les obstacles

CHAPITRE 6
L’indulgence

CHAPITRE 7
Risques et récompenses
Remerciements
Ressources
Références
Index

Page 5 de 128
Pour Jamie et Oliver, qui inspirent les expériences
les plus émotionnelles de ma vie.

Page 6 de 128
AVANT-PROPOS
Nous voulons que notre travail se démarque de celui des autres. Nous
voulons que les gens soient tellement bluffés qu’ils ressentent le besoin
d’en parler à tout le monde. Nous voulons que nos créations soient
remarquables.
Souvent, ceux qui cherchent à se faire remarquer y parviennent pendant
un court instant. Certains atteignent leur objectif en concoctant un spot de
trente secondes pour le Superbowl avec une poignée de fainéants qui
beuglent « WAZZAAAAA » au téléphone, d’autres créent le buzz avec une
vidéo de chien qui fait du skateboard. Mais ce ne sont que de brefs instants
de gloire.
Le véritable succès consiste à faire durer cet état de grâce. À faire en sorte
que les gens trouvent notre travail digne d’intérêt, et que pendant des
semaines, des mois, voire des années, ils continuent à chanter nos
louanges.
Une notoriété durable se traduit par le Saint-Graal de la communication :
le bouche à oreille. Quand nous atteignons ce summum du succès
populaire, nous voyons notre popularité et nos bénéfices grimper en
flèche.
Mais la notoriété n’arrive vraiment que lorsqu’on atteint un stade
supérieur : le plaisir. Les gens ne recommandent volontairement que ce
qui en procure. Si nous voulons être remarquables à long terme, nous
devons offrir du plaisir dans la durée.
Dans les pages qui suivent, Aarron nous apprend de façon remarquable (si
j’ose dire) à créer des designs qui ont un véritable impact émotionnel. Avec
son aide, nous pouvons obtenir les effets à long terme que nous
recherchons.
Prêtez attention aux paroles d’Aarron. Il a compilé beaucoup de
recherches et de théorie dans un livre facilement accessible. Un livre qui
vous aidera à susciter des réponses émotionnelles positives chez vos
utilisateurs. Préparez-vous à aller au-delà du remarquable.

Jared Spool
PDG et fondateur principal de User Interface Engineering

Page 7 de 128
RÉVOLUTION : UN GAGNÉ POUR UN PERDU
AMORCÉE PAR UNE RÉACTION en chaîne d’idées et d’innovations, une
révolution industrielle a balayé le monde occidental à la fin du dix-
huitième siècle et au début du dix-neuvième. En un temps relativement
court, on a découvert des procédés permettant de transformer des
minerais bruts en machines, en moyens de transport et en outils agricoles
qui ont nourri la créativité explosive du vingtième siècle. Des inventions
comme l’égreneuse, les machines-outils, la machine à vapeur, le télégraphe
et le téléphone promettaient un futur plein d’opportunités et de
prospérité.
La révolution industrielle est peut-être née d’une vision utopiste du
progrès humain, mais ce sont bien souvent les humains qui en ont pâti.
Les artisans qualifiés comme les forgerons, les cordonniers, les
ferblantiers, les tisserands et bien d’autres ont progressivement abandonné
leur métier au profit d’usines qui pouvaient produire des biens plus
rapidement et pour un moindre coût. Alors que la machine se faisait une
place dans notre monde, la présence de la main humaine dans les objets de

Page 8 de 128
tous les jours s’effaçait peu à peu.
Mais certaines personnes ont refusé cette marche aveugle vers le progrès.
Au milieu du dix-neuvième siècle, alors que la production de masse se
généralisait, le mouvement Arts and Crafts cherchait à préserver le rôle de
l’artisan dans la production des biens domestiques, et avec lui la touche
humaine. Les fondateurs du mouvement Arts and Crafts vénéraient les
choses qu’ils concevaient, construisaient et utilisaient chaque jour. Ils
avaient compris que chaque artisan laissait un peu de lui-même dans son
travail, un vrai cadeau dont on peut profiter pendant de nombreuses
années.
On peut établir quelques parallèles avec le monde moderne. Pour
améliorer les récoltes et réduire les coûts de production, les fermes sont
devenues des entreprises sans visage qui font passer le profit avant le bien-
être humain. Pourtant, les petits fermiers locaux trouvent de nouveaux
marchés, car de plus en plus de consommateurs recherchent de la
nourriture produite par des gens, pour des gens. Alors que les grandes
enseignes distribuent des biens de consommation de masse jetables, des
sites comme Etsy ou Kickstarter donnent le pouvoir aux artistes, aux
artisans et aux inventeurs indépendants qui vendent des biens qu’ils ont
conçus et créés. Et leurs clients adorent ça. Quand vous achetez chez un
artisan indépendant, vous apportez votre soutien à la création et à une
famille (pas à une grande entreprise), et vous gagnez la possibilité de vivre
avec un objet qui a une histoire. Ça, ça n’a pas de prix.
Nous autres designers Web, nous nous trouvons dans une situation
similaire. Nous ne manquons pas d’occasions de concevoir des sites
rapidement et à moindre coût, sans aucun respect pour notre métier ou la
relation que nous construisons avec notre public. Nous pourrions
développer tous nos nouveaux projets à l’aide de photos libres de droits et
de templates génériques, en leur donnant un ton impersonnel. Nous
pourrions réduire notre industrie à une course à la productivité, comme
ceux qui ont fait la révolution industrielle en leur temps. Il y a un marché
pour ça.
Ou bien nous pourrions suivre une autre voie, la voie tracée par les
artistes, les designers et les architectes du mouvement Arts and Crafts, qui
pensaient que préserver la touche humaine et montrer sa personnalité
dans son travail n’était pas accessoire. C’est essentiel.

Page 9 de 128
Je suis ravi de constater que de nombreuses personnes suivent déjà cette
voie sur le Web. Nous allons étudier en guise d’exemple les principes
utilisés par ces visionnaires du design émotionnel, qui leur permettent non
seulement d’établir un lien humain avec leur public, mais également de
nourrir leur succès. Il y a un trait commun à tous ces principes – le design
émotionnel – qui utilise la psychologie et l’artisanat pour donner
l’impression qu’il y a une personne, et non une machine, à l’autre bout de
la ligne.
Il aura fallu attendre que notre support mûrisse pour que nous puissions
commencer à explorer le design émotionnel et à parler à notre public sur
un nouveau ton. Il était une fois un Web, pas si différent de celui que nous
connaissons aujourd’hui, où nous parlions différemment, car nous
n’avions pas encore appris à être nous-mêmes. Nous essayions encore
d’être des machines.

NOS DÉBUTS SUR LE WEB

Le Web a connu des débuts difficiles en matière de lien émotionnel. Il était
bien commode pour connecter des gens à des milliers de kilomètres de
distance, mais son invention répondait avant tout à des besoins
académiques – motif austère s’il en est. Alors que les pionniers
découvraient de nouvelles niches, le Web est rapidement devenu un lieu
bouillonnant de créativité. Je me revois écrivant sur mon site Web
personnel à la fin des années 1990, utilisant le pluriel de majesté en
essayant de donner l’illusion que j’étais une grosse entreprise, alors que
j’étais en pyjama dans ma chambre en train d’essayer de comprendre le
HTML. Je n’essayais pas d’être moi-même – j’essayais d’être comme tous
les autres gros bonnets.
Mais cette tendance s’est inversée sans crier gare. Tous ces gens qui ont
été remerciés après l’explosion de la bulle Internet ont créé de nouvelles
entreprises, ou se sont retirés dans leur chambre et sont restés en pyjama
pour créer des sites Web et des applications.
Je ne sais pas si c’est parce qu’il n’y avait plus de patron pour lire par-
dessus leur épaule, ou parce qu’ils avaient besoin de se remonter le moral,
mais le ton de ces nouveaux sites était résolument plus personnel.
C’est au cours de cette période que Flickr a été lancé, ce site familier et

Page 10 de 128
attachant qui vous met le sourire aux lèvres. Facebook et Twitter ont fait
leur apparition et ont eu un impact majeur sur la voix du Web. Ces
nouveaux outils sociaux permettent aux gens de partager les détails de leur
vie quotidienne. Cela ne semble peut-être pas très profond, mais c’est une
évolution considérable de notre façon de communiquer sur le Web. Avant
les réseaux sociaux, le professionnalisme nous poussait à être plus
réservés, mais aujourd’hui les conversations ressemblent plus à des
discussions entre amis. Bien sûr, une certaine modération est parfois de
mise (c’est à toi que je pense, Rainn Wilson, http://bkaprt.com/de/1; FIG 1.1).

: Cher Rainn Wilson : trop d’informations…

FIG 1.1
[Tweet : J’ai des gaz]

Le rideau a été levé, dévoilant notre humour, notre sale caractère, nos
inquiétudes, notre stress, et toutes les émotions qui apportent un peu de
sel à nos journées. Comme nous le verrons au chapitre 3, cette franchise se
retrouve dans les personnalités que nous élaborons pour nos entreprises,
et nos utilisateurs veulent de plus en plus pouvoir s’identifier à la
personnalité des sites Web et des applications qu’ils utilisent.
Ce livre regorge d’exemples d’une sensibilité de design distinctement
humaine, individuelle, honnête, représentative d’une vraie personnalité,
mais qui n’en oublie pas pour autant les objets commerciaux. Vous vous

Page 11 de 128
demandez peut-être comment mettre en œuvre des techniques de design
émotionnel sans faire enrager votre supérieur. Nous allons voir des
exemples concrets qui vous inspireront et vous donneront des arguments
pour utiliser le design émotionnel dans votre prochain projet. Je vous
offrirai même une flopée de données pour vous aider à construire un
argumentaire empirique en faveur du design émotionnel.
Sachez que nous ne sommes pas condamnés à répéter les erreurs de nos
ancêtres. À travers nos designs, nous pouvons établir un véritable lien
avec d’autres êtres humains.
Alors, par où commencer ? Eh bien, comme tout bon designer
d’expérience utilisateur, nous allons commencer par essayer de
comprendre les besoins des personnes pour lesquelles nous concevons.

HELLO, MASLOW
Dans les années 1950 et 1960, le psychologue américain Abraham Maslow a
découvert quelque chose que nous savions tous, mais que nous n’avions
encore jamais réussi à formuler : quels que soient notre âge, notre sexe,
notre origine ou notre statut social, nous avons tous des besoins de base à
satisfaire. Maslow a illustré ses idées sous la forme d’une pyramide qu’il a
appelée hiérarchie des besoins (FIG 1.2).

Page 12 de 128
 : Pyramide des besoins de Maslow.
FIG 1.2
[*accomplissement]

Maslow soulignait que les besoins physiologiques à la base de cette

pyramide devaient être satisfaits en priorité. Le besoin de respirer, de
manger, de dormir et de répondre à l’appel de la nature l’emporte sur tous
les autres besoins de notre vie. De là, nous avons besoin d’un sentiment de
sécurité. On ne peut pas être heureux si l’on craint pour son intégrité
physique, sa famille, ses biens ou son travail. Ensuite, nous avons besoin
d’un sentiment d’appartenance. Nous voulons être aimés et intimement
liés à d’autres humains. Cela nous aide à atteindre le niveau supérieur :
l’estime de soi, le respect des autres et l’envie de réussir sa vie. Au sommet
de la pyramide de Maslow se trouve une catégorie vaste mais importante :
l’accomplissement personnel. Une fois que tous les autres besoins sont
satisfaits, on peut satisfaire son besoin d’être créatif, de résoudre des
problèmes et de suivre un code moral pour servir autrui.
En utilisant l’approche de Maslow pour identifier les besoins humains, on
comprend mieux quels sont nos objectifs lorsque nous concevons des
interfaces. Nous pourrions certainement vivre heureux en ne répondant
qu’aux trois premières strates de la pyramide des besoins – le confort
physiologique, la sécurité et le sentiment d’appartenance. Mais c’est dans
cette couche supérieure que l’on peut vraiment vivre une vie riche et
satisfaisante.
Le design d’interface, c’est du design pour les humains. Que se passe-t-il si
l’on transpose le modèle de Maslow aux besoins de nos utilisateurs ? On
obtient quelque chose comme ceci (FIG 1.3):

Page 13 de 128
 : Nous pouvons réorganiser la pyramide des besoins de Maslow en
FIG 1.3
fonction des besoins de nos utilisateurs.

POSER DES BASES SOLIDES

Pour satisfaire les besoins d’un utilisateur, une interface doit être
fonctionnelle. Si l’utilisateur ne peut pas accomplir une tâche, il ne perdra
pas son temps avec une application. Vous vous souvenez quand Apple a
sorti Ping ? Ils voulaient construire un réseau social autour de votre
bibliothèque iTunes. Ce fut un flop magistral, en partie parce qu’on ne
pouvait pas partager une chanson avec ses amis sur Twitter ou Facebook.
Quand les utilisateurs ont compris qu’il manquait des fonctionnalités
basiques dans ce nouveau système, la plupart sont partis et ne sont pas
revenus.
Une interface doit être fiable. Pendant un temps, les premiers utilisateurs de
Twitter ont appris à haïr la « fail whale », une baleine qui s’affichait quand
le serveur était en panne ou en surcapacité. Si votre serveur Web crashe
régulièrement, ou si votre service est peu fiable, vos utilisateurs s’en iront.
Une interface doit être utilisable . Des tâches basiques doivent pouvoir être
accomplies de manière relativement simple et rapide, sans qu’il soit
nécessaire de réapprendre la procédure à chaque fois. Vous avez déjà
essayé d’acheter un billet d’avion sur le Net ? Si c’est le cas, je parie que

Page 14 de 128
vous avez traité votre ordinateur de tous les noms en attendant que
chaque page se charge. Vous n’êtes pas seul. Heureusement, Hipmunk
(http://hipmunk.com) rehausse le niveau.
Jusqu’à présent, l’utilisabilité était le summum du design d’interface. Vous
ne trouvez pas ça déprimant ? Si vous arrivez à faire une interface
utilisable, vous êtes un bon designer. Imaginez un peu si l’on utilisait les
mêmes standards dans l’industrie automobile... On se pâmerait encore
devant une R5.
Beaucoup de sites Web et d’applications offrent une expérience meilleure
encore. Ils redessinent le sommet de la pyramide des besoins pour y
ajouter le plaisir, l’amusement, la joie et l’enchantement. Et si une interface
pouvait vous aider à accomplir une tâche critique avec le sourire ? Ce
serait puissant. Ce serait une expérience que vous recommanderiez à un
ami ; ce serait une idée qui vaut le coup d’être partagée.
Il nous faut un nouvel étalon pour mesurer le succès de nos designs. Nous
pouvons transcender l’utilisabilité pour créer des expériences réellement
extraordinaires.

UTILISABLE = COMESTIBLE
Si vous travaillez sur le Web, vous avez peut-être déjà utilisé l’application
de gestion de projet Basecamp de 37Signals (http://basecamphq.com) (FIG
1.4).

Page 15 de 128
FIG 1.4 : Basecamp, une application Web de gestion de projet.

Pour élaborer Basecamp, 37Signals a axé sa philosophie de design sur la

simplicité et l’ergonomie. Leurs idées de design, résumées dans Getting
Real (http://bkaprt.com/de/2), ont incité toute une génération de
professionnels du Web à créer des designs simples et à s’assurer que les
tâches sont faciles à accomplir.
37Signals nous a aidés à nous attaquer au pied de la pyramide des besoins.
Avec un goût de la simplicité et du design spartiate, ils ont créé des
applications Web éminemment fonctionnelles, fiables et utilisables.
Malgré les demandes de certains utilisateurs qui voulaient de nouvelles

Page 16 de 128
fonctionnalités ou des changements de workflow, Basecamp est resté
fidèle à sa vision originelle. C’est à la fois une force et une faiblesse.
Comme l’interface n’a pratiquement pas changé en plusieurs années, elle
est prévisible, utilisable et ne demande presque aucun réapprentissage.
Mais une interface qui n’évolue pas risque de perdre de vue les besoins de
ses utilisateurs. On pourrait dire la même chose de la philosophie de
design de 37Signals. Elle nous a été d’une aide précieuse aux débuts de
notre discipline, mais le paysage du Web et notre relation avec celui-ci ont
changé. Simple et utilisable, c’est bien, mais nous pouvons faire mieux.
Nous devons ramener le design Web dans le royaume de l’enchantement.
Repensez au meilleur repas de toute votre vie. Pas juste un bon repas, je
vous parle d’un repas époustouflant, un repas qui a mis vos papilles à
l’épreuve et vous a donné l’impression de manger pour la première fois.
Qu’est-ce qui a rendu ce repas si mémorable ? Étaient-ce le goût et la
texture de la nourriture ? Des associations de saveurs inattendues ? Était-
ce la présentation artistique, le personnel prévenant, l’ambiance ? En fait,
il est probable que tous ces facteurs se soient conjugués pour provoquer
chez vous une réponse émotionnelle intense.
Posez-vous maintenant cette question : avez-vous pensé une seule fois à la
valeur nutritionnelle du repas ? J’en doute (si oui, il faut que vous sortiez
un peu plus). Ce repas a satisfait les besoins de votre corps, mais c’est
l’immense plaisir de l’expérience qui a formé un souvenir que vous
garderez toute votre vie dans un coin de votre cerveau.
Pourquoi ne cherchons-nous pas à avoir le même impact avec le design
Web ? Nous concevons des interfaces utilisables, comme un chef
cuisinerait de la nourriture comestible. Bien sûr, nous voulons tous
manger de la nourriture comestible ayant une valeur nutritionnelle, mais
nous voulons aussi qu’elle ait de la saveur. Pourquoi se contenter d’une
interface utilisable quand on peut faire une interface utilisable et agréable ?
Eh bien, Wufoo ne s’en contente pas. Son interface est utilisable et
amusante.

Wufoo : plus qu’utilisable

Wufoo (http://wufoo.com/), une application Web populaire qui aide à
créer des formulaires et à les connecter à des bases de données, est un pur

Page 17 de 128
exemple de design émotionnel (FIG 1.5). Comme Basecamp, Wufoo a une
fonction utilitaire. Ses utilisateurs veulent accomplir des tâches
rapidement. Créer des bases de données et concevoir des formulaires peut
être délicat et intimidant si vous n’êtes pas très porté sur la technique.
Mais Wufoo rend cette tâche simple et, contrairement à ses concurrents,
amusante.

: Wufoo, une application Web de création de formulaires qui est non

FIG 1.5
seulement utilisable, mais amusante.

Les flux d’activités sont simples et ciblés et l’interface est sobre.

L’application offre des fonctionnalités puissantes, mais elle repose sur un
sain équilibre en n’incluant pas de fonctionnalités obscures, susceptibles
d’embrouiller la majeure partie des utilisateurs et de servir à un public
restreint. Avec des millions d’utilisateurs qui créent des milliards de
formulaires, on peut affirmer sans crainte que Wufoo est fiable. Comme
Basecamp, il fait bien son boulot en étant fonctionnel, fiable et utilisable
par un vaste public.
Mais l’expérience utilisateur de Wufoo présente une grosse, très grosse
différence : la personnalité. Passez quelques minutes dans l’application et

Page 18 de 128
vous verrez de quoi je veux parler. Elle transparaît dans tout le contenu. Il
y a le message d’accueil « O, what men dare do! » en haut du tableau de
bord, un clin d’œil à William Shakespeare. Ou encore le texte par défaut
dans les champs de formulaire : « This is my form. Please fill it out. It’s
awesome! » (Voici mon formulaire. Merci de le remplir. C’est génial !). Notez
les couleurs primaires sur chaque page, les polices sans empattement et le
registre familier. Il n’y a pas beaucoup de coins saillants : ils sont
généreusement arrondis, ce qui donne un aspect cartoon. Même si vous
n’avez jamais rencontré les personnes qui ont créé cette application, vous
savez ce qui les anime quand vous vous connectez à votre compte. Leur
voix et leur perspective ressortent dans leur design. Wufoo est un bout de
code, mais il ressemble à un être bien vivant. Kevin Hale, qui a dirigé la
conception de l’expérience utilisateur et cofondé Wufoo, a pris l’état
émotionnel de ses utilisateurs en considération pour conceptualiser le
design.
L’inspiration de notre palette de couleurs nous est venue de nos concurrents.
Nous trouvions cela déprimant de voir tant de logiciels qui semblaient
conçus pour rappeler aux gens qu’ils créaient des bases de données dans un
bureau sans fenêtre, et nous avons immédiatement su que nous voulions
aller dans le sens opposé.
Dans son esprit, Kevin avait un portrait émotionnel des personnes pour
qui il concevait : ces « gens dans un bureau sans fenêtre », probablement
sous la coupe d’un patron tyrannique qui leur fait faire des inventaires
interminables. Ils sont pressés par le temps et leur travail quotidien ne leur
inspire rien de bon. En donnant une personnalité claire à l’application,
comme si elle disait « vous avez le droit de vous amuser un peu au
travail », Kevin apporte un peu de chaleur à des milliers de box ternes et
froids. C’est une chose que les gens n’oublieront jamais, et pour une
bonne raison.
Il y a de l’artisanat dans Wufoo, et je ne parle pas seulement de la
construction technique. Un artisan possède de grandes compétences
techniques et met un peu de sa personnalité dans toutes ses créations. Son
travail distille une qualité humaine que l’on peut voir et sentir. On pourrait
dresser la liste des éléments de design que Wufoo utilise pour composer
une personnalité à laquelle ses utilisateurs peuvent s’identifier, mais le tout
est plus que la somme de ses parties. Comme nous le verrons au chapitre

Page 19 de 128
4, Wufoo utilise l’engagement émotionnel pour laisser une impression
durable chez ses clients. En fait, il y a aussi quelque chose de scientifique
derrière tout ça. Il se trouve que les émotions et la mémoire sont
étroitement liées.

LES ÉMOTIONS ET LA MÉMOIRE

Les expériences émotionnelles laissent une empreinte profonde dans
notre mémoire à long terme. Nous générons des émotions et mémorisons
des souvenirs dans le système limbique, un amas de glandes et de
structures dans la matière grise du cerveau. Dans son livre Brain Rules, le
biologiste moléculaire John Medina dévoile la relation scientifique entre
les émotions et la mémoire :
Les événements portant une charge émotionnelle persistent beaucoup plus
longtemps dans nos mémoires et on peut se les remémorer plus précisément
que les souvenirs neutres.
Que se passe-t-il dans notre cerveau ? Le responsable est le cortex
préfrontal, la partie singulièrement humaine du cerveau qui régit les
« fonctions exécutives » comme la résolution des problèmes, le maintien de
l’attention et l’inhibition des pulsions émotionnelles. Si le cortex préfrontal
est le PDG, le gyrus cingulaire est son assistant personnel. L’assistant offre
au président certaines fonctions de filtrage et apporte son aide pour les
téléconférences avec d’autres parties du cerveau – tout particulièrement
l’amygdale, qui aide à créer et réguler les émotions. L’amygdale est pleine à
craquer de dopamine, un neurotransmetteur qu’elle utilise comme un
assistant utiliserait des post-it. Quand le cerveau détecte un événement
émotionnellement chargé, l’amygdale libère de la dopamine dans le système.
Comme la dopamine facilite grandement la mémorisation et le traitement
des informations, c’est un peu comme si on écrivait « souviens-toi de ça » sur
le post-it. Quand le cerveau colle un post-it chimique sur une information
donnée, cette information est traitée de manière plus robuste. C’est ce que
veulent tous les professeurs, parents et publicitaires.
Ajoutez les designers à cette liste, Dr Medina !
Il y a une raison toute pratique à ce que les émotions et la mémoire soient
aussi imbriquées – la survie de notre espèce. Si on n’en gardait aucun
souvenir, on serait condamné à répéter les expériences négatives sans

Page 20 de 128
pouvoir répéter sciemment les expériences positives. Imaginez-vous en
train de manger une bûche de bacon de deux kilos, et de ne pas avoir envie
d’en manger une autre le jour suivant. Ce n’est pas une vie, mon ami !
Les bébés établissent un lien émotionnel avec leurs parents quand ils
pleurent et obtiennent de la nourriture, une couche propre ou un câlin en
retour. La réponse des parents déclenche la libération de
neurotransmetteurs apaisants par le système limbique. Le cycle se répète,
le bébé commence à comprendre qu’il peut compter sur ses parents en cas
de besoin, et un lien émotionnel se forme.
Un même type de cercle vertueux existe dans le design d’interface. Un
stimulus émotionnel positif peut être désarmant. Il crée un engagement
avec vos utilisateurs, ce qui peut faire passer l’expérience pour une
discussion avec un ami ou un proche confident. Le design et le style fun de
l’interface de Wufoo s’apparentent peut-être à de l’habillage de fenêtre,
mais il s’agit en fait une habile manipulation. C’est une manière puissante
de construire un souvenir positif, ce qui augmente en retour les chances
que les utilisateurs de Wufoo continuent à utiliser l’application et à lui
faire confiance.
Comme nous allons bientôt le voir, de nombreux sites et applications Web
arrivent à la même conclusion. Ils ont compris qu’en transcendant
l’utilisable pour créer une expérience agréable, les gens sont plus
nombreux à s’abonner, consomment plus et restent plus longtemps.
Le design émotionnel, c’est bon pour les affaires. C’est ce que dit Chris
Lindland, P.-D.G de Betabrand (http://betabrand.com), une entreprise de
prêt-à-porter avec un savant emballage humoristique (FIG 1.6). Betabrand
propose environ trente minutes de lecture ainsi qu’une généreuse galerie
de héros ordinaires qui portent leurs fringues. Ça fait beaucoup de
contenu. En fait, Lindland décrit Betabrand comme un magazine en ligne
qui vend accessoirement des vêtements. En fin de compte, les vêtements
ne sont que les objets de l’expérience extraordinaire offerte aux clients sur
le site. Quand vous portez un pantalon Cordaround de Betabrand, vous
bénéficiez non seulement d’un « indice thermique inférieur de 22 % au
niveau de l’entrejambe » et d’une « réduction de 16,24 % du coefficient de
traînée », mais vous vous rappelez aussi que vous faites partie d’un groupe
sélect de personnes qui ont découvert cette merveille moderne de la
science et de la mode.

Page 21 de 128
 : Betabrand se définit comme un magazine en ligne qui vend
FIG 1.6
accessoirement des vêtements. Oh, et ils peuvent diminuer le coefficient de
traînée de votre entrejambe de – tenez vous bien – 16,24 %.

Il y a une anecdote derrière chaque produit, et Lindland sait que chaque

rire peut se traduire en vente et lui faire faire des économies en matière de
marketing.
Sur Internet, les expériences et les produits amusants font le tour de la
planète sans qu’on ait à débourser un centime. Cela fait pencher la balance

Page 22 de 128
 de « peut-être » à « tiens, et pourquoi pas ? » Les gens ressentent l’énergie
potentielle des produits sympas.
Nous explorerons la relation entre le design émotionnel et le retour sur
investissement (RSI) au chapitre 7, et nous verrons même quelques
chiffres bruts. Mais avant de nous intéresser aux données, étudions le
principe de design qui fait le succès de Betabrand.

LE PRINCIPE DE DESIGN ÉMOTIONNEL

Ils ne le savent peut-être pas, mais le design émotionnel est au cœur de la
stratégie de Betabrand. Quand vous commencerez votre prochain projet
de design, souvenez-vous de ce principe : les gens pardonneront vos
écueils, vous suivront et chanteront vos louanges si vous les récompensez
avec des émotions positives.
Pour engager émotionnellement votre public, vous devez afficher la
personnalité de votre marque. Dans les exemples de Wufoo et de
Betabrand, la personnalité est flagrante. Quand vous présentez clairement
la personnalité de votre marque, votre public peut s’y identifier comme s’il
s’agissant d’un autre être humain. Vous créez de l’empathie et vous aidez
votre public à voir une meilleure version de lui-même. Les humains
veulent communiquer avec leurs semblables. Nous oublions que les
entreprises ne sont que des rassemblements de personnes – alors pourquoi
ne pas laisser cela transparaître ?
Le design émotionnel peut transformer un utilisateur lambda en fanatique
qui parle à qui veut l’entendre de son expérience positive. En établissant
une relation de confiance, il encourage le public à rester, même quand les
choses tournent au vinaigre. Chris Lindland de Betabrand conforte là aussi
cette idée, avec cette histoire à propos d’un client de Portland que nous
appellerons Pink Panther :
Un client de Portland a appris l’existence de soldes sur les Cordarounds dix
jours après en avoir acheté un et nous a écrit pour demander une ristourne.
Il m’a dit que des entreprises comme Nordstom offraient ce genre de
réductions, alors je lui ai demandé s’il pensait qu’un site de vente en ligne
géré par une seule personne devait être tenu aux mêmes standards qu’une
entreprise pesant plusieurs milliards de dollars et employant des milliers de
personnes.

Page 23 de 128
 Notre différend suivait une voie prévisible, jusqu’à ce que je comprenne qu’il
ne nous achèterait plus jamais rien si je ne faisais pas quelque chose. Alors je
lui ai proposé un pari : si les Trailblazers de Portland arrivaient à battre les
modestes Clippers, il aurait non seulement une ristourne mais également un
pantalon rose. Si je gagnais, je lui offrais la ristourne mais il devait en retour
dire à deux personnes qu’il était devenu consultant pour Betabrand.
Il a suivi la victoire des Trailblazers à la radio avec sa femme et gagné son
pantalon Pink Panther.
À ce jour, il est resté l’un de nos clients les plus fidèles. Pourquoi ? Parce qu’il
a trouvé mieux qu’un service après-vente : un service après-vente marrant.
En plus de cela, notre meilleur client a également investi dans l’entreprise.
Le premier contact de Pink Panther avec Betabrand avait mal commencé,
et Lindland aurait pu faire ce que la majorité d’entre nous aurions fait : lui
dire d’aller voir ailleurs. Mais Lindland a changé de ton et parlé à la
panthère comme à un ami. Il y a gagné un client à vie et un investisseur
tout en restant fidèle à la personnalité de son entreprise. Le design
émotionnel, ce n’est pas simplement des slogans, des photos ou un style
particulier : c’est une façon différente de penser votre manière de
communiquer.
Bien sûr, le design émotionnel présente des risques. Si l’engagement
émotionnel compromet la fonctionnalité, la fiabilité ou l’utilisabilité d’une
interface, l’expérience positive que vous recherchez se transforme en un
désastre qui fera pester tous vos utilisateurs. Un pari amical avec un client
mécontent ne vous sortira pas toujours de la panade.
Nous aurons une discussion franche sur les écueils du design émotionnel
et les manières de les éviter. Mais avant cela, je vais vous aider à
comprendre le logiciel qui pilote la perspective humaine, puisqu’elle est le
cadre des stratégies que vous allez concevoir pour votre prochain projet.

Page 24 de 128
LES HUMAINS SONT DES ÊTRES COMPLEXES, pour qui il peut être difficile de
concevoir. Nous avons tous des personnalités et un bagage émotionnel
distincts, des dispositions uniques, alors comment peut-on concevoir
quelque chose qui satisfasse des perspectives si vastes ?
Sous les personnalités et les perspectives disparates, il y a des principes de
psychologie universels communs à tous les humains. Ces principes sont
des outils précieux dans notre quête de design émotionnel. Dans ce
chapitre, nous allons explorer le logiciel psychologique que nous
partageons tous et établir des bases sur lesquelles nous pourrons
construire des stratégies de design émotionnel.

CE QUI NOUS UNIT

S’il y a un trait commun à toute l’espèce humaine, c’est bien le fait de
manifester des émotions. Dans L’expression des émotions chez l’homme et les
animaux, Charles Darwin observe :
Le même état d’esprit s’exprime dans le monde entier avec une uniformité
remarquable ; et ce simple fait est intéressant car c’est une preuve de la
forte similarité des structures corporelles et des dispositions mentales de

Page 25 de 128
 toutes les races de l’humanité.
Ce que Darwin suggère, c’est que nous avons tous un lexique émotionnel
commun qui nous guide dans la vie. Nous ne développons pas ces
émotions après la naissance, en observant les autres. Nous sommes nés
prêts à exprimer la douleur, la joie, la surprise, la colère et d’autres
émotions. Les émotions sont un outil de survie essentiel. C’est ainsi que
nous communiquons nos besoins à nos parents et que plus tard, nous
construisons des relations bénéfiques. Bien que nous développions un
langage parlé en grandissant, les émotions sont notre langue native dès
notre arrivée dans ce monde. Elles sont la lingua franca de l’humanité.

DESIGN ET NATURE HUMAINE : LES VISAGES DE BÉBÉS

La psychologie évolutionniste peut nous apprendre à mieux concevoir et à
communiquer de manière plus efficace avec notre public. Nos cerveaux
ont évolué en même temps que notre apparence physique, sélectionnant
naturellement les instincts et les comportements les plus avantageux dans
le but de préserver notre espèce. On appelle ces instincts « nature
humaine ». Ils sont la pierre de Rosette qui nous aide à mieux comprendre
pourquoi nous nous comportons ainsi. Étudions un instinct familier et
voyons comment il peut guider notre travail de design.
Les parents aiment leurs enfants. Si vous n’êtes pas parent, vous vous
demandez peut-être pourquoi des gens sont prêts à endurer des nuits
blanches, changer des couches sales et offrir une attention constante, tout
en abandonnant les libertés et les délices de la vie d’adulte. Sur le papier,
c’est vrai que ça présente mal. Mais en réalité, c’est tout simplement
magique pour des raisons qui sont difficiles à expliquer.
Peu avant de commencer à écrire ce livre, je suis devenu papa. Laissez-moi
vous dire que c’est du boulot ! Mais quand je vois le visage de mon fils, j’en
oublie que je dors trois heures par nuit et que son pantalon est rempli de
choses inqualifiables. Tout ce que je vois, c’est une pure beauté qui vaut
tous les sacrifices.
L’évolution nous a donné des lunettes à bébés, qui nous aident à passer
outre ces inconvénients et déclenchent des vagues d’émotions positives
quand nous voyons le visage d’un petit être. Les proportions d’un visage
de bébé – de petits yeux, un petit nez, un front prononcé – sont un modèle

Page 26 de 128
que notre cerveau reconnaît comme étant très spécial. Les visages qui ont
de telles proportions sont perçus comme innocents, dignes de confiance,
mignons et adorables. Nous sommes programmés pour aimer les bébés.
Je sais que ça paraît dingue, mais certains scientifiques pensent que si nous
avons évolué de manière à aimer les visages de bébés, c’est à l’origine pour
éviter de les tuer. Être mignon, c’est la première ligne de défense d’un
bébé. Comme feu le biologiste évolutionniste Stephen Jay Gould l’explique
dans son essai intitulé A Biological Homage to Mickey Mouse, les dessinateurs
de cartoons exploitent ce principe depuis des décennies en créant des
personnages avec de grandes têtes, des petits corps et des yeux élargis qui
nous les rendent si sympathiques.
Les designers utilisent également ce principe, appelé pouvoir du visage de
bébé, à leur avantage. Connaissez-vous un site Web qui utilise une
mascotte mignonne pour établir un lien avec son public ? J’en connais des
tonnes. Twitter, StickyBits (http://stickybits.com/), Brizzly
(http://brizzly.com) et MailChimp (http://mailchimp.com) ne sont que
quelques exemples (FIG 2.1).

Page 27 de 128
 : Brizzly utilise le pouvoir des visages de bébés pour attendrir son
FIG 2.1
image de marque.

Il ne s’agit pas juste de rendre votre site Web plus mignon. Avec un peu de
réflexion, vous découvrirez que derrière chaque principe de design, il y a
un lien avec la nature humaine et nos instincts émotionnels. En fait, la
nature humaine se reflète dans chaque aspect du design.

LE MONDE EST NOTRE MIROIR

Nous nous projetons si souvent dans ce que nous voyons. Quand nous
contemplons le monde, c’est nous-mêmes que nous découvrons en retour.
Quand nous observons les nuages, quand nous inspectons le grain d’un

Page 28 de 128
morceau de bois noueux, notre esprit construit l’image d’un visage. Nous
sommes des narcisses accidentels qui recherchent ce qu’ils connaissent le
mieux : eux-mêmes.
Cet instinct est guidé par notre désir primordial de lien émotionnel avec
les autres. Nous sommes programmés pour détecter les émotions sur un
visage humain. Pour cette raison, comme nous le verrons au prochain
chapitre, les photos de visages humains dans un design peuvent
profondément influencer un public.
Nous n’avons pas besoin de voir deux yeux et une bouche pour ressentir
un lien émotionnel avec un design. Parfois, nous percevons la présence
humaine à travers des choses abstraites, comme la proportion. Pythagore
et les Grecs de l’Antiquité l’ont compris quand ils ont découvert le nombre
d’or, une division mathématique des proportions très répandue dans la
nature, y compris dans la forme humaine. Nous utilisons ce concept
depuis des milliers d’années pour créer des œuvres d’art, des bâtiments et
des designs qui sont universellement perçus comme étant beaux. Notre
esprit n’a peut-être pas conscience que le nombre d’or est présent dans un
monument comme le Parthénon ou un design comme celui de l’iPod, mais
notre subconscient voit immédiatement un modèle de beauté qui se
retrouve également dans nos propres corps. Si vous avez déjà lu The
Elements of Typographic Style, l’excellent livre de Robert Bringhurst, vous
savez que l’imprimerie utilise le nombre d’or depuis des siècles comme
base de la mise en page.
Les designers Web ont aussi récupéré ce concept. Quand Doug Bowman et
son équipe de designers ont conçu le nouveau design de Twitter, ils ont
utilisé le nombre d’or pour définir la structure de la mise en page (FIG 2.2).

Page 29 de 128
 : Le nouveau design de l’interface de Twitter utilise le nombre d’or
FIG 2.2
pour structurer la mise en page, ce qui le rend beau à l’oeil humain.

Notre définition de la beauté prend sa source dans notre propre image.

L’esprit humain est exceptionnellement doué pour analyser les objets et
les informations et découvrir un sens à des formes abstraites. Nous
pouvons trouver des traces de nous-mêmes dans presque tout ce que nous
voyons, et nous aimons ça.
Notre capacité à percevoir un signal et à discerner des motifs dans
tellement de bruit est un trait très important pour notre survie, et comme
on pourrait s’y attendre, cette aptitude à reconnaître les motifs affecte
grandement notre façon de créer.

LE CONTRASTE : BON OU MAUVAIS ?

Au-delà de notre capacité à exprimer des émotions, nous sommes
instinctivement doués pour rechercher les motifs. L’esprit humain est une
« machine à différences » de conception remarquable. Nos cerveaux

Page 30 de 128
scrutent constamment l’environnement à la recherche de motifs pour en
tirer des informations et nous protéger du danger.
Vos sens vous alertent quand votre frigo contient de la nourriture qui n’est
plus dans sa prime jeunesse. Personne ne vous a appris à reconnaître
l’odeur du lait qui a tourné, vous remarquez simplement que quelque
chose ne va pas. Quelque chose est différent et votre cerveau le sait.
Nous appelons contraste cette rupture d’un motif. Notre perception aigüe
du contraste influence nos prises de décision. Elle nous aide à choisir une
place dans une salle de cours (un siège est-il plus avantageux qu’un
autre ?), un restaurant pour le dîner (un restaurant propose-t-il une
meilleure cuisine qu’un autre ?) et même un conjoint (une compagne est-
elle plus attirante qu’une autre ?). Nous utilisons le contraste pour
répondre à une question fondamentale : est-ce bon ou mauvais pour moi ?
Nous percevons deux types de contraste :
le contraste visuel : différences de forme, de couleur, de texture etc. ;
le contraste cognitif : différences d’expériences ou de souvenirs.
Le zèbre possède des rayures contrastées pour se mêler à un troupeau, afin
de ne pas être pris en chasse par une lionne. Quand tous les individus sont
fortement contrastés, aucun ne sort du lot.
Les humains utilisent le contraste visuel d’une manière similaire. Les
habitués des excès de vitesse (comme moi) restent à proximité d’autres
voitures pour éviter d’être remarqués par la police. Si vous roulez trop vite
et tout seul, vous êtes une proie facile pour un flic à l’affût. (Je ne peux pas
vraiment recommander cette approche étant donné qu’il y a deux
contraventions sur mon bureau à l’heure où j’écris ces lignes.)
La police distribue des contraventions pour créer un contraste cognitif
dans notre cerveau. Elle espère que les sanctions encourues nous
dissuaderont de refaire la même erreur. Je reconnais humblement que leur
technique fonctionne. Mon pied droit s’est allégé de quelques kilos.
Le contraste est également un puissant outil de design. Il influence
l’activité de nos utilisateurs de manière simple et profonde. Les sites Web
comme Tumblr (FIG 2.3) qui cherchent de nouvelles inscriptions améliorent
leur taux de conversion en éliminant tout le contenu superflu sur la page
d’accueil. Le site présente simplement le produit et incite l’utilisateur à
agir. Le fort contraste visuel entre l’arrière-plan vide et l’énorme
formulaire central permet de comprendre facilement l’objet du site et

Page 31 de 128
l’action que Tumblr attend.

FIG 2.3: La page d’accueil simple et ingénieuse de Tumblr limite le contenu et

dirige efficacement l’attention de l’utilisateur.

La simplicité de la page aide aussi les clients potentiels à effectuer une

rapide analyse coût-bénéfices, une activité régulière à laquelle notre
cerveau s’adonne après la détection d’un contraste. Le peu de temps passé
à remplir le formulaire est un effort insignifiant à fournir par rapport aux
bénéfices potentiels du service, ce qui améliore les chances de conversion.
Le contraste est un outil puissant mais n’en abusez pas, car nos cerveaux

Page 32 de 128
ont des limites.

UN PROCESSEUR LIMITÉ
Quand vous maniez le contraste avec brio comme Tumblr, vos interfaces
sont plus simples à utiliser. Si vous augmentez le nombre d’éléments
fortement contrastés sur une page, vous augmentez proportionnellement
le temps requis pour accomplir une tâche, apprendre à se servir d’un
système et mémoriser des raccourcis. Si vous en ajoutez trop, vous
poussez le cerveau humain dans ses retranchements. Vous avez déjà été à
une fête où tout le monde crie pour se parler ? Quand le volume
augmente, tout le monde doit parler encore plus fort pour se faire
entendre, ce qui rend toute conversation encore plus difficile. Le design
fonctionne de la même façon. Si tout le monde crie pour attirer l’attention
du lecteur, il n’entendra rien.
La loi de Hick est un principe de design qui exprime ce concept. Elle
stipule que le temps requis pour prendre une décision augmente
proportionnellement au nombre d’alternatives. Avec sa page d’accueil
ultrasimple, Tumblr tient quelque chose. Bien que le cerveau humain soit
incroyablement puissant, son aptitude à trier rapidement un grand
nombre d’informations est limitée. Il est beaucoup plus dur de pousser un
utilisateur à agir si son cerveau doit filtrer du bruit. À cet égard, nous
sommes tout comme les lionnes affamées qui ne parviennent pas à cibler
le bon zèbre.
Tumblr a compris que l’attention était une ressource limitée. À chaque fois
que nous ajoutons du contenu sur une interface, il devient plus dur
d’identifier des motifs et des éléments contrastés. Le résultat, c’est un
comportement plus imprévisible de l’utilisateur, et une moins bonne
rétention de l’information. (Rappelez ça à votre patron la prochaine fois
qu’il vous demande de caser encore plus de contenu inutile sur la page
d’accueil de votre entreprise.)
Mais le contraste ne se contente pas de modeler notre vision des choses : il
influence également notre capacité à reconnaître des concepts abstraits
comme les marques.

CONTRASTE DE MARQUE

Page 33 de 128
Tout comme Tumblr utilise le contraste visuel pour influencer le
comportement de ses utilisateurs, nous pouvons utiliser le contraste
cognitif pour modeler les perceptions de notre public. En fait, c’est
l’objectif principal d’une marque : créer une identité qui se distingue de la
concurrence. Si votre marque établit clairement le contraste avec ses
concurrents, votre public l’identifiera et s’en souviendra facilement.
Le designer Web Ricardo Mestre a compris le pouvoir du contraste. Son
site Web (http://duplos.org) défie toutes les conventions du design Web
(FIG 2.4).

Page 34 de 128
 : Le design du portfolio en ligne de Ricardo Mestre défie toutes les
FIG 2.4
conventions.

Page 35 de 128
Le design de Mestre ne suit pas une grille fixe : il est organique. Ses
textures riches, ses arêtes brutes et ses couches de formes plates lui
donnent une allure de création sur papier plus que de site Web. Le
monstre violet qui surgit de derrière un arbre et le ton humoristique
laissent une empreinte émotionnelle sur son public et rendent son
portfolio inoubliable. Quand vos concurrents sont des designers Web, le
contraste cognitif est fondamental.
Un bon design qui utilise le contraste cognitif et visuel vous démarque des
autres, mais influence en plus la façon dont les gens utilisent votre
interface.

LE POUVOIR DE L’ESTHÉTIQUE
Même si leur style sont à des extrémités opposées du spectre, les sites de
Tumblr et de Mestre ont une chose en commun : ils sont agréables
esthétiquement. Tous deux utilisent habilement la couleur, la typographie,
les proportions, le vide et la composition. Les deux sont indubitablement
bien conçus.
Le design est trop souvent pris, à tort, pour une sorte de glaçage
complaisant qui ne sert qu’à recouvrir une interface fonctionnelle. Avez-
vous déjà entendu un collègue déclarer « ce serait sympa d’avoir une
interface sexy, mais les gens s’intéressent plus au fond qu’à la forme » ? Ce
collègue se présenterait-il à un entretien d’embauche en pyjama au
prétexte que les recruteurs s’intéressent à ses compétences et non à son
apparence ? S’il essayait, je pense qu’il comprendrait rapidement que son
raisonnement est à revoir.
Les perceptions sont décisives. Comme nous le verrons dans les prochains
chapitres, le design a une forte influence sur l’engagement émotionnel et
l’utilisabilité.
Comme Donald Norman, pionnier de l’utilisabilité et de l’interaction
homme-machine, le fait remarquer dans son livre Design émotionnel –
Pourquoi aimons-nous ou détestons-nous les objets qui nous entourent (paru en
franças aux éditions De Boeck), un beau design crée une réponse
émotionnelle positive dans le cerveau, ce qui améliore en plus nos
capacités cognitives.
Les choses attrayantes font du bien aux gens, et les font réfléchir de manière

Page 36 de 128
 plus créative. En quoi cela peut-il faciliter l’utilisation d’un objet ? Tout
simplement en permettant gens de trouver plus aisément des solutions aux
problèmes qu’ils rencontrent.
Norman décrit là l’effet esthétique-utilisabilité. C’est un fait, les choses
attrayantes fonctionnent mieux.
De nombreuses marques utilisent ce principe, mais aucune ne le fait mieux
qu’Apple.
Le design des interfaces d’Apple est connu pour être raffiné, sobre,
esthétiquement plaisant et utilisable. C’est ce design clair et élégant qui
rend leurs produits et leurs logiciels si simples à utiliser. Apple utilise
l’effet esthétique-utilisabilité dans tous ses produits, et c’est ce qui
continue à faire son succès.
Mais le culte voué à Apple est directement lié à leur maîtrise du design
émotionnel. Quand Steve Jobs concluait une démonstration de produit en
disant « nous pensons que vous allez l’aimer », il le pensait vraiment. Il
n’utilisait pas le verbe aimer par hasard, car leur philosophie de design
démontre qu’Apple comprend parfaitement la psychologie et les émotions
humaines.
En 2002, Apple a déposé un brevet pour une diode qui « respire ».
Quiconque possède un Mac connaît le voyant d’activité situé à l’avant des
portables et des ordinateurs de bureau Apple, qui clignote lentement pour
indiquer un état de veille. Les designers d’Apple se sont demandé dans
quel contexte cette lumière serait le plus souvent vue – dans un bureau
sombre, une chambre ou un salon où elle est l’une des seules sources de
lumière.
La fréquence des pulsations est très précise. Elle imite la respiration
humaine au repos : entre douze et vingt respirations par minute. C’est un
peu comme tapoter le dos d’un bébé en rythme. Cela imprime une
certaine humeur. Comme pour les proportions du Parthénon, un humain
n’associera pas forcément la pulsation du voyant à sa respiration, mais il
sentira son effet apaisant. Apple aurait pu se contenter de concevoir un
indicateur qui reste allumé quand l’ordinateur est en veille, mais a préféré
concevoir une solution qui communique et apaise, encourageant ainsi les
gens à se projeter dans le produit qu’ils utilisent.

Page 37 de 128
LES BASES D’UN DESIGN ÉMOTIONNEL
Dans ce chapitre, nous avons découvert quelques principes de designs et
traits communs à toute l’espèce humaine, et ils reparaîtront dans les
prochains chapitres.
Un bref aperçu de la psychologie évolutionniste nous a montré que notre
vision du monde était prédéterminée à la naissance, et qu’elle était
fonction de millénaires de survie et d’adaptation à notre environnement.
Notre penchant pour les visages de bébés illustre cette notion. À l’origine,
notre faculté à détecter le contraste provient également de notre besoin de
survivre, mais aujourd’hui, nous pouvons en tirer profit pour influencer le
comportement de nos utilisateurs et faire en sorte que notre marque se
détache du lot.
Nous avons appris que l’esprit humain avait des limites. Quand le
contraste est utilisé de manière excessive, nous éprouvons des difficultés à
analyser nos options, comme le dicte la loi de Hick. Et nous avons
découvert que l’esthétique était plus qu’un simple habillage – elle influence
l’utilisabilité, comme l’illustre le principe d’esthétique-utilisabilité.
Voilà ce que nous sommes. Nous sommes nés avec un logiciel qui nous
pilote, et les émotions sont le cœur de ce code. Elles sont une part
essentielle de ce qui fait de nous des humains, et elles jouent un rôle
fondamental dans un design efficace.
Même si toute l’espèce humaine utilise les émotions pour communiquer et
réagit de manière similaire dans certaines situations, le design émotionnel
demande un sens de la nuance et un soin tout particulier. Les
personnalités qui s’inscrivent dans ce logiciel cognitif sont bien plus
imprévisibles. Comme nous allons le découvrir dans le prochain chapitre,
la personnalité est la plate-forme de nos réponses émotionnelles les plus
diverses, et la clé d’un design plus humain.

Page 38 de 128
NOS RELATIONS DURABLES se fondent sur les qualités et les perspectives
uniques que nous possédons tous. C’est ce que nous appelons la
personnalité. À travers nos personnalités, nous exprimons toute la palette
des émotions humaines. La personnalité, c’est cette force mystérieuse qui
nous attire vers certaines personnes et nous fait fuir les autres. Comme la
personnalité influence grandement nos prises de décision, elle peut être un
outil de design puissant.

LA PERSONNALITÉ EST LA PLATE-FORME DES ÉMOTIONS

Le design d’interface dépend d’une discipline plus vaste appelée
interaction homme-machine, ou IHM, à cheval entre l’informatique, la
science du comportement et le design. Les spécialistes de l’IHM maîtrisent
la psychologie, l’utilisabilité, le design d’interaction, des concepts de
programmation et les principes fondamentaux du design visuel. Ça ne
vous évoque rien ? Ça ressemble diablement à ce que les designers
d’expérience utilisateur font tous les jours.
Je vais vous confier un secret. Je trouve que l’expression « interaction
homme-machine » n’est pas très heureuse. Quand je crée quelque chose, je

Page 39 de 128
m’attache à donner l’impression qu’il y a un être humain derrière
l’interface, pas un ordinateur. Vous trouvez peut-être que je pinaille, mais
les mots ont un sens. Ils structurent notre perception et nous permettent
de formuler les bonnes idées.
Le principal objectif du design émotionnel est de faciliter la
communication entre humains. Si nous faisons bien notre travail,
l’ordinateur passe à l’arrière-plan et les personnalités font surface. Pour
atteindre cet objectif, nous devons examiner notre manière d’interagir
avec les autres dans la vraie vie.
J’aimerais maintenant que vous marquiez une pause, et que vous pensiez à
quelqu’un avec qui vous avez récemment établi un vrai lien. Vous l’avez
peut-être rencontré en vous baladant, lors d’un évènement, ou peut-être
qu’un ami vous l’a présenté et que la conversation qui s’en est suivie était
plaisante, intéressante, voire carrément drôle. Qu’est-ce qui, chez cette
personne, a rendu cette conversation si grisante ? Vous aviez
probablement des intérêts communs qui ont initié la discussion, mais ce
n’est pas cela qui a rendu la rencontre si mémorable, n’est-ce pas ? C’est sa
personnalité qui vous a attiré, qui a guidé la discussion et vous a laissé avec
un sentiment d’euphorie. Vos personnalités se sont entrecroisées avec les
blagues échangées, le ton et la cadence de la conversation. Vous avez
baissé votre garde et commencé à lui faire confiance. Les personnalités
font les amitiés et sont les plates-formes des liens émotionnels.
Accrochez-vous à ce souvenir, et gardez-le en vous en lisant ce livre.
Revisitez-le quand vous commencez un nouveau projet de design. Ce
sentiment, c’est celui qu’on essaie de faire passer avec le design
émotionnel. On cherche à recréer cette excitation et à établir un lien avec
notre public en concevant une personnalité qui sera incarnée par notre
interface.
Ne voyons pas nos designs comme une façade interactive, mais comme
une personne avec qui notre public peut avoir une conversation inspirée.
Les produits sont eux aussi des personnes.
Là encore, l’histoire peut apporter un éclairage sur notre travail actuel. Il
se trouve que les designers expérimentent depuis des siècles avec la
personnalité pour créer des expériences plus humaines.

Page 40 de 128
BREF HISTORIQUE DE LA PERSONNALITÉ DANS LE DESIGN
Nous avons depuis longtemps coutume d’injecter de la personnalité dans
tout ce que nous créons, pour tenter de donner un aspect plus humain à
des choses mécaniques. Quand Johannes Gutenberg, orfèvre et père de la
presse à imprimer, expérimentait avec les caractères mobiles vers le milieu
du quinzième siècle, la main humaine l’a inspiré. Avant l’imprimerie, des
copistes (généralement des moines) recopiaient laborieusement chaque
page des manuscrits religieux à la plume. Transcrire une Bible était un
devoir sacré, car le scribe transmettait le message divin. Pour cette raison,
la présence de la main dans ces manuscrits revêtait une grande importance
spirituelle.
Alors quand Gutenberg a conçu et fondu ses premiers caractères, qu’il a
utilisés pour imprimer des centaines de Bibles, la forme des lettres imitait
le style calligraphique des copistes. Il avait créé des machines pour
apporter la parole divine, mais il s’attachait à rendre la présentation
humaine (FIG 3.1).

FIG 3.1 : Les caractères mobiles de Gutenberg imitaient la calligraphie des

Page 41 de 128
copistes afin de donner un aspect plus humain à ses Bibles produites
mécaniquement. (Source: http://bkaprt.com/de/3)

On voit une tendance de design distinctement humaine apparaître au

vingtième siècle, alors que la production de masse imprègne presque
toutes les industries.
La Coccinelle de Volkswagen, commercialisée en 1938 et produite jusqu’en
2003, est le modèle le plus vendu de toute l’histoire de l’automobile. Son
design clairement humain a contribué à son succès (FIG 3.2). Conçue pour
être la « voiture du peuple », son design anthropomorphique en fait plus
qu’une voiture pour le peuple : elle est le peuple. Ses phares ronds sont des
yeux et son pare-chocs esquisse un sourire, exemple type du visage de
bébé. Bien qu’elle ait été conçue à l’origine pour son aérodynamisme et
non sa personnalité, le « visage » de la Cox exprime une attitude
éternellement optimiste et sympathique qui lui a permis de plaire à
plusieurs générations, et ce malgré les changements culturels radicaux des
sept dernières décennies.

Page 42 de 128
FIG 3.2: La personnalité est au coeur du design de la Coccinelle, et c’est ce
qui fait son incroyable succès depuis plusieurs générations. (Source:
http://bkaprt.com/de/4)

Ce sourire accueillant réfléchit les émotions et établit un type de relation

particulier. Il est difficile de ne pas lui renvoyer son sourire, même si ce
n’est qu’un objet. Autour de cette simple interaction, nous lui avons
construit une persona émotionnelle à laquelle les enfants se sont eux aussi
attachés, et nous avons été jusqu’à tourner un film avec la Cox pour
héroïne, Un amour de Coccinelle. Nous avons tous des souvenirs de ces
expériences qui nous rappellent les émotions positives que la Coccinelle
nous inspire.
Les Bibles de Gutenberg et la Coccinelle sont des exemples intéressants,
mais il n’y a pas d’exemple de personnalité plus explicite dans le monde du
design que la campagne de publicité « Get a Mac » d’Apple. Dans les pubs,
Justin Long joue le rôle d’un Mac jeune et branché qui résout des

Page 43 de 128
problèmes complexes en claquant des doigts pendant que son faire-valoir –
John Hodgman, un PC complètement has been – ne rate pas une occasion
de se planter. Ces publicités expriment une forte personnalité et aident les
consommateurs à comparer les relations qu’ils pourraient avoir avec leur
ordinateur. Elles ne parlent pas de spécifications ni de fonctionnalités,
elles vous montrent comment vous vous sentirez si vous achetez un Mac.
Maintenant que nous avons une idée des précédents historiques, revenons
au temps présent, où nous travaillons dur pour comprendre notre public
et faisons de notre mieux pour créer des expériences Web alléchantes.

LES PERSONAS
Dans le design Web moderne, on fait des recherches, on planifie et on crée
en pensant aux attitudes et aux motivations de son public. Les designers
d’expérience utilisateur interrogent leur public, puis créent des personas –
des archétypes d’utilisateurs qui représentent un groupe plus large. Voyez
les personas comme des outils pour étudier les utilisateurs. Elles aident
l’équipe de design à garder son public cible à l’esprit et à rester focalisée
sur ses besoins.
L’exemple de persona présenté FIG 3.3, créé par Todd Zaki Warfel, designer
principal de messagefirst (http://messagefirst.com), raconte l’histoire de
Julia, une certaine catégorie d’utilisateurs. Dans ce document, on apprend
sa démographie, ses intérêts, son expertise dans divers domaines, et ce qui
peut influencer ses décisions sur des sujets ayant trait au projet – on
commence à comprendre qui est Julia. On a un aperçu de sa personnalité,
ce qui nous aide à comprendre ses motivations et guide les décisions de
design qui suivent.

Page 44 de 128
FIG 3.3: Les personas guident le processus de design et permettent de rester
focalisé sur les besoins des utilisateurs.

Page 45 de 128
Même si Julia n’est pas une vraie personne, mais plutôt une représentante
archétypale d’un groupe d’utilisateurs, elle est pourtant étroitement
apparentée à une personne que les types de messagefirst connaissent
personnellement. Ils créent toutes leurs personas de cette façon, ce qui est
plutôt pratique. Quand ils rencontrent un point épineux dans leur
processus de design et qu’ils ne sont pas sûrs des perceptions, des valeurs
et des comportements à attendre de leur public dans une interface
spécifique, ils peuvent simplement les appeler et leur poser des questions.
Non seulement cela leur permet de créer des solutions de design encore
meilleures, mais cela les aide en plus à rester focalisés sur les vraies
personnes qui utiliseront leurs créations.
Comme nous l’avons vu au chapitre 1 avec la hiérarchie des besoins, nous
savons que tous les utilisateurs ont besoin d’un design fonctionnel, fiable
et utilisable. En comprenant notre public, nous pouvons mieux répondre à
ses besoins. Ces informations nous aident également à aborder la tranche
supérieure de cette hiérarchie – le plaisir – en nous donnant une idée de la
personnalité la plus à même d’établir un lien émotionnel.
Les personas sont un outil classique du processus de design, mais n’offrent
qu’une vision partielle de la relation que nous construisons avec notre
public. Nous savons qui ils sont, mais qui sommes-nous ? Précédemment
dans ce chapitre, j’ai évoqué le fait que les produits pouvaient eux aussi
être des personnes. En suivant ce raisonnement, ne faudrait-il pas aussi
donner une persona à notre design ? Eh bien si, il faudrait.

CRÉER UNE PERSONA DU DESIGN DE VOTRE SITE WEB

Si votre site Web était une personne, qui serait-il ? Serait-il sérieux, tiré à
quatre épingles, focalisé sur le travail mais digne de confiance et
compétent ? Ou un copain boute-en-train qui égaie les tâches les plus
banales ?
En suivant une structure similaire à celle d’une persona d’utilisateur, vous
pouvez étoffer la personnalité de votre design avec une persona de design.
Dans une interface, la personnalité peut se manifester à travers le design
visuel, le texte et l’interactivité. Une persona de design décrit comment
exprimer cette personnalité dans tous ces domaines et aide l’équipe à
obtenir un résultat uniforme et cohérent. L’objectif est de construire une

Page 46 de 128
personnalité aussi affirmée que celle de Justin Long et de John Hodgman
dans les publicités « Get a Mac ».
Avant de jeter un œil à la vraie persona de design que j’ai créée pour
MailChimp, examinons les composants du document. Voilà ce que vous
devez inclure dans votre persona de design :
Nom de la marque : Le nom de votre entreprise ou service.
Aperçu : Un bref résumé de la personnalité de votre marque. Qu’est-ce qui
la rend unique ?
Image de personnalité : Photo d’une vraie personne qui incarne les traits
que vous souhaitez inclure dans votre marque. Cela rend la personnalité
moins abstraite. Choisissez une personne connue, ou au moins une personne
que votre équipe connaît. Si votre marque a une mascotte ou un
représentant qui incarne déjà cette personnalité, utilisez-le. Décrivez quels
attributs de la mascotte expriment la personnalité de la marque.
Traits de la marque : Listez cinq à sept traits qui caractérisent le mieux votre
marque, ainsi qu’un trait que vous souhaitez éviter. Cela aidera les designers
et les rédacteurs qui travaillent sur la persona à créer une personnalité
cohérente tout en évitant les caractéristiques qui emmèneraient votre
marque sur la mauvaise pente.
Carte de la personnalité : Nous pouvons projeter la personnalité sur deux
axes. L’abscisse représente le degré de sympathie ou d’hostilité de la
personnalité, l’ordonnée le degré de soumission ou de domination.
Voix : Si votre marque pouvait parler, comment parlerait-elle ? Que dirait-
elle ? Parlerait-elle une langue fleurie et populaire ou une langue raffinée et
érudite ? Décrivez les aspects spécifiques de la voix de votre marque et
comment elle pourrait varier dans différentes situations de communication.
Les gens changent de registre et de ton selon la situation, et votre marque
doit faire de même.
Exemples de texte : Fournissez des exemples de texte susceptibles d’être
utilisés dans différentes situations sur votre interface. Cela aide les
rédacteurs à comprendre comment votre persona de design doit s’exprimer.
Lexique visuel : Si vous êtes un designer qui crée ce document pour lui-
même et/ou pour une équipe de design, vous pouvez ajouter un lexique
visuel qui inclut un aperçu des couleurs, de la typographie et du style visuel
que la personnalité de votre marque doit exprimer. Vous pouvez rester sur
des concepts généraux, ou inclure une planche de tendance

Page 47 de 128
(http://bkaprt.com/de/5).
Méthodes d’engagement : Décrivez les méthodes d’engagement émotionnel
que vous pouvez utiliser dans votre interface pour appuyer la persona de
design et créer une expérience mémorable. Nous y reviendrons dans le
prochain chapitre.
Nous allons maintenant nous pencher sur un exemple concret. En tant que
designer principal de l’expérience utilisateur chez MailChimp, j’ai créé une
persona de design pour guider notre travail. En suivant la structure que
nous venons de voir, voici une version légèrement abrégée du document
que nous utilisons :
Nom de la marque : MailChimp
Aperçu : Freddie Von Chimpenheimer IV est le visage de MailChimp et
l’incarnation de la personnalité de la marque (FIG 3.5). La carrure robuste de
Freddie traduit la puissance de l’application et il marche d’un pas décidé
pour faire comprendre aux gens que cette marque en a dans le ventre.

FIG 3.4 : Freddie Von Chimpenheimer IV, la mascotte de MailChimp.

Freddie a toujours un sourire accueillant qui met les utilisateurs à l’aise. Le

style cartoon donne le sentiment que MailChimp offre une expérience

Page 48 de 128
amusante et décontractée. Freddie est peut-être un singe, mais il sait quand
même être cool. Il est toujours prêt à faire un bon mot, mais quand la
situation l’impose, il reprend tout son sérieux.
MailChimp surprend régulièrement les utilisateurs avec un « œuf de
Pâques » ou un lien vers une vidéo YouTube hilarante. On s’amuse à chaque
étage, mais cela ne gêne à aucun moment le workflow.
Image de la personnalité : FIG 3.4
Traits de la marque : Rigolo mais pas puéril. Déridé mais pas trop. Puissant
mais pas compliqué. Branché mais pas aliénant. Facile, mais pas simpliste.
Digne de confiance mais pas rasoir. Décontracté mais pas relâché.
Carte de la personnalité : FIG 3.5

Page 49 de 128
FIG 3.5 : Carte de la personnalité de MailChimp.

Voix : La voix de MailChimp est familière, amicale et par-dessus tout,

humaine. La personnalité des créateurs de la marque transparaît en toute
honnêteté. MailChimp fait des blagues (du genre que vous pouvez partager
avec votre maman), raconte des histoires et s’exprime avec le ton familier
que vous pourriez employer avec un vieil ami. MailChimp utilise des
contractions comme « don’t » à la place de « do not », parce que c’est ainsi
que les vrais humains parlent entre eux. MailChimp utilise des onomatopées,

Page 50 de 128
comme « hmmmmm.... » pour exprimer un moment de réflexion, ou « berk,
c’est dégoutant » pour induire une connivence. Les formulaires et les
boutons en minuscules renforcent ce sentiment de décontraction.
Exemples de texte : Message de réussite : « Tope-la ! Ta liste a été
importée. » Message d’erreur : « Oups, on dirait que tu as oublié d’entrer une
adresse mail. » Erreur critique : « Un de nos serveurs est temporairement en
panne. Nos ingénieurs sont déjà sur le coup et le relanceront très
prochainement. Merci de votre patience. »
Lexique visuel : Couleur : la palette de couleurs vive mais légèrement
désaturée de MailChimp respire l’humour et la joie. Les couleurs sont
raffinées, pas criardes. MailChimp est sympathique mais également puissant.
Typographie : MailChimp est accessible, efficace et facile à utiliser, et sa
typographie reflète tout cela. Avec des polices simples et sans empattement
qui varient en taille, en graisse et en couleur pour établir une hiérarchie des
informations, MailChimp est un peu comme un gilet familier et confortable
qui est à la fois fonctionnel et cher à votre cœur. Notes de style générales : les
éléments de l’interface sont plats et simples, afin que tout soit facile à
comprendre et ne soit pas intimidant. Des textures douces et subtiles
peuvent apparaître à certains endroits pour réchauffer l’espace et lui donner
un aspect humain. Freddie doit être utilisé à bon escient, et n’intervenir
qu’avec quelques touches d’humour. Freddie ne donne jamais de feedback ni
de statistiques et n’apporte pas son aide.
Méthodes d’engagement : Surprise et enchantement : des écrans de
connexion à thème commémorent certains jours fériés, événements
culturels ou êtres chers. Des œufs de Pâques créent des moments d’humour
inattendus qui peuvent exprimer une certaine nostalgie ou une référence
kitsch à la culture pop. Anticipation : les messages de bienvenue aléatoires de
Freddie au sommet de chaque page principale créent une anticipation de la
prochaine page à charger. Ces messages ne donnent jamais d’informations ni
de feedback. C’est une couche d’humour qui n’interfère jamais avec la
fonctionnalité ou l’utilisabilité.
Téléchargez un modèle de persona de design ainsi que l’exemple de
MailChimp sur http://aarronwalter.com/design-personas. Essayez-les sur
votre prochain projet, ou même sur un projet de redesign.
De même que les designers d’expérience utilisateur affichent leurs
personas à un endroit où les équipes de design, de développement et de

Page 51 de 128
stratégie de contenu pourront les voir tout au long du projet, votre
persona de design doit être visible pour rappeler à l’équipe le type de
relation que vous souhaitez construire avec votre public. La persona de
design doit guider tous ceux qui créent le moindre pixel, paragraphe ou
processus de votre site Web.
De nombreux sites Web utilisent déjà la personnalité pour modeler
l’expérience utilisateur et nourrir leur succès commercial. Bien qu’étant
différents en termes de marque, d’objectifs commerciaux et de plate-
forme, Tapbots, Carbonmade et Housing Works ont bien compris que la
personnalité était l’ingrédient clé des liens émotionnels qu’ils entretenaient
avec leur public et de leur immense succès.

Tapbots : les robots adorent

Tapbots (http://tapbots.com), des concepteurs de petites applications très
pratiques pour iPhone, ont donné une personnalité distincte à leurs
interfaces et apportent une touche amusante à des tâches qui seraient
autrement rébarbatives (FIG 3.6).

Page 52 de 128
 : Les applications de Tapbots ressemblent à de gentils petits robots
FIG 3.6
prêts à faire le sale boulot.

L’application Convertbot, comme son nom l’indique, permet simplement

de convertir diverses unités de mesure. L’application Weightbot aide ses
utilisateurs à suivre les fluctuations de leur poids. Aucune de ces tâches
n’est particulièrement plaisante, surtout suivre son poids, qui peut porter
un coup à son égo. Mais le design de ces applications leur a permis
d’attirer un public qui leur est resté fidèle et a fait leur succès.
Ces applications semblent avoir un visage. Les panneaux noirs au sommet
de l’application ressemblent à des lunettes de soleil à la Kool Moe Dee,
plantées sur un petit nez en triangle et une grande bouche. Si vous devez
suivre votre poids, un Kool Moe Dee cyborg peut être un bon partenaire.
Contrairement à d’autres applications pour iPhone, ces interfaces

Page 53 de 128
ressemblent à des petits robots humains. Un robot en particulier a inspiré
Mark Jardine, le designer des applications Tapbots, pour la personnalité de
son interface utilisateur :
Le concept de l’interface a en fait été inspiré par le film WALL-E. Notre idée
pour les deux premières applications était de les concevoir comme si elles
étaient de vrais robots.
Nous voulons que nos applications soient utilisées sérieusement, mais
également donner l’impression qu’elles sont plus qu’un morceau de code.
Nous voulons que nos utilisateurs aient un lien émotionnel avec nos
applications. La plupart des gens ne ressentent pas le bonheur que les geeks
éprouvent au contact des logiciels.
Les utilisateurs réagissent émotionnellement à ces interfaces aux airs de
cartoon et pourtant bien tangibles, agrémentées de bzz, de bips et de blips
robotiques. Vous voyez certainement le parallèle avec WALL-E, dans les
traits physiques et la personnalité. Les deux sont sympathiques, attachants
et fiables.
Le blog technologique de John Gruber résume le sentiment général au
sujet des applications Tapbots en une simple phrase
(http://bkaprt.com/de/6) :
J’adore le look et l’ambiance sonore de leurs applications.
L’ironie, c’est que Gruber ne mentionne même pas la fonctionnalité des
applications, même si son appréciation de celle-ci est implicite. Il utilise le
verbe « adorer ». Gruber n’aime pas ces applications, il les adore. Ces
interfaces anthropomorphiques donnent aux utilisateurs le sentiment
d’interagir avec un autre être humain doté d’une personnalité, ce qui
permet d’établir un lien émotionnel. Les interfaces qui parviennent à
toucher les émotions de manière efficace se créent non seulement un
énorme fan club, mais aussi une armée d’évangélistes.
Le prochain exemple est un autre modèle de personnalité. Carbonmade
parvient à construire une personnalité de marque efficace qui trouve un
écho auprès de son public, tout en baignant dans une mare de moustaches.

Carbonmade : poulpes, licornes et moustaches

La personnalité permet uniquement de forger des relations avec un public
dans la mesure où elle est unique et authentique. Si elle est utilisée comme

Page 54 de 128
un gimmick, elle peut avoir l’effet inverse. Comme nous l’avons vu au
chapitre 2, nos cerveaux sont programmés pour détecter les choses qui
sont bonnes ou mauvaises pour nous. Les gens remarqueront une
personnalité fausse et artificielle dans un design. Ils partiront
instantanément et ne feront jamais confiance à votre marque.
Carbonmade (http://carbonmade.com), une application Web ingénieuse
qui permet à ses utilisateurs de créer des portfolios élégants, exprime sa
personnalité dans tout le site, combinant la gravité d’un James Stewart
avec le charme explosif et délirant d’un Eddie Izzard. Des poulpes et des
licornes s’ébattent dans le paysage fantastique de leur page d’accueil (FIG 3.7)
– plutôt atypique pour un site qui a pour ambition d’attirer de nouveaux
inscrits.

Page 55 de 128
 : Carbonmade utilise une personnalité exubérante pour appâter les
FIG 3.7
nouveaux utilisateurs.

Page 56 de 128
Cette excentricité et cet humour pince-sans-rire sont l’œuvre de leur
designer Dave Gorum, et il s’avère que c’est cette personnalité qui pousse
les designers et les artistes sceptiques à s’inscrire. Gorum explique :
Ma règle consiste et a toujours consisté à ajouter de l’humour jusqu’au stade
où cela détourne l’attention du message.
C’est le côté décontracté et un peu déjanté qui pousse les gens à cliquer sur
le bouton Inscription. Mais la rigolade n’a pas sa place partout. On en met
une bonne couche sur notre site de marketing, un peu moins dans nos outils
d’administration et pas du tout dans le produit. C’est un peu comme une
énorme confiserie de toutes les couleurs qui renfermerait un cœur de nougat
sophistiqué de fabrication suisse !
L’humour et la personnalité de Carbonmade sont comme une coupe mulet
à l’envers : décontracté devant et sérieux derrière. En plaçant cette
personnalité exubérante en retrait dans leur application, ils permettent aux
utilisateurs de se concentrer sur leur travail au lieu de se perdre dans une
mer de moustaches, un point dont nous discuterons aux chapitres 4 et 7.
En revanche, le ton familier du site du produit établit un rapport qui incite
les gens à s’abonner au service, tout en mettant les concurrents sur une
fausse piste en laissant penser que Carbonmade n’est que frivolité sans
substance :
Le style familier permet d’établir facilement un dialogue avec notre public.
Nous sommes comme leur ami rigolo à qui on peut tout confier et qui peut
leur faire un super portfolio.
En plus, le côté déjanté donne à nos concurrents une raison de ne pas nous
prendre au sérieux. Ce qui nous convient paaarfaitement.
La personnalité de Carbonmade crée un contraste clair pour quelqu’un qui
veut les comparer à la concurrence. Et comme nous l’avons vu au chapitre
2, le contraste est une part essentielle du processus de prise de décision.
Même si l’humour est la pierre angulaire de la personnalité de
Carbonmade, il n’est pas approprié en toutes circonstances. Notre désir de
partager un peu de nous-mêmes avec les autres influence la personnalité
de nos designs, et nous aide à créer un lien avec notre public. Nous
sommes tous des personnes complexes pouvant éprouver une vaste
palette d’émotions. En matière de design émotionnel, il faut savoir créer
une personnalité sur mesure en fonction du contenu et du public.

Page 57 de 128
Peu de sites le font aussi bien que Housing Works, qui met un visage
humain sur une cause importante.

Housing Works : un nom avec un visage

Comme dans la vraie vie, on ne peut pas toujours ponctuer la personnalité
d’un site d’humour et de bons mots. Certaines situations requièrent une
tactique différente.
Housing Works (http://housingworks.org) est une formidable ONG
dévouée à l’éradication du SIDA et du mal-logement. Housing Works
change des vies tous les jours. Leur histoire est un modèle d’empathie, de
gentillesse et d’espoir pour tout le monde.
Quand Happy Cog (http://happycog.com) a refait le site de Housing Works
en 2008 (FIG 3.8), les personnalités de l’organisation et les gens pour qui
elles travaillaient ont été les muses du processus de design.

: Housing Works construit un lien émotionnel avec son public en

FIG 3.8
partageant les histoires des personnes exceptionnelles dont il s’occupe.

Page 58 de 128
Dan Mall, le designer principal de Housing Works, explique :
Il était très clair que le cœur de Housing Works est constitué des membres de
l’organisation et de tous ceux à qui ils rendent service. Il s’agit d’abord et
avant tout de chaleur, de soin et d’attention. Avec une telle orientation, il a
été facile de concevoir le site que vous voyez aujourd’hui.
Sur la page d’accueil, des grandes photographies accompagnées de
citations racontent comment Housing Works a changé la vie de telle ou
telle personne, exprimant la personnalité de l’organisation tout en étant
une source d’inspiration pour le visiteur. Les sourires et les histoires
personnelles défilent lentement, ce qui aide à établir une véritable
communication avec ces personnes.
Le cadrage des photos influence la perspective émotionnelle du public.
D’après le principe de prééminence du visage, un gros plan sur le visage
d’un sujet déclenche une réponse émotionnelle tout en mettant l’accent
sur la personnalité du sujet. Un cadrage plus large met l’accent sur
l’apparence physique du sujet. Les photos de la page d’accueil de Housing
Works sont cadrées à la perfection pour nous mettre en contact avec les
magnifiques personnalités des personnes dépeintes, et nous inciter à
soutenir leur cause.

LE POUVOIR DE LA PERSONNALITÉ
De même que, dans la vie quotidienne, nos personnalités s’adaptent selon
le contexte de communication, elles doivent s’adapter dans les projets que
nous concevons. On ne peut pas toujours avoir la même approche. Si nous
arrêtons d’envisager les interfaces que nous concevons comme de bêtes
panneaux de commande pour les voir plutôt comme des personnes avec
qui notre public a envie d’interagir, nous pouvons créer des expériences
émotionnelles capables de laisser une empreinte durable.
Sachez tout de même que mettre l’accent sur la personnalité dans
l’expérience utilisateur ne plaît pas systématiquement à tout le monde.
Mais ce n’est pas grave. Les personnalités s’affrontent et, dans le cas d’une
entreprise, cela peut même être salutaire. Si quelqu’un ne comprend pas
votre personnalité, ce n’est sans doute pas le client qu’il vous faut et vous
vous épargnez de futurs problèmes relationnels. Comme nous le verrons
au chapitre 7, la personnalité est un risque, mais il existe de nombreux

Page 59 de 128
exemples concrets qui tendent à prouver que ce risque vaut la peine d’être
pris.
En employant la personnalité comme fondement de votre design, vous
pouvez ensuite ajouter une couche d’engagement émotionnel, comme
nous allons le découvrir au prochain chapitre.

Page 60 de 128
COMME NOUS L’AVONS VU AU CHAPITRE 3, la personnalité est une manière
puissante d’engager votre public. Elle aide les gens à comprendre qui vous
êtes et influence leur façon d’interagir avec vous, tout en donnant le ton de
la voix, de l’esthétique et du design de l’interaction de votre site.
La persona de design que nous avons créée au chapitre 3 était le plan de
notre stratégie de design émotionnel. Nous sommes maintenant prêts à
utiliser ces fondations et à commencer à construire des schémas
d’interaction qui exploiteront le pouvoir de la psychologie pour créer des
souvenirs positifs et durables de votre site dans l’esprit des gens.
La vie elle-même peut être riche d’enseignements si nous examinons nos
propres réponses émotionnelles. Comment réagissons-nous dans les
moments de surprise, d’anticipation , ou bien quand quelque chose nous
est refusé ? Comment vous sentez-vous quand vous bénéficiez d’un statut
supérieur ou quand quelqu’un vous ordonne de faire quelque chose ? Ces
situations laissent une impression durable, et un examen plus approfondi
peut nous apprendre à bien utiliser le design émotionnel.

SURPRISE ET ENCHANTEMENT

Page 61 de 128
Avez-vous déjà remarqué qu’il est toujours plus plaisant d’entendre sa
chanson préférée à la radio que de l’écouter soi-même ? La surprise
amplifie notre réponse émotionnelle. Quand nous anticipons un moment,
la réponse émotionnelle se dilue au fil du temps. Un moment de surprise
condense des émotions en une fraction de seconde, ce qui rend notre
réaction d’autant plus intense et laisse une empreinte profonde dans notre
mémoire.
Au chapitre 2, nous avons appris que nos cerveaux recherchaient les
ruptures de motifs pour identifier les éléments visuels et cognitifs
contrastants afin que nous puissions réagir de manière appropriée. Quand
nous sommes surpris, nous vivons une situation de fort contraste dans
laquelle quelque chose ne se passe pas comme prévu. Un moment de
surprise monopolise notre attention, ce qui rend les éléments
périphériques flous et met l’extraordinaire au premier plan.
C’est un outil pratique que les designers d’interface peuvent utiliser pour
attirer l’attention et influencer le comportement des utilisateurs. Nous
savons que les gens qui utilisent des sites et des applications Web
naviguent et traitent le contenu rapidement, et que leur attention est
limitée. Introduire des surprises dans une interface peut rompre un
schéma comportemental et forcer le cerveau à réévaluer la situation.
La surprise est toujours suivie d’une réponse émotionnelle
proportionnelle. Quand le cerveau détecte un contraste saisissant, il doit
trouver un moyen de réagir rapidement. Comme il n’a pas assez de temps
pour une profonde contemplation intellectuelle, il se fie aux émotions
pour provoquer une réaction « instinctive ». Les designers d’interfaces
adorent créer ce genre de réponse chez leurs utilisateurs ; en effet, si elle
est bien faite, une surprise qui déclenche la bonne réaction instinctive
contourne les jugements cérébraux qui pourraient dissuader un utilisateur
de cliquer, de s’abonner à un service ou d’acheter un produit. Mais
souvenez-vous que notre objectif n’est pas de tromper ni de manipuler. Si
vous êtes manipulateur, le public s’en apercevra et ne fera pas confiance à
votre marque. Nous voulons créer des perceptions positives de notre
marque pour constituer une clientèle fidèle.
Photojojo maîtrise le kung-fu de la surprise, ce qui enchante ses
utilisateurs et contribue largement à son succès commercial.

Page 62 de 128
Photojojo : l’attaque des muppets serviables
Sur Photojojo (http://photojojo.com), un site Web conçu pour rendre la
photo numérique plus sympa, il y a des surprises dans tous les recoins de
la boutique en ligne. Avec la maturation du Web, le design de l’interaction
des commerces en ligne est devenu très standardisé, de manière à ce que le
processus d’achat soit facile à apprendre et à réutiliser. Mais Photojojo a
revu le schéma d’interaction classique du panier en ajoutant une surprise
astucieuse qui donne envie à leurs clients de continuer à acheter.
En haut de chaque page du site se trouve un panier avec une vraie
personnalité. Il est gris et maussade sans que l’on comprenne pourquoi au
début (FIG 4.1). Le mystère est résolu quand le client clique sur le bouton
« Add to cart » (ajouter au panier) et envoie un article dans le panier.
Immédiatement, la triste figure devient verte et sourit de plaisir. En effet,
le panier n’est content que lorsque son ventre est plein de produits que
vous allez acheter.

Page 63 de 128
FIG 4.1: Le panier de Photojojo fait la tête jusqu’à ce que le client ajoute un
article, ce qui lui fait arborer un sourire ravi.

Le design novateur du panier de Photojojo surprend les gens qui visitent le

site pour la première fois parce qu’il est différent de tous ceux qu’ils ont
vus. Cela attire leur attention sur l’agréable interaction qui survient quand
ils ajoutent un article dans le panier. Les utilisateurs veulent connaître ce
moment d’enchantement à nouveau, aussi ajoutent-ils d’autres articles
dans le panier. C’est exactement ce que veut Photojojo.
Le même schéma de surprise et d’enchantement se retrouve ailleurs sur les
pages des produits. Un mystérieux levier se trouve entre le bouton « Add
to cart » et la photo du produit. Il interdit formellement aux utilisateurs d’y

Page 64 de 128
toucher avec la légende « Do Not Pull » (ne pas tirer). Il est plutôt
inhabituel de trouver un élément qui demande à ne pas être actionné sur
une page Web. Seuls les acheteurs les plus disciplinés peuvent résister à la
tentation. Ceux qui tirent sur le levier sursautent en voyant un bras de
muppet orange remonter la page d’un coup sec pour révéler la description
du produit, qui se trouve dans la partie inférieure de la page (FIG 4.2).

FIG 4.2 : Un bras orange apparaît pour faire remonter la page quand
l’utilisateur clique sur le levier « do not pull ».

Un simple lien intitulé « description du produit » aurait permis aux

utilisateurs de découvrir ces informations détaillées qu’ils auraient
autrement pu manquer, mais le mystérieux levier, avec sa psychologie

Page 65 de 128
inversée, amène plus de gens à lire la description. Et d’après le fondateur
de Photojojo, Amit Gupta, cela améliore même leur taux de conversion.
Génial !
Tout le site est parsemé de petits bijoux qui le rendent drôle et poussent la
clientèle à revenir. Gupta explique comment le design émotionnel a élargi
son public et contribué à son succès :
Le design émotionnel fait partie de notre stratégie de marketing. Les gens
parlent à leurs amis de la bulle qui sautille vers le haut de la page quand
vous ajoutez quelque chose au panier, ils parlent à leurs abonnés Twitter et
aux lecteurs de leur blog du levier « ne pas tirer » sur nos pages produits, ils
disent à quel point ils aiment le sandwich et le dinosaure de notre page de
contact quand ils nous écrivent, et ils publient des photos de leurs facture
sur leur compte Flickr. Tout cela fonctionne de concert (avec des produits et
un service client géniaux) pour faire parler de l’entreprise et attirer de
nouveaux fans, clients et amis.
Une surprise agréable attend l’utilisateur au détour de chaque page, et cela
pousse les clients à constamment chercher la prochaine. Plus Photojojo
encourage le mouvement, plus les produits sont vus et les ventes
nombreuses. La surprise et l’enchantement sont au cœur du succès de
Photojojo.
Vous vous souvenez de Wufoo , qui nous a aidés à définir la notion de
design émotionnel au premier chapitre ? Voyons un peu comment Wufoo
laisse des surprises à ses clients, non pas dans l’interface, mais dans leur
vraie boîte aux lettres physique.

Wufoo : un surprenant message personnel

La surprise ne doit pas se limiter à l’expérience en ligne. Comme nous
l’avons découvert au chapitre 1, Wufoo est doué pour créer un engagement
émotionnel dans son application Web, mais il livre également des
surprises dans la boîte aux lettres de ses utilisateurs (vous savez, les boîtes
old school). Alors que des centaines de milliers de personnes utilisent leur
application, les personnes qui gèrent Wufoo envoient des lettres
manuscrites à tous leurs clients pour les remercier de leur fidélité. À l’ère
de l’automatisation et des communications électroniques, on a à peu près
autant de chances de trouver dans sa boîte aux lettres un message

Page 66 de 128
personnel d’un vrai employé d’une entreprise qui sert des milliers de
clients qu’une licorne miniature. Cela témoigne d’un soin et d’une
considération qui prennent le destinataire au dépourvu quand il ouvre sa
boîte aux lettres pour y découvrir un authentique communiqué manuscrit
du designer ou du développeur qui se cache derrière une application Web
(FIG 4.3).

Page 67 de 128
FIG 4.3: Les créateurs de Wufoo envoient des lettres manuscrites à leurs
clients. Avec l’aimable permission d’un utilisateur de Wufoo, Andrew Hyde
(andrewhy.de).

Page 68 de 128
Ces lettres mettent un visage humain sur la marque Wufoo. La surprise
déclenche une réponse chaleureuse chez le destinataire, qui se sent spécial
aux yeux de l’équipe de Wufoo. Ce sentiment déclenche
systématiquement le même comportement : une effusion d’éloges auprès
de qui voudra l’entendre. Même si elles n’étaient pas conçues à l’origine
comme un stratagème de marketing, ces lettres parcourent Twitter,
Facebook et Flickr, laissant une impression durable chez des gens qui ne
sont pas encore clients, mais qui ont envie de le devenir en voyant
l’attention que leurs amis reçoivent.
Surprendre les gens par sa gentillesse et une attention personnelle n’est
pas juste une bonne action, cela peut être la clé du succès. Wufoo a
découvert une chose : quand on crée une expérience émotionnellement
engageante, il n’y a plus besoin de budget marketing. (Oui, vous avez bien
lu : ils ont supprimé leur budget marketing). Leur public assure le
marketing à leur place.
L’anticipation, une proche parente de la surprise, est aussi dotée d’un
grand pouvoir. Un site Web en particulier s’est servi de l’anticipation pour
créer un engouement autour de son nouveau design et atténuer les
contrecoups potentiels. Mais de quel site s’agit-il ? Lisez la suite pour le
découvrir. (Vous voyez ce que je viens de faire ?)

L’ANTICIPATION, LE CORDON DE VELOURS ET LE STATUT

La surprise peut aider les utilisateurs en condensant leurs émotions en une
réaction d’une fraction de seconde, mais l’anticipation – l’inverse temporel
de la surprise – peut également façonner l’engagement émotionnel. On
suscite l’anticipation lorsqu’on annonce un événement attendu en donnant
au public un certain temps pour y réfléchir. Les parents excitent
l’impatience de leurs enfants à Noël avec des « le père Noël va venir
bientôt » pour les faire rêver à la magie des Fêtes et aux merveilleux
cadeaux à venir.
L’anticipation, c’est ce que les designers de jeux appellent un système
ouvert. Les jeux conçus avec une structure ouverte, comme Les Sims,
permettent aux utilisateurs de se promener et de modeler le gameplay
comme bon leur semble. Les systèmes ouverts encouragent les gens à
utiliser leur imagination pour créer une expérience personnalisée. Les jeux

Page 69 de 128
vidéo qui utilisent un système fermé, comme Super Mario Bros, dirigent
étroitement l’expérience de jeu, forçant l’utilisateur à se déplacer dans une
direction spécifique avec une mission particulière. C’est ce contraste entre
les systèmes ouverts et fermés qui nous pousse si souvent à trouver que le
livre est meilleur que le film. Les livres font appel à notre imagination,
alors que les films nous mâchent tout le boulot.
L’anticipation est aussi une sorte de système ouvert qui nous encourage à
utiliser notre imagination pour former une image d’un événement à venir.
On a beaucoup plus d’influence sur les gens en créant une anticipation
qu’en fournissant simplement des informations, car le doute qui plane
laisse l’esprit libre de jouer de manière propre à chaque individu. On sait
que quelque chose de spécial nous attend, ce qui suscite un puissant désir
de mettre fin au mystère pour voir si le résultat est conforme à nos
espoirs.
La célèbre plate-forme de réseau social Twitter a utilisé le pouvoir
émotionnel de l’anticipation pour préparer ses utilisateurs à la refonte du
design. En dévoilant petit à petit le design, ils ont créé un déluge de
conversations positives et d’engagement émotionnel qui en ont fait l’un
des redesigns les plus réussis du Web moderne.

Nouveau Twitter
Début 2010, l’équipe de Twitter préparait un remaniement majeur du
design sobrement intitulé « New Twitter ». Doug Bowman, directeur de la
création de Twitter, bûchait avec son équipe sur des concepts de design,
passant au crible chaque détail visuel et chaque schéma d’interaction. Le
spécialiste en design de Twitter, Mark Trammell, conduisait des tests
d’utilisabilité sur l’interface alors qu’elle était encore en cours de
développement, et la vidéo du test était diffusée en direct dans le studio de
design pour que Bowman et son équipe puisse affiner et améliorer le
design à la volée.
En raison des centaines de millions d’utilisateurs pour qui Twitter était un
élément essentiel de la vie quotidienne, les enjeux de la refonte étaient de
taille. Le nouveau Twitter risquait de connaître un lancement
particulièrement difficile, car l’utilisation fervente de leur service avait
enraciné chaque bouton, lien et titre dans l’esprit des utilisateurs. Tous les

Page 70 de 128
changements, même insignifiants, allaient être remarqués.
L’existence du projet a été révélée sur le Web quand Bowman a publié une
capture d’écran partielle (FIG 4.4) sur Dribbble (http://bkaprt.com/de/7), un
site qui permet aux designers de partager un aperçu de leur travail du
moment avec une image de 400 300 pixels. La rÈsolution limite imposÈe
par Dribbble a permis ‡ Bowman de partager un fragment du design sans
g‚cher toute la surprise. En laissant de la place ‡ l’imagination, elle a
engendrÈ beaucoup de spÈculations au sujet du reste de l’interface.

: Doug Bowman a fait fuiter une capture d’écran partielle du projet de

FIG 4.4
redesign de Twitter sur Dribbble en avril 2010, engendrant des spéculations
enflammées à son sujet.

Page 71 de 128
En quelques minutes, la capture d’écran a fait le tour du Web. Des articles
sur GigaOm et Mashable ont attisé la curiosité de centaines de milliers de
personnes : qu’allait apporter le nouveau Twitter ? Après cinq mois
d’attente, le nouveau Twitter a lentement commencé à être proposé à
quelques heureux élus. Certains étaient des personnes influentes, d’autres
semblaient avoir été choisis au hasard. Enfin, l’attente était finie !
Les premiers utilisateurs du nouveau Twitter (FIG 4.5) se sont vantés auprès
de leurs abonnés d’avoir gagné à la loterie, ajoutant le tag #NewTwitter à
tous leurs tweets, ce qui permettait de suivre facilement la conversation.
Le déploiement progressif était plutôt motivé à l’origine par un désir de
limiter les conséquences imprévues sur l’infrastructure et l’expérience
utilisateur, mais cet accès limité a également créé un effet « cordon de
velours » qui a eu une puissante influence émotionnelle. Les utilisateurs
qui bénéficiaient d’un accès prioritaire avaient un sentiment d’exclusivité
et d’élévation de leur statut, renforcé par les réponses jalouses de leurs
abonnés.

Page 72 de 128
FIG 4.5 : TLe résultat de la refonte du design de Twitter de 2010.

L’anticipation, l’exclusivité et l’élévation du statut des utilisateurs du

nouveau Twitter ont influencé la perception du nouveau design.
Naturellement, il y a eu quelques critiques, mais de l’avis général, le
nouveau Twitter était mieux que son prédécesseur (FIG 4.6). Les utilisateurs
qui découvraient le nouveau Twitter aimaient déjà le précédent, ce qui leur
a permis de mieux apprécier la myriade d’améliorations apportées au
design et à la fonctionnalité. Les tweets des utilisateurs privilégiés ont
poussé tous les autres à tomber amoureux du nouveau design avant même
d’avoir pu y accéder.

Page 73 de 128
 : Petit échantillon des réactions positives qui ont suivi la sortie du
FIG 4.6
nouveau Twitter.

Dire « vous pouvez » au lieu de « vous devez »

Twitter a fait quelque chose de particulièrement intéressant pour la sortie
de sa nouvelle version. Plutôt que de forcer tout simplement les personnes
sélectionnées à utiliser la nouvelle interface, ils ont donné à tout le monde
la possibilité de garder l’ancien design. Lorsqu’on donne aux utilisateurs le
pouvoir de choisir, le ton de leur réponse change. Si le changement est
forcé, les gens réagissent souvent de manière négative. En leur permettant
de s’adapter à leur rythme, vous leur laissez le choix et vous dissipez toute
animosité. On préfère tous entendre « vous pouvez » que « vous devez ».
En revanche, le rival de Twitter, Facebook, a beaucoup plus de mal à
implémenter ses révisions d’interface, car il force les utilisateurs à changer
selon son bon vouloir. Quand vous êtes pressé et que vous passez

Page 74 de 128
rapidement sur Facebook pour prendre des nouvelles d’un ami, les
changements de l’interface vous donnent l’impression que quelqu’un a
déplacé vos affaires. En fournissant à ses utilisateurs un lien pour rétablir
l’ancienne interface, Twitter leur a donné une sensation de contrôle. C’est
une approche de système ouvert appliquée à une situation délicate pour
préparer les gens au changement.
Comme nous allons le voir, on peut grandement améliorer l’expérience de
l’utilisateur en influençant son humeur avant qu’il ne s’attelle à une tâche
importante.

AMORÇAGE
Dans tous les exemples que nous avons vus, des expériences
émotionnelles positives poussent les utilisateurs à tomber amoureux d’un
produit ou d’un service. Si les méthodes varient, le résultat est le même :
leur public est profondément engagé. Un principe de psychologie
classique est à l’œuvre : c’est l’amorçage.
L’amorçage se produit lorsqu’une personne est exposée à un stimulus qui
influence sa réponse à un autre stimulus. Nous l’avons par exemple vu
avec les éléments d’humour du site Photojojo , qui améliore son taux de
conversion en ajoutant des interactions positives sur le chemin de l’achat.
Ces moments de surprise et d’enchantement amorcent les perceptions des
utilisateurs, qui arrivent plus facilement à s’identifier et à se fier au site.
En dévoilant une capture d’écran sur Dribbble, le nouveau Twitter a créé
une anticipation et un suspens, amorçant un lancement réussi. Les
premiers invités se sont sentis privilégiés, ce qui a préparé leur perception
de la nouvelle interface. Cela a ensuite encouragé une effusion de tweets,
qui ont ainsi amorcé les perceptions de tous ceux qui n’y avaient pas
encore accès. Voilà une chaîne d’amorces positives très efficace.
L’amorçage fonctionne en activant des parties de votre mémoire à l’aide
d’un stimulus initial afin que lorsqu’un second stimulus s’ensuit, votre
cerveau soit plus enclin à construire des associations. J’ai découvert les
bénéfices de l’amorçage des perceptions des utilisateurs par pur accident,
en menant des expériences qui ont eu des résultats intéressants et
totalement imprévus.

Page 75 de 128
MailChimp : amorçage accidentel
J’ai découvert le pouvoir de l’amorçage accidentellement en tant que
designer de l’expérience utilisateur de MailChimp. En 2008, nous avons
conduit une refonte importante du design et reconstruit l’essentiel de
l’application. Avec une marque marrante (on a un chimpanzé pour
mascotte, après tout) et une liberté de design absolue, nous avions pas mal
de marge pour tester des stratégies de design émotionnel.
Nous avons commencé à petite échelle, avec un élément visible mais
discret – un chimpanzé qui parle en haut de certaines pages de
l’application. Freddie Von Chimpenheimer IV, comme certains l’appellent,
sort la tête pour vous souhaiter la bienvenue et donne parfois des liens
vers des vidéos YouTube hilarantes (FIG 4.7). Comme nous savions que les
mascottes parlantes souffraient d’un lourd passé dans l’histoire des
logiciels, nous avons établi dès le départ des règles de base strictes pour
Freddie.

Page 76 de 128
 : Freddie Von Chimpenheimer IV accueille les utilisateurs et lance
FIG 4.7
quelques vannes, ce qui peut égayer une tâche a priori banale comme
envoyer ses emails.

Vous vous souvenez de Clippy, le trombone assistant de Microsoft Office

entre 1997 et 2003 ? Combien d’utilisateurs ont voulu lui refaire le portrait
au vitriol à cause de son mauvais timing ? Quand vous écriviez une lettre
dans Word, Clippy apparaissait sur le côté de l’écran pour dire : « Il me
semble que vous écrivez une lettre, voulez-vous de l’aide ? » En général, la
réponse était « dégage de mon chemin espèce de parasite ». (Et ça, c’est la
version édulcorée.) C’est toujours une mauvaise idée d’entraver le travail
d’un utilisateur occupé.
Clippy était notre anti-inspiration. Nous voulions faire l’inverse de ce qu’il
faisait dans Office. Nous ne voulions pas que Freddie donne des
suggestions, des statistiques ou qu’il la ramène en cas d’erreur. Il n’est pas
là pour aider, mais pour apporter une touche d’humour à un workflow
utilisable, et par-dessus tout, il ne doit pas être un obstacle pour nos
utilisateurs pressés.
Comme ses messages de bienvenue sont aléatoires, des surprises attendent
les utilisateurs à chaque coin de l’application.
Nous nous sommes éclatés à trouver des messages ridicules. Au début,
nous l’avons fait pour nous amuser. Bien sûr, nous voyions l’humour
comme un élément important pour nous démarquer de la concurrence, et
nous voulions que notre personnalité ressorte dans l’application. Mais la
vérité, c’est que c’était drôle d’écrire les répliques d’un primate et que nous
voulions nous faire plaisir avant tout.
Quand nous avons lancé la nouvelle version de l’application, nous avons
découvert une curieuse influence de Freddie sur l’expérience utilisateur.
Nous avons d’abord vu passer des tweets (FIG 4.8) de personnes qui se
réjouissaient de ces messages qui illuminaient leur journée de travail.

Page 77 de 128
 : Les utilisateurs de MailChimp ne tardent pas à partager leur réaction
FIG 4.8
aux commentaires de Freddie sur Twitter.
[*tweet : J’adore @mailchimp. Ils vous donnent des liens vers des vidéos qui
peuvent égayer une journée de travail harassante, comme http://ow.ly/2PJqK]

Mais ce qui nous a vraiment surpris et enthousiasmé, c’était de voir que

des blagues aléatoires pouvaient aider les utilisateurs à accomplir des
tâches plus longues et plus compliquées (FIG 4.9).

Page 78 de 128
FIG 4.9: L’humour de Freddie a eu une incidence surprenante sur le taux de
complétion des tâches.
[tweet : Oh singe de MailChimp. Alors que je m’énerve sur des adresses mail, tu es
là avec tes bons mots pour me remonter le moral.]

Freddie est comme le lapin blanc d’Alice : il attire l’utilisateur vers la page
suivante avec ses blagues. Nous nous sommes aperçus que de même qu’un
bon design améliore la perception de l’ergonomie de l’interface (voir le
chapitre 2 pour la définition de l’effet esthétique-utilisabilité), une interface
émotionnellement engageante pouvait avoir le même effet. Les messages
aléatoires sur chaque page permettent de garder une dynamique enjouée
qui aide les gens à surmonter les obstacles et à accomplir leurs objectifs.
Quand des récompenses surviennent à intervalle régulier avec des degrés
de plaisir variés, comme ces petits messages, elles piquent la curiosité des
gens, qui veulent savoir quelle sera la prochaine. Elle sera peut-être
vraiment géniale ? Il faut que j’aille voir !
C’est un phénomène psychologique appelé récompenses variables, qui fait
tout l’attrait des machines à sous. Les gens adorent jouer au bandit
manchot parce que le gros lot se trouve peut-être derrière le prochain
coup de levier. Des sites de réductions populaires comme Groupon
(http://groupon.com) et Scoutmob (http://scoutmob.com/) utilisent eux
aussi les récompenses variables. Tous les matins, les abonnés ouvrent leur

Page 79 de 128
boîte mail en se demandant quelle offre incroyable les attend. Des fois
c’est génial, des fois pas du tout. Des récompenses régulières mais
incertaines attisent l’excitation des gens, car ils attendent toujours la
prochaine avec impatience.
Les innombrables blagues de Freddie produisent le même effet.
L’incertitude qui entoure la blague suivante utilise le pouvoir des
récompenses variables pour encourager les utilisateurs à passer à l’étape
suivante de leur workflow, un résultat exceptionnel que nous n’avions pas
escompté.
En expérimentant avec les messages de bienvenue, nous en avons
introduit quelques-uns qui faisaient référence à des caractéristiques
spécifiques des utilisaturs. Nous espérions, comme en jetant une bouteille
à la mer, que tôt ou tard un message ciblé tomberait exactement sur la
bonne personne, et que son influence en serait intensifiée. Un message
portait sur la coupe de cheveux, ce qui donné lieu à quelques tweets
mystifiés quand il s’est affiché au bon moment (FIG 4.10).

FIG 4.10: Un commentaire de Freddie sur la coupe de cheveux de l’utilisateur

ne marchera pas toujours, mais fait forte impression le jour où il fait
mouche.
[tweet : Ouaouh, je viens de me connecter sur MailChimp et le petit singe dans le
coin me dit « Salut Kate, nouvelle coupe de cheveux ? Muy Guapo ! » Comment
ils savent ça ?!]

Page 80 de 128
Nous n’avions aucun moyen de savoir quand ce message serait le plus
approprié, mais ce n’est pas comme cela que Kate l’a perçu. Comme ce
message coïncidait parfaitement avec sa vraie vie, Kate a eu l’impression
que quelqu’un lui parlait directement derrière l’écran. Dans cette situation,
l’application, ce bloc de code inerte, s’est transformée en une personnalité
bien vivante, capable d’établir un lien humain. Pour Kate, c’était comme
une vraie communication avec une autre personne.
Le hasard n’a pas toujours joué en notre faveur. Parfois, les messages
avaient une résonnance inappropriée auprès de certaines personnes. Un
message plaisantait sur le fait que le petit chapeau de Freddie lui faisait des
grosses fesses. Certaines personnes l’ont pris pour un commentaire sur
leur apparence physique et ont envoyé des courriers outrés à l’équipe
d’assistance. Ces utilisateurs étaient dans un état d’esprit tel qu’ils
prenaient tous les commentaires sur la taille des fesses comme une
réflexion personnelle. Nous n’avions aucun moyen de le savoir, mais nous
réfléchissons maintenant plus sérieusement aux conséquences imprévues
que chaque message pourrait avoir.
Comme nous le découvrirons au chapitre 7, on prend un certain risque à
utiliser le design émotionnel quand on s’adresse à un public large.
Certaines personnes réagiront positivement à la personnalité, d’autres
non. Mais le risque de rencontrer quelques réactions négatives est
insignifiant par rapport aux bénéfices. Les émotions positives que nous
cultivons avec nos messages d’accueil l’emportent sur les quelques
réponses négatives. En fait, les messages de Freddie ont plutôt tendance à
préparer les utilisateurs à percevoir l’application comme drôle, utilisable et
fiable, ce qui était l’effet voulu.
Nous avons réalisé à quel point cet amorçage était efficace quand nous
avons constaté un changement dans le ton que nos clients employaient
pour s’adresser à notre équipe d’assistance. Les gens libèrent leur Freddie
intérieur, font des blagues et des jeux de mots avec des bananes. Grâce à
l’amorçage, les utilisateurs se disent « MailChimp est drôle, alors je dois
être drôle pour parler à MailChimp ». Bien sûr, notre service client préfère
travailler avec un client de bonne humeur qui a un sens de l’humour
qu’avec un type grincheux qui attend de passer ses frustrations sur un
technicien qui n’a rien demandé.

Page 81 de 128
L’effet d’amorçage des messages d’accueil ne profite pas qu’aux clients :
nous en tirons aussi profit. Nous pouvons plus facilement aider les gens à
résoudre des problèmes quand ils sont bien disposés, ce qui raccourcit la
durée moyenne du cycle de support. Les messages de Freddie égaient la
journée de nos clients, mais également la nôtre.

IL N’Y A PAS DE FORMULE MAGIQUE

Nous avons à notre disposition des stratégies qui permettent de créer un
engagement émotionnel. La surprise, l’enchantement, l’anticipation,
l’élévation du statut et la limitation de l’accès pour induire un sentiment
d’exclusivité sont des moyens efficaces pour pousser votre public à tomber
amoureux de votre marque. Il n’y a pas de formule en design émotionnel,
juste des principes de psychologie et la nature humaine pour guide. Les
exemples de ce chapitre ne sont pas là pour être imités, mais pour vous
faire réfléchir à la manière d’exprimer la personnalité de votre marque
dans vos interfaces en trouvant un écho auprès de votre public.
Vous vous tromperez parfois, mais ce n’est pas grave. Vous pourrez ajuster
votre trajectoire. Commencez à petite échelle avec de schémas
d’interaction simples qui utilisent certaines de ces idées, et voyez
comment votre public réagit. Quand vous toucherez au but, la récompense
sera de taille.
En refermant ce chapitre inspiré par des sites comme Photojojo, qui utilise
l’humour pour créer une personnalité attachante, j’aimerais introduire un
brusque rappel à la réalité. Dans certaines situations, un ton léger et
familier sera inapproprié. Que faire si vous travaillez sur le site d’une
banque qui doit inspirer la confiance et vaincre le scepticisme ? Et même si
une touche d’humour convient à votre site, que faire si votre public est
tout simplement indifférent à votre message ?
Voilà de véritables défis ; mais le design émotionnel peut vous aider,
comme nous allons le voir au prochain chapitre.

Page 82 de 128
LE DERNIER CHAPITRE vous a peut-être donné un avant-goût idyllique du
design émotionnel. C’est juste une histoire de blagues et de singes, pas
vrai ? La sombre réalité, c’est que toutes les marques ne peuvent pas se
permettre d’afficher une personnalité humoristique. Nous devons parfois
faire appel à des émotions différentes pour inspirer l’assurance et la
confiance chez notre public.
Comme nous l’avons découvert au chapitre 2, nos cerveaux décomposent
les situations complexes en concepts simples afin que nous puissions
évaluer les coûts et les bénéfices d’une décision. Pour nous protéger du
danger, nous sommes préprogrammés pour être sceptiques face à de
nouvelles marques, de nouveaux produits, de nouvelles situations et
même de nouvelles personnes.
Baladez-vous sur le parking d’un concessionnaire de voitures d’occasions
et votre sixième sens vous alertera quand vous verrez le vendeur arriver
avec son discours prémâché. Vous savez reconnaître une marque
malhonnête qui essaie de vous fourguer un produit trop beau pour être
vrai. Nous sommes tous capables de détecter le baratin à des kilomètres.
C’est à cela que vous vous confrontez quand vous essayez de convaincre

Page 83 de 128
votre public de cliquer, de s’abonner ou de faire confiance à votre marque.
C’est vous contre l’instinct de votre public. Pour courtiser un public
sceptique, paresseux ou indifférent, vous devrez être persuasif sans laisser
votre stratégie de marketing transparaître. Avant que nous puissions
apprendre à surmonter ces obstacles, nous devons disséquer et examiner
le processus de prise de décision.

SUIVRE SON INSTINCT

Nous aimons penser que comme nous sommes l’espèce la plus évoluée de
cette planète, nous parcourons la vie en suivant une logique soigneuse,
sans nous laisser influencer par notre bagage émotionnel. C’est une idée
noble, mais loin de la vérité. En réalité, nous n’avons presque jamais le
temps de faire appel à un raisonnement complexe pour prendre des
décisions, alors nous nous fions à notre instinct. Souvenez-vous des
décisions que vous avez prises aujourd’hui, et vous verrez que votre
instinct est dans le siège conducteur.
Quelle chemise je devrais mettre ? Hmm, la bleue est pas mal. Qu’est-ce que
je peux manger comme petit déjeuner ? J’ai envie d’œufs et de bacon. Mince,
on dirait qu’il y a un bouchon. Je vais essayer de prendre cette sortie...
L’intuition guide bon nombre de nos décisions quotidiennes. Vous portez
cette chemise simplement parce que vous en aviez envie. Vous aviez
d’autres options envisageables, mais si vous aviez raisonné de manière
logique pour étudier toutes les propositions, vous ne seriez jamais sorti de
chez vous. Le problème, c’est qu’il y a souvent plusieurs options logiques,
et que la logique peut nous laisser dans une impasse, sans voie claire à
suivre. L’émotion doit servir d’arbitre quand il y a plusieurs options qui se
valent toutes. Quand vous n’êtes pas sûr de savoir quelle est la meilleure
option, vous utilisez votre instinct pour en choisir une qui paraît
suffisamment bonne. Si nous ne faisions pas un peu confiance à notre
instinct, nous ne serions pas prêts de finir quoi que ce soit.
Alors que se passerait-il s’il les émotions n’étaient pas là pour nous aider à
prendre des décisions ? Antonio Damasio, professeur de neurosciences à
l’université de Californie du Sud, a étudié des personnes présentant des
blessures dans les zones du cerveau responsables des émotions. Les
décisions les plus élémentaires les contrarient. Le seul fait de devoir

Page 84 de 128
choisir une date de rendez-vous avec leur docteur déclenche un débat
interne sur les mérites des diverses options. De même, impossible de
choisir un restaurant pour le déjeuner, car ils n’ont jamais fini de peser le
pour et le contre. Quand il y a beaucoup d’options toutes aussi acceptables,
rien ne parvient à faire prendre une décision à ces personnes. Sans
l’arbitrage d’une réponse émotionnelle instinctive, elles ne peuvent pas
décider.
En tant que designers, nous sommes dans une position unique pour aider
les utilisateurs à suivre leur instinct. En utilisant des outils de design
courants comme la mise en page, la couleur, les lignes, la typographie et le
contraste, nous pouvons aider les gens à absorber plus facilement les
informations et à prendre des décisions guidées par leur instinct plutôt que
par leur raison. De même que vous avez choisi votre chemise parce que
vous en aviez envie, nous pouvons encourager notre public à s’abonner à
un service ou à compléter une tâche parce que leur instinct leur dit que
c’est la bonne chose à faire. Souvenez-vous que nous n’avons pas besoin
de donner des arguments exhaustifs, car la raison est rarement le principal
moteur des décisions prises par notre public. Nous devons juste faire appel
à leurs émotions pour les convaincre que les avantages l’emportent sur le
coût (FIG 5.1).

Page 85 de 128
 : Pour convaincre les sceptiques d’agir, inutile d’avoir un argumentaire
FIG 5.1
béton : vous devez juste offrir des bénéfices supérieurs au coût afin que la
réaction instinctive des gens face à votre design penche en votre faveur.

Si vous avez déjà conçu un formulaire d’inscription, vous savez que

convaincre quelqu’un d’agir est un véritable défi. Des modifications
subtiles du design des boutons, des mots ou de la mise en page peuvent
faire exploser ou chuter vos taux de conversion. Mais parfois, le secret
d’un meilleur taux de conversion ne se trouve pas dans les menus détails,
mais dans la vue d’ensemble. La façon dont la typographie, la couleur et la
mise en page s’accordent en dit long sur une marque et influence la
perception des nouveaux utilisateurs.

Mint : l’argent n’est pas matière à rire

L’application Web de gestion d’argent Mint (http://mint.com) a relevé un
sacré défi. Un service qui regroupe vos informations financières et vous

Page 86 de 128
demande de partager l’accès à tous vos comptes bancaires attire forcément
l’attention des sceptiques. Pour que Mint réussisse, il fallait qu’il inspire
confiance.
Dans la théorie, les investisseurs adoraient le concept de Mint. Un service
gratuit qui aide les gens à comprendre comment ils dépensent leur argent
aurait un énorme attrait et pourrait rapporter beaucoup d’argent en
recommandant des produits financiers aux utilisateurs pour les aider à
faire des économies. Mais les investisseurs en capital risque avaient des
réserves au sujet de Mint, car on n’avait jamais confié des données aussi
personnelles à un service gratuit (le mot « gratuit » éveille le sceptique qui
est en nous).
Jason Putorti, le designer de Mint, savait que le design serait un élément
crucial pour leur succès :
Obtenir la confiance de nos utilisateurs potentiels était le principal obstacle
que nous devions surmonter. Nous avons dû nous battre pour trouver des
capitaux, car les investisseurs pensaient tout simplement que les gens ne
partageraient jamais leur identifiants bancaires. La confiance relève de
l’instinct plutôt que d’un processus rationnel, et le design visuel affecte les
émotions d’une manière très puissante, peut-être plus encore que n’importe
quel autre stimulus.
Putorti a conçu Mint avec l’intention de se démarquer de ses principaux
concurrents comme Quicken et TurboTax, mais également d’autres
applications sur le Web. Quand Mint a été fondé en 2006, le design
minimaliste et fonctionnel inspiré des applications de 37Signals était la
norme. Avec son expérience dans une agence de design, Putorti a apporté
une esthétique différente au projet. À l’époque, les concepteurs
d’applications Web prenaient garde à ne pas utiliser trop d’images pour
créer des effets de dégradé ou afficher une police de caractères spéciale. La
vitesse était la priorité et les textures, les illustrations et les
expérimentations typographiques se faisaient rares dans les applications
Web. Mais Putorti n’avait pas tous ces préjugés quand il a conçu Mint.
Dans Mint, vous remarquerez la luminosité de l’interface, créée par des
points lumineux, des dégradés et des ombres. Même s’il y a beaucoup de
données, ce n’est pas vraiment le tableur Excel de Papa. Des effets brillants
font ressortir les graphiques dans la page, sur laquelle on s’attarde pour le
plaisir des yeux. Souvenez-vous, quand Mint est sorti en 2006, Gmail et

Page 87 de 128
Basecamp étaient les parangons du design dans le domaine des
applications Web. Mint contrastait fortement avec les designs plats de
toutes les applications Web que nous avions l’habitude de voir (FIG 5.2).

: ML’interface de Mint utilise des effets de lumière, des ombres

FIG 5.2
portées et une palette de couleurs raffinée pour se démarquer de la
concurrence, tout en gagnant la confiance des sceptiques.

Le design de l’interface soigneusement étudié et l’exécution impeccable

ont transformé les sceptiques en abonnés. Mint proposait des outils

Page 88 de 128
stimulants pour examiner ses habitudes de consommation et offrait des
moyens de faire des économies. Ce sont indubitablement des avantages
convaincants. Si ces données étaient prisonnières d’une interface mal
conçue, comme c’est le cas de la plupart des logiciels financiers,
l’historique de sa vie financière serait difficile à lire, ce qui diminuerait la
valeur de l’application. Sans véritable valeur ajoutée, les inquiétudes en
matière de sécurité auraient presque certainement raison des avantages, ce
qui diminuerait les chances de convertir les sceptiques. Le design était
déterminant pour la réussite de Mint.
Le design manifestement soigné laisse penser que la même attention est
portée en coulisses, là où Mint gère la sécurité et la vie privée de ses
utilisateurs. Mint est évidemment très attaché à la protection de vos
informations, mais plutôt que de le répéter à tout bout de champ, le design
le dit plus efficacement.
Vous feriez plus confiance à un garde du corps qui porte un costume
Armani noir sorti du pressing qu’à un type en jean déchiré avec un t-shirt
délavé des Grateful Deal, n’est-ce pas ? L’apparence peut avoir une grande
influence sur nos perceptions, et nous appliquons ce même modèle mental
quand nous évaluons un site. Le design soigné de Mint inspire juste assez
de confiance pour que ses avantages l’emportent sur la crainte de coûts
éventuels dans l’esprit des gens.
Putorti a beaucoup parié sur l’idée que le design pouvait être une raison
suffisamment convaincante de s’inscrire sur Mint. Même si la sécurité était
importante, elle était pour lui un défi secondaire :
L’esthétique visuelle était essentielle. Une application de gestion financière
est un défi différent ; les informations elles-mêmes doivent être présentées
d’une manière utile mais aussi plaisante et stimulante pour l’utilisateur.
Les gens ne s’abonnent pas à ce service pour une question de sécurité, mais
pour avoir des informations pratiques sur leur argent. Si vous offrez une
incroyable valeur ajoutée à vos utilisateurs en échange de quelques
informations, la plupart des gens s’inscriront.
Au final, les utilisateurs pensaient instinctivement que Mint semblait
suffisamment sécurisé et que les tableaux et les graphiques attrayants
apportaient assez de valeur ajoutée pour prendre le risque de s’inscrire.
Même si les réserves des investisseurs au sujet de Mint étaient fondées sur

Page 89 de 128
une logique imparable, Mint a défié la raison en faisant appel aux émotions
des utilisateurs. En novembre 2009, Mint a été acquis par Quicken – son
principal concurrent – prouvant à tout le monde que le design et les
émotions étaient tout aussi précieux que la raison et la logique, et parfois
même plus encore.
Si nous pouvons faire du gringue aux sceptiques avec un design réfléchi au
service d’une proposition à forte valeur ajoutée, il nous faut, pour les
utilisateurs paresseux, adopter une autre attitude.

LA VOIE DU MOINDRE EFFORT

Le scepticisme n’est pas le seul obstacle auquel nous soyons confrontés
quand nous essayons de pousser notre public à agir. La paresse en est un
autre. En vérité, les gens ne sont pas aussi paresseux que nous aimons le
penser. Ils cherchent simplement la voie qui offre le moins de résistance
vers leur destination. Quand les gens hésitent à agir, il suffit parfois de les
pousser un peu.

Dropbox : la corruption mène à tout

Dropbox (http://dropbox.com), un service qui offre des espaces de
stockage de fichiers synchronisés entre ordinateurs, appareils mobiles et le
cloud, n’a pas eu de mal à attirer des abonnés avec sa formule gratuite de
250 Mo. Les nouveaux clients comprennent aisément que les bénéfices
sont supérieurs au coût. De l’espace de stockage gratuit ? Quelque chose à
ajouter ? La réaction instinctive à Dropbox est initialement positive.
Mais il y a un léger hic. Pour commencer à utiliser Dropbox, vous devez
installer un logiciel sur au moins un ordinateur – plus si vous voulez
synchroniser des données entre plusieurs machines – et vous devez
également installer l’application mobile pour accéder aux fichiers depuis
votre téléphone. La séquence des tâches à accomplir est confuse. Même si,
prises individuellement, les différentes étapes sont relativement simples, il
faut jongler entre les appareils pour compléter l’installation, et Dropbox
peut facilement perdre des gens en chemin. Comme un nouveau client
doit investir un certain temps pour commencer à l’utiliser, les efforts
requis peuvent commencer à sembler plus importants que les bénéfices.
Dropbox n’est pas un « logiciel en tant que service » ordinaire. C’est une

Page 90 de 128
application Web, mais c’est également une application de bureau et
mobile. C’est un territoire encore inconnu pour beaucoup de personnes, et
il faut un certain apprentissage pour utiliser le service et comprendre en
quoi il vous facilitera la vie. Dropbox n’a aucun problème pour attirer le
chaland ; ce qui est difficile, c’est de le retenir et de l’inciter à s’investir.
Dropbox utilise une approche novatrice pour que leur public s’investisse
dès l’inscription. Ils ont créé un jeu avec une récompense sympa pour tous
ceux qui le finissent. Quand un nouveau client se connecte sur Dropbox,
on lui confie six tâches simples à accomplir (FIG 5.3).

: Dropbox incite les nouveaux utilisateurs à s’investir dans leur

FIG 5.3
système avec un jeu qui offre de l’espace supplémentaire en récompense.

Pour gagner plus d’espace de stockage, les utilisateurs doivent suivre une
visite guidée, installer Dropbox sur leur ordinateur, mettre des fichiers
dans leur dossier Dropbox, installer le logiciel sur d’autres machines,
partager des dossiers avec des amis et enfin leur recommander le service.
Une jauge de progression indique l’avancée vers la récompense de 250 Mo.

Page 91 de 128
Pour l’utilisateur, c’est comme un jeu, mais Dropbox réduit ainsi le
nombre d’abandons de compte en apprenant aux gens à se servir du
système et en leur faisant comprendre l’intérêt qu’il présente pour leur vie
numérique. Une fois que vos fichiers sont sur Dropbox et que vous les
avez partagés avec des amis, il vous en coûte plus d’abandonner votre
compte que de continuer à l’utiliser.
Appelez ça corruption ou théorie des jeux, le résultat est le même. Les
utilisateurs ressentent un sentiment d’accomplissement quand ils ont
réalisé les tâches requises (FIG 5.4), et avec plus d’espace, ils sont d’autant
plus excités de mettre leurs fichiers sur Dropbox. Le jeu continue si
l’utilisateur décide de faire la promotion du service sur Twitter et
Facebook pour inciter d’autres personnes à s’abonner. Comme nous le
verrons au dernier chapitre, la théorie des jeux, la corruption et
l’accomplissement marchent aussi sur les sites « brochure ».

: La jauge sur la gauche de l’écran progresse jusqu’à afficher le logo de

FIG 5.4
Dropbox une fois toutes les tâches accomplies.

Page 92 de 128
Il peut être difficile de composer avec les sceptiques, mais au moins, ils
font attention à ce que vous dites. Que faire si votre public n’en a tout
simplement pas grand chose à faire ?

L’APATHIE
Le scepticisme et la paresse sont des obstacles difficiles à affronter, mais il
y a est pire encore : l’apathie. Quoi de plus démoralisant que de lancer un
site Web ou une application sur laquelle vous avez passé des heures
innombrables, tout ça pour voir votre dur labeur dériver sur une mer
d’indifférence ?
Les utilisateurs sont indifférents aux sites Web dont le contenu est sans
rapport avec leurs intérêts ou mal présenté. La stratégie de contenu peut
vous aider à créer un contenu adapté à votre public. C’est au-delà du
propos de ce livre, mais lisez le livre Stratégie de contenu Web d’Erin
Kissane si la création de contenu vous pose des difficultés
(http://bkaprt.com/cs) ou (www.editions-
eyrolles.com/Livre/9782212132793/strategie-de-contenu-web) en français).
Au cœur des exemples que nous avons vus jusqu’à présent, il y avait
toujours un excellent contenu. Des méthodes de transmission intelligentes
mettent en valeur ce contenu, soit en offrant de nouvelles manières de
l’aborder, soit en retenant l’attention du public. Un excellent contenu
présenté de manière émotionnellement engageante, c’est de la kryptonite
pour apathiques.
Revenons aux exemples des chapitres précédents. Vous vous souvenez de
Betabrand, au chapitre 1 ? C’est un site e-commerce qui vend des
vêtements pour homme, un marché hautement compétitif. Betabrand
retient l’attention de son public avec un contenu bien ficelé. Il y a
pratiquement trente minutes de contenu hilarant pour chaque ligne de
produits. Leurs clients achètent parce que le contenu les fait marrer, et
reviennent parce que l’expérience du site est mémorable. Le public de
Betabrand est tout sauf indifférent.
Dans l’exemple de Housing Works au chapitre 3, le contenu est au cœur de
leur stratégie de design émotionnel. Les histoires à la première personne et
les portraits des clients permettent à l’organisation de créer un lien
émotionnel avec son public. Ce sont ces histoires humaines qui attirent le

Page 93 de 128
public sur leur site Web, et poussent les gens à s’impliquer dans leur cause.
Si votre public n’est pas follement emballé par votre site, ne désespérez
pas. Dans la prochaine section, je vais vous aider à repartir sur la bonne
voie.

SI VOUS N’Y ARRIVEZ PAS DÈS LE DÉPART…

Si, après avoir implémenté les idées et les recommandations de ce livre,
vos visiteurs sont toujours indifférents à l’égard de votre site, posez-vous
les questions suivantes :
La personnalité de ma marque est-elle authentique et adaptée au profil
de mon public ?
La personnalité de ma marque est-elle trop similaire à celle de mes
concurrents ?
Mon contenu est-il bien écrit et adapté aux besoins et aux intérêts de
mon public ?
Est-ce que les méthodes de design émotionnel que j’utilise interfèrent
avec la strate inférieure de la pyramide des besoins (rendant le site
moins fonctionnel, fiable et utilisable) ?
Vous aurez peut-être du mal à répondre honnêtement à ces questions,
auquel cas vous pourriez réaliser une simple étude des utilisateurs, ainsi
que des tests d’utilisabilité pour vérifier vos hypothèses. Avez-vous accès à
des personnes faisant partie de votre public cible ? Réunissez trois à six
personnes, autour d’une table ou sur Skype (http://skype.com) ou
GoToMeeting (http://gotomeeting.com). Posez des questions ouvertes à
vos utilisateurs et vous aurez une bonne idée de ce que vous devez faire.
Vous pouvez demander des choses comme :
Décrivez votre réaction initiale face au site Web.
Que vous fait ressentir ce site Web ?
Si ce site Web était une personne, qui serait-il et pourquoi ?
Recommanderiez-vous ce site Web à un ami ? Pourquoi ou pourquoi
pas ?
Y a-t-il des sections ou des fonctionnalités du site qui sont plus
importantes que d’autres pour vous ? Moins importantes ? Pourquoi ?
Évitez de poser des questions qui pourraient influencer la réponse de
l’utilisateur. Par exemple, une question comme « pensez-vous que la

Page 94 de 128
personnalité de ce site Web est agréable ? » fausse la réponse vers
l’affirmative, car la formulation de la question modèle les perceptions de
l’utilisateur. Vous vous souvenez des techniques d’amorçage détaillées au
chapitre précédent ? Il vaut mieux les éviter ici afin de recueillir des
informations honnêtes et des remarques précises sur votre site Web.
Effectuez des tests d’utilisabilité simples avec trois utilisateurs en suivant
les méthodes du best-seller Je ne veux pas chercher ! de Steve Krug (éditions
CampusPress). Les résultats vous aideront à mieux cerner si vos stratégies
de design émotionnel affectent ou non l’utilisabilité, la fiabilité ou la
fonctionnalité de votre site Web. Krug recommande de réunir quelques
utilisateurs du site, d’acheter quelques confiseries, d’inviter les gros
bonnets de votre organisation et de réaliser des tests d’utilisabilité très
simples qui guident les utilisateurs à travers les workflows que vous
souhaitez évaluer. Enregistrez les sessions avec un logiciel comme
Silverback (http://silverbackapp.com), et visionnez les vidéos pour évaluer
l’expression faciale des utilisateurs à des instants clés. Ont-ils souri à ce
moment de surprise et d’enchantement ou l’ont-ils simplement ignoré ?
Faites des tests simples et pratiques pour vous assurer d’aller jusqu’au bout
et d’obtenir les idées qui vous permettront d’améliorer votre site Web.
Autre méthode moins scientifique que de cibler des personnes de votre
public : aller tout simplement au café du coin et offrir un latté et des
muffins à quelques bons clients contre dix minutes de leur temps. Au bout
du compte, mieux vaut n’importe quel test que pas de test du tout.
L’indifférence à l’égard de votre site peut être vexante, mais la plupart du
temps, vous pouvez en comprendre la raison en interrogeant votre public.
Bien sûr, il peut être difficile de trouver le temps de parler à des vraies
personnes. Mais quand vous vous heurtez à un mur d’indifférence, c’est
peut être la meilleure manière de corriger le cap et d’aller de l’avant.

MEA CULPA
Le design émotionnel ne consiste pas seulement à créer des expériences
positives et à surmonter les obstacles. Il peut également nous aider à gérer
des situations difficiles comme les pannes de serveur, les pertes de
données ou les bugs qui affectent le travail d’un utilisateur. L’erreur est
humaine et rien n’est parfait. Mais une réponse appropriée et le capital de

Page 95 de 128
confiance que vous avez accumulé avec votre public grâce à un
engagement émotionnel prolongé peuvent vous sortir d’un mauvais pas,
comme nous allons le voir dans le prochain chapitre.

Page 96 de 128
TÔT OU TARD, votre site Web rencontrera un problème. Les serveurs
tombent en panne, les gens font des erreurs, et l’imprévisible se produit.
Dans une telle situation, mieux vaut avoir un public acquis à sa cause, car
il vous pardonnera une insuffisance temporaire et gardera confiance en
votre marque.
Comme nous l’avons vu précédemment, votre public effectue une analyse
coût/bénéfices interne chaque fois que vous lui demandez d’accomplir une
tâche. Le résultat de cette évaluation interne détermine si l’utilisateur agit
ou non. Quand un problème survient et que votre public est incommodé,
il y a un risque que les utilisateurs perçoivent soudainement que le coût de
l’utilisation de votre site en excède les bénéfices. Un engagement
émotionnel présent avant et pendant l’événement peut aider à limiter la
casse.
En fait, quand vous créez une expérience mémorable, votre public aura
souvent tendance à oublier les inconvénients et à ne se souvenir que des
bons côtés de votre marque. Tant qu’il y a plus de bon que de mauvais,
vous êtes gagnant. C’est pour cela que vous devez engranger de la bonne
volonté comme assurance contre les problèmes qui surviendront

Page 97 de 128
forcément.
Flickr est bien placé pour savoir qu’il est crucial d’offrir la bonne réponse à
une situation difficile. Comme nous allons le voir, ça ne fait pas de mal
d’avoir une armée de supporters fanatiques.

FLICKR : COMMENT FAIRE PASSER LA PILULE

En juillet 2006, une panne de stockage a frappé Flickr, populaire service de
partage de photos. Même si les photos étaient sauves et si aucune donnée
n’avait été perdue, des milliers d’utilisateurs fervents ont été incommodés
par le petit somme (environ trois heures) que leur site de photo préféré a
décidé de piquer. La tension montait et les ingénieurs travaillaient pour
remettre le site en ligne. Les mails d’utilisateurs inquiets affluaient.
Pendant la crise, l’équipe de Flickr a eu un éclair de génie. Tels des parents
expérimentés sachant occuper un enfant turbulent au restaurant, ils ont
appliqué l’art de la redirection et lancé un concours de coloriage. Ils ont
posté un message expliquant la raison de la panne et demandant aux
utilisateurs d’imprimer la page et d’en faire quelque chose de créatif pour
gagner un compte Flickr Pro d’un an (FIG 6.1).

Page 98 de 128
FIG 6.1: Au cours d’une panne importante en juillet 2006, Flickr a organisé un
concours de coloriage qui a transformé les utilisateurs stressés en
participants enjoués.
[Arrggh ! Nos tuyaux sont bouchés !
Comme c’est assez nul*, nous avons pensé que vous aimeriez participer à un
concours de coloriage improvisé pour gagner un COMPTE PRO GRATUIT !
Imprimez simplement cette page et coloriez les ronds. Quand le site sera de
retour, prenez une photo de votre création et publiez-la sur Flickr avec le tag «
flickrcolourcontest ».

Page 99 de 128
L’équipe de Flickr sélectionnera un vainqueur dans les deux prochains jours, et cet
heureux élu recevra une année de compte Pro gratuite.
*Sérieusement, nous sommes désolés de cette panne inopinée. Nous travaillons
aussi vite que possible pour rétablir flickr.com. Plus de détails ici.]

Au lieu de ruminer en pensant à leur galerie de photos disparue, les

utilisateurs ont planché pour trouver un moyen de gagner le prix. Des
centaines de participations ont été envoyées, dont certaines étaient très
inspirées (FIG 6.2).

: Les gens se sont passionnés pour le concours de coloriage de Flickr,

FIG 6.2
envoyant des créations astucieuses dont certaines ont valu un compte Pro
gratuit à leurs auteurs. Photos par KC Soon (http://bkaprt.com/de/9,
gauche) et Bart Kung (http://bkaprt.com/de/10, droite).

Le site est tombé en panne et de nombreuses personnes ont été gênées,

mais les utilisateurs de Flickr se rappellent encore à quel point ils se sont
amusés en participant à ce concours de coloriage ; certains en gardent
même un excellent souvenir, celui d’avoir gagné une année de service Pro
gratuite.
Tout est bien qui finit bien, mais il y a des leçons à tirer de l’expérience de
Flickr pour faire face à nos propres erreurs et éviter la mutinerie de nos
clients. Il est important d’affronter les émotions négatives qui se
manifestent dans de telles situations, et l’expérience que vous avez conçue
autour de votre site pourrait bien vous sauver.
Flickr a géré cette situation stressante en communiquant calmement et

Page 100 de 128

honnêtement avec ses utilisateurs. Examinons plus en détail comment
Flick a géré l’événement pour voir comment le design émotionnel a
influencé la réaction des utilisateurs.

Répondre aux événements : les faits avant l’humour

Pendant un événement comme celui qu’a connu Flickr, il est essentiel
d’employer le bon ton pour calmer les inquiétudes. Quand les gens sont
profondément stressés par une panne ou une erreur que vous avez faite,
vous devez expliquer ce qui s’est passé rapidement, honnêtement et
clairement. Donnez les faits, dites que vous faites de votre mieux pour
résoudre le problème, puis tenez régulièrement vos utilisateurs au courant,
même si les choses évoluent lentement. C’est exactement ce que Flickr a
fait sur son blog pendant tout le déroulement de l’événement
(http://bkaprt.com/de/8).
Les mises à jour rappellent à votre public que vous concentrez toute votre
attention sur la résolution du problème. Elles vous donnent une occasion
supplémentaire de vous excuser pour le dérangement et d’assurer à vos
utilisateurs que vous allez régler le problème aussi vite que possible.
Une fois que vous avez fait de votre mieux pour apaiser les tensions,
envisagez de proposer une distraction comme Flickr l’a fait. Donner
gratuitement quelque chose à vos utilisateurs peut raviver la bonne
volonté que vous avez eu tant de mal à obtenir et occupe leur attention
pendant que vous faites de votre mieux pour régler le problème. Si vous
ne pouvez pas donner quelque chose à tout le monde, le concours est une
bonne solution pour obtenir le même effet de distraction à peu de frais.
Dans une situation stressante, votre priorité numéro un doit consister à
dompter les émotions négatives du mieux que vous pouvez et, si possible,
à les transformer en émotions positives.
La réponse habile de Flickr ce jour-là a contribué à leur sauver la mise,
mais ce n’est pas la seule raison pour laquelle leurs utilisateurs sont restés
auprès d’eux en temps en crise.

Le vrai héros de la panne de Flickr

Ce qui a vraiment sauvé Flickr ce 19 juillet 2006, ce n’est pas le concours de
coloriage mais le design émotionnel de leur site qui avait déjà gagné la

Page 101 de 128

dévotion de ses utilisateurs. Flickr est un modèle de design émotionnel,
avec son interface à la personnalité humaine et décontractée qui est un
vrai bonheur à utiliser. Nous aimons tous être accueillis à la connexion par
des messages dans plusieurs langues et c’est toujours sympa de voir de
jolis petits pandas apparaître dans l’interface. Le concours de coloriage
n’était qu’une nouvelle manifestation de la persona de design qui a fait leur
immense succès. Évidemment, les gens sont énervés quand ils ne peuvent
pas accéder à l’une de leurs applications Web préférées, mais les bonnes
expériences passées font oublier les inconvénients temporaires.
Le design émotionnel vous assure de conserver la confiance de votre
public quand tout ne marche pas comme prévu. Si vous avez déjà été
engagé émotionnellement avec quelqu’un qui vous a fait du mal, vous
savez que la réponse humaine à ces situations tient plus de l’instinct que
de la raison. Vous ne faites pas la liste des bonnes et des mauvaises
expériences ni de comparaison détaillée avant de décider de rompre ou
non les liens avec une personne. Vous répondez simplement en fonction
de la force de votre engagement émotionnel. Nous réagissons de manière
similaire avec les produits et les services.
L’engagement émotionnel peut nous aider à faire passer les pires
infractions et à ne garder que le bon en souvenir. Les psychologues
appellent ce phénomène de réminiscence positive rosy effect. Le temps
passant, les souvenirs de désagréments et de transgressions s’effacent,
laissant aux souvenirs positifs tout le soin de façonner nos perceptions.
Voilà une bonne nouvelle pour les designers, car cela veut dire que les
inévitables imperfections de notre travail ne provoqueront pas
nécessairement un exode massif. Dans son article intitulé « Memory is
more important than actuality » (http://bkaprt.com/de/11), Donald
Norman fait remarquer qu’il est futile de vouloir la perfection, car c’est
l’expérience dans sa globalité qui constituera au final le souvenir que nos
utilisateurs garderont de notre travail.
En tant que designers d’interaction, nous nous efforçons d’éliminer la
confusion, la difficulté, et par-dessus tout les mauvaises expériences. Mais
vous savez quoi ? La vie est pleine de mauvaises expériences. Non seulement
nous y survivons, mais en plus nous avons tendance à minimiser les mauvais
souvenirs et à amplifier les bons.

Page 102 de 128

 Nous n’avons pas besoin de consacrer tout notre temps à créer l’expérience
parfaite. Pourquoi ? Eh bien déjà, la perfection est généralement impossible
à atteindre. Mais surtout, la perfection vaut rarement l’effort. Les gens
rencontrent quelques problèmes avec une application, un site Web, un
produit, et alors ? Ce qui compte, c’est l’expérience dans son intégralité. De
plus, l’expérience en elle-même n’est pas aussi importante que le souvenir
qu’on en garde.
Même si vous pourrez vous sortir du pétrin en réagissant aux erreurs et
aux problèmes de votre site de manière attentionnée et prévenante, c’est le
design émotionnel que vous aurez construit au préalable qui vous
permettra de conserver l’attachement de votre public. L’indulgence dont
nous pouvons bénéficier grâce à un design émotionnel soigné peut nous
éviter des pertes considérables en termes de clients et de revenus, et c’est
une raison suffisante pour l’incorporer dans notre processus de design.
Dans le prochain et dernier chapitre, nous allons parler des risques que
nous courons avec le design émotionnel, et nous verrons des preuves
concrètes de son intérêt commercial.

Page 103 de 128

DANS LE DESIGN COMME DANS LA VIE, il peut être risqué d’exprimer ses
émotions. Certains ne les comprendront pas. D’autres vont peut-être les
détester. Mais ce n’est pas grave. Une réponse émotionnelle à votre design
est toujours préférable à l’indifférence.
Le design émotionnel ne se contente pas d’amadouer et de retenir votre
public : il vous assure de vous adresser aux bonnes personnes. Tous les
clients ne sont pas forcément bons pour vos affaires. Certains
demanderont tellement d’attention qu’ils vous coûteront plus qu’ils ne
vous rapportent. Cela peut vous porter un coup au moral et au
portefeuille.
Si les gens se plaignent que votre produit, votre service ou votre marque
ne ressemble pas à la concurrence, alors vous êtes sur la bonne voie (du
moment qu’ils ne se plaignent pas de la qualité, de la fiabilité du service,
etc.). Les gens qui ne vous comprennent pas se raviseront quand votre
marque aura gagné en popularité. Certaines personnes ont juste besoin de
la validation des autres pour se permettre de tomber amoureux d’un
produit ou d’un service. Même si nos instincts nous rappellent qu’il peut
être risqué d’être différent, il est encore plus risqué de proposer la même

Page 104 de 128

chose que vos concurrents, car les gens auront plus de mal à comprendre
ce qui fait l’originalité de votre marque.
Nous avons vu de multiples techniques et exemples dans ce livre, mais
rien ne pourrait mieux exprimer la valeur du design émotionnel que les
données brutes. Pour conclure, j’aimerais vous donner quelques preuves
empiriques qui pourront vous aider à convaincre votre patron et vos
collègues de prendre un risque calculé avec le design émotionnel.

LA MISE EN PRATIQUE
Vous êtes, je l’espère, emballés à l’idée de créer des choses qui auront une
influence durable sur votre public. Mais il peut être difficile d’exprimer
vos passions dans votre travail si votre patron ne comprend pas la valeur
du design émotionnel. Quand votre patron ou votre client vous dit « je ne
sais pas, ce truc émotionnel me paraît risqué », vous devez êtes prêt à
sortir des études de cas et un plan d’action qui convaincront même le plus
farouche des sceptiques. Avant de monter un plan, voyons trois exemples
concrets accompagnés de données brutes qui vous permettront d’étayer
vos arguments et de faire taire les critiques.

Changer petit à petit : CoffeeCup Software

Pour créer un design émotionnel, vous n’avez pas besoin de refaire tout le
design de votre site ou de changer votre image de marque. Il est
acceptable, et même conseillé, de commencer modestement. Faites des
expériences simples dans une section de votre site et limitez-les sur une
courte période. C’est exactement ce que CoffeeCup Software
(http://coffeecup.com) a fait au printemps 2010.
À l’approche de Pâques, CoffeeCup a organisé une chasse aux œufs sur
son site. L’objectif était très simple : attirer plus de trafic et faire plus de
ventes. Leurs attentes étaient très commerciales, mais modestes.
Telle une armée de petits lapins, l’équipe a parcouru le site pour y cacher
des œufs de Pâques qui ne s’afficheraient qu’à certains moments de la
journée, ou après un certain nombre de pages vues (FIG 7.1). Rien à voir
avec la chasse aux œufs de votre enfance ; il fallait vraiment chercher pour
trouver un œuf gagnant. Ceux qui en ont trouvé ont reçu des packs de
logiciels gratuits ou de l’argent.

Page 105 de 128

 : CoffeeCup Software a organisé une chasse aux oeufs de Pâques sur
FIG 7.1
son site, et a eu des résultats exceptionnels.

J. Cornelius, le vice-président des opérations, a donné le coup d’envoi avec

un simple tweet (FIG 7.2).

: La chasse aux oeufs de Pâques de CoffeeCup a été lancée par un

FIG 7.2
tweet du vice-président des opérations, J. Cornelius.

Page 106 de 128

[tweet : Nous avons caché plus de 20 000 dollars en argent et en logiciels sur
notre site Web ! Trouvez un oeuf et vous gagnerez son contenu.]

Peu après, la nouvelle s’est répandue sur Twitter et Facebook, et le trafic

du site a commencé à gonfler. Les trois premiers jours, il a triplé. Avant
cette chasse aux œufs, les visiteurs de CoffeeCup consultaient en moyenne
cinq pages du site, mais dès qu’elle a commencé, ce chiffre s’est porté à 30
pages par visiteur. Les gens passaient des heures et des heures sur le site à
la recherche d’un œuf gagnant. Une utilisatrice a avoué sur la fan page
Facebook qu’elle avait passé cinq heures à chercher un œuf gagnant, et au
bout du compte, elle est devenue cliente :
Je suis ravie d’avoir trouvé ce logiciel. J’économisais depuis un certain temps
pour me l’acheter. Je vais maintenant m’en offrir d’autres parmi ceux que j’ai
eu le temps d’étudier et d’essayer pendant les cinq heures de ma chasse aux
œufs.
Voyez la réaction d’un utilisateur du forum appelé « paintbrush » au sujet
du concours (http://bkaprt.com/de/12) :
Impossible de m’arrêter. C’est déjà le troisième jour. J’ai honte du nombre
d’heures que j’y ai passées. Au fait, j’ai cliqué sur tous les œufs que j’ai vus –
depuis le tout début (lundi à 10 h 15) – je les ai tous pris !
Qui d’entre nous peut se targuer d’avoir des visiteurs qui passent trois
jours d’affilée sur son site ? Le nombre de conversations sur la promotion
a fait exploser les forums de CoffeeCup. Plus de 3 700 fils ont été créés et
ont reçu plus de 55 000 visites.
La chasse aux œufs a eu un impact durable sur la visibilité de CoffeeCup
sur les réseaux sociaux. Ils ont vu une augmentation de 217 % de leurs fans
sur Facebook et une augmentation de 170 % de leurs abonnés Twitter.
Grâce à cette expérience, ils ont pu rester en contact avec beaucoup plus
de clients.
Les statistiques de la promotion de CoffeeCup sont renversantes. Ils ont
utilisé beaucoup de principes de design dont nous avons parlé dans les
chapitres précédents, comme les récompenses variables, l’anticipation,
l’effet cordon de velours et l’élévation du statut, créant un effet très
puissant. Même s’ils n’ont pas rendu leurs résultats publics, ils ont constaté
une explosion des ventes.

Page 107 de 128

CoffeeCup a mené cette expérience pendant une durée limitée, après quoi
le site est redevenu ce qu’il était et les risques inhérents aux principes de
design émotionnel employés ont disparu. Cependant, on conviendra que
le risque encouru était minime par rapport à ce qu’ils y ont gagné.
On pourrait dire la même chose de Blue Sky Resumes, une entreprise qui a
fait le pari du design émotionnel et qui a remporté le gros lot.

Voir grand : la refonte de Blue Sky Resumes

Si vous commencez un nouveau site et que vous avez envie de voir grand,
vous pouvez concevoir une stratégie de design émotionnel complète qui
englobe la marque, le design et le message. C’est exactement ce qu’a fait
Blue Sky Resumes (http://www.blueskyresumes.com/), un service qui aide
les gens à créer des beaux CV, avec la refonte de son site Web en 2010.
Squared Eye (http://squaredeye.com), une agence de design dirigée par
Matthew Smith et basée en Caroline du Nord, s’est occupée du nouveau
design.
Avant toute chose, Squared Eye a étudié les sites Web des concurrents de
Blue Sky Resumes. Ils sont presque tous identiques, avec leurs photos
libres de droit ringardes, une typo et des couleurs lourdes, et globalement,
une impression un peu générique. Ils ont tous une personnalité de chiffe
molle, ce qui n’inspire pas vraiment confiance pour une entreprise qui
pourrait jouer un rôle clé dans votre carrière.
Une fois l’image de marque de Blue Sky revisitée par Able Design
(http://designedbyable.com), Squared Eye a conçu un site Web qui
présente Blue Sky Resumes comme le choix idéal pour les jeunes
professionnels férus de nouvelles technologies qui ne veulent pas être une
candidature de plus dans la pile. En restreignant le public ciblé, Squared
Eye pouvait s’offrir une certaine liberté de création pour concevoir la
personnalité de la marque et éviter l’approche générique et un peu « taille
unique » à laquelle tant de sites similaires se raccrochent.
En jouant sur le nom de l’entreprise, le design du site (FIG 7.3) évoque un
futur optimiste, un message puissant, particulièrement depuis le début de
la récession mondiale qui a détruit tant d’emplois.

Page 108 de 128

 : La personnalité pleine d’humour et décontractée de la refonte du site
FIG 7.3
de Blue Sky Resumes a entraîné une explosion de son taux de conversion.

Le titre qui flotte en douceur dans les nuages, le ton spirituel et la

typographie forte mais sans chichi des titres sont quelques éléments du
design qui font savoir aux visiteurs que comme eux, Blue Sky Resumes est
unique. Matthew Smith décrit son procédé :
Je voulais non seulement incorporer un design original et rigolo, mais
également des techniques qui seraient utilisées et aimées par le Web
moderne, alors nous avons introduit l’utilisation de @font-face, ainsi qu’un
système de mise en page inhabituel pour mettre en valeur la personnalité du
design. Toutes ces techniques, combinées avec une iconographie forte et des
moments de détente bien amenés, produisent un site plaisant et énergique.
Nous avons testé notre hypothèse auprès de quelques clients de Blue Sky
Resumes, et le retour a été extrêmement positif.
Quand Blue Sky a lancé son nouveau site Web, ils étaient sûrs que ce serait
bon pour leurs affaires, mais ils ne s’attendaient pas à de tels résultats. Le
nouveau site Web a fait augmenter le nombre de demandes de

Page 109 de 128

propositions de 15 %. Le revenu moyen apporté par chaque client a
augmenté de 15 %. Blue Sky a vu son nombre de clients augmenter de 65 %
tous les mois ; quant au chiffre d’affaires total, il a enregistré le chiffre
impressionnant de 85 % d’augmentation. Leur taux de conversion est passé
de 25 %, ce qui était déjà honorable, à 36 %.
En clair, avec ce nouveau site Web, Blue Sky Resumes a boosté ses ventes
en sachant toucher les bonnes personnes pour créer des relations
durables. Voilà pourquoi ces statistiques sont vraiment impressionnantes :
Blue Sky Resumes n’a rien changé d’autre en termes de marketing.
L’augmentation de leur taux de conversion et de leur chiffre d’affaires est
simplement due à un remaniement du design qui a donné la priorité au
design émotionnel.
Louise Fletcher, cofondatrice de Blue Sky Resumes, tire un enseignement
intéressant de ces statistiques :
Ces chiffres montrent que le principal impact du design du site a été de
préconvertir les clients potentiels en clients ; en d’autres termes, ils sont déjà
convaincus avant même de nous contacter. D’où l’augmentation de près de
50 % de notre taux de conversion.
Peu après le lancement du nouveau design, le directeur de la création
d’Oprah Magazine a contacté Blue Sky Resumes en leur demandant de
participer à un article sur des femmes méritantes qui voulaient changer de
carrière. Pourquoi Oprah Magazine a choisi Blue Sky ? Parce que leur site
Web les présentait comme une entreprise humaine attachée aux intérêts
de ses clients. Parce qu’ils ne ressemblent pas à leurs concurrents, qui
débitent autant de CV que possible pour être rentables. Blue Sky Resumes
apprécie l’individu à sa juste valeur, et le design du site en est la preuve.
Blue Sky a parfois été un peu nerveux devant la tournure que prenait le
design de Squared Eye. Cela semblait risqué, car c’était très différent de
leur stratégie habituelle. Mais au bout du compte, c’est en exprimant la
personnalité de l’entreprise que Blue Sky Resumes a explosé.
Blue Sky Resumes s’est lancé à corps perdu dans ce nouveau design et
CoffeeCup a choisi une approche mesurée et temporaire. Entre ces deux
extrêmes, il existe une troisième option.

L’approche intermédiaire : améliorations progressives

Page 110 de 128

Vous pouvez vous essayer au design émotionnel à travers des
changements temporaires comme nous l’avons vu avec CoffeeCup
Software, ou vous pouvez tout miser dessus comme Blue Sky Resumes. Il
existe une autre alternative à explorer. Si vous lisez A List Apart, le
magazine des gens qui font le Web, vous connaissez déjà le concept
d’amélioration progressive (http://bkaprt.com/de/13), qui encourage à
créer des sites accessibles par le plus grand nombre en ajoutant des
couches d’améliorations sur des fondations solides, afin d’offrir une
expérience enrichie aux personnes dotées d’un navigateur plus évolué.
L’amélioration progressive est une seconde nature pour ceux d’entre nous
qui sont fidèles aux standards du Web. C’est un concept qui s’applique
également au design de l’expérience utilisateur.
Au chapitre 4, je vous faisais part des leçons à tirer des techniques de
design émotionnel que nous avons employées dans l’interface de
MailChimp. Infiltrer de l’humour dans l’expérience nous a acquis de
fidèles utilisateurs, mais il y a un revers à la médaille. Même si la plupart
des gens s’en amusent, certaines personnes détestent nos blagues : ce n’est
tout simplement pas leur style. Certaines personnalités peuvent s’unir
dans une béatitude symbiotique, d’autres sont incompatibles comme l’eau
et l’huile.
Nous n’étions pas prêts à abandonner la personnalité de notre marque
parce que quelques personnes n’arrivaient pas à s’y identifier, mais nous
avons trouvé une solution pour faire taire les quelques tweets et tickets qui
se plaignaient de notre persona de design. Nous avons créé une option
« rabat-joie » dans les paramètres de l’application qui permet aux
utilisateurs de supprimer toute trace d’humour. Ce mode désactive tous les
messages d’accueil et élimine le ton familier disséminé dans l’interface, ce
qui la rend suffisamment sérieuse pour ceux qui ont peur de choquer leurs
clients ou qui sont simplement de vieux ringards.
Je vais être franc avec vous : par principe, j’étais opposé à ce qu’on crée le
mode rabat-joie pour apaiser quelques plaintes occasionnelles. C’était
comme si on abandonnait notre trait le plus unique pour faire comme tout
le monde. Mes réserves partaient d’une bonne intention, mais mes
inquiétudes étaient infondées.
Plus d’un an après avoir implémenté le mode rabat-joie, nous nous
sommes demandés combien de nos utilisateurs l’avaient effectivement

Page 111 de 128

activé. J’avais presque peur de le découvrir : s’ils étaient majoritaires, cela
aurait remis en question la persona de design que nous nous étions donné
tant de mal à construire. Au final, seulement 0,007 % des utilisateurs
avaient activé ce mode. Nous en avons retenu que même s’il existe
quelques rabat-joie qui ne comprennent pas notre marque, beaucoup plus
de gens la comprennent et aiment ces petits moments de joie que
l’application leur apporte. Selon moi, cela vaut bien un risque minime.
L’amélioration progressive peut également être une option envisageable
pour votre design. Elle peut atténuer les inquiétudes de votre client ou de
votre patron et faire taire ceux qui ne comprennent pas votre personnalité.
Les chiffres sont là. Nous avons eu des preuves concrètes de l’intérêt du
design émotionnel, mais il reste juste un problème à régler. Comment
convaincre votre patron de se laisser tenter ?

CONVAINCRE VOTRE PATRON

Il peut s’avérer difficile, voire un peu effrayant, de convaincre votre patron
ou votre client d’approuver des changements qui pourraient avoir un
impact majeur sur son organisation. Maintenant que vous avez des études
de cas détaillées et des données convaincantes pour étayer vos arguments,
tout ce qu’il vous manque, c’est un plan.
Commençons par la vision globale. Votre organisation ou votre client est-
il d’accord pour remanier l’image de marque ou le design de son site Web
afin de créer un meilleur lien avec son public ? S’il est inconcevable de
repenser entièrement le design, est-il acceptable d’apporter des
changements plus subtils pour affiner la marque ou le design du site ? Si
vous avez répondu oui à l’une de ces deux questions, commencez par
créer une persona de design comme nous l’avons vu au chapitre 3.
Même si votre marque entretient déjà un lien avec son public, une persona
de design peut être un bon exercice pour vous concentrer sur la relation
que vous souhaitez construire avec celui-ci, et la relation qu’il souhaite
avoir avec vous. C’est un bon outil pour engager la discussion avec votre
patron et lui présenter vos idées de design émotionnel. Au lieu de défendre
votre projet en disant « je pense que ce serait bien qu’on... », vous pouvez
sortir votre persona de design et dire : « Ça, c’est la personnalité de notre
marque... et en faisant ça... on se démarquera de la concurrence tout en

Page 112 de 128

construisant un meilleur lien avec notre clientèle. » Ramenez vos idées à
des objectifs commerciaux et évitez les arguments basés sur votre propre
opinion. Vous aurez un argumentaire solide qui sera plus difficile à rejeter.
La science et la psychologie tiennent une place importante dans les
exemples que nous avons vus dans ce livre. En présentant vos idées aux
décideurs, n’ayez pas peur de vous référer aux principes que vous avez
appris. Nous savons que le design émotionnel ne consiste pas seulement à
créer des expériences agréables : il est essentiel dans la vie quotidienne et
les prises de décisions des consommateurs. En employant le design
émotionnel de manière efficace sur votre site, votre taux de conversion et
vos ventes augmenteront proportionnellement.
Utilisez les études de cas de ce livre comme point de départ de la
conversation. En montrant à votre supérieur que vous avez fait des
recherches indépendantes pour améliorer le site sur lequel vous travaillez,
vous témoignez d’une audace admirable qui vous fait immédiatement
gagner des points. Pensez à parler de votre augmentation au passage.
Ajoutez là-dessus une ou deux études de cas et le patron comprendra la
pertinence de vos propositions. Choisissez des exemples adaptés à votre
marque afin que votre patron reste focalisé sur les concepts et ne se perde
pas dans les détails de l’implémentation. Rappelez-vous que le design
émotionnel ne doit jamais interférer avec l’utilisabilité, la fonctionnalité ou
la fiabilité.
Plutôt que d’essayer de tout révolutionner à la fois sur votre site,
choisissez une statistique clé à améliorer, comme le temps moyen passé
sur le site ou le nombre de ventes. Optimisez l’interface avec des principes
de design émotionnel, puis utilisez un outil comme Google Site Optimizer
pour tester les changements par rapport au design original. Si votre
statistique cible augmente, vous avez un argumentaire béton à présenter à
votre patron pour implémenter du design émotionnel à d’autres endroits
du site. On ne peut pas nier les chiffres.
Quand vous êtes la personne qui prend les décisions, le changement paraît
toujours risqué. Votre boulot consiste à exprimer les gains exceptionnels
que votre organisation pourrait en tirer, et à démontrer que cela vaut bien
quelques risques.

Page 113 de 128

CONCLUSION
Nous avons fait du chemin dans ce petit livre, en explorant les principes
de design et de psychologie appliqués par Wufoo, Betabrand, Housing
Works, Mint, Flickr et Blue Sky Resumes pour ne citer qu’eux. Malgré les
vastes différences de public, de contenu et de design, toutes ces
réalisations ont un matériau commun. Tous les sites que nous avons vus
utilisent l’artisanat et une forte personnalité pour que leurs utilisateurs
voient l’humain derrière l’interface.
Un contenu soigné et un design bien exécuté sont les piliers de ces sites
Web. Ils sont fonctionnels, fiables et utilisables, mais ils franchissent un
cap supérieur en créant une expérience agréable. Le design émotionnel
permet de nouer un lien avec le public d’une manière inenvisageable à
l’époque où nous concevions des sites Web pour gonfler notre égo avec
une façade artificielle dont tout le monde se moquait. Aujourd’hui, nous
pouvons exprimer notre propre personnalité dans notre travail afin que
nos utilisateurs aient la sensation d’interagir avec un véritable humain et
non un avatar d’entreprise. Ils nous aiment pour notre sincérité, ils nous
font confiance parce qu’ils s’identifient dans notre marque, et quand nous
faisons des erreurs, ils nous le pardonnent plus facilement car notre
honnêteté est manifeste.
Au chapitre 3, je vous ai demandé de vous souvenir d’une rencontre avec
une personne qui vous avait laissé une forte impression. Vous aviez
tellement de choses en commun qu’il vous semblait naturel de partager
une blague ou une histoire personnelle. Vous avez toujours ce souvenir en
tête ? Je l’espère, parce qu’elle vous servira d’étalon lorsque vous
commencerez à appliquer le design émotionnel.
Nous ne faisons pas que concevoir des pages. Nous concevons des
expériences humaines. Comme les visionnaires du mouvement Arts and
Crafts, nous savons que la touche humaine et notre personnalité ne sont
pas accessoires à notre travail : elles sont essentielles.

Page 114 de 128

REMERCIEMENTS
Ce livre ne se trouverait pas entre vos mains sans la généreuse opportunité
que m’ont offerte Jeffrey Zeldman, Mandy Brown et Jason Santa Maria. Je
suis honoré d’être la rayure violette dans « l’arc-en-ciel de connaissances »
de la collection A Book Apart, aux côtés d’auteurs aussi brillants.
Je dois beaucoup à Mandy Brown et Krista Stevens, qui me font passer
pour meilleur écrivain que je ne suis vraiment. Elles ont fait preuve de
patience quand je cafouillais sur certains passages, et m’ont offert une
gentille tape dans le dos quand j’en avais besoin. Mandy et Krista, grâce à
vous je me suis amusé à écrire ce livre, et pour ça je vous remercie.
Whitney Hess m’a apporté des conseils précieux en lisant les premiers
brouillons et m’a aidé à rester sur la bonne voie. Je lui suis reconnaissant
de m’avoir offert son opinion experte et son œil de lynx.
J’admire depuis longtemps Jared Spool pour ses recherches brillantes sur
l’expérience utilisateur et sa volonté de tous nous aider à mieux servir les
besoins de nos utilisateurs. C’est un vrai privilège pour moi qu’il écrive la
préface de ce livre.
J’ai passé beaucoup de temps à faire des recherches pour ce livre, mais j’ai
bénéficié de l’aide indispensable de Ben Chestnut et de Matthew Smith.
Ben m’a continuellement offert son inspiration pendant plus d’un an. Il a
également créé un lieu de travail unique où j’ai pu expérimenter les idées
que je viens de partager avec vous. Pour cela, je lui suis éternellement
reconnaissant.
Après un bref email lui demandant de me trouver des cas de design
émotionnel, Matthew Smith m’a généreusement envoyé d’innombrables
exemples qui m’ont donné du grain à moudre. Merci Matthew.
Tyrick Christian m’a gentiment aidé à peaufiner la présentation des
exemples de personas de design du chapitre 3. Il m’a aidé à concrétiser la
vision que j’en avais, tout en les rendant assez flexibles pour que tout le
monde puisse les utiliser. J’ai de la chance d’avoir bénéficié de son aide.
Écrire un livre, c’est difficile, et ça aide d’avoir des gens pour vous épauler.
Ma femme Jamie a généreusement assumé les devoirs parentaux pour me
laisser du temps pour écrire et m’a apporté un torrent d’encouragements
quand j’en avais le plus besoin. Elle me fait vibrer comme personne

Page 115 de 128

d’autre. J’ai beaucoup de chance de partager ma vie avec elle.
Je suis devenu papa peu après avoir commencé à écrire ce livre. Mon fils
Oliver m’a appris encore plus de choses sur le design émotionnel que tous
les designers et les penseurs brillants que j’ai cités ici. Il fait de moi une
meilleure personne, et pour cela je le remercie.

Page 116 de 128

RESSOURCES
Les principes de design sont un guide essentiel pour résoudre des
problèmes visuels et conceptuels. Soyons clairs, si vous n’avez pas de
bonnes bases de design, vous êtes condamné à succomber aux tentations
de la décoration et du design sans queue ni tête. Si vous ne pouvez acheter
qu’un seul livre de design, choisissez Principes universels du design, paru en
français aux éditions Eyrolles (http://bkaprt.com/de/15) pour l’édition
originale ou (http://www.eyrolles.com/Audiovisuel/Livre/principes-
universels-du-design-9782212128628) pour l’édition française).
En parlant de principes de design, le designer, auteur et conférencier
Stephen Anderson a passé beaucoup de temps à étudier les principes du
design émotionnel. Il a aimablement partagé ses idées sous la forme d’un
petit jeu de cartes appelé Mental Notes (http://bkaprt.com/de/16). Chaque
carte présente un principe de design émotionnel.
Je ne suis certainement pas la première personne à faire le lien entre
design et émotion. Dans son livre intemporel Design émotionnel – Pourquoi
aimons-nous ou détestons-nous les objets qui nous entourent
(http://bkaprt.com/de/17) pour l’édition originale en langue anglaise et
(http://amzn.to/nYDbH1) pour la version française aux éditions De Boeck),
le designer légendaire Donald Norman cherche à comprendre pour quelle
raison nous tombons amoureux de certains produits.
Il y a beaucoup de science et de psychologie dans les concepts et les
techniques que nous avons explorés dans ce livre. Si vous voulez étudier
un peu plus le monde fascinant et magique qui se trouve entre nos deux
oreilles, commencez par How the Mind Works de Stephen Pinker
(http://bkaprt.com/de/18) et Descartes’ Error d’Antonio Domasio
(http://bkaprt.com/de/19).
Le livre Different de Youngme Moon (http://bkaprt.com/de/20) étudie
pourquoi certaines marques parviennent à sortir du lot et à devenir
sensiblement différentes.
Le Dr John Medina en sait long sur la relation entre notre comportement
et la structure de notre cerveau. Son livre Brain Rules peut être une lecture
intéressante (http://bkaprt.com/de/21).
Si vous commencez tout juste ou si vous faites encore vos classes en

Page 117 de 128

matière de design d’expérience utilisateur, vous trouverez certainement
que A Project Guide to UX Design est une référence utile
(http://bkaprt.com/de/22).
Vous trouverez de nombreux articles passionnants explorant la
psychologie, les émotions et le design d’expérience utilisateur sur UXMag.
Voici quelques-uns de mes favoris :
Dana Chisnell, « Beyond Frustration » (http://bkaprt.com/de/23)
Susan Weinschenk, « The Psychologist’s View of UX Design »
(http://bkaprt.com/de/24)
Nathanael Boehm, « Organized Approach to Emotional Response
Testing » (http://bkaprt.com/de/25).
Trevor van Gorp étudie le rôle de la personnalité dans le design
émotionnel dans son article « Emotional Design with A.C.T.: Part 1 »
(http://bkaprt.com/de/26).
Les transcriptions complètes des interviews que j’ai réalisées pour ce livre
et de nombreuses autres ressources pour les amateurs de design
émotionnel vous attendent sur mon blog, où je continue à partager mes
recherches : http://aarronwalter.com/tag/emotional-design.

Page 118 de 128

REFERENCES
Shortened URLs are numbered sequentially; the related long URLs are
listed below for reference.

Chapter 1
1 http://twitter.com/rainnwilson/status/20347529530
2 http://gettingreal.37signals.com/

Chapter 3
3 http://www.flickr.com/photos/clagnut/4947389773
4 http://en.wikipedia.org/wiki/File:Bundesarchiv_Bild_146II-732,_Erholung_am_Flussufer.jpg
5 http://www.webdesignerdepot.com/2008/12/why-mood-boards-matter/
6 http://daringfireball.net/linked/2009/04/02/designing-convertbot

Chapter 4
7 http://dribbble.com/shots/14379-Profile

Chapter 6
8 http://blog.flickr.net/en/2006/07/19/temporary-storage-glitch/
9 http://www.flickr.com/photos/14922438@N00/194463892/
10 http://www.flickr.com/photos/41225983@N00/193706751/
11 http://interactions.acm.org/content/?p=1226

Chapter 7
12 http://www.coffeecup.com/forums/search/?
q=%22Guess+I+could+have+waited+for+today+if+all%22&in=81&type=contents&view=posts&search=true&bu
13 http://www.alistapart.com/articles/understandingprogressiveenhancement/
14 http://google.com/websiteoptimizer

Resources
15 http://amzn.com/1592535879
16 http://getmentalnotes.com/
17 http://amzn.com/0465051367
18 http://amzn.com/0393334775

Page 119 de 128

19 http://amzn.com/014303622X
20 http://amzn.com/030746086X
21 http://amzn.com/0979777747
22 http://amzn.com/0321607376
23 http://uxmag.com/design/beyond-frustration-three-levels-of-happy-design
24 http://uxmag.com/design/the-psychologists-view-of-ux-design
25 http://uxmag.com/design/organized-approach-to-emotional-response-testing
26 http://boxesandarrows.com/view/emotional-design

Page 120 de 128

INDEX
A
Abraham Maslow 5
A List Apart 95
amélioration progressive 95, 96
amorçage 61
anticipation 42, 50, 56, 57, 60, 62, 68, 92
apathie 78
Apple 7, 28, 29, 34
B
Basecamp 8, 10, 11, 73
Betabrand 15, 16, 17, 79, 98
Bible 34
Biological Homage to Mickey Mouse 21
Blue Sky Resumes 92, 93, 94, 95, 98
Bowman, Doug 22, 57, 58
Brain Rules 13
Bringhurst, Robert 22
Brizzly 20, 21
bulle Internet 3
C
calligraphie 33
Carbonmade 43, 45, 46, 47
Clippy 63
Coccinelle 34, 35
CoffeeCup Software 89, 90, 95
contraste 23, 24, 25, 26, 29, 30, 47, 51, 57, 71
Convertbot 43
cordon de velours 56
Cornelius, J. 90, 91
D
Damasio, Antonio 71

Page 121 de 128

Darwin, Charles 18
Design émotionnel 28
Dribbble 58, 62
Dropbox 76, 77
E
effet esthétique-utilisabilité 28, 65
Elements of Typographic Style, The 22
Etsy 2
Expression des émotions chez l’homme et les animaux, L’ 18
F
Facebook 4, 7, 56, 61, 78, 90, 91
fail whale 7
Fletcher, Louise 94
Flickr 4, 54, 56, 83, 84, 85, 86, 98
Freddie Von Chippenheimer IV 40, 62, 63
G
GigaOm 59
Gmail 73
Google Site Optimizer 98
Gorum, Dave 45
GoToMeeting 80
Gould, Stephen Jay 21
Gruber, John 44
Gupta, Amit 53
Gutenberg 33, 34
H
Hale, Kevin 11
Happy Cog 48
Hodgman, John 35
Housing Works 43, 47, 48, 49, 79, 98
I
interaction homme-machine 28, 31, 32
iPhone 43, 44

Page 122 de 128

iPod 22
iTunes 7
J
Jardine, Mark 44
Je ne veux pas chercher 80
Jobs, Steve 29
K
Kickstarter 2
Kissane, Erin 79
Krug, Steve 80
L
Lindland, Chris 14
loi de Hick 25, 30
Long, Justin 34
M
Mac 29, 34, 38
MailChimp 21, 38, 39, 40, 41, 42, 62, 64, 65, 67, 95, 109
Mall, Dan 48
Mashable 59
Medina, John 13
Mestre, Ricardo 27
messagefirst 37
Microsoft Office 63
Mint 72, 73, 74, 75, 98
mouvement Arts and Crafts 2, 99
N
nombre d’or 21, 22
Norman, Donald 28, 86, 102
O
Oprah Magazine 94
P
Parthénon 22, 29

Page 123 de 128

persona 34, 37, 38, 39, 42, 50, 86, 95, 96, 97
persona de design 38, 39, 42, 50, 86, 95, 96, 97
Photojojo 52, 53, 54, 62, 68
Ping 7
Putorti, Jason 72
pyramide des besoins 6, 7, 8, 80
Pythagore 21
Q
Quicken 73
R
rabat-joie 95, 96
récompenses variables 65, 66, 92
révolution industrielle 1, 2
S
Shakespeare 11
Silverback 81
Sims 57
Smith, Matthew 92, 93, 100
Squared Eye 92, 94
Stratégie de contenu Web 79
Super Mario Bros 57
système ouvert 57, 61
T
Tapbots 43, 44
Trammell, Mark 57
Tumblr 24, 25, 26, 28
TurboTax 73
Twitter 4, 7, 22, 53, 56, 57, 58, 59, 60, 61, 62, 64, 78, 90, 91
V
visages de bébés 19
W
WALL-E 44
Wufoo 10, 11, 12, 14, 16, 54, 55, 56, 98

Page 124 de 128

Y
YouTube 40, 62

Page 125 de 128

À PROPOS DE A BOOK APART
Le Web design est une affaire de maîtrise multidisciplinaire et de haute
précision. C’est justement l’idée qui se reflète dans notre collection de
petits livres, destinée à tous ceux qui créent des sites Web. Nous traitons
les sujets émergents et essentiels du design et du développement Web avec
style, clarté et surtout concision, parce qu’un designer-développeur qui
travaille n’a pas de temps à perdre.
L’objectif de tous les livres de notre catalogue, c’est de faire toute la
lumière sur un sujet délicat, et de le faire vite pour mieux retourner au
travail. Merci de nous soutenir dans notre mission : offrir aux
professionnels les outils dont ils ont besoin pour faire avancer le Web.

Page 126 de 128

À PROPOS DE L’AUTEUR

Photo de Josh Rosenbaum

Aarron Walter (http://aarronwalter.com) est le designer principal de
l’expérience utilisateur de MailChimp, où il fricote avec des primates et
réfléchit à des façons de créer des interfaces plus humaines. Dans une vie
passée, Aarron a consacré dix glorieuses années à donner des cours de
design Web dans plusieurs universités aux États-Unis. Aujourd’hui, il
canalise sa passion pour l’éducation dans le programme InterACT du Web
Standards Project. Aarron vit avec sa femme et son fils à Athens dans l’état
de Georgie, et il adorerait être barman.

Page 127 de 128

Création de la version numérique :
DATAGRAFIX
contact : digital@datagrafix.com

Composition de l’ouvrage papier :

FG COMPO

Page 128 de 128