Par ce Slide , un lecteur doit être capable de définir les notions fondamentaux de UI (User Interface) et UI (User Experience Design) afin de créer une maquette fonctionnelle d’un site Web ainsi que d’une application mobile tout en se basant sur la notion de l’expérience utilisateur "User Experience Design".

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/