LERGONOMIE,               POUR UN SITE EFFICACE ET INTUITIFPAR VERONIQUE BRABANT, consultante e-commerce indépendante
LES OBJECTIFS Comprendre ce qu’est l’ergonomie Identifier les facteurs de qualité ergonomique Connaître les techniques ...
QU’EST-CE QUE L’ERGONOMIE ?
L’ERGONOMIE ? réponse aux besoins/demandes : UTILITE                      + confort, efficacité, facilité : UTILISABILITE
POURQUOI LERGONOMIE ?Eviter de faire fuir linternauteRéalisation efficiente de l’objectifCréer une préférence
Usage  fréquent                                                Sites communautaires                                       ...
LERGONOMIE ? Le site web = outil au service de ses utilisateurs… et des objectifs commerciaux Loutil doit être adapté à lh...
LERGONOMIE ?ergonomie physique : outil physiologiquement adaptéergonomie cognitive : outil adapté au fonctionnement cogn...
ZOOM sur la PSYCHOLOGIE COGNITIVE
PSYCHOLOGIE COGNITIVE
PSYCHOLOGIE COGNITIVE
PSYCHOLOGIE COGNITIVE Nombre magique : liste 7 items +/- 2 éléments (mémoire à court terme ou mémoire de travail, Georges...
QUELQUES REGLES dERGONOMIE
ARCHITECTURE DE LINFORMATION
http://www. tate.org.uk/britain/
http://www.centrepompidou.fr/
http://www.adidas.com/home/fr
http://www.lecoqsportif.com/
STRUCTURE DE LA PAGE
http://www.lesbebesdesabine.fr/accessoires-toilette-bebe,F62,1.html?triprix=asc
http://www.allobebe.fr/accessoires-toilette-bebe,F62,1.html
http://www.photoliens.com
http://www.photophiles.com/
NAVIGATION
http://store.nike.com/fr/fr_fr/product/air-force-1-premium-id-shoe/?piid=23945&?pbid=3996099
http://www.sarenza.com
ADAPTATION À LÉQUIPEMENT
http://www.lefigaro.fr
RESPECT DES CONVENTIONS
http://www.impots.gouv.fr
http://www.impots.gouv.fr
https://www.cfe.urssaf.fr/autoentrepreneur/CFE_Declaration
LISIBILITÉ
http://www.archiduchesse.com/fr/chaussettes-de-ville/217-blanc-mouton.html
http://www.allostreaming.com/
COHÉRENCE
http://www.secuartsgraphiquesetplastiques.org/
AFFORDANCE
http://www.accellois.athle.com
http://lesailes.hermes.com/fr/fr/
http://www.20minutes.fr
GESTION DES ERREURS
https://www.laredoute.fr/Account/IdentifyAcct.aspx
http://www.sarenza.com/rondinaud-menton-s937-p0000044617
EFFICIENCE
https://www.sarenza.fr/chaussure-enfant
http://www.lebonmarche.com/
https://www.nurun.fr
CONCEPTION CENTRÉE UTILISATEUR
TECHNIQUE DES PERSONAS Représenter un groupe dutilisateurs-type par une  personne fictive Etude, recueil des données & c...
TECHNIQUE DU TRI DE CARTES Chaque utilisateur....  regroupe les cartes                                        Produit    ...
ZONING
MAQUETTES FONCTIONNELLES
UNE FOIS EN PROD....OPTIMISATION DE LERGONOMIE
ANALYSE HEURISTIQUE    Exemple de MonNuage (07/2007)                                                                    2 ...
TRACKING DE NAVIGATION Vision synthétique ou détaillée : Clics par page , parcours de navigation,  abandons et rebonds O...
TESTS UTILISATEURS Entretiens individuels filmés Scenarii / mission Points de contrôle Observer les comportements en s...
EYE TRACKING Avec ou sans appareillage Observation et mesures objectives
A/B TESTING Versions A et B en parallèle Présentation aléatoire Tracking statistique A/B/C/D/…. Testing ou multivariab...
SERVICE CLIENT Expression spontanée, trop souvent négligée voire  méprisée Des utilisateurs réels, des cas concrets Sou...
CONCLUSIONS L’ergonomie, web ou non, est présente au quotidien Tout le monde a son idée sur l’ergonomie Faire simple n’...
AU DELÀ DE LERGONOMIE,LEXPÉRIENCE UTILISATEUR (UX)...
Ergonomie, pour un site efficace et intuitif
Ergonomie, pour un site efficace et intuitif
Ergonomie, pour un site efficace et intuitif
Prochain SlideShare
Chargement dans…5
×

Ergonomie, pour un site efficace et intuitif

8 098 vues

Publié le

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

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

Aucun téléchargement
Vues
Nombre de vues
8 098
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2 910
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
10
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Ergonomie, pour un site efficace et intuitif

  1. 1. LERGONOMIE, POUR UN SITE EFFICACE ET INTUITIFPAR VERONIQUE BRABANT, consultante e-commerce indépendante
  2. 2. 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
  3. 3. QU’EST-CE QUE L’ERGONOMIE ?
  4. 4. L’ERGONOMIE ? réponse aux besoins/demandes : UTILITE + confort, efficacité, facilité : UTILISABILITE
  5. 5. POURQUOI LERGONOMIE ?Eviter de faire fuir linternauteRéalisation efficiente de l’objectifCréer une préférence
  6. 6. Usage fréquent Sites communautaires (réseaux sociaux, forums) Services / outils (impôts, rato, maps....) Sites de recherche (moteurs, comparateurs) Sites dinformation (journaux) Sites de divertissement Sites de marque & (streaming) Portails événementiels Sites perso Intranet (blogs, galeries) E-commerce Sites corporate Usage Sites expérimentauxpeu fréquent Ludique / esthétique Pratique
  7. 7. LERGONOMIE ? Le site web = outil au service de ses utilisateurs… et des objectifs commerciaux Loutil doit être adapté à lhomme et non lhomme s’adapter à loutil
  8. 8. LERGONOMIE ?ergonomie physique : outil physiologiquement adaptéergonomie cognitive : outil adapté au fonctionnement cognitif des utilisateur
  9. 9. ZOOM sur la PSYCHOLOGIE COGNITIVE
  10. 10. PSYCHOLOGIE COGNITIVE
  11. 11. PSYCHOLOGIE COGNITIVE
  12. 12. 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)
  13. 13. QUELQUES REGLES dERGONOMIE
  14. 14. ARCHITECTURE DE LINFORMATION
  15. 15. http://www. tate.org.uk/britain/
  16. 16. http://www.centrepompidou.fr/
  17. 17. http://www.adidas.com/home/fr
  18. 18. http://www.lecoqsportif.com/
  19. 19. STRUCTURE DE LA PAGE
  20. 20. http://www.lesbebesdesabine.fr/accessoires-toilette-bebe,F62,1.html?triprix=asc
  21. 21. http://www.allobebe.fr/accessoires-toilette-bebe,F62,1.html
  22. 22. http://www.photoliens.com
  23. 23. http://www.photophiles.com/
  24. 24. NAVIGATION
  25. 25. http://store.nike.com/fr/fr_fr/product/air-force-1-premium-id-shoe/?piid=23945&?pbid=3996099
  26. 26. http://www.sarenza.com
  27. 27. ADAPTATION À LÉQUIPEMENT
  28. 28. http://www.lefigaro.fr
  29. 29. RESPECT DES CONVENTIONS
  30. 30. http://www.impots.gouv.fr
  31. 31. http://www.impots.gouv.fr
  32. 32. https://www.cfe.urssaf.fr/autoentrepreneur/CFE_Declaration
  33. 33. LISIBILITÉ
  34. 34. http://www.archiduchesse.com/fr/chaussettes-de-ville/217-blanc-mouton.html
  35. 35. http://www.allostreaming.com/
  36. 36. COHÉRENCE
  37. 37. http://www.secuartsgraphiquesetplastiques.org/
  38. 38. AFFORDANCE
  39. 39. http://www.accellois.athle.com
  40. 40. http://lesailes.hermes.com/fr/fr/
  41. 41. http://www.20minutes.fr
  42. 42. GESTION DES ERREURS
  43. 43. https://www.laredoute.fr/Account/IdentifyAcct.aspx
  44. 44. http://www.sarenza.com/rondinaud-menton-s937-p0000044617
  45. 45. EFFICIENCE
  46. 46. https://www.sarenza.fr/chaussure-enfant
  47. 47. http://www.lebonmarche.com/
  48. 48. https://www.nurun.fr
  49. 49. CONCEPTION CENTRÉE UTILISATEUR
  50. 50. TECHNIQUE DES PERSONAS Représenter un groupe dutilisateurs-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 dusage : Configuration Scenario 1 Lieu dutilisation Scenario 2 Aisance ….. Sites préférés Personnalisation: Affinité avec le site Prénom Relation à la marque, au produit Age Fréquence dutilisation du site Fréquentation des concurrents Attentes
  51. 51. TECHNIQUE DU TRI DE CARTES Chaque utilisateur....  regroupe les cartes Produit Produit Produit  nomme les groupes Produit Produit Produit Produit Produit Produit Produit
  52. 52. ZONING
  53. 53. MAQUETTES FONCTIONNELLES
  54. 54. UNE FOIS EN PROD....OPTIMISATION DE LERGONOMIE
  55. 55. ANALYSE HEURISTIQUE Exemple de MonNuage (07/2007) 2 3 315 5 11 4 4 Points forts Points faibles 1. Graphisme : symboles Aller et retour intuitifs 1. Le prix minimum nest pas indiqué 2. Mise en valeur du meilleur prix nest pas indiqué 3. Zone dexplication, utile pour les newbies 4. Zone de push hôtel 5. Filtres intuitifs
  56. 56. 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....
  57. 57. 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
  58. 58. EYE TRACKING Avec ou sans appareillage Observation et mesures objectives
  59. 59. A/B TESTING Versions A et B en parallèle Présentation aléatoire Tracking statistique A/B/C/D/…. Testing ou multivariable testing
  60. 60. 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
  61. 61. 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
  62. 62. AU DELÀ DE LERGONOMIE,LEXPÉRIENCE UTILISATEUR (UX)...

×