Ergonomie des interfaces riches - Amélie Boucher - Paris Web 2008

2,714 views
2,663 views

Published on

Published in: Travel, Business
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,714
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
72
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Ergonomie des interfaces riches - Amélie Boucher - Paris Web 2008

  1. 1. Ergonomie des interfaces riches Amélie Boucher Jeudi 13 Novembre Web 2008 Amélie Boucher, Paris 2008 Ergonomie des interfaces riches | 1 / 43
  2. 2. Non, on ne parlera pas d’Ajax de Flex de Silverlight de tout ça Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 2 / 43
  3. 3. Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 3 / 43
  4. 4. Possibilités technologiques Qui imposent de forger des bonnes pratiques Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 4 / 43
  5. 5. Ces bonnes pratiques découlent des mêmes principes et méthodes d’ergonomie qu’auparavant Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 5 / 43
  6. 6. On va donc demander : des interfaces - qui soient compréhensibles - qui nous donnent satisfaction - qui soient faciles à prendre en main - qui nous rendent efficients Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 6 / 43
  7. 7. L’enjeu = que l’interface s’efface pour laisser s’exprimer tout le potentiel du service Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 7 / 43
  8. 8. web pas riche = je consomme de l’information Page web 1 Page web 2 Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 8 / 43
  9. 9. web avec des bouts de riche = je consomme de l’information + je participe, j’agis, l’interface se contextualise en fonction de ma demande Page web 1 Page web 2 Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 9 / 43
  10. 10. Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 10 / 43
  11. 11. Interfaces (entièrement) riches = je suis actif, je manipule des objets, je crée = de l’ordre du logiciel Interface Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 11 / 43
  12. 12. Bonus 1 : je peux tout faire, je suis acteur, mon outil est magique ! Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 12 / 43
  13. 13. Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 13 / 43
  14. 14. Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 14 / 43
  15. 15. Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 15 / 43
  16. 16. bonus 1 : je peux tout faire Interfaces très fonctionnelles = Impose de bonnes pratiques en termes de choix technologiques et de développement … qui vont impacter le confort d’utilisation Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 16 / 43
  17. 17. Exemple : limiter l’attente Au chargement de l’application, Mais surtout… pendant l’utilisation Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 17 / 43
  18. 18. l’enjeu : informer de l’attente prévue Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 18 / 43
  19. 19. l’enjeu : ne pas faire attendre pour des basiques Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 19 / 43
  20. 20. bonus 1 : je suis acteur… …mais dans un navigateur ! Impose de bonnes pratiques en termes de prise en compte des antécédents des internautes Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 20 / 43
  21. 21. exemple : persistance du réflexe « BACK » Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 21 / 43
  22. 22. exemple : persistance du réflexe « molette » Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 22 / 43
  23. 23. exemple : persistance du réflexe « bouton d’action » Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 23 / 43
  24. 24. exemple : exploitation de conventions logicielles Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 24 / 43
  25. 25. Bonus 2 : l’effet temps réel Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 25 / 43
  26. 26. bonus 2 : l’effet temps réel… Impose de bonnes pratiques en termes de feedback Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 26 / 43
  27. 27. donner du feedback 2 notions clés : Le moment Le lieu d’intérêt d’intérêt Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 27 / 43
  28. 28. moment d’intérêt : pas pendant que je travaille… Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 28 / 43
  29. 29. moment d’intérêt : pas nécessairement tout le temps Notion de temporisation = Découpage très fin des moments d’interaction Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 29 / 43
  30. 30. quand est-ce que j’ai besoin de feedback ? Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 30 / 43
  31. 31. quand est-ce que j’ai besoin de feedback ? Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 31 / 43
  32. 32. forcer la visibilité du feedback Notion de latence simulée = Pallier à l’inconvénient de l’immédiateté Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 32 / 43
  33. 33. simulation de latence Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 33 / 43
  34. 34. lieu d’intérêt : pas là où je ne vois pas http://www.virginmega.fr Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 34 / 43
  35. 35. Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 35 / 43
  36. 36. Bonus 3 : de nouveaux modes d’interaction Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 36 / 43
  37. 37. bonus 3 : de nouveaux modes d’interaction… Impose des bonnes pratiques en termes de guidage et de contrôle utilisateur Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 37 / 43
  38. 38. guider l’internaute Un bon guidage exploite le concept d’affordances perçues Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 38 / 43
  39. 39. l’enjeu : donner des indices ENVOYER Envoyer Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 39 / 43
  40. 40. l’enjeu : donner des indices Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 40 / 43
  41. 41. exemple : manque d’accompagnement à un instant t silverlight.net... Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 41 / 43
  42. 42. exemple avec plus d’intuitivité http://www.skimium.fr Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 42 / 43
  43. 43. éléments les plus affordants à l’interaction = 1ers réflexes Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 43 / 43
  44. 44. compenser un défaut d’affordance perçue implicite Accompagner l’internaute dans l’apprentissage 1 utilisation ère = moment clé pour expliquer des choses Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 44 / 43
  45. 45. compenser un défaut d’affordance perçue implicite Utiliser les mots Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 45 / 43
  46. 46. compenser un défaut d’affordance perçue implicite Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 46 / 43
  47. 47. compenser un défaut d’affordance perçue implicite Utiliser les formes de curseur Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 47 / 43
  48. 48. Les règles d’ergonomie ne changent pas… Mais s’adaptent au contexte Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 48 / 43
  49. 49. Et voilà ! à vos questions www.ergonomie-sites-web.com www.ergolab.net Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 49 / 43

×