1. Ergonomie : performance et
satisfaction de nos clients
Annabelle Buffart & Laurence Vagner

2. Annabelle
Front-end Consultant
Agile Partner
Laurence
UX designer
iKe Consulting

3. Ergonomie ≠ Design

6. Ergonomie + Design = ❤

8. Ergonomie web
(...) a pour objectif de
rendre les sites Web plus
aisés d'utilisation pour
l'utilisateur final, sans
qu'il ait besoin de suivre
un apprentissage dédié
Design graphique
(..) a pour objectif de
créer des objets de
communication visuelle
(logotype, affiche, site
web, etc.)
Sources : fr.wikipedia.org

9. UX & UI

10. UX
User eXperience
analyse,
personas,
emotional design,
use cases, stories,
workflows,
archi de l’information,
wireframes,
supports/devices

11. UI
User Interface
maquettes graphiques,
interactions,
versions mobiles,
guides de styles,
accessibilité

13. Dans la pratique

14. 1. Objectifs
● Business
● Marketing
● Développeurs
● Utilisateurs

15. 2. Use Case &
User Stories
Comme en Agile! User Stories
https://fr.wikipedia.org/wiki/Diagramme_des_cas_d%27utilisation
Use Case

16. 2. Personas
Qui?

17. 4. Architecture
De quoi ai-je besoin?
http://www.renow.public.lu/fr/techniques-ux/tri-cartes-inverse/index.html

18. 5. Workflow

19. 6. Rédaction
“ Less is more ”

20. 7. Supports
Desktop

21. Multi-supports

22. 8. Emotional
Design

23. Normaliser ces
informations en
impliquant des
utilisateurs

24. Critères & bonnes pratiques

25. 8 critères
ergonomiques de
Bastien & Scapin
http://www.ergoweb.ca/criteres.html
1. Guidage
2. Charge de travail
3. Contrôle explicite
4. Adaptabilité
5. Gestion des Erreurs
6. Homogénéité/Cohérence
7. Signification des Codes et
Dénominations
8. Compatibilité

26. Exemple :
gestion des erreurs
Moyens permettant d'une part
d'éviter ou de réduire les erreurs,
d'autre part de les corriger
lorsqu'elles surviennent.
Protection Contre les Erreurs
Mettre en place des moyens pour
détecter et prévenir les erreurs.
Qualité des Messages d'Erreurs
S'assurer que l'information donnée
aux utilisateurs sur la nature des
erreurs commises et sur les actions
à entreprendre pour les corriger,
soit pertinente, facile à lire et
exacte.
Correction des Erreurs
Mettre à la disposition des
utilisateurs des moyens pour
corriger leurs erreurs.

27. 10 heuristiques de
Jakob Nielsen
http://www.nngroup.com/articles/ten-
usability-heuristics/
Visibility of system status
Match between system and the real
world
User control and freedom
Consistency and standards
Error prevention
Recognition rather than recall
Flexibility and efficiency of use
Aesthetic and minimalist design
Help and documentation

28. Opquast
http://checklists.opquast.com/fr/

29. Opquast
http://checklists.opquast.com/fr/

30. Ressources

31. ● Ergonomie Web - Amélie Boucher
● Memento “Sites web - Les bonnes
pratiques” - Elie Sloïm
● Mobile First - Luke Wroblewski
● Responsive Web Design - Ethan
Marcotte
● Emotional Design - Aarron
Walter
● Designing the moment - Robert
Hoekman
● Don’t make me think - Steve
Krug
Livres et sites
● http://opquast.com/fr/
● http://www.renow.public.
lu/fr/index.html
● https://goodui.org/
● http://www.alsacreations.com/
● http://uxchecklist.github.io/

32. Exemple
Pyramid

34. Remarques
Architecture : 3 menus
Affordance : Où cliquer ?
Contenu caché
Colonne “description”
Manque d’infos : TBS code?
Légendes des icônes
Hiérarchie

35. Vous êtes aussi des
UTILISATEURS.

36. Vous êtes aussi des
TESTEURS.

37. Comment faire des tests ?

38. Heuristiques
à faire soi-meme
Utiliser les ressources
précedentes
Checklists
Vischeck (daltoniens)

39. vischeck
http://www.vischeck.com/
vischeck/vischeckImage.php

41. Guerilla testing
avec des utilisateurs
potentiels
(collègues, amis,
inconnus)
5 à 10 min
autour d’un café
définir un objectif
observer : neutre &
bienveillant
prendre des notes /
enregistrer l’écran
améliorer

42. Tests AB
En production
Testez de grands éléments
Fiabilité
5000 visiteurs minimum
100 conversions / variation
Attention
Nécessite jusqu’à 2 fois
plus de développement

43. « 5 utilisateurs suffisent pour trouver
85 % des problèmes » - Jakob Nielsen
Étude récente: 9 utilisateurs est idéal

44. Conclusion
impliquer l’utilisateur
tout au long du projet
● Taux de conversion
● Actions
● Performance
● Sondage
● Diminution des
frustrations
● Travail en amont
● Impliquer l’utilisateur
● Impliquer les services!