ergonomie des interfaces riches - amélie boucher - paris web 2008
DESCRIPTION
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.TRANSCRIPT
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