Ergonomie des interfaces riches - Amélie Boucher - Paris Web 2008
-
Upload
association-paris-web -
Category
Documents
-
view
4.785 -
download
1
description
Transcript of 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