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

Ergonomie des interfaces riches Amélie Boucher Jeudi 13 Novembre Web 2008 Amélie Boucher, Paris 2008 Ergonomie des interfaces riches | 1 / 43

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

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

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

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

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

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

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

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

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

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

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

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

l’enjeu : informer de l’attente prévue Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 18 / 43

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

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

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

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

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

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

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, Paris Web 2008 Ergonomie des interfaces riches | 26 / 43

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

moment d’intérêt : pas pendant que je travaille… Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 28 / 43

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

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

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

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

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, Paris Web 2008 Ergonomie des interfaces riches | 34 / 43

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

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

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

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

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, Paris Web 2008 Ergonomie des interfaces riches | 41 / 43

exemple avec plus d’intuitivité http://www.skimium.fr Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 42 / 43

éléments les plus affordants à l’interaction = 1ers réflexes Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 43 / 43

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

compenser un défaut d’affordance perçue implicite Utiliser les mots Amélie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 45 / 43

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

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

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

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

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

0 comments

Notes on slide 1

3 Favorites & 1 Event