En ergonomie, le choix des bons symboles est primordial

Si vous devez opter pour des métaphores visuelles pour représenter des données ou des actions réalisables, faites bien attention à ne pas laisser d'ambiguïté possible, qui pourrait conduire à une mauvaise interprétation ou utilisation, et donc une perte de confiance de l'utilisateur.

Frédéric de Villamil cite aujourd'hui dans son blog le cas d'un triangle censé représenter le sens de tri d'une liste, dont l'interprétation qu'il fait est différente de celle faite par d'autres personnes.

© Frédéric de Villamil

Au delà du fait que je ne comprends pas la présence d'un tel élément sur un onglet[1], j'ai plutôt tendance à interpréter comme lui ce triangle, c'est à dire sa pointe indiquant le sens de tri, mais je n'appellerais pas forcément cela comme lui une lecture « logique », vu le nombre de personnes qui interprètent la chose différemment… 😉

Il indique d'ailleurs que pour lui « une pointe vers le bas signifie […] que le premier élément de la liste se trouve sur la première ligne », mais il ne spécifie pas ce qu'il entend par « premier élément ». Je ne pense pas que cette appellation soit adaptée, puisque pour moi le « premier élément » est bien celui de l'affichage, donc toujours en début (visuel) de la liste…

Je pense de toute façon que c'est le symbole qui est mal choisi, puisque l'on peut l'interpréter tant comme une flèche — notre interprétation à tous les deux — que comme une pyramide[2] — l'interprétation des autres. Un symbole de devrait pas être ambiguë à ce point. Ici, il faudrait — selon l'information que l'on souhaite présenter — soit une flèche clairement représentée avec un fût plus de la pointe, soit un symbole indiquant plus clairement comment est fait le tri, par exemple « A-Z » ou « 0-9 ».

J'étais tombé il y a plusieurs mois sur une initiative tentant de définir des icônes/symboles les plus simples et universels possible, mais je ne retrouve malheureusement plus le site[3].


  1. Une copie d'écran plus large donnerait peut-être plus de logique ↩︎

  2. J'ai failli dire un entonnoir, mais ce symbole est plutôt réservé à la notion de filtrage ↩︎

  3. A se demander à quoi servent les outils de bookmarking social ! ↩︎

  1. Note from 31 May 2024

    Please, please, please… check on the sites you build that using Command #fn1" id="fnref1">[1] + click #fn2" id="fnref2">[2] always opens links in a new tab, even if you used some JavaScript to build a dumb Web link!

    I see too many sites where Cmd + click opens the link in the current tab, so when browsing a list of links, if I want to open them in new tabs (for example to compare products), I need to use right click and then select the "open link in a new tab" option, for each link.

    Really cumbersome! 😡


    1. Command on a Mac, but I guess Control on Windows and Linux? #fnref1" class="footnote-backref">↩︎

    2. Check the click both with mouses and trackpads! #fnref2" class="footnote-backref">↩︎