Vous êtes sur la page 1sur 49

Ergonomie des interfaces riches

Amlie Boucher Amlie13 Boucher, Paris Web 2008 Jeudi Novembre 2008

Ergonomie des interfaces riches

1 / 43

Non, on ne parlera pas dAjax de Flex de Silverlight de tout a

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

2 / 43

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

3 / 43

Possibilits technologiques Qui imposent de forger des bonnes pratiques

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

4 / 43

Ces bonnes pratiques dcoulent des mmes principes et mthodes dergonomie quauparavant

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

5 / 43

On va donc demander : des interfaces - qui soient comprhensibles - qui nous donnent satisfaction - qui soient faciles prendre en main - qui nous rendent efficients
Amlie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 6 / 43

Lenjeu = que linterface sefface pour laisser sexprimer tout le potentiel du service

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

7 / 43

web pas riche = je consomme de linformation

Page web 1

Page web 2

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

8 / 43

web avec des bouts de riche = je consomme de linformation + je participe, jagis, linterface se contextualise en fonction de ma demande

Page web 1

Page web 2

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

9 / 43

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

10 / 43

Interfaces (entirement) riches = je suis actif, je manipule des objets, je cre = de lordre du logiciel

Interface

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

11 / 43

Bonus 1 : je peux tout faire, je suis acteur, mon outil est magique !

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

12 / 43

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

13 / 43

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

14 / 43

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

15 / 43

bonus 1 : je peux tout faire

Interfaces trs fonctionnelles = Impose de bonnes pratiques en termes de choix technologiques et de dveloppement
qui vont impacter le confort dutilisation
Amlie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 16 / 43

Exemple : limiter lattente Au chargement de lapplication, Mais surtout pendant lutilisation

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

17 / 43

lenjeu : informer de lattente prvue

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

18 / 43

lenjeu : ne pas faire attendre pour des basiques

Amlie 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 antcdents des internautes

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

20 / 43

exemple : persistance du rflexe BACK

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

21 / 43

exemple : persistance du rflexe molette

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

22 / 43

exemple : persistance du rflexe bouton daction

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

23 / 43

exemple : exploitation de conventions logicielles

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

24 / 43

Bonus 2 : leffet temps rel

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

25 / 43

bonus 2 : leffet temps rel

Impose de bonnes pratiques en termes de feedback

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

26 / 43

donner du feedback

2 notions cls :

Le moment dintrt

Le lieu dintrt

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

27 / 43

moment dintrt : pas pendant que je travaille

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

28 / 43

moment dintrt : pas ncessairement tout le temps

Notion de temporisation = Dcoupage trs fin des moments dinteraction

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

29 / 43

quand est-ce que jai besoin de feedback ?

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

30 / 43

quand est-ce que jai besoin de feedback ?

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

31 / 43

forcer la visibilit du feedback

Notion de latence simule =


Pallier linconvnient de limmdiatet

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

32 / 43

simulation de latence

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

33 / 43

lieu dintrt : pas l o je ne vois pas

http://www.virginmega.fr
Amlie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 34 / 43

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

35 / 43

Bonus 3 : de nouveaux modes dinteraction

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

36 / 43

bonus 3 : de nouveaux modes dinteraction

Impose des bonnes pratiques en termes de guidage et de contrle utilisateur

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

37 / 43

guider linternaute

Un bon guidage exploite le concept daffordances perues

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

38 / 43

lenjeu : donner des indices

ENVOYER

Envoyer

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

39 / 43

lenjeu : donner des indices

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

40 / 43

exemple : manque daccompagnement un instant t

silverlight.net...
Amlie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 41 / 43

exemple avec plus dintuitivit

http://www.skimium.fr
Amlie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 42 / 43

lments les plus affordants linteraction = 1ers rflexes

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

43 / 43

compenser un dfaut daffordance perue implicite

Accompagner linternaute dans lapprentissage utilisation = moment cl pour expliquer des choses
Amlie Boucher, Paris Web 2008 Ergonomie des interfaces riches | 44 / 43

re 1

compenser un dfaut daffordance perue implicite

Utiliser les mots

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

45 / 43

compenser un dfaut daffordance perue implicite

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

46 / 43

compenser un dfaut daffordance perue implicite

Utiliser les formes de curseur

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

47 / 43

Les rgles dergonomie ne changent pas Mais sadaptent au contexte

Amlie Boucher, Paris Web 2008

Ergonomie des interfaces riches

48 / 43

Et voil !
vos questions

www.ergonomie-sites-web.com
Amlie Boucher, Paris Web 2008

www.ergolab.net
Ergonomie des interfaces riches | 49 / 43