Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ergonomie d'un site

1,121 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

×