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

46. 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/