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

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

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

Possibilités technologiques

Qui imposent de forger des bonnes pratiques

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

Ces bonnes pratiques découlent des mêmes principes

et méthodes d’ergonomie qu’auparavant

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

On va donc demander :

des interfaces

- qui soient compréhensibles - qui nous donnent satisfaction

- qui soient faciles à prendre en main

- qui nous rendent efficients

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

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

potentiel du service

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

web pas riche =

je consomme de l’information

Page web 1 Page web 2

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

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

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

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

Interfaces (entièrement) riches =

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

de l’ordre du logiciel

Interface

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

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

mon outil est magique !

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 Amélie Boucher, Paris Web 2008

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

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

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

Exemple : limiter l’attente

Au chargement de l’application, Mais surtout… pendant

l’utilisation

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

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

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

l’enjeu : ne pas faire attendre pour des basiques

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

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…

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

exemple : persistance du réflexe « BACK »

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

exemple : persistance du réflexe « molette »

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

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

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

exemple : exploitation de conventions logicielles

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

Bonus 2 : l’effet temps réel

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

Impose de bonnes pratiques en termes de feedback

bonus 2 : l’effet temps réel…

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

2 notions clés :

Le lieu d’intérêt

Le moment d’intérêt

donner du feedback

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

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

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

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

Notion de temporisation =

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

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

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

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

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

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

forcer la visibilité du feedback

Notion de latence simulée =

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

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

simulation de latence

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

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

http://www.virginmega.fr

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

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

Bonus 3 : de nouveaux modes d’interaction

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

Impose des bonnes pratiques en termes de guidage

et de contrôle utilisateur

bonus 3 : de nouveaux modes d’interaction…

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

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

guider l’internaute

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

ENVOYER Envoyer

l’enjeu : donner des indices

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

l’enjeu : donner des indices

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

exemple : manque d’accompagnement à un instant t

silverlight.net...

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

http://www.skimium.fr

exemple avec plus d’intuitivité

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

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

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

Accompagner l’internaute dans l’apprentissage

1ère utilisation = moment clé

pour expliquer des choses

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

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

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

Utiliser les mots

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

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

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

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

Utiliser les formes de curseur

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

Les règles d’ergonomie ne changent pas…

Mais s’adaptent au contexte

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

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

Et voilà !

à vos questions