1. Good Morning UX #1
@Newflux_fr @Le_laptop

2. Initiation aux bases de la
conception UX
GOOD MORNING UX #1

3. Quels avantages en concevant UX ?

6. Le ROI de l’UX

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

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

9. La différence entre UX et ergonomie

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

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

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

13. Processus de conception d’une interface

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

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

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

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

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

20. Design d’idéation
Imaginer et itérer rapidement des prototypes d’interface
6to 1

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

24. 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 !

25. Traiter les retours des tests utilisateurs
Gérer la restitution des retours et pouvoir s’en servir pour améliorer l’expérience

26. Design d’interaction

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

28. ●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

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

30. Différents états d’une interface

31. Etat initial
La première impression qu’aura l’utilisateur d’une interface

32. Etat vide
Guider et/ou informer l’utilisateur de la future présence d’éléments

33. Etat actif
Action en cours d’exécution

34. Etat correct
Permettre de rassurer et d’inciter l’utilisateur dans ses actions

35. Etat incorrect
Donner un message d’erreur efficace et qui va accompagner l’utilisateur

36. Tâche répétitive
Séquencer les étapes pour faire comprendre à l’utilisateur son action

37. Tâche en cours
Étape transitoire qui permet de faire patienter l’utilisateur

38. Tâche accomplie
Montrer la complétion d’une action

39. Design emotionnel

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

41. Gamification
On apprend mieux en s’amusant
Faire assimiler à l’utilisateur des notions
parfois complexes ou émouvantes à travers
des moyens ludiques

42. Contexte d’utilisation

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

44. Inclusive design

45. Design en mobilité

46. Circular Design

47. Merci :)
@Newflux_fr @Le_laptop
BONNE JOURNÉE !