Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Good Morning UX #1
@Newflux_fr @Le_laptop
Initiation aux bases de la
conception UX
GOOD MORNING UX #1
Quels avantages en concevant UX ?
Le ROI de l’UX
+35%
L’augmentation des revenus de ESPN
après avoir pris en compte les retours
des utilisateurs dans leur refonte
29%
Des ...
x5
Un petit effort sur la satisfaction client
et cela entraîne de l'engagement qui
peut multiplier par 5 les revenus
x6
Ce...
La différence entre UX et ergonomie
Théorie de la Gestlat
Structurer l’information de façon à rendre sa lecture logique
- La loi de la bonne forme
Une forme s...
Loi de Fitts
Minimiser la difficulté d’une tâche grâce à des principes de design
Plus la cible est proche et grosse, moins...
Affordance
Définir l’importance de l’information
Une interface se lit comme un livre,
elle a donc des principes de lecture...
Processus de conception d’une interface
Recherche utilisateur
Définir les contours de son expérience grâce aux informations des utilisateurs
Se documenter sur les...
Experience map
Mettre en forme l’expérience dans sa globalité
Créer un parcours dans lequel votre
expérience vient s’ajout...
Architecture de l’information
Récolter et prioriser les informations en s’appuyant du storytelling
Structurer les contenus...
User flow
Établir les parcours utilisateurs
Créer des parcours qui viennent s’ancrer dans
les usages réels des utilisateur...
Design fonctionnel
Définir les fonctionnalités et les contenus attribués
Mettre sous forme de parcours les différents
proc...
Design d’idéation
Imaginer et itérer rapidement des prototypes d’interface
6to 1
Wireframe
Mettre en forme ses écrans en suivant la logique des parcours utilisateurs
C’est le squelette du site qui sert à...
Test utilisateur
Valider ses parcours et ses principes de design
Définir des parcours à tester pour
l’utilisateur avec des...
Traiter les retours des tests utilisateurs
Gérer la restitution des retours et pouvoir s’en servir pour améliorer l’expéri...
Design d’interaction
L’adaptation entre l’humain et le virtuel
Ajuster l’interface aux notions d’ergonomie cognitive
Le design d’interaction s’...
●Théorie de Gesltat
●Incitation : conduit l’utilisateur à effectuer des actions spécifiques
●Distinction : groupe des fonc...
Donner de l’importance à l’interface
Créer de la proximité avec l’utilisateur grâce aux design d’interaction
● Donner des ...
Différents états d’une interface
Etat initial
La première impression qu’aura l’utilisateur d’une interface
Etat vide
Guider et/ou informer l’utilisateur de la future présence d’éléments
Etat actif
Action en cours d’exécution
Etat correct
Permettre de rassurer et d’inciter l’utilisateur dans ses actions
Etat incorrect
Donner un message d’erreur efficace et qui va accompagner l’utilisateur
Tâche répétitive
Séquencer les étapes pour faire comprendre à l’utilisateur son action
Tâche en cours
Étape transitoire qui permet de faire patienter l’utilisateur
Tâche accomplie
Montrer la complétion d’une action
Design emotionnel
Storytelling
Capter l’attention de l’utilisateur pour faciliter la lecture du contenu
Nous aimons tous les histoires,
surt...
Gamification
On apprend mieux en s’amusant
Faire assimiler à l’utilisateur des notions
parfois complexes ou émouvantes à t...
Contexte d’utilisation
Les contraintes d’utilisation liées au contexte
Penser à concevoir des expériences qui prennent en compte le contexte d’us...
Inclusive design
Design en mobilité
Circular Design
Merci :)
@Newflux_fr @Le_laptop
BONNE JOURNÉE !
Good Morning UX #1 : Initiation à la conception UX
Good Morning UX #1 : Initiation à la conception UX
Good Morning UX #1 : Initiation à la conception UX
Good Morning UX #1 : Initiation à la conception UX
Good Morning UX #1 : Initiation à la conception UX
Upcoming SlideShare
Loading in …5
×

Good Morning UX #1 : Initiation à la conception UX

5,629 views

Published on

Découvrez les méthodes utilisées pour concevoir une interface qui procure une bonne expérience utilisateur. Vous verrez l'ensemble des étapes d'un projet UX avec un aperçu des notions fondamentales du design.

Published in: Design
  • Bonne présentation! Au sujet de notre dernière conversation, quand j'ai entendu dire qu'il a transformé 10€ en 10000€ en 2 mois, je ne pouvais pas croire que cela était possible. Je pensais que ce pourrait être un bug, mais Le mot dans la rue est que c'est réel. Si c'est le cas, nous pourrions être en régal! Je resterai sur le dossier Et je vous en informerai dès que je parlerai avec les développeurs, de toute façon, j'irai pour ça car ils ont une garantie de remboursement de 60 jours, alors, si ce n'est pas calme, comme Jordan m'a dit que je demanderais un remboursement. Dans l'intervalle, consultez la vidéo dont je vous ai parlé la semaine dernière: http://bit.ly/secretvideopage
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Good Morning UX #1 : Initiation à la conception UX

  1. 1. Good Morning UX #1 @Newflux_fr @Le_laptop
  2. 2. Initiation aux bases de la conception UX GOOD MORNING UX #1
  3. 3. Quels avantages en concevant UX ?
  4. 4. Le ROI de l’UX
  5. 5. +35% L’augmentation des revenus de ESPN après avoir pris en compte les retours des utilisateurs dans leur refonte 29% Des utilisateurs sur mobile vont directement changer de site ou d’application s’ils ne trouvent pas rapidement ce qu’ils cherchent 90% Des utilisateurs sur mobile vont rester sur un site s’ils arrivent facilement et rapidement à trouver l’information qu’ils sont venus chercher
  6. 6. x5 Un petit effort sur la satisfaction client et cela entraîne de l'engagement qui peut multiplier par 5 les revenus x6 Cela coûte 6 fois plus cher de récupérer un nouveau client plutôt que d’en garder un déjà fidélisé 89% Des utilisateurs insatisfaits vont voir la concurrence directement
  7. 7. La différence entre UX et ergonomie
  8. 8. Théorie de la Gestlat Structurer l’information de façon à rendre sa lecture logique - La loi de la bonne forme Une forme simple, symétrique et reconnaissable - La loi de continuité Prolongement d’une continuité de formes - La loi de la proximité Assimiler les formes rapprochées - La loi de similitude Assimiler les formes similaires - La loi de destin commun Perception d’une forme de parties en mouvement - La loi de familiarité Perception plus significatives des formes famillières
  9. 9. Loi de Fitts Minimiser la difficulté d’une tâche grâce à des principes de design Plus la cible est proche et grosse, moins l’utilisateur met de temps à l’atteindre Plus la cible est éloignée et petite, plus l’utilisateur met de temps à l’atteindre.
  10. 10. Affordance Définir l’importance de l’information Une interface se lit comme un livre, elle a donc des principes de lecture dont l’affordance en est l’une règle.
  11. 11. Processus de conception d’une interface
  12. 12. Recherche utilisateur Définir les contours de son expérience grâce aux informations des utilisateurs Se documenter sur les différents besoins et usages des potentiels utilisateurs en récoltant un maximum d’information grâce à des recherches ciblées et des questionnaires personnalisés
  13. 13. Experience map Mettre en forme l’expérience dans sa globalité Créer un parcours dans lequel votre expérience vient s’ajouter au déroulement habituel d’un utilisateur en prenant en compte son contexte
  14. 14. Architecture de l’information Récolter et prioriser les informations en s’appuyant du storytelling Structurer les contenus en fonction des recherches utilisateurs et des habitudes de navigation. S’aider du tri des cartes pour hiérarchiser le contenu par importance en s’appuyant d’un user story
  15. 15. User flow Établir les parcours utilisateurs Créer des parcours qui viennent s’ancrer dans les usages réels des utilisateurs, en prenant en compte le lien entrant et l’objectif que s’est défini l’utilisateur
  16. 16. Design fonctionnel Définir les fonctionnalités et les contenus attribués Mettre sous forme de parcours les différents processus fonctionnels qui demandent des interactions avec l’utilisateur pour s’assurer de bien maîtriser tous les points de contact
  17. 17. Design d’idéation Imaginer et itérer rapidement des prototypes d’interface 6to 1
  18. 18. Wireframe Mettre en forme ses écrans en suivant la logique des parcours utilisateurs C’est le squelette du site qui sert à vérifier si les articulations fonctionnent correctement.
  19. 19. Test utilisateur Valider ses parcours et ses principes de design Définir des parcours à tester pour l’utilisateur avec des objectifs bien précis sans pour autant le guider dans ses choix. Ne pas oublier de demander pourquoi !
  20. 20. Traiter les retours des tests utilisateurs Gérer la restitution des retours et pouvoir s’en servir pour améliorer l’expérience
  21. 21. Design d’interaction
  22. 22. L’adaptation entre l’humain et le virtuel Ajuster l’interface aux notions d’ergonomie cognitive Le design d’interaction s’appuie essentiellement sur la relation homme-machine, ainsi il faut prendre en compte la manipulation faite par l’homme.
  23. 23. ●Théorie de Gesltat ●Incitation : conduit l’utilisateur à effectuer des actions spécifiques ●Distinction : groupe des fonctions de même type facilitant l’accès, la mémorisation et l’apprentissage ●Retour utilisateur : réunit les différents comportements de l’interface visant à montrer le fonctionnement du système ●Lisibilité : éclaircir et limiter le nombre d’éléments différents présents sur l’interface ●Flexibilité : concerne la capacité de l’interface à s’adapter à différents contextes d’utilisation ●Concision : afficher le contenu de façon à faciliter l’exploitation des données ●Principes de Mayer Le facilitateur d’interaction Le design d’interaction joue de multiples codes cognitifs
  24. 24. Donner de l’importance à l’interface Créer de la proximité avec l’utilisateur grâce aux design d’interaction ● Donner des feedbacks ● Guider le parcours ● Apporter de l’émotion ● Afficher l’état d’avancement
  25. 25. Différents états d’une interface
  26. 26. Etat initial La première impression qu’aura l’utilisateur d’une interface
  27. 27. Etat vide Guider et/ou informer l’utilisateur de la future présence d’éléments
  28. 28. Etat actif Action en cours d’exécution
  29. 29. Etat correct Permettre de rassurer et d’inciter l’utilisateur dans ses actions
  30. 30. Etat incorrect Donner un message d’erreur efficace et qui va accompagner l’utilisateur
  31. 31. Tâche répétitive Séquencer les étapes pour faire comprendre à l’utilisateur son action
  32. 32. Tâche en cours Étape transitoire qui permet de faire patienter l’utilisateur
  33. 33. Tâche accomplie Montrer la complétion d’une action
  34. 34. Design emotionnel
  35. 35. Storytelling Capter l’attention de l’utilisateur pour faciliter la lecture du contenu Nous aimons tous les histoires, surtout quand elles sont bien racontées. ● Une histoire apporte de l’ordre et du sens à un récit en clarifiant les points complexes ● Une histoire améliore la mémorisation d’un produit / service ● Une histoire dévoile implicitement des émotions et des sensations aux clients ● Une histoire persuade là où les faits échouent ● Une histoire va humaniser et personnaliser une enseigne en la rendant unique
  36. 36. Gamification On apprend mieux en s’amusant Faire assimiler à l’utilisateur des notions parfois complexes ou émouvantes à travers des moyens ludiques
  37. 37. Contexte d’utilisation
  38. 38. Les contraintes d’utilisation liées au contexte Penser à concevoir des expériences qui prennent en compte le contexte d’usage ● Les contraintes sociales Le stress du travail, la proximité dans le métro ou les bousculades dans la rue sont gênants pour l’utilisateur ● Les contraintes météorologiques L’écran tactile mouillé par la pluie, les reflets du soleil ou le vent qui empêche d’utiliser le micro, des contraintes liées à l'environnement de l’utilisateur ● Les contraintes d’accessibilité Une main dans le plâtre, une bras occupé par un bébé ou une personne qui conduit n’ont pas tout leur physique pour correctement naviguer dans l’interface
  39. 39. Inclusive design
  40. 40. Design en mobilité
  41. 41. Circular Design
  42. 42. Merci :) @Newflux_fr @Le_laptop BONNE JOURNÉE !

×