Snap Shots™ et bulles d'information — un désastre ergonomique?

Snapshot of Snap Shots™

Voici un aperçu de ce que l’on peut voir sur www.snap.com:

Lorsque le pointeur de la souris (la flèche) passe sur le lien, la «bulle» apparait en surimpression sur la page, et donne un aperçu de la page de destination du lien.

Dans l’absolu, donner plus d’informations sur la destination d’un lien semble être une bonne idée. Bien souvent, les liens que l’on rédige sont peu clairs, et cliquer sur ces liens ressemble un peu à la roulette russe: est-ce que ça m’emmènera bien où je pense, ou bien tout à fait ailleurs? On a donc un problème de rédaction — j’en parle plus longuement dans l’article À quoi ressemblent vos liens? — que l’on peut résoudre de deux manières:

1. soit en travaillant le problème de fond (le caractère peu expicite des liens rédigés);
2. soit en trouvant un moyen pour donner des informations supplémentaires.

Cette deuxième solution, qu’elle passe par l’utilisation de l’attribut HTML title ou par un mécanisme à la Snap Shots™, a un aspect «rustine» un peu trop prononcé à mon gout. De plus, mal implémentée elle peut poser des problèmes d’accessibilité pour certains utilisateurs.

Mais laissons ces considérations de côté et examinons les problèmes posés spécifiquement par Snap Shots™.

Too Much Information

Voici une capture d’écran de l’utilisation (assez typique) de Snap Shots™ sur un site, en l’occurrence le blog de groupe Reflect (agence web):

On rappellera brièvement que le but de ce mécanisme est de donner une information supplémentaire sur la destination du lien. On constate que cette information est bien présente, sous deux formes:

1. l’URL (adresse web) de la page liée, avec un petit pictogramme évoquant une page web;
2. une vignette d’une capture d’écran de la page liée.

Si on décompose les différents éléments d’information contenus dans cette bulle flottante, nous en avons déjà trois qui donnent une information sur la page de destination. Très bien. Comptons maintenant les éléments d’information qui n’ont aucun rapport avec la page de destination: pictogrammes, titres, liens, logos, etc. J’en compte dix en tout.

Dix informations parasites pour trois informations utiles… on a un problème!

L’autre problème posé est celui de la surcharge d’information. Imaginons que nous n’ayons aucune information inutile, mais juste deux ou trois informations pertinentes: cela ferait déjà deux ou trois informations en plus de l’intitulé du lien. Or, utiliser un lien hypertexte est une action habituelle et triviale pour la plupart des internautes. Faut-il rajouter des informations pas indispensables, au risque de rendre cette action habituelle plus lente car conditionnée par de plus nombreuses informations, par ailleurs de type différents (intitulé, URL, image)? Je pense que non.

Enfin, il y a le problème de l’affichage d’une information non sollicitée. Les utilisateurs non habitués à ce système (la plupart) peuvent être surpris ou gênés. Et même quand on en a connaissance, il peut s’avérer gênant: par exemple, si je fais passer le pointeur de la souris sur un lien par mégarde, en cherchant à le déplacer ailleurs: paf, une bulle intempestive apparait. Notons tout de même que Snap Shots™ peut être désactivé par l’utilisateur (une des informations parasites de la bulle est en fait un bouton de configuration), soit pour le site visité, soit pour tous les sites. Mais combien de visiteurs des sites utilisant Snap Shots™ connaissent cette possibilité? Pour ma part, je ne l’ai découverte qu’en rédigeant cet article.

Quelques recommandations

Dans cet article, j’ai choisi l’exemple de Snap Shots™, mais d’autres services ou dispositifs présentent des problèmes similaires. Je propose donc de vous donner quelques recommandations pour la bonne utilisation de ces dispositifs.

1. Commencer par rédiger des liens compréhensibles sans information-béquille (ou information-rustine).

2. Lors du survol d’un lien, laisser un temps de latence avant l’affichage de l’information supplémentaire, afin de ne pas afficher d’information non sollicitée par l’utilisateur.
   On pourra s’inspirer du fonctionnement des navigateurs web, qui n’affichent de tooltip pour l’attribut title des liens qu’après un petit laps de temps (environ une seconde, ou une seconde et demie).

3. Fournir un moyen raisonnablement clair et visible pour désactiver ce mécanisme.

4. N’afficher aucune information parasite. Et non, le logo de votre site ou entreprise n’est pas une information pertinente pour une bulle d’aide à la navigation. Ne pas proposer de fonctionnalités optionnelles à tout va (champ de recherche, liens connexes, etc.) qui alourdiraient la charge informationnelle. Faire simple.

5. S’assurer que le lien visuel entre la bulle d’aide et le lien survolé est clair et compréhensible.
   Dans le cas de Snap Shots™, ça n’est pas vraiment le cas, comme le montrent ces captures:
   

6. Enfin, si on met en place ce genre de solution, on veillera à être à l’écoute de ses utilisateurs, voire de leur demander leur avis.

Enfin, signalons que ce type de mécanisme est assez largement critiqué. Voici un commentaire de Christian Heilmann à ce sujet:

Snap links have been popping up all over the web in the last few months and most sites turned them off after an avalanche of negative user feedback. The use case of someone hovering over a link to find out more about it is just bogus, when I go to a link I go there to click it.

The only thing snap links do is annoy people when they have their mouse cursor on a text and use the keyboard to scroll.

(Source)

On pourra lire aussi The tyranny of mouseover de Jeremy Keith.

Mais signalons tout de même que mes recommandations prennent compte d’une bonne partie des griefs exprimés. Je ne recommande pas pour autant ce type de mécanisme, mais si jamais vous aviez déjà implémenté ce type de bulle d’information en suivant les quelques principes que je mentionne, n’hésitez pas à en parler! En particulier: quels sont les retours des utilisateurs à ce sujet?