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
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
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
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