UX/UI DESIGN

Ecrit par CISSE Cédric

Enseignant Chercheur à L’ESATIC

1
2
Plan du cours

Objectifs Pédagogique...........................................................................................6

Introduction...........................................................................................................7

Chapitre I : Différence entre UX et UI..................................................................9

I. UI design................................................................................................9

II. UX design..............................................................................................9

III. Les enjeux du UX design.................................................................11

Conclusion partielle.........................................................................................13

Chapitre II : UX Design......................................................................................14

I. Le métier de UX Designer......................................................................14

1. Missions du UX Designer....................................................................14

2. Qualités requises pour être un bon UX Designer................................15

II. Les fondamentaux du UX Design...........................................................15

1. L’utilisateur au centre du design.........................................................15

2. La notion d’usabilité............................................................................16

3. Le taux de rétention.............................................................................18

4. Le Hook Canvas..................................................................................18

5. Concevoir un produit simple...............................................................22

6. Création pour l’utilisateur mobile........................................................23

III. La démarche UX Design.........................................................................25

1. Le comportement de l’utilisateur.........................................................26

2. Méthodes utilisées par les agences......................................................31

3
Chapitre III : UI Design.......................................................................................39

I. Le métier de UI Designer........................................................................39

1- Missions...............................................................................................39

2- Qualités d’un UI Designer...................................................................39

II. Ergonomie/ Intuitivité / Navigabilité......................................................40

III. Codes graphiques & significations.........................................................40

IV. Codes chromatiques................................................................................45

V. Typographies..........................................................................................51

VI. Mises en pages et leurs significations.....................................................53

VII. Quelques outils de UI..........................................................................55

Chapitre IV : Pratique du Design Thinking.........................................................56

I. Faire preuve d’empathie.........................................................................57

1- Pourquoi faire preuve d’empathie ?.....................................................57

2- Comment développer l’empathie ?......................................................58

II. Définir le besoin......................................................................................59

1- Pourquoi définir le(s) besoin(s)...........................................................60

2- Comment analyser les besoins ?..........................................................61

III. Rechercher des idées...............................................................................61

IV. Prototyper des solutions..........................................................................62

1- Pourquoi prototyper ?..........................................................................63

2- Comment prototyper ?.........................................................................64

V. Tester les solutions..................................................................................65

1- Pourquoi tester ?..................................................................................65

2- Les méthodes de tests..........................................................................66

4
Conclusion...........................................................................................................67

Liste des figures...................................................................................................68

Liste des tableaux................................................................................................69

5
Objectifs Pédagogiques

Le couple UX/UI (User eXperience/ User Interface) design représente

l’évolution de concepts tels que le webdesign ou encore l’interface Homme
Machine. Ce cours a pour objectif d’inculquer à l’apprenant une méthodologie
appropriée à la conception visuelle des applications tout en mettant l’utilisateur
au centre de son approche. L’apprenant devra être en mesure de délivrer un
produit visuel en se basant sur les motivations et les émotions des utilisateurs.

Il s’agira en substance :

- De faire la différence entre les métiers de UX Design et de UI Design

- De maitriser les concepts et outils numériques/digitaux à la disposition du
UX Designer et du UI Designer
- De maitriser le concept de Design Thinking
- De mettre en place une UI en adéquation avec les besoins déterminés par
les UX Designers

6
Introduction

En 2009, Jared Spool et son équipe ont été amenés à travailler pour un acteur
majeur du e-commerce. L’objectif étant d’optimiser le tunnel d’achat, une étude
a été réalisée en laboratoire dans le but d’y étudier les comportements des
utilisateurs lors de la validation de leur panier. L’étude en question a mis en
évidence des freins pour finaliser l’achat. Afin de pouvoir compléter le tunnel
d’achat l'utilisateur devait obligatoirement être authentifié.

Ce pré requis nécessitait la création d’un compte pour un nouvel utilisateur et de

se souvenir de son mot de passe pour un utilisateur déjà inscrit. Certains ne se
souvenant pas de leurs identifiants sont allés jusqu’à créer plusieurs
comptes. L’étude de la base client démontre que 45% des clients possédaient
plusieurs inscriptions. Les statistiques de renouvellement de mot de passe, ont
également révélé une moyenne de 160 000 demandes par jour.  Seulement 25%
de ces demandes ont été transformées en achat.

Les designers ont réglé le problème simplement en remplaçant le bouton “se

connecter” par “continuer” et ont ajouté ce message : “Vous n'avez pas besoin
de créer un compte pour effectuer des achats sur notre site. Cliquez simplement
sur Continuer pour passer votre commande. Pour accélérer vos futurs achats,
vous pouvez créer un compte lors de votre commande.”

Résultat : le nombre d’achats a augmenté de 45%, les ventes

supplémentaires ont atteint 15 millions de dollars le premier mois et 300
millions la première année.

Bien plus qu’un effet de mode, l’UX design suscite de plus en plus d’intérêt
pour les entreprises conscientes qu’elles doivent s’adapter aux besoins des
utilisateurs et non l’inverse. Le marché étant de plus en plus concurrentiel et le
consommateur de plus en plus volatile, il est de ce fait important d’étudier son

7
comportement, ses attentes, ses besoins afin que son parcours pour réaliser une
action soit le plus fluide, intuitif et satisfaisant possible.

Le piège qu’il faut absolument éviter est de confondre UX design et UI design.

Le second n’étant qu’une étape du processus UX. Souvenez-vous qu’un beau
papier cadeau ne sera pas suffisant si le contenu de votre paquet est vide.

Partage d’expérience

Partagez nous une mauvaise expérience que vous ou un de vos proches a vécu
lors de l’utilisation difficile d’un logiciel ou d’un site web.

8
Chapitre I : Différence entre UX et UI

De nombreuses personnes font l’erreur d’assimiler le design au beau. En réalité,

design est un mot anglais qui signifie conception. De ce fait, faire du design ne
correspond forcément à faire de l’artistique, de l’attrayant ou du beau, mais
correspond plutôt au processus de conception d’un produit utile.

Aujourd’hui très en vogue, la notion d’UX design est souvent mal comprise et

maladroitement associée au design d’interface (UI design). Bien que ces deux
notions soient indissociables, il faut cependant faire attention à ne pas les
confondre. Afin de ne plus faire l'amalgame entre UX design et UI design voici
un petit rappel.

I. UI design

Le terme “UI” pour “User Interface”, représente la couche visuelle, ou

“interface”, qui permet à l’utilisateur d’interagir avec le produit. Le travail du
designer d’interface, consistera donc, à organiser les éléments graphiques (choix
des couleurs, emplacement des boutons, position des menus, taille des polices,
…) de manière à proposer un produit efficace, simple d’utilisation et attrayant.
En réalité cet exercice n’est que le résultat d’un travail plus approfondi réalisé
par un UX designer.

II. UX design

L’acronyme “UX” vient de l’expression anglaise “User eXperience” (expérience

utilisateur). L’expérience utilisateur se définit par le ressenti de l’utilisateur lors
de son interaction avec un produit, un service ou un objet. De ce fait l’UX
design consiste à prendre en compte l’expérience de l’utilisateur lors du
processus de conception. Longtemps ignorés, les usagers interviennent

9
désormais très tôt comme parties prenantes afin que la solution finale
corresponde mieux à leurs attentes et besoins.

Vous n’arrivez toujours pas à distinguer UX design et UI design ?

La photo ci-dessous devrait vous aider à mieux cerner la différence entre ces
deux notions.

Sur cette photo nous pouvons facilement comprendre l’intérêt de l’UX design et
son impact sur le design d’interface. Si le comportement des usagers avaient été
pris en compte en amont de la conception de cette allée, le dallage aurait été
différent et certainement plus adapté à leurs comportements.
10
Au final, l’UX Design c’est donc très simple, c’est avant tout créer, améliorer et
optimiser une expérience utilisateur dans une situation donnée : achat d’un
produit en ligne, visite d’un site, parcours en magasin, utilisation d’un produit...
Dans une démarche d’UX Design, l’objectif est de se démarquer grâce à une
expérience agréable, simple et intuitive afin de créer, idéalement, un affect et un
lien avec l’utilisateur qui lui donnera envie de revenir vers nous ( = vers notre
produit, notre service).

Aujourd’hui, l’UX revient en force car intervenant fortement dans notre société
où la frontière entre digital et physique tend à disparaître et où les interactions
avec les utilisateurs sont de plus en plus complexes, nombreuses et stratégiques
afin de séduire un utilisateur (sur un site, une application, dans un magasin, via
une newsletter, dans un magazine,...).

III. Les enjeux du UX design

Si les entreprises s’intéressent de plus en plus à l’UX design, c’est qu’il a un

impact non négligeable sur le comportement des utilisateurs, leur perception du
produit ou service et leur fidélité. Une étude menée par Youand*, démontre que
68% des utilisateurs quittent un site internet en raison d’une mauvaise
expérience utilisateur et que 44% des acheteurs en ligne partageront avec des
amis une mauvaise expérience.

11
Figure 1: Les enjeux du UX Design

12
Conclusion partielle
Pour certains, ce cadre de conception appliquant sciences cognitives et
comportementales au design produit s’apparente à de la manipulation. En ce qui
concerne votre application, vous aurez une responsabilité envers les utilisateurs
que vous allez accrocher. A vous de trouver un juste milieu enrte les intérêts de
vos utilisateurs et ceux de votre entreprise.

13
Chapitre II : UX Design

« On ne design pas l’expérience mais pour l’expérience » Marc Hassenzhal

I. Le métier de UX Designer

L'UX designer ou l'user expérience designer est un concepteur d'interfaces

numériques dont la démarche est centrée sur l'utilisateur. D'une manière
générale, son poste correspond à une évolution de celui de web designer. Il est
donc chargé, en tant que designer, de répondre aux attentes des l'internautes en
termes de navigation sur les plateformes web.

1. Missions du UX Designer

L'UX designer a pour principale mission d'optimiser la plateforme en ligne d'une

marque (site web, application desktop, application mobile ou logiciels...), en
tenant compte essentiellement des besoins des utilisateurs. Il intervient alors
pour définir quels sont les critères déterminants pour eux, afin de proposer une
amélioration de l'interface. De fait, son travail consiste à effectuer une mise au
point multicritère permettant de répondre à une meilleure accessibilité. Pour
cela, il s'appuie sur les blocages rencontrés et retravaille ainsi la visibilité,
améliore la simplicité d'utilisation, affine l'intuition du système et facilite la
confiance de l'utilisateur. En plus d'être un pointu technicien, son rôle est donc
hautement stratégique. Enfin, sa mission n'est remplie qu'une fois l'amélioration
vérifiée. Après que la plateforme web ou l'application mobile aient été
modifiées, son rôle consiste justement à en mesurer les résultats.

Les différents rôles de l'UX designer consistent alors à :

• Identifier les principaux enjeux de l'application ou de la plateforme web
• Réaliser des tests et des études auprès des utilisateurs sur les points à améliorer

14
• Elaborer le profil des utilisateurs
• Créer le storytelling dont le but est de générer l'émotion chez l'internaute
• Analyser et adapter le projet en conformité avec l'image de la marque
• Proposer des mock-ups (ébauches de l'évolution du design)
• Spécifier les projets retenus sous forme de maquettes destinées au développeur
• Mesurer l'efficacité des améliorations apportées

2. Qualités requises pour être un bon UX Designer

L'UX designer maîtrise parfaitement le design de l'interaction ainsi que

l'architecture de l'information. De toute évidence, il se doit d'être un expert du
multimédia et de la programmation informatique, disposant ainsi des
connaissances nécessaires pour assurer le processus d'amélioration des interfaces
numériques dont il aura la charge. Par ailleurs, il doit présenter d'excellentes
capacités de collaboration. Au sein de ses fonctions, il travaille en équipe et
coopère de très près avec l'UI designer (utilisateur interface designer), les
développeurs, les chefs de produit et les graphistes. Il doit donc avoir le sens de
l'écoute, du travail d'équipe, assorti d'une réelle aisance relationnelle. Enfin,
outre ses sens de l'analyse et de l'observation indissociables à la prise de ses
fonctions, il doit être pourvu d'un véritable esprit créatif et d'un fort potentiel
d'imagination.

II. Les fondamentaux du UX Design 

De nombreuses méthodes ont été élaborées et éprouvées pour aiguiller les UX

Designer. Si leurs approches sont différentes dans la théorie, dans la pratique
elles ont de nombreux points en commun, que nous vous présenterons dans cette
partie.

15
 1. L’utilisateur au centre du design

L’approche UX est en permanence centrée autour de l’humain et de ses activités

et cela demande de la rigueur : tous vos choix doivent se faire à partir et en
fonction de vos utilisateurs !

Ce que vous concevez (site web, application mobile) va être utilisé par des
personnes. Vous devez donc les connaître et les comprendre.

« Un bon design commence par une bonne compréhension de la

physchologie humaine » - Steeve Krug

Principe 1 : Ne créez pas pour vous mais pour vos utilisateurs

Observez le monde autour de vous et soyez attentifs aux besoins des individus et
aux problèmes qu’ils rencontrent dans la vie de tous les jours, cherchez à y
apporter une réponse.

Principe 2 : Ne cherchez pas à plaire à tout le monde

Il est faux de penser que pour qu’une expérience soit bonne, il faut qu’elle soit
universelle, qu’elle corresponde à tout le monde. Ce serait bien si c’était
possible, mais la plupart du temps ce n’est pas le cas !

On ne peut pas faire un produit pour tout le monde, qui convienne parfaitement
à tout le monde. Tout simplement parceque tout le monde est différenct. En
voulant plaire à tout le monde on finit très souvent par plaire à personne…

En vous lançant dans ce périple, vous risquez de concevoir un produit

incompréhensible dans lequel personne ne se retrouve.

2. La notion d’usabilité

16
L’usabilité est la capacité d’un utilisateur à utiliser un produit à comprendre
l’usage d’un produit : à quoi il sert, et comment on s’en sert.

En anglais : usability = use (usage)+ ability (capacité)

En français : usabilité ou utilisabilité = utilisation + abilité (ou capacité)

La norme ISO 9241-11 défini l’usabilité comme étant « le degré selon lequel un
produit peut être utilisé par des utilisateurs identifiés, pour atteindre des buts
définis avec efficacité, efficience et satisfaction, dans un contexte d’utilisation
spécifié » .

Activité en groupe de quatre

Durée de reflexion : 5 minutes
Refléchissez en groupe et énumérez des critères d’usabilités que vous partagerez
avec l’ensemble de la classe.

Voici les critères d’usabilité :

- Utille
- Utilisable
- Navigable
- Accessible
- Compréhensible
- Simple

En somme l’usabilité doit contribuer à aider , guider l’utilisateur dans

l’utilisation du produit.

Ne confondez pas « usabilité » et « UX »

Elles ont des points en commun , mais elles ne sont pas des synonymes.

De façon interchangeable, vous pourrez entendre « UX design » ou 

« usabilité ». Or, l’usabilité est une composante de l’UX design :
17
 - UX Design est une discipline plus large dont l’objectif est de rendre
l’utilisateur heureux, d’offrir une expérience agréable et significative.
L’émotion rentre en ligne de compte.
- La dimension d’usabilité (englobée dans l’UX design) consiste à
permettre aux utilisateurs d’accomplir un ensemble de tâches avec
simplicité.

3. Le taux de rétention

Il existe plusieurs manières de mesurer le succès d’une UX, de façon qualitative

et/ou quantitative.

Activité personnelle
Quelle est la différence en qualitatif et quantitatif.

De manière qualitative, vous pouvez regarder la notation d’une application

mobile dans l’App Store/Play Store (le nombre d’étoiles), ou lire et analyser les
commentaires des utilisateurs.

De manière quantitative , nous prendrons en compte le taux de retention. C’est

la part d’utilisateurs qui continuent d’aller régulièrement sur une app ou un site
web plus de 3mois après l’avoir découvert et utilisé pour la première fois.

Ce sont les applications de messageries, comme Facebook (98%) ou Whatsapp

(77%) qui ont les meilleurs taux de rétention, souvent parceque l’instantanéité et
les nouvelles façons de communiquer entraînent une fréquence d’usage très
importante, et finissent par générer l’addiction.

Pour avoir un ordre d’idée, sachez que le taux de rétention moyen dans les
applications mobile est de 11% et qu’au-delà de 30% (comme snapchat=33%)
on considère cela comme un succès. Visez donc un taux de rétention de 30%.

18
 4. Le Hook Canvas

Vous êtes vous déjà surpris à vous connecter sur un site web ou une application
ou un site web de manière compulsive pour combler un moment de solitude ?
Sinon, connaissez vous quelqu’un qui va sur instagram plus de 10 fois par jour
de peur de manquer quelque chose.

Si c’est le cas, cela n’a rien de surprenant. En fait, le modèle économique et

donc le succès de bon nombre d’applications comme facebook, youtube ou
instagram reposent sur ce genre de comportements : on parle alors de relation
« haute fréquence » avec ses utilisateurs.

Développé par Nir Eyal, professeur à l’école de commerce Standford, le modèle

du crochet (Hook Canvas en anglais) suggère que pour accrocher ses utilisateurs
, le flow de votre application doit s’articuler autour de 4 phases qui se
complètent et se répètent formant ainsi une boucle.

Elément déclencheur

Investissement Action

Récompense variable

Figure 2 : Le modèle Hook Canvas

19
Si les utilisateurs passent par les 4 phases de cette boucle assez fréquemment,
des habitudes comportementales peuvent commencer à se former, parfois au
point de développer des automatismes voire des addictions.

PHASE1 : L’ELEMENT DECLENCHEUR

Activité de groupe
Qu’est ce qui peut pousser quelqu’un à se rendre sur facebook, instagramm ou
youtube plusieurs fois par jour ?

Il en existe deux types : les déclencheurs internes et les déclencheurs externes.

Type Caractéristiques Exemple

Déclencheurs Ils tirent l’utilisateur vers - La solitude
internes l’application. Les plus puissants - L’ennui
déclencheurs internes sont des états - La peur de manquer
psychologiques ou des émotions. quelque chose
Ces sentiments sont souvent négatifs
parcequ’ils sont la manifestation du
problème que l’utilisateur cherche à
résoudre avec le produit.
Déclencheurs Ils poussent l’utilisateur vers - La publicité
externes l’application. A force d’y être - Les notifications
exposés - Les boutons d’appels
à l’action
Tableau 1 : Catégorisation des éléments déclencheurs selon le modèle Hook Canvas

PHASE 2 : L’ACTION

20
Une fois l’expérience déclenchée, l’utilisateur doit pouvoir passer à l’action
souhaitée le plus facilement possible.

En tant que designer, vous avez donc pour mission :

- D’éliminer au maximum la friction qui pourrait freiner ou démotiver

l’utilisateur : clics superfus, remplissage de champs interminable, lecture
sans fin, etc;
- De réduire la charge cognitive de façon à rendre la prochaine action
clairement identifiable.

Pensez-y un instant : quoi de plus simple que défiler un fil de photos sur
instagram (si ce n’est peut être de laisser la lecture automatique de Youtube
choisir la prochaine vidéo) ?

La gratification est instantannée et surtout… est imprévisible !

PHASE 3 : LA RECOMPENSE VARIABLE

En se connectant ou en exploirant facebook, instagram ou youtube, l’utilisateur

ne sait pas exactement ce qu’il va trouver et c’est cet élément de surprise qui le
pousse à revenir ou à rester plus longtemps sur l’application.

Comme s’il tirait sur le levier d’une machine de casino, l’utilisateur se retrouve
constamment tenté de prolongé l’expérience dans l’espoir et l’anticipation d’une
meilleure récompense, par exemple descendre un fil d’actualité dans l’espoir de
tomber sur un article plus captivant, une photo drôle ou des nouvelles d’un ami
proche.

D’autres exemples de récompenses variables :

 Le nombre de mentions j’aime ou autres réactions sur une photo ;

 Un commentaire sur un statut ;
 La réponse à un message privé ;
21
  Un nouvel ami (facebook), follower (twitter), relation (linkedin) ou
affinité (tinder).

PHASE 4 : L’INVESTISSEMENT

Enfin, après l’élément déclencheur, l’action et sa récompense variable,

l’utilisateur devrait naturellement être tenté de rentrer dans la 4 e et dernière
phase du modèle : l’investissement.

A l’inverse d’un produit physique qui se dévalue avec le temps, plus on utilise
une application, plus on y crée et on y stocke de la valeur.

Ainsi…

 En rentrant des données (compléter ou mettre à jour un profil),

 En s’abonnant à une page ou à une chaine,
 En publiant une photo ou vidéo ou encore,
 En envoyant un message privé,

… l’utilisateur augment ses futures chances d’être recompensé (par rétroaction)

et par la même occasion charge les prochains déclencheurs qui le ramèneront sur
l’application.

5. Concevoir un produit simple

Deux conseils pour un produit simple :

ASTUCE N° 1 : SOYEZ SIMPLES

Un produit doit pouvoir être évident, se comprendre de lui-même. A chaque

partie de l’application , l’utilisateur doit savoir où il se trouve, devant quoi et
pour faire quoi ?

22
Notez bien : Ce n’est pas parceque vous fournissez un mode d’emploi avec votre
produit que vous le simplifiez… Au contraire, ce n’est pas la peine de concevoir
une aide guidée semblable à un tutoriel (cliquez là, puis là…) , les utilisateurs ne
s’en préoccuperont pas et essaieront de faire sans.

ASTUCE N° 2 : NE FAITES PAS UN PRODUIT TOUT EN UN

Un produit qui possède toutes les fonctionnalités de la terre et de la lune n’a

aucun intérêt. Le succès d’une UX repose très souvent sur une caractéristique
déterminante, une fonctionnalité qui permet une utilisation du produit rapide et
pour ce qu’il est.

Plus vous ajoutez des fonctionnalités, plus votre produit devient compliqué.

6. Création pour l’utilisateur mobile

Activité de groupe de 2
Refléchissez en 10 minutes aux contraintes liés au mobile et partager avec la
classe.

Utiliser le mot « mobile » pour ne désigner que les smartphones nous semble
trop restrictif. Le mobile désigne plus largement ce qui est portable , ce que l’on
emmène avec nous.

 C’est l’utilisateur qui est mobile

Le terminal ne pourrait être mobile sans les déplacements de son propriétaire.

Pensez votre produit en gardant à l’esprit que l’utilisateur prend les transports,
cherche en permanence à avoir un bon réseau et suffisamment de batterie,
voudra utiliser vos services partout, commence à préférer les images que les
textes parceque cela va plus vite et transmet mieux une émotion ou un message,

23
possède de nombreuses applications mobiles pour des besoins différents et que
ces applications sont souvent vos concurrents.

En résumé, La mobilité n’est pas que géographique elle réside aussi dans la
diversivité des utilisations possibles et l’alternance des outils à la disposition des
utilisateurs.

 Intégrez l’approche du mobile-first

L’approche du « mobile-first » consiste à traiter les attentes en termes de
mobile en premier. Ce n’est pas tellement que le mobile est un problème,
c’est plutôt qu’il s’agit de prendre en considération les contraintes liées au
mobile d’abord pour ensuite passer à la version desktop.

 Assimiler les contraintes de l’appareil mobile

L’usage des appareils mobiles nous impose de nombreuses contraintes
internes et externes à l’appareil.
Considérant les contraintes internes nous citerons :
- L’adéquation entre la morphologie de l’appareil et les capacités
d’usage de l’être humaine,
- Les caractéristiques de l’appareil lui-même.

Au titre des contraintes externes :

- La mobilité des utilisateurs,

- L’évolution technologique.
Le tableau ci-dessous mettra la lumière sur les contraintes ci-dessus
énumérés.

Constraintes Solutions proposées

La taille de l’écran est très Afficher l’essentiel du contenu, à la
petite et l’utilisateur y navige bonne taille au bon endroit.

24
avec un doigt.
Un smartphone s’utilise très
souvent en marchant.
Le réseau est aléatoire ,
parfois bon, parfois
fluctuant, faible, voire
inexistant…
La batterie des smartphones
d’aujourd’hui dure
maximum en une journée.
Sur un ordinateur on navigue avec
l’écran grace à un curseur qui est tout
petit comparativement à la taille de
l’écran et qui permet un grand niveau
de précision et de contrôle du
mouvement. Sur un smartphone on
interagit avec le doigt beaucoup plus
gros en proportion par rapport à
l’écran.
Charger rapidement les pages, meme
quand le réseau n’est pas en 4G.
Ne pas consommer trop d’énergie et
donc de batterie.

Tableau 2 : Les contraintes de l'appareil mobile

III. La démarche UX Design

Les principaux acteurs du UX Design sont le client, l’agence et l’utilisateur. Le

client est celui qui a l’idée du produit. Lequel produit est destinée à une
cible que nous désignons sous le vocable utilisateur. Pour la réalisation de ce
produit, les services d’une équipe technique seront sollicités, cette équipe c’est
l’agence.

25
 Figure 3 : La démarche UX Design

La démarche à suivre en tant que client sera étudiée dans la partie de ce cours
dédiée au design thinking. Le comportement de l’utilisateur seront énumérées
dans les lignes qui suivent. Ensuite, ce sera l’occaion pour nous l’occasion, de
dévouvrir quelques méthodes utilisées par les agences.

1. Le comportement de l’utilisateur

1.1.Le parcours de l’œil

L'oeil des internautes balaye toujours les pages de la même façon. Tenez compte
de ce parcours pour mieux construire vos pages.

Deux grandes théories traitent du parcours de l’humain sur un écran : le parcours

en F et le parcours en Z.

26
Le parcours en F

Le visuel ci-après est le résultat d'une étude réalisée par "UseIt.com" sur la façon
dont les internautes explorent une page Web.

Figure 4 : Les parties d'une page web qui bénéficient d'une grande visibilité

Les parties coloriées en rouge sont celles sur lesquelles l'oeil des visiteurs s'est
attardé le plus longtemps. Les parties bleues celles qui ont eu droit à un passage
rapide. Les parties jaunes ont bénéficié d'une visibilité moyenne. Les parties
grises n'ont pas ou quasiment pas été vues par les visiteurs.

L'oeil parcours la page Web en suivant un trajet en forme de "F" majuscule.

Dans cet exemple, c'est le centre gauche de la page qui semble bénéficier
du maximum de visibilité. On peut toutefois supposer que si la page est jugée
inintéressante au premier coup d'oeil, seule la zone supérieure gauche de la page
aura été examinée.

27
Un parcours en "F" : l'oeil "accroche" sur les titres et les sous-titres ainsi que sur
toutes les parties de la page présentant un fort contraste de couleur ou de
luminosité. L'oeil a également tendance à explorer les éléments situés à droite
des titres ou des différents éléments qui sont parvenus à attirer son attention.

Ordre du parcours : on constate que le premier balayage est horizontal et se situe

dans la partie supérieure. L'oeil entame ensuite un balayage vertical calé sur le
côté gauche du contenu principal avant d'explorer tous les points à fort contraste.

Que faut-il en conclure ?

Présentation en liste : les "puces" (points ou motifs de gauche) accroche le regard

et améliorent le taux de lecture.

Le titre de votre page ainsi que les deux paragraphes qui le suivent sont des
éléments essentiels pour déclancher l'intérêt du lecteur.

Les inter-titres ou sous-titres (en tête de chaque paragraphes) permettent de

conserver les lecteurs qui s'apprêtent à quitter votre page

Le jeux des contrastes est celui qui vous permet de capter l'attention du lecteur.

Dans l'une de ses pages de conseils, Google propose des emplacements de

publicités qui semble s'inspirer du parcours en "F". Le cadre rouge représente
l'emplacement le plus lu, suivi des cadres oranges puis jaunes et blancs.

La prise en compte de ces conseils peut avoir une influence importante sur les
revenus de vos publicités

Le parcours en Z

Le Centre collégial de développement de matériel didactique (CCDMD), géré

par le collège de Maisonneuve au Québec a édité en 2007 un guide du design

28
("Notions de design de l’interface utilisateur") comportant une section sur la
mise en page. Voici ce que nous dit cette section :

 L’agencement de l’écran et disposition des éléments

La plupart des utilisateurs ont recours à deux stratégies de lecture à l’écran.

Figure 5 : Tracé de l’oeil en Z lors de la lecture d’un écran

La lecture dite en Z consiste à effectuer un balayage de l’écran depuis le coin

supérieur gauche jusqu'au coin supérieur droit. L’oeil glisse ensuite vers le coin
inférieur gauche, en passant par le centre de l’écran, pour finir son parcours vers
le coin inférieur droit.

Cette stratégie d’exploration se fait lorsque l’utilisateur découvre un nouveau

logiciel ou un nouveau site Internet (figure 34).

La lecture ponctuelle est une stratégie de balayage de l’écran qui permet à

l’utilisateur d’effectuer une recherche visuelle précise d’éléments lorsqu'il
suppose connaître leurs emplacements. Ce mode de recherche est propre aux
utilisateurs expérimentés.

29
 Figure 6: Grille de visibilité et d’accessibilité générale.

Figure 7 : Suggestion d'implantation des éléments.

Au cours des dernières années, la plupart des concepteurs de logiciels ou de sites

Internet tendent à uniformiser l’emplacement des composants de l’écran de
travail. La barre de menu est généralement en haut de l’écran, la table des
matières est à gauche de la page ou en haut (exceptionnellement en bas, jamais à
droite), etc.

La cohérence est un des facteurs clés d’une interface conviviale et réussie. Pour
organiser les éléments qui composent un écran, on doit prendre en considération
leur visibilité, leur emplacement à l’écran et la cohérence de leur organisation.

On peut diviser la surface de l’écran en quelques zones distinctes, de façon à

définir une grille de conception qui sera le gabarit visuel d’une application ou
d’un site Internet. 

Certaines zones sont sujettes à beaucoup d’interactions – la barre des menus, par
exemple. 

Le sens de la lecture chez les Occidentaux est de la gauche vers la droite; il est
donc souhaitable de placer à gauche, dans la zone de la barre des menus, les
informations importantes et, en ordre de moindre importance, les autres
fonctionnalités vers la droite.

30
Il en va de même pour une palette d’outils dans laquelle ceux qui sont le plus
fréquemment utilisés sont situés dans le haut de la palette tandis que ceux qui le
sont moins se retrouvent au bas.

Lorsqu'il est correctement conçu, le gabarit permet à l’utilisateur de se retrouver

facilement avec une interface homogène et cohérente dans tout le logiciel ou le
site.

1.2.Le principe d’affordance

L’affrondance est la capacité d’un objet ou d’un système a évoquer son

utilisation, sa fonction. En ergonomie elle permet de rendre un objet ou un
service intuitif.

Le principe est de faire une interface qui minimine les efforts de l’utilisateur
pour comprendre le rôle de chaque élément du produit.

Concrètement, dans une interface digitale, les dispositifs invitant à l’action –

favorisant l’affordance – pourront être :

- Des « objets physiques » sous forme de boutons call to action, avec la

taille, les contrastes, les textures ou reliefs utiles pour inciter l’utilisateur à
cliquer.
- Des messages textuels/linguistiques pour insister sur l’action à effectuer.
- Des éléments de Menu, flèches, loupes… ce que les anglo-saxons
appellent « Pattern affordances ».
- Des symboles/icônes métaphoriques : l’enveloppe pour envoyer un mail,
le bouton menant à une page Facebook….
- Des images/photos/illustration, selon la fonction du site (e-commerce,
banque d’images…).
- et d’autres encore à expérimenter

31
Si une nouvelle innovation prend le pas et s'inspire de la base d'une précédente
innovation (que tout le monde a eu le temps de prendre en main), ça passe… et
cela ne demande qu'un léger temps d'adaptation.

Par ailleurs, si un nouveau produit est trop innovant, trop en avance sur son
temps (et ce, même s'il est génial), il va générer un manque d'affordance :

- Provoquer auprès des utilisateurs de la confusion, de l'incapacité à prendre

en main le produit, de l'incompréhension, voire de la frustration, de la
colère…
- Empêcher les utilisateurs de comprendre l'intérêt du produit, les faire
rester sur l'acquis (beaucoup plus pratique et simple à leurs yeux) et fuir la
nouveauté.

Vous l'avez compris, le but de l'UX n'est pas de concevoir un produit

fantastiquement génial et futuriste, mais de concevoir le meilleur produit… pour
vos utilisateurs. 

Activité en groupe de 3 ou 4
Durée : 30minutes
Définissez un projet web ou mobile, et proposez à la classe des icones
respectants le principe de l’affordance. Dessinez les icones au tableau. Les
autres apprenants diront à quoi vos icones leurs font penser. Nous confronterons
les résultats obtenus avec vos objectifs.

2. Méthodes utilisées par les agences

La démarche agence réside en l’application de concepts clés. Aux rangs de ces

concepts, nous étudierons dans ce cours : les personas, le wireframing, les test

32
A/B et les tests utilisateurs. Cette liste est non exhaustive mais assez
représentative pour nous aider à devenir un bon ux designer.

2.1. Personas

Avant de concevoir un produit vous devez définir les caractéristiques de

l’utilisateur que vous visez. Ce profil s’applle un personna. Et vous pouvez en
créer jusqu’à deux ou trois avant d’envisager les fonctionnalités spécifiques de
votre produit.

Un persona est un modèle d’utilisateurs qui a des caractéristiques précises qui

déterminent des cas d’usage. Un cas d’usage est l’ensemble des situations dans
lesquelles le persona va avoir envie/besoin d’utiliser votre produit et comment il
a besoin de l’utiliser, pour quoi et pour faire quoi ?

Faire un persona permet de concevoir un produit une application du QQCOP.

- Qui ? Profil des utilisateurs . Les données comme le sexe, l’âge, ou le

revenu ne sont pas toujours importantes. Ce qui compte c’est de
déterminer une liste de critères qui vont indiquer, donner des idées des
activités de l’utilisation.
- Quoi ? En d’autres termes, de quoi l’utilisateur aura besoin : se sont les
cas d’usages.
- Comment ? Une description de ces cas d’utilisateur ainsi que des
contraintes qui en émergent.
- Où ? Contrainte liée à la mobilité de l’utilisateur. Nous vous conseil
d’intégrer cette notion en fin de persona.
- Pourquoi ? Les motivations profondes et les résultats de ses actions.

33
Faire un persona : exercice d’application corrigé

Ami possède un restaurant nommé « Tu es Gbé ». Elle désire digitaliser son
activité en facilitant la commande de ses repas aux travailleurs résidants dans sa
zone géographique. Vous devez donc caractériser le profil de l’utilisateur visé,
ses besoins et ses contraintes.

Scénarisons les besoins

Béa,

1- Sort tôt de chez elle pour se rendre au bureau, elle n’a pas toujours le
temps de cuisiner avant de sortir.
2- A peur de manger dehors à cause du manque d’hygiène de certains
restaurateurs.
3- Suit un régime alimentaire qui l’oblige à éviter le sel et l’huile.
4- Peine à gérer son budget mensuel.
5- N’aime pas attendre longtemps avant d’être servie.

Ajoutons-y la notion de mobilité

Béa,

6- Commandera de préférence depuis son smartphone, éventuellement dans

le transport en commun ou au bureau.

Déduisons les cas d’usage

Béa,

- Aura besoin de trouver un restaurant non loin du lieu où elle travaille ;

- Voudrait s’assurer que ses repas ont été confectionnés dans des
conditionnées hygiéniques ;
- Voudrait déguster un repas respectant son régime alimentaire ;

34
 - Voudrait bénéficier d’un service de repas prépayer durant tout le mois ;
- Voudrait être servie dès qu’elle arrive au restaurant.
- Voudrait effectuer une commande en deux minutes à tout moment.

Déterminons les fonctionnalités de l’application

L’application « Tu es Gbé » doit répondre aux fonctionnalités suivantes :

- Montrer les restaurants de Béa qui sont situés dans la zone géographique
sélectionné par l’utilisateur
- Donner accès aux témoinages des clients satisfaits , mettre à la disposition
du client des vidéos montrant les conditions hygiéniques dans lequel les
repas sont confectionnés
- Permettre au client de sélectionner les ingrédients qu’il ne souhaite pas
avoir dans son assiètes
- Mettre à la disposition des clients un cagnotte dans laquelle sera déduit le
montant de chacune de leurs consammations
- Permettre au client de dire à quelle heure il prévoit arriver au restaurant
sélectionner , et une fois sur place, de signaler la table où il est assit
- D’utiliser de préférence son smartphone pour réaliser toutes les actions
précédentes.

Faire un persona : Exercice d’application en groupe de 5

Vous désirez faire une application de convoiturage à l’endroit de personnes qui

résident en Côte d’Ivoire , qui souhaitent voyager tout en évitant les longues
heures d’attentes avant le départ des véhicules de transports en communs.

2.2. Le maquettage : Zoning, Wireframing , mockup et prototype

35
Zoning

Après la création de l’arborescence du futur site web ou de l’application,

le zoning d’un site web ou d’une application consiste à définir et positionner les
différentes zones fonctionnelles (les blocs) dans la page web. On va ainsi
pouvoir placer le logo, la zone de menu, le contenu principal, les colonnes et les
éventuels widgets. C’est donc la première étape permettant de définir
l’organisation générale des pages d’un projet. Une organisation souvent
schématisée grossièrement, mais indispensable pour passer à l’étape suivante :
le wireframe.

Wireframe

Le wireframe ou « maquette fil de fer » dans la langue de Molière, part

du zoning et détaille certaines parties contenues dans les différents blocs :
emplacement des boutons, nature des contenus (image, vidéo…)… A ce stade,
aucun design n’est appliqué, on chercher seulement à valider l’aspect
fonctionnel du projet. Ici aussi, les contenus sont encore fictifs pour pouvoir se
projeter, car il est rare qu’un client ait déjà les contenus définitifs. On y met par
exemple des textes Lorem Ipsum : de faux textes sans aucune signification, dont
l’objectif est seulement le calibrage du contenu éventuel du futur site web. Dans
les jargons du webdesign, on parle parfois également de mockup pour désigner
un wireframe.

Le maquettage (zoning et wireframe) est réalisé préalablement au design du site

web ou de l’application. Il est théoriquement le point d’entrée du designer pour
mettre en forme chaque page, dans un cadre bien défini et clair.

Exemple de wireframe d’une page Web

36
Mockup

Un mockup représente un squelette d'une interface utilisateur. Ce squelette est

en noir et blanc et à principalement pour but de montrer sur papier (ou sur
ordinateur) où seront placé les éléments sur l'interface et comment fonctionnera
l’interaction entre eux (bouton d'action, zone de texte, élément interactif ...).

37
Exemple fictif de mockup d'un site web

Avantages

Un mockup est une bonne méthode durant la phase de conception d'un site web,
d'un logiciel ou de tout autre interface pour les raisons suivantes:

Possibilité de montrer l'aperçu de l'interface à des collaborateurs

Constater un problème de placement, de taille des éléments ou même une

impossibilité technique

Déplacer facilement un élément pour améliorer l'interface (expérience

utilisateur, ergonomie ...)

Mieux estimer la complexité d'une interface et donc meilleure estimation du

temps de conception

38
Modification rapide de l'interface avant même que les graphistes ou les
développeurs n'ai commencé à travailler. Une modification en amont est plus
rapide que pendant la phase d'intégration ou de développement

2.3. Les tests utilisateurs

On pourrait pensé qu’après avoir fini le mockup du produit, le UX Designer

aurait fini son travail, et que la tâche incomberait désormais au UI Designer. Ce
qui est drastiquement faux parceque le premier devra s’assurer que le produit
qu’il a conçu dans les règles de l’art, et cela, bien avant que le produit ne soit
présenté aux clients : on parle de tests.

Enjeux de tests

Les tests sont d’une importance captitale. Il permet de comprendre si votre

produit bien aux besoins et aux attentes de l’utilisateur. Cette phase est tellement
importante qu’il faut l’envisager dès le début du projet, même au stade de
zoning. Des tests doivent être faits à chaque étape de l’application, pour déceler
d’éventuelles erreurs et éviter de tout réprendre à zéro dans une autre phase du
projet.

Le but du test utilisateur est d’observer comment ils interagissent avec votre
produit, détecter les problèmes qu’ils rencontrernt et comprendre ce qu’ils
apprécient.

39
Quelques règles pour réussir vos tests
Règles
Testez le produit, pas
vos utilisateurs
Faites tester par des
profanes
Faites tester plusieurs
personnes
Tableau 3 : Trois (03) règles pour réussir vos tests utilisateurs
Description
Ne prenez pas les gens pour des incapables, s’ils
n’arrivent pas utiliser votre produit, c’est parcequ’il
a des défauts. Et ce sont les test qui vous
permettront de les mettre à jour pour les corriger.
Cela vous permettra de proposer un produit
appréciable, simple, clair et pratique.
En faisant tester le produit par des spécialistes qui
peuvent le réaliser, vous n’optimisez pas vos
chances de le rendre « usuable » à votre cible. En
effet, ces derniers ont moins de chances de déceler
les difficultés liés à l’usage de votre produit que des
utilisateurs finaux profanes. Et puis d’ailleurs, c’est
pour eux que vous faites tout ce travail…
En multipliant le nombre de testeurs vous
augmentez vos chances de réduire les imperfections
de votre application. N’hésitez pas vous aussi de
tester afin de vous assurer que l’application répond
vraiment à votre conception.
40
I

2.4. Tests AB

L’AB Testing (ou test AB) est une méthode scientifique permettant de comparer
deux versions d’une page web – A – B et d’identifier celle qui convertit le
mieux. La version A est la version actuelle de la page (page de contrôle), tandis
que la version B est la page modifiée (la page de traitement). Les performances
de ces deux pages peuvent être facilement comparées si on les teste
simultanément.

La modification de la version A doit être basée sur une Hypothèse. Celle-ci

porte sur la facon dont les clients utilisent le produit. Elle peut être en lien avec
le design, la structure ou le contenu de votre site. En comparant les deux
versions (de traitement et de contrôle), vous pouvez confirmer ou infirmer votre
Hypothèse.

Mener de nombreux tests AB est le meilleur moyen de vraiment comprendre

comment la conception d’une page affecte sa performance, ce processus est
continu et implique de nombreuses versions de chaque page.

Comment fonctionne le AB Testing

1- Décidez de ce que vous vous tester : par exemple la couleur du bouton

Ajouter au panier sur une page produit
2- Décidez de ce que vous désirez évaluer : par exemple le nombre de
visiteurs qui cliquent sur le bouton
3- Présentez des versions différentes (la couleur du bouton) à deux groupes
d’utilisateurs équivalents constitués de facon aléatoire, et déterminer
laquelle a eu le plus d’impact sur vos indicateurs de performance.

Notons bien

41
Le test AB classique permet de tester seulement deux variations d’un produit à
partir d’une seule variable. Lorqu’on teste plusieurs versions du même produit
on effectue un test A/B/n. Par exemple sur une page A on peut tester la couleur
du bouton, sur la page B changer l’image d’illustration et sur une page C
changer la police. Il existe aussi une méthode appelée Multivariate testing
(MVT) qui consiste à tester plusieurs combinaisons de variation afin de
déterminer la plus performante pour un segment de visiteur.

42
 Chapitre III : UI Design

I. Le métier de UI Designer

UI designer aussi appelé « user interface », fabrique, conçoit et design

l’interface utilisateur d’un site internet ou d’une application mobile dans une
optique d’ergonomie. Ce métier est apparu avec l’évolution du web et
notamment avec la digitalisation toujours plus croissante des entreprises. C’est
le besoin et la nécessité des entreprises à améliorer la relation avec leurs
utilisateurs, qui les a poussés à travailler sur l’optimisation de l’interface
d’utilisation.

1- Missions

L’UI Design est un métier né avec l’apparition des nouvelles technologies

mobiles notamment sur tablettes, objets connectés et smartphones. Même s’il est
toujours très demandé chez les sociétés qui possèdent un site internet, il est aussi
très sollicité par ses nouvelles entreprises qui travaillent sur les nouveaux
supports de communications et d’informations.

L’UI a donc pour mission, d’améliorer l’interface de l’utilisateur en augmentant

l’interactivité de celui-ci avec l’interface web. Il est responsable de la production
des maquettes visuelles, d’un guide de style (détails des constituants visuels des
interfaces) et veillera à la mise en place des normes graphiques par les
développeurs.

Attention : le Designer UI, n’est pas à confondre avec le Designer

UX (utilisateur expérience), qui lui est en charge de rendre l’expérience de
l’utilisateur plus agréable par la mise en place d’une storytelling (raconter un
récit) afin de faire vivre à l’internaute une émotion qu’il ne vivra pas ailleurs
43
 2- Qualités d’un UI Designer

Le concepteur de l’interface utilisateur doit impérativement savoir travailler en

équipe, collaborer, et échanger de manière claire avec des profils techniques et
commerciaux pour mener à bien la mission qui lui a été confiée. La créativité,
l’imagination et des notions artistiques de base seront fortement valorisées par
les recruteurs. Enfin, votre sens de l’observation pourra être mis à l’épreuve
dans nombre de vos projets, tâchez d’être attentif.

Maitrise des logiciels de création (suite adobe, photoshop…) et de maquettage :

- Bonne connaissance des techniques HTML et CMS, ainsi que de la mise

en place d’interface responsive.
- Des connaissances en gestion de projet et des connaissances générales sur
le web seront des atouts indéniables dans la réalisation de vos projets.

II. Ergonomie/ Intuitivité / Navigabilité

Le UI Designer devra livrer un produit digital devra être ergonomique, intuitif et

navigable. Ces trois mots intimement liés se définissent comme suit.

Ergonomie : L’ergonomie est « l'étude scientifique de la relation entre l'Homme

et ses moyens, méthodes et milieux de travail » et l'application de ces
connaissances à la conception de systèmes « qui puissent être utilisés avec le
maximum de confort, de sécurité et d'efficacité par le plus grand nombre »

Intuitivité : Aptitude à l’intuition c’est-à-dire à deviner les choses.

Navigabilité : Intimement lié à l’arborescence d’un site web, la navigabilité

désigne l’aisance avec laquelle l’utilisateur parcourt les pages d’un site web.

III. Codes graphiques & significations

44
Cela est parfois moins évident à percevoir, mais comme les couleurs, les formes
ont aussi leur signification et contribuent à renforcer le sens donné à un
message.

Le carré :

C’est un symbole de stabilité, de solidité. Il représente la Terre et le monde

« matériel ». En communication visuelle, le carré permet de poser une structure,
de procurer un équilibre à la fois neutre, stable et solide. Il apporte aussi un
aspect sérieux. 

Le cercle :

Opposé au carré, le cercle représente le Ciel et symbolise l’infini, l’unité et

la perfection. En communication visuelle, l’utilisation du cercle renvoie à
la créativité, au domaine inventif.

Le triangle :
45
Tout dépend de son contexte d’utilisation, mais pointé vers le haut, il est
synonyme de puissance, d’équilibre et d’harmonie. Il peut aussi représenter le
danger. Pointé vers le bas, il symbolise la féminité. En communication, il peut
être utilisé pointe vers le haut pour représenter le progrès, la réussite. Il aura une
connotation plus négative en pointant vers le bas car il peut signifier la chute et
l’instabilité.

Losange

Dans la symbolique indo-européenne, le losange est un symbole féminin

représentant le sein; la fécondité. Cette forme représente quelque chose que l’on
veut protéger du monde extérieur. Le losange représente la vie et la
transmission. Bien qu’utilisée depuis des années par la marque de voiture
Renault (à la verticale), et à l’horizontal par de nombreuses autres marques, le
losange peut parfaitement être utilisé pour symboliser la féminité. Mais dans la
mesure où les pointes peuvent représenter une certaine violence, je vous
conseille d’arrondir ces pointes si vous souhaitez adoucir cette forme. Elle sera
ainsi parfaite pour une marque de vêtement pour enfant ou pour femme enceinte,
ou encore pour des produits pour enfants. En gardant les pointes, la forme sera
plus “agressive” et conviendra plutôt à des produits pour hommes.

Rectangle
46
Le rectangle a à peu près les mêmes caractéristiques que le carré. Comme le
carré il n’évoque pas la nature mais la construction humaine. En effet dans la
nature il n’y a pas d’angle droit, bien qu’il y ait des lignes parfaites (comme la
vision d’horizon que nous avons de la mer, de l’océan). Le rectangle peut être à
la française, c’est-à-dire debout, à la verticale, il montrera ainsi le dynamisme et
la spontanéité. Il peut aussi être à l’italienne, c’est-à-dire couché, à l’horizontale.
Dans ce cas il offrira une vision panoramique, une sorte de zoom en arrière.
Cette forme pourra convenir à une agence de voyage par exemple qui voudra
faire penser dans son logo à un paysage. Mais cette forme peut être utilisée dans
bon nombre de situations.

Polygones

Les polygones à plus de quatre côtés représentent la pluralité, la complexité.

Comme le triangle, les polygones sont très utilisées dans les logos par les
métiers du bâtiment, de l’ingénierie pour symboliser la complixité du métier et
la polyvalence de ces entreprises. Ces formes peuvent aussi représenter les
métiers scientifiques comme les mathématiques, la physique ou encore la
chimie. Ce sont donc des formes appréciées des laboratoires ou des entreprises
de recherches. Ces formes ne conviennent en revanche pas très bien à des
métiers comme la coiffure ou les métiers de bouche. Ils sont plutôt associé à la
technique et aux outils technologiques. Une entreprise de programmation
informatique pourra utiliser un polygone pour son côté “technologique” et
“moderne”, mais le côté “créatif” ne sera pas bien représenté par cette forme.

Demi-cercle

Le demi-cercle représente la rencontre entre le Divin et l’humain, entre la

perfection et l’imperfection, entre l’invisible et le visible. Mais dans la société
47
occidentale, le demi cercle a un autre symbole : la démocratie, la république. En
effet le parlement sous l’Empire romain était déjà de forme demi-circulaire, tout
comme maintenant le sont nos parlements en France, en Belgique, aux Canada,
etc. Bien que peu utiliser dans les logos commerciaux, les demi-cercles peuvent
représenter la rencontre entre le savoir et le manque de savoir par exemple. Ce
pourrait être une forme parfaite pour une entreprise de cours particuliers par
exemple. Comme vous l’avez vu dans les formes, il s’agit souvent de bien et de
mal, de divin et d’humain. Les religions ont beaucoup utilisé les formes et les
symboles dans l’histoire.

Droite horizontale

La droite horizontale représente la Terre, l’horizon, la stabilité. Elle nous évoque

une certaine confiance et un calme. Cela nous évoque des choses comme la mer,
et nous aimons tous regarder la mer au loin pour nous relaxer. Voir cette longue
étendue “plate” nous repose. La droite horizontale donne donc une impression
rassurante de stabilité. Cette forme est parfaite pour un logo de chaîne thermale
par exemple où le but sera de se reposer et de se relaxer. En revanche ce ne sera
pas une forme à utiliser pour une boîte de nuit par exemple, où les gérants ne
veulent pas donner l’impression qu’on se repose dans leur établissement destiné
à la fête et à l’amusement. Demandez-vous donc si votre logo doit donner un
aspect de dynamisme ou au contraire de tranquillité (si c’est le cas, pensez à
cette forme).
48
 

Droite verticale

La droite verticale représente dans quasiment toutes les sociétés, l’esprit de Dieu
(ou des Dieux pour les religions polythéistes). Elle représente le lien entre les
humains et leur Dieu, et par adaptation l’inférieur au supérieur. C’est une forme
assez peu employée telle qu’elle est en communication ou en marketing car peu
d’entreprises ou d’organisations utilisent des représentations de Dieu dans leurs
représentations commerciales. En revanche certaines associations d’aides aux
personnes utilisent cette forme comme pour placer les donateurs et les membres
de l’association comme des Dieux venant élever les personnes qui n’ont pas leur
niveau de vie par exemple. C’est aussi une forme qui peut être utilisé pour des
entreprises cherchant à élever leurs clients (formations, aides scolaires,
développement personnel).

Diagonale

La diagonale représente l’évolution, le changement de situation. Elle peut

représenter la régression si elle va vers le bas, ou la progression si elle va vers le
haut. Vu comme ça on peut penser qu’aucune entreprise ne voudra représenter
une décroissance. Pourtant, une entreprise cherchant à faire diminuer des taux de
remboursement de crédit par exemple, pourra utiliser cette forme dans ce sens.
Mais la diagonale est en effet utilisé en grande majorité pour représenter une
progression, pour symboliser les gains en bourses que va faire un couple en
investissant avec une entreprise de tradding par exemple. Des marques comme
Nike ont également utilisé cette courbe montante pour symboliser le dynamisme
et la croissance (dans les résultats grâce aux produits de la marque, peut-on
imaginer).

49
IV. Codes chromatiques

Voici une liste des couleurs associées à leur signification dans la société
occidentale. (Car oui, les symboliques changent d’une culture à une autre. Par
exemple, si le noir représente pour nous le deuil, c’est le blanc qui porte cette
symbolique dans certains pays d’Asie) .

Le bleu :

Il s’agit de la couleur la plus appréciée au monde et l’une des plus utilisées par
les marques. Elle procure un sentiment de confiance et de sécurité et de ce fait,
est beaucoup employée par les organismes bancaires par exemple. On la
retrouve aussi sur Facebook, où le bleu est censé rassurer les utilisateurs et
instaurer un climat de confiance avec la plateforme sociale. Le bleu procure
également un sentiment de fraîcheur. Il fait aussi référence aux univers marin,
céleste et onirique. Il symbolise aussi la loyauté, l’intelligence, la créativité et le
calme. Enfin, il peut être associé à la mélancolie.

Principaux domaines d’utilisation en marketing : banques, informatique,

produits frais

Le rouge :

50
C’est une couleur chaude qui symbolise la passion, l’amour, l’énergie et
l’action. Allant jusqu’à augmenter le rythme cardiaque, le rouge procure un
sentiment d’urgence, raison pour laquelle on utilise souvent cette couleur pour
mettre en avant une promotion. C’est une couleur qui énerve et qui est censée
également « ouvrir l’appétit ». En décoration intérieure, on recommande ainsi de
le placer dans une cuisine plutôt que dans une chambre. Utilisé à forte dose, il
peut procurer un sentiment de danger. Dans certains contextes comme en
signalisation routière, il symbolise l’interdiction.

Principaux domaines d’utilisation en marketing : univers promotionnels et

alimentaires

Le jaune :

Couleur solaire, le jaune est associé à la joie, à l’optimisme, à l’énergie, à la

vitesse et à la jeunesse. C’est une couleur stimulante qui attire l’œil. Dans notre
culture, le jaune peut aussi connoter la trahison.

Principaux domaines d’utilisation en marketing : il est plus difficile de cibler un

domaine dans lequel le jaune est souvent utilisé. Il est principalement employé à
destination d’une cible jeune et dynamique. Par exemple, on retrouve le jaune
via l’appli Snapchat. C’est aussi une couleur souvent utilisée par les grandes
surfaces et discounteurs pour mettre en avant une promotion. En effet, associé
au rouge, il attire très vite le regard.
51
Le vert :

Le vert est reconnu comme étant la couleur la plus agréable pour les yeux.
Associé à la nature et à la santé, il symbolise également l’espérance, la chance,
la sécurité, la croissance et la permission. De plus en plus il s’utilise aussi,
comme le jaune, à destination d’une cible jeune.

Un exemple parlant en marketing concernant l’utilisation du vert est le

changement de couleur du logo McDonald’s. Depuis 2010 en Europe, l’enseigne
a transformé son logo : le célèbre M jaune est passé du fond rouge au fond vert.
Pourquoi ? Parce que l’enseigne souhaitant améliorer son image s’est
positionnée sur le développement durable, symbolisé par le vert. Difficile de
passer à côté de ce changement. Cela a permis à la marque d’illustrer
visuellement de manière forte son changement de politique.

Principaux domaines d’utilisation en marketing : produits bio, naturels,

écologiques, cibles jeunes.

52
L’orange :

Couleur chaleureuse et stimulante, l’orange est synonyme d’énergie,

de mobilité, de vitalité et d’optimisme. Il peut aussi être associé à la sociabilité,
à la joie, à la communication et à la créativité.

En communication visuelle, ses domaines d’utilisation sont assez variés. On

peut le retrouver dans le domaine du multimédia, de la technologie, de la
mobilité. Il peut être utilisé en remplacement du rouge pour attirer l’attention
tout en étant moins agressif visuellement. Par exemple Amazon utilise
différentes nuances d’orange par petites touches pour mettre en valeur certaines
fonctionnalités du site.

Figure 8 : Les touches orangées sur le site d’Amazon

Le violet :

Couleur de l’année avec L’Ultra-Violet de Pantone, c’est une teinte renvoyant à

la fois à la royauté mais aussi à la spiritualité, au mystère, aux domaines du rêve,
de l’imagination et de la magie. Elle est parfois aussi synonyme de solitude et de
mélancolie.

53
Pantone définit l’Ultra-Violet comme « un symbole d’expérimentation et de
non-conformité, nous incitant à imaginer notre empreinte unique sur le monde et
à repousser nos limites grâce à la créativité ».

Quant aux domaines d’utilisation du violet en marketing, ils sont très variés et
ne sont pas spécifiques à un thème précis.

Figure 9 : L’Ultra-Violet de Pantone, couleur de l’année 2018

Le blanc

Il est synonyme de pureté, de propreté et de perfection. Le blanc permet de

rehausser les autres couleurs. C’est une couleur lumineuse mais non agressive
qui permet de reposer le regard et d’apporter un sentiment d’espace.

Sur un support de communication, le blanc est souvent utilisé comme base car il
permet de faire respirer le contenu. Il est essentiel de bien gérer l’équilibre du
blanc avec les autres éléments car il peut facilement procurer une sensation de
« vide ».

54
Le noir :

Couleur intemporelle du luxe, de l’élégance et du mystère. Il peut aussi procurer

un sentiment de tristesse. Utilisé en marketing, le noir permet de créer un
univers haut de gamme et luxueux.

Chaque couleur a donc une signification qui lui est propre. L’essentiel est
d’avoir conscience de l’importance du choix des couleurs en communication.
Elles n’existent pas que pour « faire joli », elles véhiculent un sens qui nous
influence et reflètent votre identité.

V. Typographies

Eh oui, selon le style de police utilisée, le message sera en effet empreint d’une
connotation différente :

Une police à empattements (serif) confère un aspect classique, élégant. Elle

s’apparentera bien par exemple à certains univers luxueux. En italique, elle se
pare d’une touche de romantisme.

55
 Figure 10 : Encart sur le site de Lancôme

Une police bâton (sans-serif) est en revanche plus épurée. Elle

apporte sobriété et simplicité au message. On trouve beaucoup de polices sans-
serif dans les tendances graphiques actuelles, c’est pourquoi elles apportent bien
souvent une touche de modernité.     

Figure 11 : Exemple de communication Spotify

56
On trouve également les polices cursives, s’inspirant de l’écriture manuscrite.
Les typographies manuscrites confèrent un aspect + « humain » et vivant au
message. Elles sont en vogue grâce à la tendance du handlettering et des univers
féminins et lifestyle. 

Figure 12 : Exemple de communication Sephora

VI. Mises en pages et leurs significations

Chaque publicité, chaque page d’un document ou d’un site Web est perçue, dans
son ensemble, comme une image. L’utilisation de la règle des tiers, la règle
d’or du cadrage photographique, permet d’équilibrer cette image. Ce principe de
proportion et d’équilibre tient ses origines de l’art pictural.

57
La règle des tiers divise une image en trois parties égales. Plusieurs variantes
sont possibles. Le principe s’applique autant aux images qu’aux documents et
s’applique à la verticale et à l’horizontale. L’emplacement des logos, des
images, des textes ou de tout autre élément sera conditionné par le mode de
division choisi par le créateur.

Lorsque cette règle est respectée et contrôlée, elle garantit à une conception
graphique l’équilibre qui captera l’attention.

L’alignement est la disposition du texte par rapport

aux marges et aux colonnes d’une page. Les deux
alignements les plus couramment employés sont
l’alignement en drapeau à gauche et l’alignement
justifié, ou en alinéa. Voici certains avantages et
inconvénients liés à leur utilisation :
L’alignement en drapeau à gauche
Avantages : Aspect esthétique de densité homogène,
sans césures de mots, espaces égales entre les mots.
Inconvénients : Inégalité entre les lignes, nécessite
un bon contrôle.
Utilisation : Courts textes, textes en retrait, sous-
titres.
L’alignement justifié (en alinéa)
Avantages : Largeur fixe des lignes, bonne
visibilité, séparation franche du texte.
Inconvénients : Espaces variables entre les mots,
séparation difficile des mots (césures).
Utilisation : Textes avec beaucoup de contenu, articles
58
 longs, lettres.

VII. Quelques outils de UI

Prise en main de Xtensio, Sketch, Marvels , la suite adobe (Fireworks/

Photoshop/ Illustrator)

59
Chapitre IV : Pratique du Design Thinking

Qu’est ce que le design thinking

Le Design Thinking, c’est être persuadé que nous pouvons changer les choses ;
c’est avoir à sa disposition un processus efficace pour trouver des solutions
innovantes et pertinentes ayant des répercussions positives.

Le Design Thinking vous donne confiance dans vos capacités créatives et vous
propose une méthode pour transformer les difficultés en opportunités.

Il met l'humain au centre
Le point de départ du Design Thinking est une
profonde empathie, mais également une écoute des
besoins et des motivations des personnes
Collaboratif
À plusieurs, on est plus forts pour résoudre une
difficulté que lorsqu’on reste isolé. Le Design
Thinking est riche des différents points de vue qui le
composent et la créativité des autres stimule la vôtre

Design Thinking
Optimiste Expérimental
Le Design Thinking consiste à croire profondément Avec le Design Thinking,vous avez le droit de vous
que nous pouvons tous être acteurs du changement, tromper et l’opportunité d’apprendre de vos erreurs :
quels que soit l’importance du problème et le peu de vous proposez de nouvelles idées, l’équipe donne son
temps ou de budget disponibles. Peu importe les avis, vous reformulez.
contraintes existantes, le processus de création a
toujours un côté plaisant.

Figure 13 : Matrice du design thinking

Pour résumer, le Design Thinking, c’est être persuadé que la nouveauté et les
améliorations sont possibles et que vous pouvez en être l’initiateur.

60
La démarche du design thinking s’articule autour de 05 grandes étapes : faire
preuve d’empathie, définir le besoin, rechercher des idées, prototyper des
solutions et tester les solutions.

I. Faire preuve d’empathie

L'empathie est le fondement d'un processus de conception centrée sur l'humain.

Pour faire preuve d'empathie, vous devez:

- Observer. Voir les utilisateurs et leurs comportements en situation réelle

- Interagir. Interviewer les utilisateurs lors de rencontres planifiées ou fortuites

- Vous immerger. Faites l’expérience de ce que vit votre utilisateur.

1- Pourquoi faire preuve d’empathie ?

En tant que designer centré sur l'humain, vous avez besoin de comprendre les
personnes pour lesquelles vous concevez. Les problèmes que vous essayez de
résoudre sont rarement les vôtres, mais ceux d'utilisateurs particuliers. Afin de

61
concevoir pour vos utilisateurs, vous devez créer une empathie pour comprendre
qui ils sont et ce qui est important pour eux.

Regarder ce que les gens font et comment ils interagissent avec leur
environnement vous donne des indices sur ce qu'ils pensent et ressentent. Cela
vous aide à comprendre de ce dont ils ont besoin. En regardant les gens, vous
pouvez capturer les manifestations physiques de leurs expériences, ce qu'ils font
et disent. Cela vous permettra d'interpréter le sens de ces expériences afin de
tirer des enseignements, ou en d’autres termes des insights. Ces insights vous
mèneront à des solutions innovantes. Les meilleures solutions sont celles
provenant des meilleurs insights sur le comportement humain. Mais apprendre à
reconnaître ces insights est plus difficile que vous pourriez penser. Pourquoi?
Parce que nos esprits filtrent automatiquement un grand nombre d'informations
de manière inconsciente. Nous devons réapprendre à porter un regard neuf sur
les choses.s

Interagir avec les gens permet de mieux comprendre leurs pensées et leurs
valeurs. Parfois, ces pensées et ces valeurs ne sont pas évidentes pour les
personnes elles-mêmes. Une interaction approfondie peut surprendre à la fois
l’intervieweur et l’interviewé de par les insights inattendus qu’elle révèle. Une
bonne conception se construit sur une solide compréhension des croyances et
des valeurs des utilisateurs.

L’interaction permet de:

• Découvrir les besoins dont les personnes n’ont pas toujours conscience

• Guider les efforts d'innovation

• Identifier les bons utilisateurs à cibler

• Découvrir les émotions qui guident les comportements

62
Par delà l’observation et l’interaction avec vos utilisateurs, vous devez faire l’
expérience personnelle de l’espace de conception. Trouver (ou créer si
nécessaire) des expériences dans lesquelles vous plonger afin de mieux
comprendre les situations que vivent vos utilisateurs.

2- Comment développer l’empathie ?

- Savoir écouter
- Adopter l’état d’esprit du débutant : ne jugez pas, questionnez tout, soyez
vraiment curieux, trouver des schemas de pensées, écoutez vraiment.
- La carte de l’empathier
- Faire un photo reportage
- Cartographie du parcours utilisateur
- Le Persona
- etc

II. Définir le besoin

Vous synthétisez à ce stade les résultats de votre travail d’empathie en besoins et

en enseignements. Vous cadrez alors le défi sur lequel vous atteler. Vos deux
63
objectifs sont de développer une compréhension profonde de vos utilisateurs et
l'espace de conception (Design space) et, sur la base de cette compréhension,
venir avec une définition du problème à résoudre: votre angle d’attaque (Point of
view).

Votre angle d’attaque doit vous guider en vous concentrant sur des utilisateurs
spécifiques, et les besoins que vous avez découvert pendant la phase d'empathie.

Plus que la simple définition du problème à adresser, votre angle d’attaque est
votre vision se basant sur les découvertes faites au cours de votre travail
d'empathie. Comprendre le défi à aborder et les insights que vous pouvez
exploiter dans votre travail de conception est fondamentale pour créer une
solution efficace.

1- Pourquoi définir le(s) besoin(s)

Cette étape est essentielle pour le processus de conception, car vous devez
exprimer explicitement le problème auquel vous vous efforcerez de répondre.
Souvent, vous devrez d'abord reformuler le challenge en vous fondant sur les
enseignements que vous avez tiré. Ce nouvel énoncé du problème peut alors être
utilisé comme tremplin pour générer des solutions innovantes.

Un bon angle d’attaque (Point of view) est celui qui permet de:

• Se concentrer sur un problème spécifique

• Inspirer votre équipe

• Fournir une référence pour l'évaluation d’idées concurrentes

• Habiliter les membres de l'équipe à prendre des décisions en réponse aux

objectifs

64
• Enrichir les sessions de brainstorming en suggérant des questions de type «
Comment pourrionsnous…?»

• Capturer les coeurs et les esprits des personnes que vous avez rencontré

• Vous éviter la tâche impossible de concevoir une solution qui doit répondre à
tous les problèmes

• Etre repensé au fur et à mesure que vous apprenez par la pratique

• Guider vos efforts d'innovation

2- Comment analyser les besoins ?

- Saturer et grouper
- Faire des enquêtes de satisfactions : entretiens, interview, questionnaire,
panel, etc…
- Utiliser le « Utilisateur aime … Utilisateur souhaiterais…
Comment ? … »

III. Rechercher des idées

65
La recherche d’idées est l’étape du processus de conception pendant laquelle
vous tâchez de générer des alternatives radicales de conception. Il s’agit ici
d’imaginer le champ des possibles, de diverger sur les concepts et les moyens de
répondre au besoin énoncé, plutôt que focaliser sur une solution. L’objectif est
de trouver à la fois une grande quantité d'idées et une diversité parmi ces idées.
Grâce à ce vaste dépôt d'idées, vous pourrez construire des prototypes à tester
avec les utilisateurs.

Pourquoi rechercher des idées ?

Vous cherchez des idées pour passer de l'identification des problèmes à

l’exploration des solutions pour vos utilisateurs. Divers modes de recherche
d’idées peuvent être utilisés pour :

• Aller au-delà des solutions évidentes et augmenter le potentiel innovant de

votre solution

• Récolter les différentes perspectives de votre équipe

• Découvrez des domaines inattendus à explorer

• Créer un grand volume et une grande variété d’options innovantes

• Conduire votre équipe au-delà des solutions évidentes

Peu importe comment vous recherchez des idées, le principe fondamental est
d'être conscient quand votre équipe génère des idées et quand elle évalue ces
mêmes idées - en gardant généralement ces deux tâches distinctes.

Les outils pour rechercher des idées

- Le brainstorming
- Développer l’angle d’attaque : [UTILISATEUR] a besoin de [BESOIN DE
L’UTILISATEUR] car [INSIGHT SURPRENANT]

- Questions « Comment pourrions-nous ? »

66
 - Le bodystorming
- La carte heuristique (mind map)

IV. Prototyper des solutions

Prototyper permet à vos idées de prendre vie. Un prototype peut prendre

n’importe quelle forme physique - que ce soit un mur de post-it, un jeu de rôle,
un espace, un objet, une interface, ou même un storyboard. La résolution de
votre prototype devrait être en rapport avec votre progression dans votre projet.
Dans les premières explorations, gardez vos prototypes très simples pour vous
permettre d'apprendre rapidement et tester un grand nombre de possibilités
différentes.

Les prototypes sont plus efficaces lorsque les gens (l'équipe de conception,
l'utilisateur, et d’autres personnes) peuvent en faire l’expérience et interagir
avec. Ce que vous apprendrez de ces interactions vous aidera à gagner en
empathie, ainsi qu’à construire des solutions efficaces.

1- Pourquoi prototyper ?

67
Traditionnellement nous prototypons pour tester une fonctionnalité. Mais le
prototypage peut être utilisé à de nombreuses autres fins, notamment:

• Gagner en empathie: Le prototypage est un outil pour approfondir votre

compréhension de l'espace de conception et de votre utilisateur, même à une
phase de pré-solution de votre projet.

• Explorer: Construisez pour mieux penser. Développer de multiples options de

solution.

• Tester: Créer des prototypes (et développer le contexte) pour tester et affiner
les solutions avec les utilisateurs.

• S’inspirer: Inspirer les autres (coéquipiers, des clients, des investisseurs) en

montrant votre vision.

Nous prototypons pour:

 Apprendre. Si une image vaut mille mots, un prototype vaut mille

images.
 Résoudre des désaccords. Le prototypage est un outil puissant qui
permet d'éliminer l'ambiguïté, aider à trouver des idées, et réduire la
mauvaise communication.
 Démarrer une conversation. Un prototype peut être un excellent moyen
d'avoir un autre type de conversation avec les utilisateurs.
 Échouer rapidement et à moindre coût. La création de prototypes
rapides vous permet de tester un certain nombre d'idées sans avoir à
investir beaucoup de temps et d'argent.
 Gérer le processus de construction de la solution. Identifier une
variable à explorer vous encourage à casser un grand problème en petits
morceaux testables.

68
 2- Comment prototyper ?

- Dessiner une maquette (Zoning, Wireframing)

- Faire une maquette interactive (mockup , prototype)
- Prototype magicien d’Oz
- Matérialiser le produit avec du carton, du feutre…

V. Tester les solutions

Expérimenter vos solutions vous permet d'obtenir les avis des utilisateurs,
d’affiner ces solutions afin de les améliorer, et de continuer à en apprendre
davantage sur vos utilisateurs. Cette étape de tests est une phase itérative
pendant laquelle vous placez vos objets en basse résolution dans le contexte
approprié de la vie de l'utilisateur. Un principe important: prototyper comme si
vous aviez raison, tester comme si vous aviez tort.

1- Pourquoi tester ?

69
Affiner vos prototypes et vos solutions. Les tests enrichissent les prochaines
itérations de vos prototypes.

Parfois, cela signifie revenir à la planche à dessin.

En savoir plus sur vos utilisateurs. Les tests sont une autre occasion de gagner
en empathie en observant et nouant un contact avec l’utilisateur. Cette phase est
souvent riche en enseignements inattendus.

Tester et affiner votre angle d’attaque (Point of View). Parfois, les tests
révèlent que non seulement vous n’avez pas la bonne solution, mais aussi que
vous n‘avez pas réussi à cadrer le problème correctement.

2- Les méthodes de tests

- Tests AB , Tests A/B/n

- Tests utilisateurs
- S’inspirer des diagrammes d’activités UML
- Tests unitaires, tests d’intégrations
-

70
Conclusion

Mettre en place une démarche d’UX Design permet de :

- Accroître l’adhésion du public final au produit/service qui sera aux

“goûts” de nos utilisateurs.
- Simplifier l’expérience et se concentrer sur les besoins de l’utilisateur (pas
de superflus et fonctionnalités non attendues).
- Hiérarchiser les besoins.
- Chercher à se démarquer pour créer un affect et un lien.

Il faut voir que l’UX n’est pas une révolution en soit mais avant tout une prise
de conscience basée sur une approche de co-création, humaine et basée sur
les attentes des utilisateurs. Comme vous l’avez vu, une démarche d’UX
Design est simple à mettre en place et peut prendre place pour n’importe quel
type de projet et à n’importe quelle échelle. Dans tous les cas, l’UX design c’est
avant tout un état d’esprit et la prise en compte des utilisateurs finaux, mais
aussi et surtout une base pour la réussite UI Design.

71
Liste des figures

Figure 1: Les enjeux du UX Design 11

Figure 2 : Le modèle Hook Canvas 18
Figure 3 : La démarche UX Design 24
Figure 4 : Les parties d'une page web qui bénéficient d'une grande visibilité 25
Figure 5 : Tracé de l’oeil en Z lors de la lecture d’un écran 27
Figure 6: Grille de visibilité et d’accessibilité générale. 28
Figure 7 : Suggestion d'implantation des éléments. 28
Figure 8 : Les touches orangées sur le site d’Amazon 48
Figure 9 : L’Ultra-Violet de Pantone, couleur de l’année 2018 49
Figure 10 : Encart sur le site de Lancôme 51
Figure 11 : Exemple de communication Spotify 51
Figure 12 : Exemple de communication Sephora 52
Figure 13 : Matrice du design thinking 55

72
Liste des tableaux

Tableau 1 : Catégorisation des éléments déclencheurs selon le modèle Hook

Canvas.................................................................................................................19
Tableau 2 : Les contraintes de l'appareil mobile.................................................24
Tableau 3 : Trois (03) règles pour réussir vos tests utilisateurs..........................35

73