Ergonomie
      des interfaces riches



Amélie Boucher
Jeudi 13 Novembre Web 2008
Amélie Boucher, Paris 2008   Ergonomie ...
Non, on ne parlera pas
                                 d’Ajax
                                 de Flex
                  ...
Amélie Boucher, Paris Web 2008   Ergonomie des interfaces riches   |   3 / 43
Possibilités technologiques

              Qui imposent de forger des
                   bonnes pratiques



Amélie Bouche...
Ces bonnes pratiques
        découlent des mêmes principes
           et méthodes d’ergonomie
                qu’auparavan...
On va donc demander :

                                 des interfaces

          - qui soient compréhensibles
         - ...
L’enjeu = que l’interface s’efface
        pour laisser s’exprimer tout le
             potentiel du service




Amélie Bo...
web pas riche
                                =
                    je consomme de l’information




                  Pag...
web avec des bouts de riche
                              =
            je consomme de l’information
  + je participe, j’a...
Amélie Boucher, Paris Web 2008   Ergonomie des interfaces riches   |   10 / 43
Interfaces (entièrement) riches
                             =
      je suis actif, je manipule des objets, je crée
      ...
Bonus 1 : je peux tout faire,
                   je suis acteur,
              mon outil est magique !



Amélie Boucher, ...
Amélie Boucher, Paris Web 2008   Ergonomie des interfaces riches   |   13 / 43
Amélie Boucher, Paris Web 2008   Ergonomie des interfaces riches   |   14 / 43
Amélie Boucher, Paris Web 2008   Ergonomie des interfaces riches   |   15 / 43
bonus 1 : je peux tout faire



          Interfaces très fonctionnelles
                        =
        Impose de bonne...
Exemple : limiter l’attente

        Au chargement de l’application,
            Mais surtout… pendant
                  l...
l’enjeu : informer de l’attente prévue




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




Amélie Boucher, Paris Web 2008        Ergonomie des interfaces riche...
bonus 1 : je suis acteur…



             …mais dans un navigateur !

        Impose de bonnes pratiques en
         terme...
exemple : persistance du réflexe « BACK »




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




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




Amélie Boucher, Paris Web 2008     Ergonomie des interfaces riche...
exemple : exploitation de conventions logicielles




Amélie Boucher, Paris Web 2008        Ergonomie des interfaces riche...
Bonus 2 : l’effet temps réel




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




        Impose de bonnes pratiques en
             termes de feedback




Amélie Boucher...
donner du feedback


                                 2 notions clés :



             Le moment                          ...
moment d’intérêt : pas pendant que je travaille…




Amélie Boucher, Paris Web 2008      Ergonomie des interfaces riches  ...
moment d’intérêt : pas nécessairement tout le temps




          Notion de temporisation
                     =
      Déc...
quand est-ce que j’ai besoin de feedback ?




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




Amélie Boucher, Paris Web 2008        Ergonomie des interfaces riches   |  ...
forcer la visibilité du feedback



                 Notion de latence simulée
                             =
    Pallier ...
simulation de latence




Amélie Boucher, Paris Web 2008                   Ergonomie des interfaces riches   |   33 / 43
lieu d’intérêt : pas là où je ne vois pas




                                 http://www.virginmega.fr
Amélie Boucher, Pa...
Amélie Boucher, Paris Web 2008   Ergonomie des interfaces riches   |   35 / 43
Bonus 3 : de nouveaux
                    modes d’interaction




Amélie Boucher, Paris Web 2008    Ergonomie des interfac...
bonus 3 : de nouveaux modes d’interaction…




           Impose des bonnes pratiques
              en termes de guidage
 ...
guider l’internaute

           Un bon guidage exploite le
         concept d’affordances perçues




Amélie Boucher, Pari...
l’enjeu : donner des indices




               ENVOYER                      Envoyer




Amélie Boucher, Paris Web 2008   ...
l’enjeu : donner des indices




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




                                 silverlight.net...


Amélie Boucher,...
exemple avec plus d’intuitivité




                                 http://www.skimium.fr

Amélie Boucher, Paris Web 2008...
éléments les plus affordants à l’interaction = 1ers réflexes




Amélie Boucher, Paris Web 2008      Ergonomie des interfa...
compenser un défaut d’affordance perçue implicite



         Accompagner l’internaute dans
               l’apprentissage...
compenser un défaut d’affordance perçue implicite


                                 Utiliser les mots




Amélie Boucher,...
compenser un défaut d’affordance perçue implicite




Amélie Boucher, Paris Web 2008    Ergonomie des interfaces riches   ...
compenser un défaut d’affordance perçue implicite


                  Utiliser les formes de curseur




Amélie Boucher, P...
Les règles d’ergonomie ne
                   changent pas…
             Mais s’adaptent au contexte




Amélie Boucher, Pa...
Et voilà !

                                 à vos questions




    www.ergonomie-sites-web.com                  www.ergo...
Prochain SlideShare
Chargement dans…5
×

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

3 058 vues

Publié le

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.

0 commentaire
6 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 058
Sur SlideShare
0
Issues des intégrations
0
Intégrations
108
Actions
Partages
0
Téléchargements
64
Commentaires
0
J’aime
6
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×