Les interfaces riches sont-elles une révolution pour l’ergonomie ? Au travers d'exemples basés sur les patterns les plus utilisés, Amélie abordera la question de l'appropriation et des usages, et fera un état des lieux des bonnes pratiques et défauts les plus fréquemment rencontrés.

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