Université de Fianarantsoa Ecole Nationale d’Informatique

Design UX/UI
Prototypage
Enseignant: Mr DIMBISOA William Germain,
Docteur en Informatique

Design UX_UI, ENI, Dr William vendredi 5 avril 2024 1

Répartition du cours

 Volume horaire: 40h

Cours théorique: 12h
Travaux dirigés: 12h
Travaux pratiques: 16h

Design UX_UI, ENI, Dr William vendredi 5 av 2

ril 2024
Objectifs du cours

 Cibler un client
 Déterminer un pitch produit
 Concevoir l’interface d’une application
 Faire un prototype d’une application
 Produire une maquette finale d’une application

Design UX_UI, ENI, Dr William vendredi 5 av 3

ril 2024
Contenu du cours
 Product pitch
 UX persona
 User Journey
 User flow
 Atomic design
 UI kit
 Wireframe
 Icon and image
 Color and typography
 Advanced UI design
 prototype and usability tests
Design UX_UI, ENI, Dr William vendredi 5 av 4
ril 2024
Qu'est-ce qu'un pitch produit ?
 Un bon pitch produit peut se faire pendant un trajet d’ascenseur d’une
minute (d’où le nom de “ elevator pitch “). Il doit définir les éléments
suivants :
1. Le segment de clientèle : groupe d’utilisateurs que vous ciblez.
2. Le besoin de l’utilisateur : l’action qu’il doit faire et qui le pousse à rechercher un
produit.
3. L’objectif de l’utilisateur : l’objectif qu’il veut atteindre et qui le pousse à
choisir votre produit.
4. Les concurrents : autres produits qui permettent à un utilisateur d’effectuer la même
action (c’est-à-dire de répondre au même besoin).
5. Différenciateur / Proposition de valeur unique : comment votre produit se distingue
des concurrents et quelles sont les caractéristiques qui aident spécifiquement les
utilisateurs à atteindre leur objectif.

Design UX_UI, ENI, Dr William vendredi 5 av 5

ril 2024
Modèle d’un pitch produit ?
 Voici un modèle pour décrire tous ces éléments de manière simple :
1. C’est un produit…
2. Pour <ce segment de clients>
3. Qui ont besoin de <réaliser cette action>
4. Et veulent <atteindre cet objectif>
5. Ils choisissent <votre produit>
6. Parce qu’<il possède cet élément différenciateur / cette proposition de valeur
unique>
7. Contrairement à <ces concurrents>
 Comme vous pouvez le constater, il n’y a pas un discours unique pour un
produit, mais un discours par segment de clientèle.

Design UX_UI, ENI, Dr William vendredi 5 av 6

ril 2024
Besoins et objectifs
 Les gens sont toujours confus quant à la différence entre les besoins et les objectifs des
utilisateurs.
 Le besoin d’un utilisateur est très simple. Il s’agit simplement de l’action que vos
utilisateurs doivent effectuer qui les pousse à chercher une solution. Exemple :
 trouver un lieu d’hébergement
 créer une enquête en ligne
 organiser un projet
 prendre un taxi
 commander de la nourriture
 communiquer avec son équipe
 analyser le trafic de son site web
 Besoin = l’action à réaliser

Design UX_UI, ENI, Dr William vendredi 5 av 7

ril 2024
But = l’objectif de l’utilisateur
 L’objectif de l’utilisateur est ce que l’utilisateur essaie d’atteindre. Prenons l’exemple
d’un outil d’analyse Web comme Google Analytics utilisé par les spécialistes du
marketing.
 Les spécialistes du marketing ont besoin d’analyser le trafic de leur site Web et le
comportement des utilisateurs.
 Ils le font parce qu’ils souhaitent augmenter le nombre de visiteurs et améliorer le taux
de conversion de leur site Web.
 Comme vous pouvez le constater, les besoins et les objectifs sont très différents. Les
besoins initient la recherche d’un produit, tandis que les objectifs sont ce que les
utilisateurs espèrent atteindre à l’avenir.

Design UX_UI, ENI, Dr William vendredi 5 av 8

ril 2024
Besoins et objectifs spécifiques aux clientèles
 Les besoins et les objectifs dépendent du segment de clientèle que vous considérez. Par
exemple, différents types d’utilisateurs auront des besoins différents. Prenons l’exemple
d’Airbnb :
 Les voyageurs ont besoin de trouver un endroit où rester.
 Les propriétaires ont besoin de louer leur appartement.
 Au sein d’une catégorie d’utilisateurs qui ont besoin de faire la même chose (comme
les voyageurs qui ont besoin de trouver un endroit où loger), il existe différents
segments de clientèle ayant des objectifs différents. Voici quelques exemples de
segments de clientèle de voyageurs et leur objectif associé :
 Couples avec un revenu supérieur à la moyenne : ils veulent vivre une expérience
authentique.
 Étudiants avec un budget limité : ils veulent s’amuser sans trop dépenser pour l’hébergement.
 Ces deux segments de clientèle choisiront Airbnb, mais ce sera pour des raisons
différentes.

Design UX_UI, ENI, Dr William vendredi 5 av 9

ril 2024
Étude de cas: segment de clientèle
 1. Principal segment de voyageurs : Les couples
 Il s’agit d’une application…
 Pour les couples avec un revenu supérieur à la moyenne.
 Qui ont besoin de trouver un endroit pour séjourner.
 Et qui cherchent à vivre une expérience locale authentique.
 Ils choisissent Airbnb.
 Parce que loger chez l'habitant vous rapproche plus de la ville que les hôtels.
 Contrairement à Booking.com, etc....

Design UX_UI, ENI, Dr William vendredi 5 av 10

ril 2024
Étude de cas: segment de clientèle
 2. Segment secondaire de voyageurs : les étudiants avec un budget limité
 C’est une application…
 Pour les étudiants avec un budget limité
 Qui ont besoin de trouver un endroit pour séjourner.
 Et qui cherchent à s'amuser sans trop dépenser en logement.
 Ils choisissent Airbnb…
 Parce que l’application propose des logements d'habitants qui sont d'un bon rapport qualité-
prix pour les groupes.
 Contrairement à Booking.com, etc....

Design UX_UI, ENI, Dr William vendredi 5 av 11

ril 2024
Qu'est-ce qu'un persona en UX ?
 Informations de base, objectifs, comportements
 Une fois que vous avez défini les segments de clientèle de votre application, il est
temps de créer un persona pour chacun de ces segments. Un persona est un personnage
fictif qui est créé pour représenter un segment de clientèle.
 Par exemple, un bon persona pour les voyageurs d’Airbnb devrait avoir :
• Infos de base : photo de profil, nom, surnom, âge, genre, nationalité, ville de résidence,
emploi, revenu, statut relationnel, etc….
• Buts : objectifs lors de la réservation d’un lieu de vacances.
• Comportements : comportement typique lors de la réservation d’un logement en ligne.
 Évidemment, quand on parle d’objectifs et de schémas comportementaux, on parle
juste de ceux qui sont reliés à votre besoin utilisateur, c’est-à-dire ce que votre
utilisateur essaie de faire avec votre produit (ex : “ réserver un lieu “ pour Airbnb).
Sinon, nous aurions une liste super longue et inutile de tous les objectifs de nos
utilisateurs.
Design UX_UI, ENI, Dr William vendredi 5 av 12
ril 2024
Qu’est-ce qui fait un bon persona ?

 Un bon persona comporte beaucoup de détails personnels, vous pouvez facilement vous
identifier à lui/elle si vous êtes dans le même segment de clientèle. Voici quelques
conseils pour créer de bons personas :
• Donnez suffisamment de détails mais pas trop : votre description doit tenir sur une
page A4.
• Essayez d’utiliser le même vocabulaire que votre persona utiliserait dans le monde
réel.
• Ne soyez pas trop “cliché” et utilisez des détails et des comportements réalistes
obtenus lors d’entretiens avec des clients.

Design UX_UI, ENI, Dr William vendredi 5 av 13

ril 2024
Persona: Un concept également utilisé en marketing

 Wikipédia: « Un persona en design et marketing utilisateur est un

personnage fictif créé pour représenter un type d’utilisateur qui pourrait
utiliser un produit de manière similaire. Les spécialistes du marketing peuvent
utiliser les personas conjointement avec la segmentation du marché, où les
personas qualitatifs sont construits pour être représentatifs de segments
spécifiques ».
 Comme vous pouvez le constater, l’UX et le marketing peuvent parfois être
proches. Un persona n’est pas seulement utile pour le processus de design
mais aussi pour l’équipe marketing, puisque les clients s’identifieront
naturellement à un persona de leur segment de clientèle annoncé sur le site
web par exemple.

Design UX_UI, ENI, Dr William vendredi 5 av 14

ril 2024
Pourquoi est-ce utile en UX ?

Design UX_UI, ENI, Dr William vendredi 5 av 15

ril 2024
Pourquoi est-ce utile en UX ?
 Les personas permettent aux designers non pas de se concentrer sur ce qu'ils
veulent mais de se concentrer sur ce que leurs utilisateurs veulent. Parler de segments de
clients généraux comme “étudiants”, “couples”, “locaux” crée une distance entre les
designers et leurs utilisateurs, alors que mettre un visage et un nom sur vos utilisateurs est
un moyen de se reconnecter à eux.
 Par exemple, voici des questions typiques que les designers de Typeform (typeform.com)
pourraient se poser en utilisant leurs personas:
• Où Jonas veut-il lancer son enquête (site web, page Facebook de l’entreprise) ?
• Combien d’enquêtes Jonas crée-t-il chaque mois ?
• Quel est le moyen le plus rapide pour Priscilla de partager une enquête avec son équipe
• Quel format est le plus pratique lorsque Christina veut exporter des données sur les
clients ?
• Imaginez que Jonas travaille sur une opération marketing très importante : quels sont les
éléments qu’il souhaite vraiment personnaliser sur l’enquête ? Où veut-il mettre son logo ?
Design UX_UI, ENI, Dr William vendredi 5 av 16
ril 2024
Persona primaire, persona secondaire, anti-persona

 Les designers peuvent également jouer un rôle et agir comme s’ils étaient leur persona
dans des situations spécifiques. Cette méthode est parfois très efficace pour découvrir les
pensées et les émotions typiques des utilisateurs.
 OK, c’est assez évident mais il existe différents types de personas :
• Persona primaire : représentant votre segment de clientèle primaire (groupe majoritaire
de clients).
• Persona secondaire : représentant votre segment de clientèle secondaire.
• Anti-persona : représentant le segment de clientèle que vous ne voulez pas avoir
 Par exemple, si vous concevez une application web destinée uniquement aux adultes ou
si vous travaillez sur un produit qui repose sur une communauté d’utilisateurs experts.
 Connaître vos personas et anti-personas peut vous aider à concevoir un meilleur
processus pour attirer des utilisateurs.

Design UX_UI, ENI, Dr William vendredi 5 av 17

ril 2024
Construire votre persona principal
 Commencez par étudier notre exemple
 Avant de commencer, prenez le temps d’étudier l’exemple de persona UX que
nous vous donnons dans la feuille de calcul UX Research. Vous devriez déjà
avoir fait une copie de cette feuille de calcul, alors continuez à travailler sur
cette version
 En particulier, prenez note :
• Des informations de base de Manu
• Des objectifs détaillés de Manu
• Des comportements typiques de Manu
 À votre tour de construire votre persona

Design UX_UI, ENI, Dr William vendredi 5 av 18

ril 2024
User Journey / Qu'est-ce qu'un User Journey ?
 Persona, tâche, objectif et contexte
 Pour construire un bon User Journey (parcours utilisateur), vous devez d’abord définir :
1. Le persona qui va parcourir le User Journey.
2. La tâche que votre persona doit accomplir. Il y a souvent beaucoup de tâches différentes
que les utilisateurs peuvent accomplir sur un produit. Par exemple dans le cas d’Airbnb :
réserver un logement, modifier leur profil, laisser un avis sur un voyage précédent, louer
leur propre appartement, répondre à une question sur une demande de réservation, etc…
Chacune de ces tâches correspond à un User Journey différent.
3. L’objectif que votre persona essaie d’atteindre en accomplissant cette tâche.
4. Le contexte initial, c’est-à-dire la situation initiale dans laquelle se trouve votre persona
au début du parcours. Où est-il/elle ? A quel moment cela se passe ? Avec qui
est-il/elle ? Quel appareil utilise-t-il ? Quelle est son humeur initiale ?

Design UX_UI, ENI, Dr William vendredi 5 av 19

ril 2024
Exemple de persona/tâche/objectif/contexte

Design UX_UI, ENI, Dr William vendredi 5 av 20

ril 2024
Core User Journey
 Un produit a beaucoup de User Journey différents en fonction :
• Du personnage que vous choisissez.
• De la tâche que vous sélectionnez pour ce persona.
 Pour chaque persona, il y a souvent une tâche qui a la priorité sur les autres. Il s’agit de la
tâche que votre persona essaiera d’accomplir la plupart du temps lorsqu’il utilisera votre
application :
• Les voyageurs essaient de réserver un logement (Airbnb)
• Les propriétaires essaient de louer leur appartement (Airbnb)
• Les spécialistes du marketing essaient de créer une enquête (Typeform)
• Les personnes pressées essaient de prendre un taxi (Uber)
• Les personnes affamées essaient de commander de la nourriture (Deliveroo)
Le User Journey associé à chacune de ces tâches peut être considéré comme le plus important
pour le persona associé : c’est ce que nous appelons le Core User journey du persona
Design UX_UI, ENI, Dr William vendredi 5 av 21
ril 2024
Étapes du User Journey
 Une fois que vous avez défini le persona / tâche / objectif / contexte de votre User
Journey, il est temps de le décrire. Un User Journey est une succession d’étapes, c’est-à-
dire d’actions par lesquelles votre utilisateur passe afin de réaliser la tâche. Vous pouvez
le voir comme un petit script.
 Un bon User Journey doit décrire toutes ces étapes sans essayer de décrire l’interface du
produit. En fait, un User Journey permet aux designers de se concentrer sur toutes les
étapes logiques qu’un utilisateur doit franchir pour accomplir une tâche sans se
laisser distraire par l’UI ou par les fonctionnalités que le produit doit avoir.
 Pour chaque étape du User Journey, il est toujours intéressant d’ajouter quelques détails
personnels sur votre persona qui peuvent apporter des idées de design par la suite. Il
peut également être utile d’associer un sentiment à chacune des étapes. Ce n’est pas
toujours facile à faire, mais cela peut donner des conseils sur la façon de concevoir l’UI
par la suite.

Design UX_UI, ENI, Dr William vendredi 5 av 22

ril 2024
Étapes du User Journey
 Concentrez-vous sur votre utilisateur, pas sur votre logiciel !
 Lorsque vous détaillez les étapes de votre User Journey, utilisez le langage humain,
pas le langage informatique :
• Utilisez des verbes comme aller, voir, vérifier, lire, demander, confirmer, réserver.
• N’utilisez pas de verbes tels que clic, scroll, browse, zoom, submit, toggle, filter.

Design UX_UI, ENI, Dr William vendredi 5 av 23

ril 2024
 Utilisez le langage humain, pas le langage
informatique !

Design UX_UI, ENI, Dr William vendredi 5 av 24

ril 2024
User Flow: Qu'est-ce qu'un User Flow ?

 Un User Flow est un organigramme qui décrit les différentes pages de votre
produit et les connexions entre chacune d’elles. Dessiner votre User Flow est la
première étape de la construction de l’UI (Interface Utilisateur) de votre
produit. En fait, vous devez d’abord déterminer quelles seront vos pages et les
liens entre elles avant de designer en détail chacune de ces pages à l’aide d’un
wireframe.
 Il est très important de définir votre User Journey avant de dessiner le User
Flow associé. Les designers peuvent souvent oublier des écrans importants ou
construire un User Flow qui n’est pas totalement adapté à leur utilisateur
lorsqu’ils ignorent le User Journey et tentent de dessiner directement leur User
Flow.

Design UX_UI, ENI, Dr William vendredi 5 av 25

ril 2024
User Journey et User Flow

 La différence entre un User Journey et un User Flow est souvent confuse, alors qu’ils
sont totalement différents. Lorsque les designers travaillent sur un User Journey, ils font
encore de la recherche sur l’utilisateur, c’est-à-dire qu’ils réfléchissent à la manière dont
leurs utilisateurs effectueraient une tâche donnée. Lorsqu’ils travaillent sur un User
Flow, ils sont déjà en train de construire l’interface utilisateur (UI). Ils sont donc moins
concentrés sur l’utilisateur et plus sur “comment leur application va fonctionner”. Pour
résumer :
 Un User Journey est une description des différentes étapes par lesquelles votre
utilisateur passe pour accomplir une tâche donnée. Il peut inclure des détails personnels
ou des émotions associés au persona qui traverse le parcours. Il permet aux designers de
se concentrer sur les actions élémentaires que leur utilisateur doit effectuer sans penser à
l’interface de leur produit.
 Un User Flow est la traduction d’un User Journey sous la forme d’un organigramme
détaillant les écrans et les connexions entre les écrans.

Design UX_UI, ENI, Dr William vendredi 5 av 26

ril 2024
D’abord, votre User Journey. Ensuite, votre User Flow

Design UX_UI, ENI, Dr William vendredi 5 av 27

ril 2024
Task Flow ou User Flow?

 Un User Flow axé sur une tâche spécifique est appelé un Task Flow. Voici quelques
exemples de Task Flow et de User Flow :
1. Un Task Flow de la création de votre compte (flux d’inscription).
2. Un User Flow pour gérer toutes vos demandes de réservation, correspondant à
différentes tâches de gestion : répondre aux messages, accepter et refuser les demandes
de réservation, évaluer les invités précédents.
3. Un Task Flow pour réserver un appartement.
4. L’ensemble du User Flow d’Airbnb (toutes les tâches possibles).
 Bien sûr, si nous voulions dessiner l’ensemble du User Flow de toutes les tâches
possibles sur Airbnb (se connecter, s’inscrire, ajouter un appartement, rechercher un
appartement, répondre aux messages, accepter et refuser les demandes de réservation,
laisser des avis, etc…) cela prendrait beaucoup de temps et n’aurait probablement pas sa
place dans ce cours.

Design UX_UI, ENI, Dr William vendredi 5 av 28

ril 2024
 Exemple de Task Flow

Task flow: Réserver un appartement

Design UX_UI, ENI, Dr William vendredi 5 av 29

ril 2024
 Exemple de User Flow

User flow: Recherche d’expériences et d’appartements

Design UX_UI, ENI, Dr William vendredi 5 av 30

ril 2024
Atomic design: qu’est-ce l’atomic design

 L’Atomic Design se concentre sur la construction d’une UI en combinant des

composants de design élémentaires au lieu de designer chaque nouvelle page à partir
de zéro - une approche très inefficace qui entraîne souvent un manque de cohérence
dans le design. Vous pouvez considérer l’Atomic Design comme un Lego : les designers
commencent par construire leurs différentes briques Lego, puis combinent ces briques
pour construire leur UI.
 Atomes & Molécules
 Les designers UI font généralement référence aux éléments de design suivants :
• Atomes : les plus petites briques de votre interface : en-têtes, textes, étiquettes, icônes,
liens, avatars, boutons, saisies de formulaires, images, etc.
• Molécules : composants plus structurés combinant différents atomes : formulaires,
cartes, hero section (aussi appelée “banner”), barres de navigation, etc…

Design UX_UI, ENI, Dr William vendredi 5 av 31

ril 2024
Atomes & Molécules

Design UX_UI, ENI, Dr William vendredi 5 av 32

ril 2024
Composants

 Lorsque les designers veulent se référer à une collection générale sans faire de
différence entre les atomes et les molécules, ils utiliseront le
mot composants ou composants UI (composants utilisés pour construire l’UI).
 De même, les composants spécifiquement conçus pour les interfaces Web sont
souvent appelés composants Web.

Design UX_UI, ENI, Dr William vendredi 5 av 33

ril 2024
Construire UI Kit et Wireframe

 Construire UI Kit
 Construire les composants
 Construire le prototype (Wireframe)
 Construire la maquette (Mockup)
 Tester la maquette

Design UX_UI, ENI, Dr William vendredi 5 av 34

ril 2024
Ressources pour les couleurs et les polices

1- Outils et conseils pour les polices

 Où trouver des polices de caractères
 Voici quelques ressources pour installer des polices sympas :
• Pour les polices gratuites, consultez le site Google Fonts.
• Pour les polices payantes, vous pouvez les télécharger sans payer sur
getthefont.com. Bien sûr, vous n’êtes pas autorisé à utiliser ces polices payantes
à des fins commerciales, mais si vous voulez juste faire quelques tests rapides
sur votre maquette avant d’acheter réellement les polices (les polices peuvent
être assez chères parfois, ça vaut le coup de le faire. (edit : ce site est peut-être
fermé maintenant)

Design UX_UI, ENI, Dr William vendredi 5 av 35

ril 2024
Ressources pour les couleurs et les polices

 Comment installer des polices

 Voici un guide pour installer une nouvelle police de desktop
1. Recherchez la police que vous voulez (payante ou gratuite), comme Roboto, Lato, Avenir,
Camphor, etc.
2. Téléchargez les fichiers desktop, c’est-à-dire les fichiers .ttf. Pour votre information, les
polices ont aussi des formats de fichiers adaptés au web comme .woff.
3. Une fois téléchargé, double-cliquez sur chaque fichier .ttf pour installer la police sur votre
ordinateur
4. Redémarrez toutes les applications ouvertes qui pourraient avoir des menus de polices
comme Keynote, PowerPoint, Word, Sketch, etc.
5. Vous pouvez maintenant utiliser votre nouvelle police dans n’importe laquelle de ces
applications, par exemple pour construire une présentation, une maquette, un document word,
etc…

Design UX_UI, ENI, Dr William vendredi 5 av 36

ril 2024
Comment utiliser les polices ?
 Voici de très bonnes ressources pour utiliser les polices comme un vrai pro :
1. Commencez par lire ce guide qui donne les règles et astuces de base pour une
bonne typographie.
2. Pour trouver des combinaisons de polices Google qui fonctionnent bien
ensemble, vous pouvez consulter cette ressource ou celle-ci.
3. Enfin, si vous avez envie de fantaisie, vous pouvez consulter cette
carte des polices par Ideo.

Design UX_UI, ENI, Dr William vendredi 5 av 37

ril 2024
Comment utiliser les polices ?
2- Outils et conseils pour les couleurs
 Où trouver des couleurs
 Il existe des tonnes de sites Web consacrés aux couleurs :
• Colorhunt
• Coolors.co
• Colorbox.io
 Il est essentiel de disposer d’un colorpicker, afin de pouvoir copier rapidement les
couleurs que vous voyez en ligne et qui vous plaisent :
• Extension Colorzilla Chrome (gratuite)
• Sip pour Mac (payante)

Design UX_UI, ENI, Dr William vendredi 5 av 38

ril 2024
Comment utiliser les couleurs
 Voici quelques conseils de base :
• N’utilisez pas trop de couleurs : par exemple, choisissez une couleur forte
pour vos boutons principaux et votre logo et ajoutez une couleur secondaire
pour les boutons et les liens moins importants.
• Faites attention aux schémas de couleurs : les schémas de couleurs sont
excellents mais les débutants ne savent souvent pas comment les utiliser. Ils
finissent par appliquer le schéma de couleurs de la mauvaise manière.
• Au lieu d’utiliser un jeu de couleurs, inspirez-vous des sites Web que vous
aimez et utilisez un sélecteur de couleurs pour copier/coller les couleurs et les
appliquer à votre site Web.

Design UX_UI, ENI, Dr William vendredi 5 av 39

ril 2024
Pimpez votre UI kit
 Voici quelques conseils de base
 Voici quelques défis pour vous :
• Trouvez deux polices différentes sur Google Fonts (une pour les headers et les
liens et une autre pour le texte) et intégrez-les dans votre kit UI. Pour savoir
comment installer et utiliser une police Google, n’oubliez pas de lire le bloc
précédent
• Trouvez au moins deux couleurs (primaires/secondaires) et intégrez-les aux
composants de votre kit UI, par exemple en changeant la couleur des liens, des
headers, des boutons, etc.
• N’hésitez pas à faire preuve de créativité dans vos choix

Design UX_UI, ENI, Dr William vendredi 5 av 40

ril 2024
Ressources pour les icônes et les images

 Ajouter des icônes à votre UI Kit

 Voici quelques ressources intéressantes pour les icônes et les illustrations :
• Nucleoapp
• Undraw
• Orion
 Voici quelques stocks de photos Haute Définition :
• Unsplash
• Gratisography
• Duotone pour ajouter un effet bicolore à votre photo

Design UX_UI, ENI, Dr William vendredi 5 av 41

ril 2024
UI design avancé
 S'améliorer en UI Design
 Le design UI semble facile, mais il faut beaucoup de temps et d’expérience
pour le maîtriser. Voici quelques bonnes ressources pour commencer :
1. Tout d’abord, vous devez maîtriser les modèles UI classiques. Par exemple,
voici une liste non exhaustive de modèles de design classiques et la façon de les
utiliser élaborée par les designers de la BBC.
2. Deuxièmement, vous devez éviter les erreurs courantes.
3. Enfin, vous devez connaître les conseils pratiques qui changent tout.
 Nous vous recommandons vivement de suivre steveschoger sur Twitter. Il
publie de nombreux conseils de design très pratiques pour les débutants.

Design UX_UI, ENI, Dr William vendredi 5 av 42

ril 2024
Analyse des comportements
Que doit-on analyser ?
 Les designers UX doivent avoir recours à différents types d’analyses :
• L’analyse de la navigation (ou page-to-page)
• Les analyses dans la page (ou in-page).
 Avoir recours à des analyses est un moyen de détecter les problèmes d’UX et de faire
évoluer le design : par exemple, repenser le User Flow ou réorganiser le contenu d’une
page spécifique.
 Comportement de navigation avec Google Analytics
 La plupart des gens utilisent Google Analytics pour leurs analyses de “page-to-page”.
Les designers UX sont particulièrement intéressés par les analyses
de comportement suivantes :
• Les taux de sortie
• Les taux de conversion “page-to-page”
Design UX_UI, ENI, Dr William vendredi 5 av 43
ril 2024
Analyse des comportements
Le comportement “in-page” avec Hotjar
 En ce qui concerne le comportement “in-page”, les designers peuvent détecter de
nombreux éléments à l’aide d’un outil de carte thermique comme Hotjar. Par exemple,
Hotjar vous donne :
• Une carte thermique des Clicks pour savoir où les utilisateurs cliquent sur une page.
• La carte thermique des Scrolls pour savoir comment les utilisateurs défilent sur une
page.
• La carte des Move pour savoir comment les utilisateurs déplacent exactement la souris
sur une page.
 Événements spécifiques des utilisateurs avec Mixpanel
 Parfois, vous souhaitez suivre des événements utilisateurs très spécifiques. Par exemple,
nous voulons peut-être savoir quand nos étudiants atteignent 30 % d’un quiz sur la plate-
forme d’apprentissage que vous utilisez actuellement. Dans ce cas, nous pouvons utiliser
des solutions d’analyse des utilisateurs plus avancées telles que Mixpanel.
Design UX_UI, ENI, Dr William vendredi 5 av 44
ril 2024