Ergonomie : performance et
satisfaction de nos clients
Annabelle Buffart & Laurence Vagner
Annabelle
Front-end Consultant
Agile Partner
Laurence
UX designer
iKe Consulting
Ergonomie ≠ Design
Ergonomie + Design = ❤
Ergonomie web
(...) a pour objectif de
rendre les sites Web plus
aisés d'utilisation pour
l'utilisateur final, sans
qu'il ...
UX & UI
UX
User eXperience
analyse,
personas,
emotional design,
use cases, stories,
workflows,
archi de l’information,
wireframes,...
UI
User Interface
maquettes graphiques,
interactions,
versions mobiles,
guides de styles,
accessibilité
Dans la pratique
1. Objectifs
● Business
● Marketing
● Développeurs
● Utilisateurs
2. Use Case &
User Stories
Comme en Agile! User Stories
https://fr.wikipedia.org/wiki/Diagramme_des_cas_d%27utilisation
Us...
2. Personas
Qui?
4. Architecture
De quoi ai-je besoin?
http://www.renow.public.lu/fr/techniques-ux/tri-cartes-inverse/index.html
5. Workflow
6. Rédaction
“ Less is more ”
7. Supports
Desktop
Multi-supports
8. Emotional
Design
Normaliser ces
informations en
impliquant des
utilisateurs
Critères & bonnes pratiques
8 critères
ergonomiques de
Bastien & Scapin
http://www.ergoweb.ca/criteres.html
1. Guidage
2. Charge de travail
3. Contrôl...
Exemple :
gestion des erreurs
Moyens permettant d'une part
d'éviter ou de réduire les erreurs,
d'autre part de les corrige...
10 heuristiques de
Jakob Nielsen
http://www.nngroup.com/articles/ten-
usability-heuristics/
Visibility of system status
Ma...
Opquast
http://checklists.opquast.com/fr/
Opquast
http://checklists.opquast.com/fr/
Ressources
● Ergonomie Web - Amélie Boucher
● Memento “Sites web - Les bonnes
pratiques” - Elie Sloïm
● Mobile First - Luke Wroblewsk...
Exemple
Pyramid
Remarques
Architecture : 3 menus
Affordance : Où cliquer ?
Contenu caché
Colonne “description”
Manque d’infos : TBS code?
...
Vous êtes aussi des
UTILISATEURS.
Vous êtes aussi des
TESTEURS.
Comment faire des tests ?
Heuristiques
à faire soi-meme
Utiliser les ressources
précedentes
Checklists
Vischeck (daltoniens)
vischeck
http://www.vischeck.com/
vischeck/vischeckImage.php
Guerilla testing
avec des utilisateurs
potentiels
(collègues, amis,
inconnus)
5 à 10 min
autour d’un café
définir un objec...
Tests AB
En production
Testez de grands éléments
Fiabilité
5000 visiteurs minimum
100 conversions / variation
Attention
Né...
« 5 utilisateurs suffisent pour trouver
85 % des problèmes » - Jakob Nielsen
Étude récente: 9 utilisateurs est idéal
Conclusion
impliquer l’utilisateur
tout au long du projet
● Taux de conversion
● Actions
● Performance
● Sondage
● Diminut...
Ergonomie : performance et satisfaction de nos clients
Ergonomie : performance et satisfaction de nos clients
Ergonomie : performance et satisfaction de nos clients
Ergonomie : performance et satisfaction de nos clients
Ergonomie : performance et satisfaction de nos clients
Ergonomie : performance et satisfaction de nos clients
Ergonomie : performance et satisfaction de nos clients
Prochain SlideShare
Chargement dans…5
×

Ergonomie : performance et satisfaction de nos clients

877 vues

Publié le

par Annabelle Buffart & Laurence Vagner

Publié dans : Design
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
877
Sur SlideShare
0
Issues des intégrations
0
Intégrations
84
Actions
Partages
0
Téléchargements
15
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Ergonomie : performance et satisfaction de nos clients

  1. 1. Ergonomie : performance et satisfaction de nos clients Annabelle Buffart & Laurence Vagner
  2. 2. Annabelle Front-end Consultant Agile Partner Laurence UX designer iKe Consulting
  3. 3. Ergonomie ≠ Design
  4. 4. Ergonomie + Design = ❤
  5. 5. 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
  6. 6. UX & UI
  7. 7. UX User eXperience analyse, personas, emotional design, use cases, stories, workflows, archi de l’information, wireframes, supports/devices
  8. 8. UI User Interface maquettes graphiques, interactions, versions mobiles, guides de styles, accessibilité
  9. 9. Dans la pratique
  10. 10. 1. Objectifs ● Business ● Marketing ● Développeurs ● Utilisateurs
  11. 11. 2. Use Case & User Stories Comme en Agile! User Stories https://fr.wikipedia.org/wiki/Diagramme_des_cas_d%27utilisation Use Case
  12. 12. 2. Personas Qui?
  13. 13. 4. Architecture De quoi ai-je besoin? http://www.renow.public.lu/fr/techniques-ux/tri-cartes-inverse/index.html
  14. 14. 5. Workflow
  15. 15. 6. Rédaction “ Less is more ”
  16. 16. 7. Supports Desktop
  17. 17. Multi-supports
  18. 18. 8. Emotional Design
  19. 19. Normaliser ces informations en impliquant des utilisateurs
  20. 20. Critères & bonnes pratiques
  21. 21. 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é
  22. 22. 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.
  23. 23. 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
  24. 24. Opquast http://checklists.opquast.com/fr/
  25. 25. Opquast http://checklists.opquast.com/fr/
  26. 26. Ressources
  27. 27. ● 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/
  28. 28. Exemple Pyramid
  29. 29. Remarques Architecture : 3 menus Affordance : Où cliquer ? Contenu caché Colonne “description” Manque d’infos : TBS code? Légendes des icônes Hiérarchie
  30. 30. Vous êtes aussi des UTILISATEURS.
  31. 31. Vous êtes aussi des TESTEURS.
  32. 32. Comment faire des tests ?
  33. 33. Heuristiques à faire soi-meme Utiliser les ressources précedentes Checklists Vischeck (daltoniens)
  34. 34. vischeck http://www.vischeck.com/ vischeck/vischeckImage.php
  35. 35. 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
  36. 36. 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
  37. 37. « 5 utilisateurs suffisent pour trouver 85 % des problèmes » - Jakob Nielsen Étude récente: 9 utilisateurs est idéal
  38. 38. 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!

×