Vous êtes sur la page 1sur 34

LIVRE BLANC

L’UX Design,
ça s’apprend !
L’UX DESIGN, ÇA S’APPREND !

SOMMAIRE
CHAPITRE 1
Expliquer le concept de l’UX Design
p6 Qu’est-ce qui différencie l’UX Design de l’UI Design ?
p8 Qu’est-ce qu’un site web ergonomique ?
p10 La règle des 3 clics ou comment se servir des idées reçues
en UX Design ?
p12 Quelle démarche pour améliorer l’ergonomie
d’un dispositif digital ?

CHAPITRE 2
Lister les règles et bonnes pratiques de l’UX Design
p15 Comment notre perception impacte-t-elle l’utilisation
d’un site Internet ?
p18 Comment aider l’utilisateur à se diriger sur Internet ?
p20 Quels sont les attendus incontournables de l’internaute ?
p22 Quelle utilité de prévoir les erreurs de l’utilisateur web ?

CHAPITRE 3
Explorer la démarche de l’UX Design centrée
sur l’utilisateur
p26 Comment créer l’arborescence de son site ?
p28 Qu’est-ce qu’un persona en UX Design ?
p31 Comment améliorer l’expérience utilisateur
grâce aux scénarios d’usage ?

2
L’UX DESIGN, ÇA S’APPREND !

INTRODUCTION
Ah, une mauvaise expérience sur un site, on l’a tous déjà vécu. Et on n’y est
jamais retourné !
Il faut dire que rendre un site assez simple et efficace pour que l’utilisateur
y vive une expérience positive, c’est complexe. C’est complexe… mais ça
s’apprend !
Graphiste, webdesigner, chef de projet, développeur… vous cherchez tous
le même graal : créer LE site web parfait pour un utilisateur défini.
Votre guide, dans cette recherche du Graal, c’est Sarah Taisne. Depuis près de
10 ans, cette designer graphique et UX Designer met son expertise au service
de marques renommées comme l’Opéra de Paris dont elle fut la coordinatrice
et conceptrice multimédia. Sarah Taisne transmet sa passion en enseignant
dans de grandes écoles supérieures.

Au programme, 3 chapitres :

>> Dans le 1er chapitre, nous poserons les bases en décortiquant le


concept de l’UX Design. Qu’est-ce qui différencie l’User Experience
(UX) et l’User Interface (UI) Design ? Comment rendre un site web
ergonomique ? Nous ferons le tour des idées reçues et des idées
fausses qu’il faudra absolument balayer.

>> Dans le 2e chapitre, nous nous concentrerons sur l’utilisateur, sa


perception, ses attentes, pour adapter notre pratique. Vous verrez même
comment anticiper ses erreurs pour rendre son expérience plus fluide,
plus simple, plus efficace. En un mot, réussie !

>> Enfin, le 3e et dernier chapitre sera lui aussi tourné vers l’utilisateur, ou
plutôt LES utilisateurs. Pour mieux les accueillir sur votre site, vous
apprendrez à les classer grâce aux fameux personas. En répondant aux
4 questions _ Qui, quoi, comment, où _ vous ciblerez précisément ce
qu’ils attendent et quel scénario d’usage leur conviendra le mieux.

3
L’UX DESIGN, ÇA S’APPREND !

Sarah TAISNE
UX/UI Designer freelance

À PROPOS
DE L’EXPERT
UX/UI Designer freelance, Sarah Taisne transmet sa passion en enseignant
régulièrement dans différentes grandes écoles supérieures (École de Condé Paris,
ICD Business School, Hetic, CIFAP…).
Designer graphique et UX Designer depuis plus de 9 ans, Sarah Taisne a
développé son expertise en agence puis en tant que coordinatrice et conceptrice
multimédia à l’Opéra de Paris où elle a conçu successivement tous les sites
liés à l’Opéra de Paris ainsi que son site principal dont elle a assuré la refonte
ergonomique et graphique en 2013.

4
L’UX DESIGN, ÇA S’APPREND !

CHAPITRE 1
Expliquer le concept
de l’UX Design

5
EXPLIQUER LE CONCEPT DE L’UX DESIGN

Qu’est-ce qui différencie


l’UX Design de l’UI Design ?
Distinguer design d’interface et design d’expérience
Imaginons, imaginons… que vous souhaitiez manger des
céréales au petit-déjeuner. Vous prenez un bol et une
cuillère. Chaque élément remplit une fonction :
le bol contient les céréales et la cuillère permet de les
manger proprement. Grâce à ces éléments, vous vivez une
expérience, celle de manger des céréales. Voilà ce qu’est
une expérience utilisateur.

Designer cette expérience utilisateur, utilisateurs. Par exemple, vous


c’est penser la forme de la cuillère et êtes invité chez des amis. Devant
du bol, pour que ceux-ci s’adaptent leur maison, il y a un chemin bordé
parfaitement à votre main et à votre d’arbres et de fleurs. En apparence,
bouche. Et c’est là que le design le chemin est magnifique. C’est ce
d’expérience (ou UX Design) entre qu’on appelle le design d’interface,
en jeu. ou l’UI. À la fin du dîner, pour
sortir plus rapidement, vous
Penser, réfléchir, concevoir le produit,
coupez à travers le jardin, piétinant
c’est donc designer l’expérience de
au passage les magnifiques
ce produit. Mais à partir de quand
plantations. À quoi bon faire un
peut-on parler de
magnifique chemin si personne
« design d’expérience » ?
ne l’utilise ? Le design d’interface
L’UX Design signifie User est ici inutile, puisqu’il n’a pas
Experience Design. Le terme provoqué une bonne expérience.
« design » y est plus synonyme de Le besoin des invités n’a pas été
« conception » pris en compte lorsque ce chemin
que de « création visuelle ». Il a été créé. En revanche, s’il avait
est indispensable, pour faire du été pensé, réfléchi et conçu pour
design d’expérience, de prendre sortir rapidement de la maison,
en considération les attentes, son design aurait provoqué
mais aussi les réels besoins des l’expérience.

6
EXPLIQUER LE CONCEPT DE L’UX DESIGN

Appliqué au Web, et notamment L’UI Designer et l’UX Designer ont


dans le cas de la conception donc besoin l’un de l’autre pour
d’un site Internet, un designer créer une expérience utilisateur.
d’interface peut donc s’interroger Pour autant, il s’agit de deux
sur la couleur d’un bouton disciplines distinctes. C’est pour
pour que celui-ci soit visible cela qu’un designer d’interface
immédiatement. Au préalable, le doit être capable d’apporter des
designer d’expérience s’interroge réflexions sur ses utilisateurs et
sur le besoin de ce bouton. leurs besoins, tout en sachant
répondre graphiquement à une
L’UX Designer travaille en amont
demande. Vous savez à présent
de l’UI Designer. Il liste les objectifs
pourquoi beaucoup de freelances
et attentes des utilisateurs.
se prétendent UI et UX Designer !
En fonction de ces besoins, il
définit une stratégie, élabore
l’arborescence de l’information
et réalise les premiers schémas
d’interface : les wireframes.
Le travail de l’UX Designer passe
donc par l’identification des réels
besoins de ses utilisateurs appelée
la « conception centrée utilisateur ».
L’UI Designer travaille, lui, sur la
partie strictement visuelle.

À RETENIR

L’usage de Le design doit Le travail de l’UX


l’interface par provoquer l’expérience, Designer passe par
l’utilisateur produit la bonne expérience l’identification des
une expérience. utilisateur. réels besoins de ses
C’est l’expérience utilisateurs.
utilisateur.

7
EXPLIQUER LE CONCEPT DE L’UX DESIGN

Qu’est-ce qu’un site web


ergonomique ?
Définir les notions d’utilité et d’utilisabilité

Il est 7 heures, votre téléphone sonne. Ce n’est pas votre


boss qui vous appelle, c’est simplement votre réveil. Votre
premier contact de la journée se passe avec cet objet et
ça continue… Pas une journée ne se passe sans que vous
n’utilisiez des objets extérieurs. C’est là que l’ergonomie
prend tout son sens : elle a pour objectif d’adapter tous ces
objets pour faciliter leur utilisation. Lorsque leur utilisation
semble facile, confortable, voire sécuritaire, nous qualifions
ces objets d’ergonomiques. Appliqué à un site, ça donne
quoi ?

Nous avons la sensation qu’un site peut


être qualifié d’ergonomique lorsque
son usage nous paraît simple, facile
et rapide. C’est justement ce que
recouvrent les deux grands objectifs de
l’ergonomie : l’utilité et l’utilisabilité. mo
c.e
tis
be
w.w

Imaginons un libraire qui crée un site


ww

de vente en ligne de ses produits. Il


répond à un besoin : celui de pouvoir
acheter des livres. Son site est donc
utile pour les internautes. L’utilité, en T
répondant à un besoin, permet de capter
un internaute. Mais cela ne suffit pas.
Pour que cet utilisateur reste sur son
site et profite de son utilité, celui-ci doit

8
EXPLIQUER LE CONCEPT DE L’UX DESIGN

être utilisable et c’est là qu’intervient L’utilisabilité englobe 3 notions :


toute la démarche ergonomique l’efficacité, l’efficience et la
de l’UX Design. On parle alors satisfaction. Dans notre exemple,
d’utilisabilité, appelée aussi usabilité trouver le livre qu’il souhaite. C’est
découlant du terme anglais usability, ce que l’on nomme l’efficacité.
notion incontournable de l’UX Certes, l’utilisateur doit trouver
Design. son livre, mais il doit le faire le
plus rapidement et avec le moins
En pratique, l’utilisabilité doit
d’erreurs possible. C’est ce que
apporter des réponses à la question
l’on appelle l’efficience. Maintenant,
suivante : l’utilisateur a-t-il pu
imaginons que l’utilisateur n’ait pas
atteindre l’objectif fixé ? Autrement
d’idée précise quant au livre qu’il
dit, un site doit, pour être utilisable,
cherche, mais qu’il veuille flâner,
permettre à l’utilisateur de réussir à
comme dans une librairie et naviguer
faire ce qu’il veut faire.
au gré des découvertes littéraires.
Pour cela, le site doit remplir le
dernier objectif : la satisfaction.
Vous savez à présent qu’un site
web, pour être ergonomique, se doit
d’être utile, mais surtout utilisable.
C’est en prenant soin d’atteindre
l’ensemble de ces objectifs que l’on
parvient à capter ses internautes
et à prolonger leur utilisation de la
manière la plus facile et efficace
possible.

À RETENIR

Lorsque leur Un site web Un site utilisable est


utilisation semble ergonomique doit être efficace, efficient et
facile, confortable, utile et utilisable. satisfaisant.
voire sécuritaire, nous
qualifions ces objets
d’ergonomiques.

9
EXPLIQUER LE CONCEPT DE L’UX DESIGN

La règle des 3 clics


ou comment se servir
des idées reçues en UX Design ?
Connaître les idées reçues du Web pour concevoir
de véritables problématiques ergonomiques

Il est fréquent d’entendre : sur un écran, les internautes


lisent en F, ou même en Z, ou en toute autre lettre de
l’alphabet. Et bien d’un point de vue scientifique, les
mouvements oculaires n’ont pas un sens défini.

Votre regard se porte tout de suite La règle des 3 clics énonce une
sur la partie inférieure droite, et idée qui paraît de prime abord
en aucun cas vous n’avez balayé assez logique : plus le nombre de
l’écran en F pour atteindre cette clics augmente, plus l’information
zone. Il n’est pas nécessaire est difficile à atteindre et plus nous
d’organiser ses pages en fonction augmentons le risque de perdre
de tel ou tel sens de lecture car en l’utilisateur. D’où la règle des 3 clics.
réalité, c’est le design d’une page
En tenant compte du nombre
qui induit le trajet de l’œil.
de clics, on considère qu’il y a
La conception web est un domaine une difficulté physique liée au
si contextuel que nous devons clic. Cette assimilation a bien
toujours nous méfier des règles sûr son importance car chaque
censées aider la création des sites clic représente un effort pour
ergonomiques. C’est le cas par l’internaute : cliquer, attendre le
exemple d’une autre idée reçue chargement de la nouvelle page et
très répandue : la règle des 3 analyser celle-ci.
clics. Pourquoi dit-on que toute
Cependant, il faut savoir que
information dans un site Internet doit
l’internaute entame aussi avant
être accessible en moins de 3 clics ?
chaque clic un processus mental

10
EXPLIQUER LE CONCEPT DE L’UX DESIGN

de comparaison et de sélection. Il pertinente. Se préoccuper du


analyse les différents liens visibles nombre de clics est ainsi un premier
pour choisir le plus pertinent pour sa pas pour comprendre l’importance
recherche. de l’architecture de l’information.
Si le nombre de liens sur une même
Il n’y a pas de règles sans exception
page augmente afin de diminuer le
et les projets web sont presque tous
nombre de clics, cela accentue la
des exceptions tant ils recoupent
difficulté mentale pour le visiteur. Il
des problématiques variées.
a alors plus de liens à analyser. La
Cependant, la règle a l’avantage de
difficulté physique liée au clic ne doit
nous inciter à diriger notre attention
donc pas être traitée en oubliant la
sur de véritables problématiques
difficulté mentale.
ergonomiques.
Deux clics simples valent mieux
qu’un seul clic compliqué !
La règle des 3 clics partait d’une
bonne intention : permettre à
l’internaute d’atteindre facilement
et rapidement son but. Cette idée
a le mérite d’attirer l’attention sur
la problématique de la navigation,
mais sans y répondre de façon

À RETENIR

Le design d’une Il faut se méfier des Les véritables


page induit le trajet règles de conception problématiques
de l’oeil. ergonomique. ergonomiques
peuvent remettre en
cause la pertinence
des idées reçues en
conception web.

11
EXPLIQUER LE CONCEPT DE L’UX DESIGN

Quelle démarche
pour améliorer l’ergonomie
d’un dispositif digital ?
Combiner contexte, usages et utilisateurs pour une démarche
ergonomique efficace
« Wireframe », « prototype », « arborescence », « persona »,
tous ces mots vous semblent familiers, mais vous n’en saisissez
pas encore tout l’intérêt ni le sens. En quoi permettent-ils
d’améliorer l’ergonomie de votre dispositif digital ?

Tout simplement parce qu’ils Quelles sont les étapes de


sont utilisés par les deux grandes conception d’une démarche
familles de méthodes permettant ergonomique centrée utilisateur
d’améliorer une interface : les mêlant ces deux méthodes ?
méthodes expertes et les méthodes La démarche ergonomique peut
participatives. Elles se différencient être mise en oeuvre aussi bien
selon qu’elles font intervenir ou non en conception de site qu’en
des utilisateurs. Les démarches évaluation d’un site existant.
ergonomiques fiables couplent Elle se divise grossièrement en
souvent les deux afin de profiter des 4 grandes phases :
bénéfices de chacune. 1 L’analyse du contexte
Les méthodes expertes sont basées 2 L’identification des utilisateurs
sur le savoir-faire de l’UX Designer, et de leurs besoins
lequel conçoit ou évalue un site 3 La conception fonctionnelle
web au vu de ses connaissances, 4 Les tests utilisateurs
expériences et convictions.
Tout d’abord, l’analyse de
Les méthodes participatives sont
l’existant. Elle consiste en un
les méthodes par excellence de
audit ergonomique du site, en un
l’ergonomie, puisqu’elles font
benchmark concurrentiel et en un
participer et intervenir les utilisateurs
recueil de feedbacks. Par exemple,
finaux.
la hotline d’un site Internet a bien

12
EXPLIQUER LE CONCEPT DE L’UX DESIGN

souvent recueilli bon nombre maquettes ergonomiques des


de difficultés de navigation et pages-types du site : les wireframes.
d’utilisation que rencontrent les Appelés aussi maquettes
utilisateurs. fonctionnelles ou
« maquettes fil de fer », ces
Des tests utilisateurs peuvent venir
wireframes sont des schémas
compléter cette analyse. Puis l’UX
visuels ayant pour objectif de définir
Designer identifie les objectifs
l’organisation précise, la structure
réels des internautes, comme par
des éléments, les formes (de façon
exemple acheter un ordinateur.
sommaire) et les contenus présents,
Il définit ensuite ce que pourrait
sans aucune notion graphique.
être leur parcours utilisateur, par
Ces wireframes peuvent même être
exemple rechercher un ordinateur
conçus pour être interactifs. Nous
en sélectionnant une marque, puis
parlons alors de prototype. Leur but :
une taille.
effectuer des tests d’usage avec les
Il peut alors définir des modèles utilisateurs finaux.
d’utilisateurs types : les personas.
Que ce soit via les méthodes
Les besoins réels des utilisateurs étant expertes ou participatives, la qualité
maintenant identifiés, l’UX Designer ergonomique d’un site web s’obtient
passe à la conception. en conjuguant l’analyse du contexte,
Tout d’abord, il établit une des cibles et des objectifs concrets
arborescence de contenus. des utilisateurs en tenant compte
des connaissances, règles et bonnes
Ensuite, il passe à la conception pratiques de l’ergonomie web.
visuelle grâce à l’élaboration de

À RETENIR

La démarche Les personas Le contexte,


ergonomique couple permettent de les usages et les
les méthodes modéliser les besoins utilisateurs sont
participatives et réels des utilisateurs et les fondements de
expertes. leurs parcours. l’ergonomie centrée
utilisateur.

13
LISTER LES RÈGLES ET BONNES PRATIQUES DE L’UX DESIGN

CHAPITRE 2
Lister les règles
et bonnes pratiques
de l’UX Design

14
LISTER LES RÈGLES ET BONNES PRATIQUES DE L’UX DESIGN

Comment notre perception


impacte-t-elle l’utilisation
d’un site Internet ?
Découvrir la Gestalt avec les lois de proximité
et similarité

Nous l’avons tous déjà vécu, ce moment très agaçant où


nous nous sentons perdus sur un site, où nous ne trouvons
pas ce que nous recherchons. Comment en sommes-nous
arrivés là ? Trop d’informations ? Pas assez d’indications ?
Des intitulés peu clairs ? Une impression de fouillis général
qui complique notre lecture ?

Le secret d’une expérience quelles sont ces règles ? Comment


utilisateur réussie est pourtant notre cerveau analyse-t-il une page
simple : comprendre les Internet ?
internautes et s’adapter à leurs
« Le tout est différent de la somme
besoins. Chaque internaute est
de ses parties. » Voilà le postulat de
d’abord un humain et présente de
base des théories de la Gestalt
ce fait des caractéristiques bien
(« forme » en allemand), développée
précises.
au début du XXe siècle sous
Les recherches en psychologie l’impulsion de chercheurs en
fournissent des informations psychologie cognitive de l’école
fondamentales sur nos capacités de Berlin. Ces théories permettent
dans les domaines de la perception, de comprendre la manière dont
du raisonnement, du langage, de un internaute voit et intègre
la mémoire et du sensori-moteur. mentalement une page web.
Ces capacités influencent le rapport Ces théories sont composées de
qu’un internaute entretient avec plusieurs lois dont deux d’entre elles
une interface digitale et permettent sont particulièrement pertinentes
de formuler des règles universelles dans le domaine du web : la loi de
valables pour tous les sites. Mais proximité et la loi de similarité.

15
LISTER LES RÈGLES ET BONNES PRATIQUES DE L’UX DESIGN

Regardez ce dessin. Combien de groupes de


formes distinguez-vous ? Vous en voyez deux.
Pourquoi ? Parce que des objets proches
les uns des autres semblent appartenir à un
même ensemble : c’est la loi de proximité.
Pour notre cerveau, la proximité visuelle est
donc synonyme de proximité conceptuelle.
Afin de tirer parti de cette loi, il faut donc veiller
à rapprocher les éléments qui ont un lien entre
eux et au contraire éloigner les éléments qui
n’ont rien en commun.

À présent, regardez ce dessin. Combien de


groupes de formes voyez-vous pour chacune
de ces images ? À nouveau, deux. Pourquoi ?
Cette fois parce que l’on associe mentalement
des objets qui se ressemblent. Votre cerveau
a regroupé les petits ronds avec les gros, les
bleus avec les noirs. Une ressemblance ou
une différence de forme sera donc le signe que
les objets sont comparables ou opposables,
d’un point de vue conceptuel. C’est la loi de
similarité.

La Gestalt offre donc des outils pratiques pour


évaluer et concevoir des interfaces digitales. Du
point de vue perceptif, une page web n’est finalement
qu’un ensemble de formes mises les unes à côté des
autres et qui dessinent un tout.

16
LISTER LES RÈGLES ET BONNES PRATIQUES DE L’UX DESIGN

?
000 $

À RETENIR

Pour s’adapter à Ce qui est proche Les théories de la


l’internaute, il faut visuellement est Gestalt définissent
comprendre ce qui perçu comme proche les principes de la
le définit en tant conceptuellement. perception.
qu’être humain.

17
LISTER LES RÈGLES ET BONNES PRATIQUES DE L’UX DESIGN

Comment aider l’utilisateur


à se diriger sur Internet ?
Découvrir le concept d’affordance

Imaginons que vous arrivez devant une porte.


Vous ne l’avez pas encore approchée et
pourtant, avant toute action, vous savez d’un
simple regard si vous devez la pousser, la tirer
ou la faire coulisser. En effet, des indices tels
que la présence d’une poignée, d’un bouton,
voire d’un écriteau « poussez » vous indique la
façon dont vous pouvez l’ouvrir. Lorsque vous
arrivez sur un site web, c’est pareil. Les objets
d’une interface digitale vous fournissent des
indices quant à la façon dont vous pourrez
interagir avec eux.

Aider l’internaute à se diriger, c’est Plusieurs dimensions d’un objet


d’abord le diriger dans la bonne participent à son affordance :
direction. Et sur Internet, il ne s’agit >> SA FORME : un rectangle avec un
plus de poignées de porte mais, texte majuscule centré suffira
de champs de saisie, de liens, de pour être perçu comme un
boutons... L’internaute doit savoir bouton ; un texte souligné sera
très vite, d’après l’apparence d’un immédiatement perçu comme
objet, si ce dernier est cliquable, un lien.
s’il peut le mener quelque part >> SA COULEUR : les couleurs vives,
ou lui permettre d’accomplir surtout appliquées à de petites
une action. Ces caractéristiques surfaces, sont perçues comme
d’action suggérées par la forme et des liens, ou utilisées pour des
le comportement des objets sont ce boutons. Un rectangle de couleur
que l’on appelle leurs affordances. blanche vide sera perçu comme
un champ de formulaire.

18
LISTER LES RÈGLES ET BONNES PRATIQUES DE L’UX DESIGN

>> SON LIBELLÉ : les mots tels que


« S’inscrire », « Envoyer »,
« Ajouter au panier » sont des
indices de l’action.
>> SON ANIMATION AU SURVOL DE LA
SOURIS : en passant sa souris sur
un objet qui s’anime, cet objet
sera fortement perçu comme
« cliquable ».
Vous l’avez compris, il n’est donc
pas question de souligner un
titre non cliquable, de créer une
animation au survol d’une image si
elle n’est pas cliquable, ou encore
d’habiller un simple titre avec un
fond coloré rectangulaire sous peine
d’obtenir ce que l’on appelle des
affordances erronées et de décevoir
très fortement nos utilisateurs.
Les affordances permettent
aux utilisateurs d’anticiper le
comportement des objets qu’ils
voient à l’écran et donc de mieux se
diriger. En optimisant l’affordance
de « cliquabilité », vous augmentez
l’utilisabilité de votre interface et
facilitez le traitement mental de vos
pages par vos utilisateurs.

À RETENIR

Une interface fournit L’internaute doit L’affordance est la


des indices sur la repérer très vite ce capacité d’un objet
manière dont on qui est cliquable et à suggérer sa propre
peut l’utiliser. interactif. utilisation.

19
LISTER LES RÈGLES ET BONNES PRATIQUES DE L’UX DESIGN

Quels sont les attendus


incontournables
de l’internaute ?
Décoder les conventions du Web

Si je vous demande où se situe le logo sur un site, il y a de


fortes chances que vous me répondiez « en haut à gauche ».
Si je vous demande à quoi ressemble un lien, vous me
direz à coup sûr « bleu et souligné ». Si je vous montre ce
symbole « Ξ », je parie sur le fait que vous me direz qu’il
s’agit d’un menu. Ce qui est vrai pour vous, l’est aussi pour
les autres internautes. En effet, lorsqu’un internaute arrive
sur un site, il n’est pas vierge de toute expérience. Il a déjà
visité d’autres sites et en a tiré des connaissances sur leur
fonctionnement. Sans en avoir conscience, l’utilisateur
applique cet apprentissage externe aux pages des autres
sites et peut-être aux pages du vôtre !

Un site Internet doit donc être L’emplacement des éléments


cohérent avec les autres sites afin sur une page web est une des
de bénéficier des connaissances principales dimensions des
antérieures des utilisateurs. Il doit conventions du web. Ce sont
tenir compte des conventions web les conventions de localisation.
pour garantir à ses internautes Quelques exemples : le logo est
un niveau d’expertise minimal. Si presque toujours placé en haut et
de votre côté vous respectez ces très souvent à gauche ; la barre de
attendus incontournables, votre site menu principal est attendue en haut
semblera simple et intuitif parce qu’il ou sur la gauche ; en haut à droite
suit les habitudes des utilisateurs. de l’écran, on retrouve le moteur
de recherche, non loin du bouton

20
LISTER LES RÈGLES ET BONNES PRATIQUES DE L’UX DESIGN

connexion/inscription, du panier et s’attend à pouvoir cliquer sur une


du sélecteur de langues. image, ou un titre et il serait perturbé
de ne pas recevoir de message de
Les conventions de vocabulaire sont
confirmation après avoir ajouté un
également essentielles. Il est en effet
produit à son panier.
primordial de prendre en compte ce
Vouloir se différencier de ces
qui se fait sur le Web afin que vos
conventions vous expose à réduire
internautes comprennent ce que
l’utilisabilité de votre site. En
vous voulez leur dire. Ainsi, la page
respectant les conventions, votre
d’accueil ne s’appelle pas
site présentera aux utilisateurs un
« Bienvenue », mais « Accueil ». Les
design intuitif qui correspond à leurs
coordonnées se retrouvent sur la
habitudes d’utilisation.
page « Contact », et nos achats sont
centralisés sur la page « Panier ».
Enfin, la dernière dimension touche
aux conventions d’interaction.
D’après leur expérience sur d’autres
sites, les internautes s’attendent à
ce qu’un site se comporte d’une
certaine manière. Par exemple, en
cliquant sur le logo, l’internaute
s’attend à retourner sur la page
d’accueil. De la même manière il

À RETENIR

L’internaute utilise Les internautes ont Bien connaître les


les connaissances des attentes précises conventions c’est
acquises par sa propre quant à l’emplacement proposer un site à vos
expérience sur le des éléments sur une internautes au plus
fonctionnement des interface. près de leurs acquis
sites. d’utilisation.

21
LISTER LES RÈGLES ET BONNES PRATIQUES DE L’UX DESIGN

Quelle utilité
de prévoir les erreurs
de l’utilisateur web ?
Découvrir la nécessité de la gestion des erreurs des
utilisateurs web

N’avez-vous jamais cliqué à côté d’un bouton ou n’avez-


vous jamais ajouté un produit de trop à votre panier ?
Sans forcément le savoir, il y a des chances pour que
vous ayez déjà fait beaucoup d’erreurs lors de l’utilisation
d’un site ou d’une application. Personne n’est parfait et
l’utilisateur d’interfaces ne fait pas exception à la règle.
Lors de la conception d’un site ou d’une application, les
concepteurs se concentrent à imaginer le parcours et
l’action idéale qu’aura l’utilisateur. Pourtant, il n’est pas
rare que celui-ci ne réagisse pas comme on l’a prévu.

Un site web doit gérer les erreurs de ses utilisateurs


en 3 temps :

1 2 3
AVANT APRÈS AU-DELÀ
pour les prévenir pour les repérer pour faciliter
et les comprendre leur correction

22
LISTER LES RÈGLES ET BONNES PRATIQUES DE L’UX DESIGN

Pour optimiser la gestion des erreurs, il faut d’abord tout faire pour empêcher
les utilisateurs d’en commettre.

Pour le cas d’un formulaire par exemple, il faut :


>> Indiquer les champs obligatoires
>> Libeller le plus précisément possible chaque champ
>> Bien choisir la taille des champs en fonction du
type de données attendu.
Par exemple, si vous demandez à votre utilisateur de saisir un département
dans un champ pouvant contenir deux caractères, il comprendra intuitivement
que vous lui demandez le numéro du département et pas le code postal.

Le fonctionnement du formulaire peut lui-même être


protégé contre les erreurs. Par exemple :
>> Demandez une confirmation à vos internautes pour
les actions irréversibles.

L’internaute doit facilement repérer


et comprendre ses erreurs. Pour ce
faire, il faut :
Create Account

youremail@gmail.com >> Alerter les utilisateurs lorsqu’ils ont

Select Country
fait une erreur
! This fail is requiered! >> Indiquer la zone concernée par l’erreur
>> Expliciter la nature de l’erreur
Password

Entry password

Register
Un champ encadré de rouge ainsi qu’un texte
clair suffisent au repérage et à la compréhension
de l’utilisateur.

23
LISTER LES RÈGLES ET BONNES PRATIQUES DE L’UX DESIGN

Bien souvent, l’explication


de l’erreur joue
implicitement le rôle
d’aide à sa correction.
C’est bien pour cela qu’il
est si important de bien
expliciter l’erreur ! Mais
il est aussi conseillé de
suggérer à l’internaute une
solution pour la corriger.
Par exemple, si le format de
date saisi n’est pas le bon, il
faut indiquer un exemple de
bon format de date, voire
réécrire sa première saisie
sous le bon format et la lui
soumettre pour validation.

Faire une erreur n’est pas anodin pour l’internaute, qui cherche alors un coupable.
Selon la personnalité et le niveau d’expertise de l’internaute, il en rejettera la faute
sur le site, ou sur lui-même. Aucune de ces deux issues n’est souhaitable pour
vous, car dans les deux cas, votre site n’est pas perçu comme ergonomique. Une
interface doit donc être conçue de manière à ce que l’utilisateur soit guidé
pour ne pas faire d’erreur ou à défaut, être suffisamment aiguillé pour repérer
et corriger ses erreurs.

À RETENIR

Même avec une Votre interface doit Il faut guider


interface parfaitement pouvoir anticiper les l’utilisateur pour qu’il
conçue, l’internaute erreurs commises par ne fasse pas d’erreurs
fera des erreurs. l’utilisateur. ou à défaut, l’aider
à les repérer et les
corriger.

24
EXPLORER LA DÉMARCHE DE L’UX DESIGN CENTRÉE SUR L’UTILISATEUR

CHAPITRE 3
Explorer la démarche
de l’UX Design
centrée sur l’utilisateur

25
EXPLORER LA DÉMARCHE DE L’UX DESIGN CENTRÉE SUR L’UTILISATEUR

Comment créer
l’arborescence de son site ?
Catégoriser et structurer ses contenus

Tout architecte, avant de construire une


maison, établit un plan, définit le nombre
de pièces en fonction de sa superficie,
du nombre de personnes souhaitant
y vivre, etc. Il se pose aussi la question
de la communication des pièces entre
elles et de leur agencement. Pour un site
Internet c’est pareil, ou presque !
Pour que les informations soient
compréhensibles pour les utilisateurs,
il faut que le contenu soit structuré.
L’internaute doit pouvoir le parcourir
intuitivement, sans notice d’utilisation.
Le plan d’architecture de l’espace web,
c’est ce que l’on nomme l’arborescence.

Créer l’arborescence d’un site web Reprenons l’exemple de


est une étape cruciale du projet. l’aménagement d’une maison pour
Véritable squelette du site, elle sert l’instant vide. Imaginons qu’il s’agisse
aussi bien au maquettage fonctionnel de votre maison. Vous allez d’abord
des pages qu’au remplissage de regrouper dans une même pièce tous
contenus. les meubles que vous avez à votre
Deux grandes étapes permettent disposition, ce qui correspond à tous
de construire une arborescence. La les contenus que vous allez placer à
première consiste à catégoriser les l’intérieur de votre site. Le réfrigérateur
contenus, c’est-à-dire à créer des dans la cuisine, le canapé dans le
groupes. La seconde vise à structurer salon, le lit dans la chambre... Vous
ces groupes, c’est-à-dire à les allez ranger selon vos habitudes de
hiérarchiser et à définir les relations vie, mais aussi selon la fréquence
qu’ils entretiennent. d’utilisation de vos objets.

26
EXPLORER LA DÉMARCHE DE L’UX DESIGN CENTRÉE SUR L’UTILISATEUR

Les contenus étant catégorisés,


nous pouvons à présent les
Vous mettrez ainsi un objet à hiérarchiser en rubriques et sous-
portée de main si vous l’utilisez rubriques, et les représenter sous
régulièrement. forme de schéma. L’arborescence
prend forme. Elle représente
Créer une arborescence, c’est
maintenant les différentes rubriques,
pareil, à la différence que nous
les différentes pages et les relations
préparons notre aménagement afin
qui vont s’établir entre elles.
que d’autres, qui ne le connaissent
Si un site web n’est pas bien
pas encore, puissent retrouver
organisé et que l’internaute ne
rapidement et facilement ce
trouve pas ce qu’il veut, il suppose
qu’ils cherchent. Il s’agit donc de
que l’information n’existe pas. Il
regrouper l’ensemble des contenus
risque d’abandonner sa recherche
par groupe d’idées, par thèmes en
et de se tourner vers un autre site.
essayant d’anticiper sur la manière
Pour éviter cela, les informations
dont l’internaute va chercher
doivent donc être bien rangées de
l’information, en choisissant bien
telle sorte que les internautes les
ce qui aidera le plus l’internaute
trouvent facilement. C’est le rôle de
à comprendre l’organisation des
l’arborescence.
contenus.

À RETENIR

Pour que les L’arborescence d’un Les contenus doivent


informations soient site est la manière dont être structurés et
compréhensibles seront classés et liés hiérarchisés de
pour les utilisateurs, ses contenus. telle sorte que les
le contenu doit être internautes les
structuré sous forme trouvent facilement.
d’arborescence.

27
EXPLORER LA DÉMARCHE DE L’UX DESIGN CENTRÉE SUR L’UTILISATEUR

Qu’est-ce qu’un
persona en UX Design ?
Savoir construire un persona
Tout concepteur rêve de créer un site « absolument »
ergonomique, où tous les utilisateurs se sentiraient
parfaitement à l’aise et reviendraient sans cesse.
Pourtant, au risque de vous décevoir, le site web
ergonomique idéal n’existe que dans nos rêves. Ou il ne
pourrait éventuellement l’être que pour un internaute donné,
à un instant donné, dans un contexte donné. Mais alors,
comment concevoir un site ergonomique étant donné la
diversité de ses visiteurs ? En construisant des personas.

La construction d’un persona


s’effectue en 3 grandes phases :
>> la recherche
>> l’analyse
>> et la modélisation
La phase de recherche consiste à
recueillir des informations sur les
utilisateurs actuels ou futurs de
l’interface.
On part de personnes réelles que
l’équipe projet a pu rencontrer
et observer dans une démarche
ethnographique. Les personas
Les personas sont des archétypes,
peuvent aussi être construits sur
des personnages imaginaires
la base de comportements et buts
représentant un groupe d’utilisateurs
supposés ou imaginés.
dont les comportements,
caractéristiques et objectifs L’objectif de la phase d’analyse
sont proches. Ils permettent une est d’identifier les buts et les
conception réaliste basée sur ce que comportements des personnes
l’utilisateur final peut et veut faire. rencontrées afin de créer des

28
EXPLORER LA DÉMARCHE DE L’UX DESIGN CENTRÉE SUR L’UTILISATEUR

regroupements. Par exemple, moins fréquemment ou avec des


pour un site de théâtre, on pourrait exigences moindres en termes de
imaginer avoir un persona abonné, fonctionnalités.
habitué du lieu qui assiste à des À l’issue de ce travail, les personas
spectacles très régulièrement, et sont créés et sont prêts à être
un persona qui ne viendrait que utilisés par toute l’équipe de
ponctuellement, pour un spectacle conception.
qu’il aurait repéré. Le but de l’un
Les personas servent à :
est d’accéder à son abonnement
>> Synthétiser les idées qui
et à ses avantages, l’autre est de
émergent des observations
s’informer sur le spectacle qui
et des entretiens avec des
l’intéresse et d’acheter deux places.
utilisateurs
La phase finale de modélisation a >> Communiquer et partager
pour objectif de mettre en forme les une vision commune des
personas. utilisateurs au sein de l’équipe
Pour chacun des groupes à >> Générer de l’affect et
comportement et but similaires de l’empathie pour des
observés au cours des phases de utilisateurs parfois difficilement
recherche et d’analyse, on crée accessibles
un persona. Celui-ci doit a minima
Mais surtout, ils aident à la prise de
contenir :
décision dans la conception d’une
>> un prénom,
interface digitale efficace.
>> une photo,
>> un métier,
>> un âge,
>> et un récit.
Ce dernier permet de comprendre
les objectifs poursuivis et les
comportements observés. On
peut enrichir le persona avec des
éléments de situation, de contexte,
d’environnement ou d’interactions
sociales.
Mais tous les personas n’ont pas la
même importance. Il faut donc les
hiérarchiser. Le persona primaire
représente ainsi le type de visiteurs
le plus fréquent du site. Le persona
secondaire se sert du système

29
EXPLORER LA DÉMARCHE DE L’UX DESIGN CENTRÉE SUR L’UTILISATEUR

À RETENIR

Un site n’est Un persona est un La recherche,


ergonomique que pour archétype représentant l’analyse et la
un internaute donné, à un groupe de modélisation sont les
un instant donné, dans personnes dont les trois grandes phases
un contexte donné. comportements, de construction d’un
motivations et buts persona.
sont proches.

30
EXPLORER LA DÉMARCHE DE L’UX DESIGN CENTRÉE SUR L’UTILISATEUR

Comment améliorer
l’expérience utilisateur
grâce aux scénarios d’usage ?
Transformer l’objectif d’un utilisateur en scénario d’usage

Vous voulez acheter un nouvel appareil photo, comparer


les prix des billets d’avion, savoir quel temps il fera ce
week-end… Vous avez toujours une motivation et un
objectif en tête lorsque vous consultez et utilisez une
interface digitale. Le rôle de l’UX Design, c’est justement
de vous permettre d’atteindre votre but le plus facilement,
rapidement et avec le moins d’erreurs possible. Savoir
précisément pourquoi un internaute vient utiliser une
interface est donc crucial pour optimiser l’expérience
utilisateur.

Cette courte histoire qui décrit est complètement différent d’atterrir


les motivations et objectifs d’un là par hasard ou d’arriver sur la
utilisateur, c’est ce que l’on nomme recommandation d’un ami. Être dans
un scénario d’usage. la rue avec son Smartphone n’aura
pas le même impact en termes
Un bon scénario utilisateur est
d’utilisation que d’être chez soi le
court, pertinent et précis. Il prend en
soir avec sa tablette devant la télé.
compte le contexte dans lequel se
On souhaitera de la rapidité et de
trouve l’utilisateur lorsqu’il arrive sur
l’efficacité sur son Smartphone alors
l’interface et l’objectif précis de sa
que l’on sera plus enclin à flâner sur
venue.
sa tablette. Le contexte d’utilisation
Venir sur un site en raison influence donc fortement les
d’expériences passées positives scénarios d’usage.

31
EXPLORER LA DÉMARCHE DE L’UX DESIGN CENTRÉE SUR L’UTILISATEUR

L’objectif de l’utilisateur est Transformer les objectifs des


également essentiel pour concevoir utilisateurs en scénarios d’usage,
un scénario d’usage. Vous pouvez avec des variables, permet d’être
par exemple aller sur un site au plus proche des besoins réels de
marchand pour acheter précisément vos internautes et de leur proposer
un produit, ou simplement pour des fonctionnalités parfaitement
comparer les prix de la famille du adaptées.
produit en question. Prendre en
Ce n’est que lorsque nous savons
compte l’objectif, c’est le transformer
qui fait quoi sur notre interface,
en scénario d’usage concret, en étant
comment et pourquoi il le fait, que
le plus précis possible quant aux
nous pouvons définir des exigences
tâches que l’utilisateur va effectuer.
de conception suffisamment
Par exemple : « Comparer les
concrètes. De bons scénarios
produits » doit devenir « Comparer
d’usage permettent donc de définir
les ordinateurs portables de 13
des exigences de conception
pouces de marques différentes ».
solides et d’améliorer l’utilisabilité et
Pourquoi tant de précisions ?
l’expérience utilisateur.
Parce qu’ici, « 13 pouces », «
Apple et Microsoft » sont ce que
l’on appelle des variables. Ces
variables vont entraîner la création
de fonctionnalités dédiées. Dans cet
exemple, l’interface devra proposer
un tri par taille d’écran, mais aussi
par marque.

À RETENIR

Connaître les objectifs Un scénario d’usage Écrire des scénarios


de vos utilisateurs décrit le processus d’usage permet
est crucial pour suivi par l’utilisateur d’être au plus près
optimiser l’expérience en vue d’atteindre son des besoins réels des
utilisateur. objectif. utilisateurs.

32
L’UX DESIGN, ÇA S’APPREND !

RETROUVEZ NOS FORMATIONS


EN UX DESIGN

>> Chargé d’UX design


>> L’expérience utilisateur (UX) :
les meilleures pratiques
>> Design thinking
>> Affinity Designer
>> Design émotionnel
En savoir + sur les programmes

« L’UX DESIGN, ÇA S’APPREND ! »


ET BIEN D’AUTRES THÈMES À RETROUVER SUR LE SITE DE PYRAMYD
Découvrez nos parcours vidéo en ligne, formez-vous
à votre rythme, en tout lieu, à tout moment, sur tous supports !

Je me forme en ligne

QUI SOMMES-NOUS ?
PYRAMYD NTCV, créée en 1989, est une entreprise dont
les activités sont principalement orientées vers les métiers
de la communication visuelle, de la création et du design.
Avec plus de 30 ans d’existence, Pyramyd a acquis
une solide expérience de transmission de savoirs et de
diffusion de la connaissance.
En 2013, Pyramyd a rejoint le groupe ABILWAYS, le
multispécialiste du learning.

33
RETROUVEZ TOUTES NOS FORMATIONS SUR :

PYRAMYD-FORMATION.COM

Pour suivre nos actualités, événements, avis d’experts,


rendez-vous sur notre blog et nos réseaux sociaux :

blog.pyramyd-formation.com

15 RUE DE TURBIGO - 75002 PARIS


01 40 26 00 99

Vous aimerez peut-être aussi