1.
LES FONDAMENTAUX DE UI/UX
DESIGN

2.
INTERFACES UTILISATEURS AVANCÉES
Les fondamentaux de UI/UX Design
Mme Sonia SAHLI

3.
OBJECTIFS
•Identifier UX design
•Définir UI design
•Distinguer entre l’UX et l’UI
•Citer quelques outils de maquettages
3

4.
PLAN
1. Le concept de UX
2. Différence entre UX et UI
3. C’est qui un UX Designer ?
4. Comment accrocher un utilisateur ?
5. Des outils
6. Evaluation
4

5.
USER INTERFACE
UI

6.
UI =User Interface
l'inter
médiaire
surface
interface
Interface : c'est la surface qui fait l'intermédiaire entre l’utilisateur et
le produit. 6

7.
UI =User Interface
7
UI
IHM
Graphique

8.
UI = User Interface
• UI =User Interface : interface utilisateur tout ce qui est lié au
graphique d’un logiciel ou site Web ou application mobile
• UI designer : qui fait la conception graphique de ces derniers
(éléments graphiques, boutons, navigation…)
8

9.
UX =User EXperience
Expérience de l'utilisateur

10.
QU’EST CE QUE L’UX ?
Activité : (débat)
• Observez la vidéo
https://openclassrooms.com/fr/courses/3013856-ux-design-decouvrez-les-
fondamentaux/4041846-apprenez-a-reconnaitre-et-definir-lux
« https//openclassrooms.com »
• Notez les différents éléments observés dans la vidéo
• Ouvrir un débat et construire une carte mentale
10

11.
CARTE MENTALE UX DESIGN
11

12.
ENGLISH MIND MAP
12

13.
QU’EST CE QUE L’UX ?
13

14.
QU’EST CE QUE L’UX ?
14

15.
QU’EST CE QUE L’UX ?
User eXperience:
cherche le besoin de l’utilisateur = l'utilisateur heureux.
• L'UX est liée à l'émotion
• L'UX est liée au statistiques
• L'UX est liée au Marketing
15

16.
QU’EST CE QUE L’UX ?
USER
NEEDS
BUSINESS
NEEDS
UX
16

17.
QU’EST CE QUE L’UX ?
User eXperience:
• Collecter le maximum des Feedbacks des utilisateurs afin d’avoir une
bonne vision sur leurs besoins et par suite un meilleur usage de
l’application ou site Web ou logiciel …
☞ Le retour de leurs expériences
17

18.
UX DESIGNER

19.
UX DESIGNER
• UX Designer est un nouveau métier qui :
• Identifie les objectifs du projet de son client pour une bonne conception et un bon
usage d’un site web, d’une application mobile
• Modélise les attentes d’un utilisateur
• Prends en compte les objectifs financiers de son client
• Ne développe pas l’application directement mais plutôt commence par donner un
croquis et le discuter avec une équipe.
• Déterminer d’ailleurs tous les points critiques de l’expérience utilisateur.
19

20.
UX DESIGNER
L’UX Designer veille à ce que l’interface soit:
• Facile d’accès
• Cohérente à l’entreprise
• Fait appel à ses services
• Simple
• Une expérience d'utilisation mémorable
20

21.
UX DESIGNER
Activité:
1. Chercher des UX Designers sur LinkedIn
2. Quels sont les compétences demandées d’un UX Designer?
3. Chercher le salaire moyen pour un UX Designer
A VOS SMARTPHONES
21

22.
22
UX DESIGNER
D’après le site : https://www.cidj.com/

23.
23
UX DESIGNER
En Tunisie (https://www.optioncarriere.tn/) (en 2021)
En France (https://www.cidji.com/)

24.
UX DESIGNER
• Les compétences demandés
• Maîtrise des logiciels de images bitmap et vectorielle
• Maîtrise des outils de maquettage
• Bonnes connaissances techniques des technologies front-end (HTML , CSS …)
• Etre à jour dans les tendances concernant le graphisme
• Créativité , collaboration( travail en équipe) , communication
24

25.
UX DESIGNER
UX writer
UX researcher
UX Tester
UX Analyst
Interraction
Designer
25
ENCORE PLUS DE MÉTIERS

26.
UX via UI

27.
UX via UI
Activité : (par groupe)
• 2 groupes :groupe UX et groupe UI
• Ci-dessous dans la feuille une liste des tâches que vous allez
l’affecter soit à UX Designer ou UI Designer
27

28.
TACHES UX / UI
• Collaboration
• Les animations
• Identité visuelle
• Conception
• Charte graphique
• Satisfaction de l’utilisateur
• Interface Homme Machine
• Couleur des boutons
• Architecture de site ou de l’application
• La visibilité,
• La simplicité
• La crédibilité et la confiance de son
utilisateur
• Eléments graphiques et textuels
28

29.
29
Architecture
Conception et
maquettage
Satisfaction de
l’utilisateur
Test et Feedback
Couleurs
Eléments graphiques
et textuels
Identité visuelle
Typographie
UI UX
DESIGN

30.
• L'aspect graphique, visuel et interactif du site Web ou de l’application est la tache
de UI DESIGNER pour que l'utilisation soit agréable .
• l'UX DESIGNER celui qui traduit les prototypes en maquettes haute fidélité tout en
gardant l’ergonomie visuelle pour les pages Web.
• L’ UI DESIGNER et l'UX DESIGNER sont deux rôles distincts, bien qu'ils représentent
généralement le même métier (UX/UI Designer)
30
UX via UI

31.
31
UI
UX
UX via UI

32.
ACCROCHER UN UTILISATEUR

33.
ACCROCHER UN UTILISATEUR
• Pour une bonne application mobile ou site web il faut y avoir
une relation "haute fréquence" avec ses utilisateurs.
(Facebook (98%), WhatsApp (77%) , YouTube, twitter ,
Instagram : n visites /heure)
• Il faut accrocher ses utilisateurs
33

34.
LES RÈGLES POUR ACCROCHER UN
UTILISATEUR
Il faut
Il ne faut pas
34

35.
IL FAUT
• Les nouvelles : Avoir toujours des nouvelles donc consulter pour ne pas
rater une.
• Les notifications: publier une photo ou vidéo et attendre le nombre de
like, nombre de commentaire sur Facebook
• La simplicité : pas de plus simple que défiler une liste d’images comme
Instagram et pas de plus simple que regarder des vidéos successives
sur YouTube
• L’élément surprise : trouver un ami d’enfance sur Facebook ou
Instagram.. 35

36.
IL NE FAUT PAS
• Éliminer les clics superflus
• Éliminer le remplissage de champs interminable
• Éliminer la lecture sans fin ( 1 image =1000 mots)
• Eviter les fenêtres publicitaires
• Essayer de ne pas compliquer l’accès
36

37.
CONCLUSION
• L’objectif de l’UX design est de concevoir le
meilleur produit pour son utilisateur.
37

38.
DES OUTILS

39.
DES OUTILS
•Qu’est ce qu’un wireframe : ce sont des
écrans qui vont poser les principes
ergonomiques en niveau de gris.
39

40.
DES OUTILS
40

41.
DES OUTILS
41

42.
DES OUTILS
Il y a plusieurs applications pour réaliser des wireframes tel que :
• Balsamiq Mockups ,
• Adobe XD,
• UX Pin,
• in Vision,
• Sketch
• Etc...
42

43.
EVALUATION

44.
OBJECTIFS
•Identifier UX design
•Définir UI design
•Distinguer entre l’UX et l’UI
•Citer quelques outils de maquettages
44

45.
RÉFÉRENCES
• https://blog-ux.com/quelle-difference-entre-ux-
design-et-ui-design/
• https://openclassrooms.com/fr/courses/3013856-
ux-design-decouvrez-les-
fondamentaux/exercises/1221
• https://blogdummi.fr/dossier/ux-design-
comprendre-design-experience-10-images/
• https://www.youtube.com/watch?v=6ec8YIrfbhk
• https://www.clementine.jobs/fiches-
metiers/metiers-marketing-publicite-
digitale/metier-ux-designer-ui-designer/