Le point de vue d’une interface

Ce week-end, je suis tombé via Hacker News sur Adaptor, un énième slider en jQuery. J’ai été particulièrement surpris en essayant l’effet de défilement horizontal. Je vous invite à l’essayer sur la page de démo en cliquant sur le bouton « Horizontal scroll ». (MAJ : suite à un commentaire sur Hacker News, le script et sa démo ont été corrigés)

Adaptor slider jQuery

Au premier abord, j’ai eu l’impression que le défilement du slider était à l’envers. En cliquant sur la flèche de droite, j’affiche bien l’image suivante dans le slider, mais celle-ci apparaît par la gauche. Naïvement, mon petit cerveau s’attend à ce que les images soient côtes à côtes, de gauche à droite (comme le suggèrent les petits points de navigation en bas à droite), alors qu’en réalité elles sont placées en sens inverse. Pourtant, après quelques minutes passées à tester ce slider, mon cerveau a fini par s’habituer et à s’adapter. En cliquant sur la flèche de droite, je ne m’attends alors plus à voir l’image de droite, mais je m’attends à faire défiler l’ensemble du slider vers la droite. Et une fois que j’ai ce modèle mental en tête, je n’ai plus de problème à utiliser ce slider, et j’ai totalement oublié ma première intuition.

Ce n’est pas la première fois que je tombe sur un slider comme celui-ci. Ça arrive même assez souvent. Le premier qui me vient en tête, c’est celui d’iTunes. Je ne vais pas souvent dans iTunes, mais à chaque fois que j’y vais, je mets quelques secondes avant de comprendre le fonctionnement de ce slider.

Le slider d'iTunes

Initialement, je m’attends à ce qu’en cliquant sur la flèche en bas à droite, j’affiche la vignette suivante sur la droite. Je m’attends alors à un défilement des vignettes de droite vers le haut. Or, c’est l’inverse qui se produit. En réalité, les vignettes vont défiler vers le bas, et c’est la vignette la plus en bas qui va prendre la place de la vignette principale. Mais comme dans le premier exemple, une fois que j’ai joué un peu avec ce slider, son fonctionnement me semble tout à fait correct, et mon premier modèle mental initial incorrect.

Ces problèmes de sliders m’ont alors rappelé un vieil article sur les interfaces utilisateurs qui traitait du problème des boutons d’ascenseurs :

Le problème d'ergonomie et d'interface des boutons d'ascenseurs

Imaginez la situation suivante. Vous êtes au 3ème étage de cet immeuble et vous souhaitez vous rendre au 10ème. L’ascenseur est au 5ème étage et il y a un indicateur qui affiche où il se trouve. Sur quel bouton appuyez vous ?

La plupart des gens diront probablement « appuyez en haut », puisqu’ils veulent aller en haut. Il n’y a pas si longtemps j’ai vu quelqu’un faire l’inverse, et je l’ai interrogé à propos de son comportement. Il m’a dit : « et bien l’ascenseur est au 5ème, et je suis au 3ème, donc je veux qu’il descende vers moi ».

Comme pour nos sliders, sur le papier, les deux comportements semblent tout à fait valables. Mais tout est une question de point de vue. Quand je clique sur une flèche d’un slider, ou sur le bouton d’un ascenseur, est-ce que je dois indiquer l’action que moi je veux effectuer (comme afficher l’image suivante, ou me rendre à un étage supérieur) ? Ou est-ce que je dois indiquer l’action que je veux faire faire à l’appareil que je manipule (comme faire défiler le slider vers la droite, ou faire descendre l’ascenseur jusqu’à moi) ?

Si dans le cas de l’ascenseur, on devrait simplement trouver un unique bouton d’appel, je pense qu’une interface informatique doit se mettre à la place de l’utilisateur, et non l’inverse.

  1. viki53, le

    Bizarrement chez moi l’image apparaît par la droite, comme tout slider.

    Mais il est vrai que le raisonnement est logique. Bien qu’avec les habitudes que nous avons, il le devienne de moins en moins…

  2. Rod, le

    Chez moi aussi les images apparaissent dans le sens « habituel »

  3. Visiboost, le

    De même, sur le site d’Adaptor les images apparaissent « classiquement » par la droite lorsqu’on clique sur la flèche suivante et pas par la gauche comme tu l’indiques …
    Mise à jour (très récente) de leur script ou bien est-ce lié à une configuration navigateur ?

    Dans tous les cas, j’admire la personne qui appuie sur le bouton du bas de l’ascenseur pour le faire descendre alors que lui veut monter: c’est d’une logique imparable mais tellement surprenant ;)

  4. Horo, le

    Tout comme viki, le slider fonctionne « normalement » chez moi.

    Pour la petite histoire de l’ascenseur je serai plutôt d’accord avec la personne qui appuis sur la flèche du bas. D’abord, tu dis à l’ascenseur de venir à toi, ensuite tu lui dis où tu veux qu’il t’amène en appuyant sur l’étage désiré.
    Après, c’est n’est qu’une question de point de vu.
    il me semble que techniquement, peu importe à quel étage est l’ascenseur, tu l’appelles du deuxième étage en appuyant sur n’importe quelle flèche et il vient à toi. (J’ai légèrement l’impression que ce que je viens de dire, tout le monde s’est doutait, ><).

    Bref, ceci était mon premier poste et je tiens à dire que j'adore tes articles. Ils sont toujours interessant et ta façon de voir les choses me plaît.

  5. Nico, le

    J’ai vu le problème sur certains jeux d’avion/hélico aussi, certains hésitent sur la flèche du haut : certains raisonnent en logique « manche à balai » où la flèche du haut équivaut à faire plonger l’avion, et d’autres pensent « flèche du haut » = aller en haut.

    Moralité : se méfier de l’évidence.

  6. Fabien, le

    C’est vrai que certaines interfaces sont ambiguës, tout comme le sens de défilement des scrollbars … C’est souvent une question d’habitude.
    Pour ce qui est des boutons d’ascenseur, le fait qu’il y en ait deux c’est pour améliorer le « rendement » de l’ascenseur: l’ascenseur ne va pas s’ouvrir à votre étage si vous montez et que les gens qui sont dedans descendent ou qu’il a déjà été appelé par quelqu’un de l’étage en dessous. Bien évidemment, il y a ces deux boutons seulement quand il y a plusieurs ascenseurs, sinon un seul bouton suffit.

  7. Thomas, le

    Il en va de même pour les scrolls de souris.
    Ne vous est-il jamais arrivé d’emprunter l’ordinateur d’un collègue qui scroll « à l’envers » ? On peine au début et on s’habitue en quelques minutes à ce nouveau mode de fonctionnement. Il suffit de passer une journée dessus, puis de revenir sur un scroll « normal » pour avoir des difficultés à reprendre la vieille habitude. L’être humain s’adapte, à un point où ça en devient affolant !

    Je fais néanmoins parti de ceux qui appuient sur la flèche du bas pour faire un ascenseur situé au dessus …

  8. Rémi, le

    Bon, vu que mon premier exemple est tombé à l’eau pendant que je rédigeais l’article, voici un autre exemple vu sur La Poste.

    La Poste

    N’hésitez pas à poster les « sliders à l’envers » que vous trouvez.

  9. Niaatan, le

    En ce qui concerne les boutons d’ascenseur, le fait de trouver les deux flèches ▲ et ▼ peut s’expliquer par le raisonnement suivant :

    Je suis au second étage et je veux sortir de l’immeuble.
    L’ascenseur est appelé par une personne au premier étage qui veut aller au dixième.
    L’ascenseur passe bien devant mon étage mais pas dans mon sens. Si je monte dedans, je vais perdre du temps (et possiblement perdre un autre ascenseur plus rapide), si je ne monte pas dedans, l’ascenseur se sera arrêté pour rien. Voilà l’intérêt d’indiquer à la machine notre sens de circulation pour qu’il puisse décider s’il vaut mieux s’arrêter à l’aller ou au retour.

  10. Niaatan, le

    Oups, je suis désolé, j’avais sauté la réponse de Fabien…

  11. PireGiro, le

    Tiens, ça me rappelle que pour le « scrolling », Apple a appelé ça défilement «naturel» introduit dans OS 10.7 pour reprendre la logique de défilement des iBidules tactiles, la barre de scroll devenant intermittente au passage, alors que les roulettes centrales de souris nous avait habitué à l’inverse. Effectivement, on s’y habitue très bien.

  12. Nico, le

    Le plus étonnant que j’ai vu dans le genre : un gars qui tenait la souris à l’envers : les boutons vers le bas. Et il naviguait sans problème avec les directions inversées. Essayez, c’est pas triste. ^^

  13. iManu, le

    Mon cerveau a été tout chamboulé à l’arrivé d’OSX Lion par l’adoption du slider à la mode iPad. D’ailleurs en repassant sous Windows il m’arrivait de devoir me réadapter au ascenseurs.
    Je pense qu’Apple a fait preuve (encore une fois?) de clairvoyance : les gestes sur souris s’adaptent petit à petit aux gestes tactiles.
    Toujours est-il que certaines habitudes sont tenaces, il suffit de voir que sur quasi tout les jeux qui se jouent à la souris, on peut inverser la direction.