L’autre jour, je me sentais un peu mal : faisant fi de toute bonne pratique, j’ai designé une interface avec des icônes sans label. Horreur ! Enfer ! Damnation !

Vue Exploitant
Là, dans le panneau de gauche, des icônes sans label

Les experts s’accordent pourtant à dire que « Pour diminuer l’ambiguïté d’un grand nombre d’icônes, un label textuel doit être présent a proximité de l’icône pour clarifier son sens dans ce contexte particulier » ( Icon Usability, du Norman Group) Le choix des mots est interpellant : même pas « devrait » mais « doit » !

Et moi, je suis là, à me dire que non, franchement, ça ne m’arrange pas parce que :

  • J’ai pas la place.
  • L’icône est sur plusieurs lignes d’un tableau, ça va être super répétitif !

Alors, du coup, j’ai continué à réfléchir pour voir si je pouvais persévérer dans mon idée de ne pas mettre de label sans risque de me retrouver dans l’enfer des UX Designer pavés de bonnes attentions. Voici mes arguments :

  • Mon application est une application professionnelle : elle n’est pas destinée au grand public mais à des professionnels formés.
  • J’ai utilisé la règles des 5 secondes : il m’a fallu moins de cinq secondes pour penser à une icône appropriée (et même de l’intégrer à ma maquette avec Iconify).
  • J’ai testé que l’icône était reconnue : j’ai demandé à des gens à quoi l’icône pouvait correspondre. Puisqu’ils ont compris le sens de l’icône sans contexte, ça m’a rassuré sur le fait que des utilisateurs formés, et avec du contexte, vont s’en sortir aussi.
  • L’action liée à l’icône n’est pas irréversible ou dommageable : l’utilisateur peut « cliquer pour voir ».
  • Tests utilisateurs. Tests utilisateurs. Tests utilisateurs.

Du coup, voilà, j’ai designé une interface avec des icônes sans label (mais avec un tooltip au survol/au alt, on est pas des bêtes).

Sur ce, je vous laisse, j’ai une modale à designer alors même que les modales, c’est le mal !

Votre commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l’aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s