Workshop de l'asso Girlz in Web sur le thème de l'ergonomie : qu'est-ce que l'ergonomie, best practices, worst practices, quelques règles, techniques et outils pour concevoir et optimiser l'ergonomie d'un site web

2. L'ERGONOMIE, POUR UN SITE EFFICACE ET INTUITIF
PAR VERONIQUE BRABANT, consultante e-commerce indépendante

3. LES OBJECTIFS
 Comprendre ce qu’est l’ergonomie
 Identifier les facteurs de qualité ergonomique
 Connaître les techniques de conception/audit
 Acquérir une sensibilité ergonomique

4. QU’EST-CE QUE L’ERGONOMIE ?

6. L’ERGONOMIE ?
réponse aux besoins/demandes : UTILITE
+
confort, efficacité, facilité : UTILISABILITE

7. POURQUOI L'ERGONOMIE ?
Eviter de faire fuir l'internaute
Réalisation efficiente de l’objectif
Créer une préférence

8. Usage
fréquent Sites communautaires
(réseaux sociaux, forums)
Services / outils
(impôts, rato, maps....)
Sites de recherche
(moteurs, comparateurs)
Sites d'information
(journaux)
Sites de divertissement
Sites de marque & (streaming)
Portails
événementiels
Sites perso Intranet
(blogs, galeries)
E-commerce
Sites corporate
Usage Sites expérimentaux
peu fréquent
Ludique / esthétique Pratique

9. L'ERGONOMIE ?
Le site web = outil au service de ses utilisateurs…
et des objectifs commerciaux
L'outil doit être adapté à l'homme et non l'homme
s’adapter à l'outil

10. L'ERGONOMIE ?
ergonomie physique : outil physiologiquement
adapté
ergonomie cognitive : outil adapté au
fonctionnement cognitif des utilisateur

11. ZOOM sur la PSYCHOLOGIE COGNITIVE

12. PSYCHOLOGIE COGNITIVE

13. PSYCHOLOGIE COGNITIVE

14. PSYCHOLOGIE COGNITIVE
 Nombre magique : liste 7 items +/- 2 éléments
(mémoire à court terme ou mémoire de travail, Georges Miller 1958)
 Stratégie de regroupement
 similarité ↔ même concept (loi de similarité)
 proximité ↔ même concept (loi de proximité)
 proximité et taille de la cible (loi de Fitts)

15. QUELQUES REGLES d'ERGONOMIE

16. ARCHITECTURE DE L'INFORMATION

17. http://www. tate.org.uk/britain/

18. http://www.centrepompidou.fr/

19. http://www.adidas.com/home/fr

20. http://www.lecoqsportif.com/

21. STRUCTURE DE LA PAGE

22. http://www.lesbebesdesabine.fr/accessoires-toilette-bebe,F62,1.html?triprix=asc

23. http://www.allobebe.fr/accessoires-toilette-bebe,F62,1.html

24. http://www.photoliens.com

25. http://www.photophiles.com/

26. NAVIGATION

27. http://store.nike.com/fr/fr_fr/product/air-force-1-premium-id-shoe/?piid=23945&?pbid=3996099

28. http://www.sarenza.com

29. ADAPTATION À L'ÉQUIPEMENT

30. http://www.lefigaro.fr

31. RESPECT DES CONVENTIONS

32. http://www.impots.gouv.fr

33. http://www.impots.gouv.fr

34. https://www.cfe.urssaf.fr/autoentrepreneur/CFE_Declaration

35. LISIBILITÉ

36. http://www.archiduchesse.com/fr/chaussettes-de-ville/217-blanc-mouton.html

37. http://www.allostreaming.com/

38. COHÉRENCE

39. http://www.secuartsgraphiquesetplastiques.org/

40. AFFORDANCE

41. http://www.accellois.athle.com

42. http://lesailes.hermes.com/fr/fr/

43. http://www.20minutes.fr

44. GESTION DES ERREURS

45. https://www.laredoute.fr/Account/IdentifyAcct.aspx

47. http://www.sarenza.com/rondinaud-menton-s937-p0000044617

48. EFFICIENCE

49. https://www.sarenza.fr/chaussure-enfant

50. http://www.lebonmarche.com/

51. https://www.nurun.fr

52. CONCEPTION CENTRÉE UTILISATEUR

53. TECHNIQUE DES PERSONAS
 Représenter un groupe d'utilisateurs-type par une
personne fictive
 Etude, recueil des données & comportements utilisateurs
 Création des personas
 Support de travail et de communication
Profil techno : Scenarii d'usage :
Configuration Scenario 1
Lieu d'utilisation Scenario 2
Aisance …..
Sites préférés
Personnalisation: Affinité avec le site
Prénom Relation à la marque, au produit
Age Fréquence d'utilisation du site
Fréquentation des concurrents
Attentes

54. TECHNIQUE DU TRI DE CARTES
Chaque utilisateur....
 regroupe les cartes Produit
Produit Produit
 nomme les groupes Produit
Produit
Produit Produit
Produit
Produit
Produit

55. ZONING

56. MAQUETTES FONCTIONNELLES

57. UNE FOIS EN PROD....
OPTIMISATION DE L'ERGONOMIE

58. ANALYSE HEURISTIQUE
Exemple de MonNuage (07/2007)
2
3 3
1
5 5
11
4 4
Points forts Points faibles
1. Graphisme : symboles Aller et retour intuitifs 1. Le prix minimum n'est pas indiqué
2. Mise en valeur du meilleur prix n'est pas indiqué
3. Zone d'explication, utile pour les newbies
4. Zone de push hôtel
5. Filtres intuitifs

59. TRACKING DE NAVIGATION
 Vision synthétique ou détaillée : Clics par page , parcours de navigation,
abandons et rebonds
 Outils gratuits ou payants : Google Analytics, Omniture....

60. TESTS UTILISATEURS
 Entretiens individuels filmés
 Scenarii / mission
 Points de contrôle
 Observer les comportements en situation réelle
 Restitution avec verbatim et synthèse

61. EYE TRACKING
 Avec ou sans appareillage
 Observation et mesures objectives

62. A/B TESTING
 Versions A et B en parallèle
 Présentation aléatoire
 Tracking statistique
 A/B/C/D/…. Testing ou multivariable testing

63. SERVICE CLIENT
 Expression spontanée, trop souvent négligée voire
méprisée
 Des utilisateurs réels, des cas concrets
 Source gratuite et toujours disponible ;-)
 Nécessite de bons process internes et une très bonne
implication de l’équipe relation client

64. CONCLUSIONS
 L’ergonomie, web ou non, est présente au quotidien
 Tout le monde a son idée sur l’ergonomie
 Faire simple n’est pas si simple
 « La critique est facile mais l’art est difficile »
 Concilier objectifs commerciaux et utilisateurs

65. AU DELÀ DE L'ERGONOMIE,
L'EXPÉRIENCE UTILISATEUR (UX)...