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

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

Ergonomie des interfaces riches

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

Non, on ne parlera pas

de Flex d’Ajax

de Silverlight de tout ça



Possibilités technologiques

Qui imposent de forger des bonnes pratiques


Ces bonnes pratiques découlent des mêmes principes

et méthodes d’ergonomie qu’auparavant


On va donc demander :

des interfaces

- qui soient compréhensibles - qui nous donnent satisfaction

- qui soient faciles à prendre en main

- qui nous rendent efficients


L’enjeu = que l’interface s’efface pour laisser s’exprimer tout le

potentiel du service


web pas riche =

je consomme de l’information

Page web 1 Page web 2


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



Interfaces (entièrement) riches =

je suis actif, je manipule des objets, je crée =

de l’ordre du logiciel

Interface


Bonus 1 : je peux tout faire, je suis acteur,

mon outil est magique !





Interfaces très fonctionnelles =

Impose de bonnes pratiques en termes de choix technologiques

et de développement

… qui vont impacter le confort d’utilisation

bonus 1 : je peux tout faire


Exemple : limiter l’attente

Au chargement de l’application, Mais surtout… pendant

l’utilisation


l’enjeu : informer de l’attente prévue


l’enjeu : ne pas faire attendre pour des basiques


Impose de bonnes pratiques en termes de prise en compte des

antécédents des internautes

…mais dans un navigateur !

bonus 1 : je suis acteur…


exemple : persistance du réflexe « BACK »


exemple : persistance du réflexe « molette »


exemple : persistance du réflexe « bouton d’action »


exemple : exploitation de conventions logicielles


Bonus 2 : l’effet temps réel


Impose de bonnes pratiques en termes de feedback

bonus 2 : l’effet temps réel…


2 notions clés :

Le lieu d’intérêt

Le moment d’intérêt

donner du feedback


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


moment d’intérêt : pas nécessairement tout le temps

Notion de temporisation =

Découpage très fin des moments d’interaction


quand est-ce que j’ai besoin de feedback ?


quand est-ce que j’ai besoin de feedback ?


forcer la visibilité du feedback

Notion de latence simulée =

Pallier à l’inconvénient de l’immédiateté


simulation de latence


lieu d’intérêt : pas là où je ne vois pas

http://www.virginmega.fr



Bonus 3 : de nouveaux modes d’interaction


Impose des bonnes pratiques en termes de guidage

et de contrôle utilisateur

bonus 3 : de nouveaux modes d’interaction…


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

guider l’internaute


ENVOYER Envoyer

l’enjeu : donner des indices


l’enjeu : donner des indices


exemple : manque d’accompagnement à un instant t

silverlight.net...


http://www.skimium.fr

exemple avec plus d’intuitivité


éléments les plus affordants à l’interaction = 1ers réflexes


Accompagner l’internaute dans l’apprentissage

1ère utilisation = moment clé

pour expliquer des choses

compenser un défaut d’affordance perçue implicite



Utiliser les mots





Utiliser les formes de curseur


Les règles d’ergonomie ne changent pas…

Mais s’adaptent au contexte


www.ergolab.net www.ergonomie-sites-web.com

Et voilà !

à vos questions