Ergonomie d'un site

1,060 views

Published on

Intervention réalisée lors de séances d'ateliers à Deauville, Tourisme Numérique, les 17 et 18 mars 2014. #TN2

Published in: Travel

Ergonomie d'un site

  1. 1. ATELIER  A4 ERGONOMIE  D’UN  SITE   INTERNET
  2. 2. ATELIER  A4 ! AVEC  LA  PARTICIPATION  DE  :   ! ! #  PIERRE  CROIZET,  GMT  ÉDITIONS   ! ! !  ANIMÉ  PAR  :   ! ! #  LUDOVIC  DUBLANCHET
  3. 3. ERGONOMIE D’UN SITE Animateur : Ludovic Dublanchet Intervenant : Pierre Croizet Durée : 1h15 ATELIER
  4. 4. PRINCIPES • Etre clair : halte à la surcharge ! • Cohérence : navigation constante • Respectez les conventions : intuitif = familier • Libellez vos boutons ! • Accès rapide exigé !! • Pas de mode d’emploi requis Merci à http://www.radisnoir.com
  5. 5. REPÈRES • Selon les études : un internaute lit 20 à 28% des mots d’une page web • Le processus de lecture sur papier et sur écran est identique, mais on lit plus lentement sur écran • La lisibilité dépend de la taille des caractères et des blancs Source : Lisibilité des sites web, Marie-Valentine Blond, Olivier Marcellin, Mélina Zerbib- Editions Eyrolles
  6. 6. REPÈRES Source : Google et Kantar Media Compete France 2013
  7. 7. EXPÉRIENCE UTILISATEUR • Le client vient sur votre site avec une requête précise formulée d’abord dans Google • C’est un humain
  8. 8. D’ABORD REPTILES
  9. 9. http://bit.ly/1dPtM4l http://www.copyblogger.comSource : Améliorer le taux de clic des boutons Accès article : Accès mobile :
  10. 10. LA GUERRE DES BOUTONS Etape 1 : permettre la décision, en connaissance de cause
  11. 11. LA GUERRE DES COULEURS Etape 2 : attirer les reptiles + 81% / Control + 95 % / Control
  12. 12. LA GUERRE DES COULEURS Etape 2 : attirer les reptiles + 81% / Control + 95 % / Control
  13. 13. CHOISIR EST DIFFICILE Etape 3 : proposer de la variété mais éviter la confusion
  14. 14. CHOISIR EST DIFFICILE Etape 3 : proposer de la variété mais éviter la confusion
  15. 15. FAIRE CLIQUER Etape 4 : donner envie de cliquer (neocortex) Les boutons sont plus facilement cliqués lorsqu’ils sont cliquables...
  16. 16. CONCLURE Etape 5 : emballer c’est pesé Rassurer définitivement avec des preuves
  17. 17. SOIGNEZ LA PERFORMANCE La bataille du temps de chargement des pages : ! Réduisez le poids des images ! Optimisez la moindre bannière ! Grapillez des millisecondes !
  18. 18. RÉPONDEZ AUX ATTENTES MAIS LIMITEZ L’ATTENTE • Etude Nah F. F.-H. (2004)* et Nielsen (1993) ! • 0,1 seconde : aucun feedback nécessaire, l’utilisateur ressent l’instantanéité ! • 1,0 seconde : l’utilisateur remarque l’attente, il reste concentré mais il perd le contrôle ! • 2,0 secondes : inacceptable. * Behaviour and Information Technology, a study on tolerable waiting time, 23, 153-163
  19. 19. POUR NE PAS CONCLURE Et les applications mobiles ? Une contrainte bénéfique : occuper tout l’écran mais pas plus. ! Débat : faut-il stopper le scroll ???
  20. 20. POUR NE PAS CONCLURE Suivre les guidelines Ex. : bit.ly/IV9atu Déférence : l’UI interagit avec les contenus mais ne les masque pas ! Priorité : mettez en avant les coeurs de fonctionnalités ! Evidence : laissez des espaces blancs
  21. 21. QU’EN PENSEZ-VOUS ? Merci de votre attention :)
  22. 22. ATELIER  A4 ! AVEC  LA  PARTICIPATION  DE  :   ! ! #  PIERRE  CROIZET,  GMT  ÉDITIONS   ! ! !  ANIMÉ  PAR  :   ! ! #  LUDOVIC  DUBLANCHET

×