Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

Les fondamentaux de UI UX Design .pdf

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
Symposium uxdesign
Symposium uxdesign
Cargando en…3
×

Eche un vistazo a continuación

1 de 46 Anuncio

Les fondamentaux de UI UX Design .pdf

Descargar para leer sin conexión

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".

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".

Anuncio
Anuncio

Más Contenido Relacionado

Similares a Les fondamentaux de UI UX Design .pdf (20)

Más reciente (20)

Anuncio

Les fondamentaux de UI UX Design .pdf

  1. 1. LES FONDAMENTAUX DE UI/UX DESIGN
  2. 2. INTERFACES UTILISATEURS AVANCÉES Les fondamentaux de UI/UX Design Mme Sonia SAHLI
  3. 3. OBJECTIFS •Identifier UX design •Définir UI design •Distinguer entre l’UX et l’UI •Citer quelques outils de maquettages 3
  4. 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. 5. USER INTERFACE UI
  6. 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. 7. UI =User Interface 7 UI IHM Graphique
  8. 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. 9. UX =User EXperience Expérience de l'utilisateur
  10. 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. 11. CARTE MENTALE UX DESIGN 11
  12. 12. ENGLISH MIND MAP 12
  13. 13. QU’EST CE QUE L’UX ? 13
  14. 14. QU’EST CE QUE L’UX ? 14
  15. 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. 16. QU’EST CE QUE L’UX ? USER NEEDS BUSINESS NEEDS UX 16
  17. 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. 18. UX DESIGNER
  19. 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. 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. 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. 22 UX DESIGNER D’après le site : https://www.cidj.com/
  23. 23. 23 UX DESIGNER En Tunisie (https://www.optioncarriere.tn/) (en 2021) En France (https://www.cidji.com/)
  24. 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. 25. UX DESIGNER UX writer UX researcher UX Tester UX Analyst Interraction Designer 25 ENCORE PLUS DE MÉTIERS
  26. 26. UX via UI
  27. 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. 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. 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. 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. 31 UI UX UX via UI
  32. 32. ACCROCHER UN UTILISATEUR
  33. 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. 34. LES RÈGLES POUR ACCROCHER UN UTILISATEUR Il faut Il ne faut pas 34
  35. 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. 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. 37. CONCLUSION • L’objectif de l’UX design est de concevoir le meilleur produit pour son utilisateur. 37
  38. 38. DES OUTILS
  39. 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. 40. DES OUTILS 40
  41. 41. DES OUTILS 41
  42. 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. 43. EVALUATION
  44. 44. OBJECTIFS •Identifier UX design •Définir UI design •Distinguer entre l’UX et l’UI •Citer quelques outils de maquettages 44
  45. 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/

×