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. 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. Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 3 / 43

4. Possibilités technologiques
Qui imposent de forger des
bonnes pratiques
Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 4 / 43

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. 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. 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. 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. 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. Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 10 / 43

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. 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. Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 13 / 43

14. Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 14 / 43

15. Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 15 / 43

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. 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. l’enjeu : informer de l’attente prévue
Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 18 / 43

19. l’enjeu : ne pas faire attendre pour des basiques
Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 19 / 43

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. exemple : persistance du réflexe « BACK »
Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 21 / 43

22. exemple : persistance du réflexe « molette »
Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 22 / 43

23. exemple : persistance du réflexe « bouton d’action »
Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 23 / 43

24. exemple : exploitation de conventions logicielles
Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 24 / 43

25. Bonus 2 : l’effet temps réel
Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 25 / 43

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. 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. moment d’intérêt : pas pendant que je travaille…
Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 28 / 43

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. quand est-ce que j’ai besoin de feedback ?
Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 30 / 43

31. quand est-ce que j’ai besoin de feedback ?
Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 31 / 43

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. simulation de latence
Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 33 / 43

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. Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 35 / 43

36. Bonus 3 : de nouveaux
modes d’interaction
Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 36 / 43

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. 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. l’enjeu : donner des indices
ENVOYER Envoyer
Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 39 / 43

40. l’enjeu : donner des indices
Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 40 / 43

41. exemple : manque d’accompagnement à un instant t
silverlight.net...
Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 41 / 43

42. exemple avec plus d’intuitivité
http://www.skimium.fr
Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 42 / 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. 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. 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. compenser un défaut d’affordance perçue implicite
Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 46 / 43

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. 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. Et voilà !
à vos questions
www.ergonomie-sites-web.com www.ergolab.net
Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 49 / 43