Designer des zones cliquables suffisamment grandes

Publié le 1 septembre 2022

À retenir

Les petites zones cliquables sont difficiles à utiliser (voir la loi de Fitts)
Le libellé des cases à cocher et des boutons radio doit également être cliquable, pas seulement leur carré/cercle
Les zones cliquables plus larges présentent des avantages inhérents en termes d’accessibilité :
- Les utilisateurs ne possédant pas de motricité fine peuvent interagir plus facilement avec les éléments
- Les indicateurs de focus seront plus visibles
Les zones interactives plus larges sont utiles dans d’autres contextes que les sites web :
- Les utilisateurs d’applications mobiles utilisent leurs doigts, qui prennent virtuellement plus de place dans l’interface utilisateur qu’un pointeur de curseur
- Les écrans interactifs dans les zones physiques, par exemple dans les centres commerciaux, sont des moments où une interaction fine n’est pas possible

Cet article fait partie d’une série sur les micro-interactions avec les interfaces utilisateur et la manière dont elles affectent l’expérience utilisateur.

This article is also available in English.

Un libellé disant « cliquez-moi ! », autour duquel un rectangle plus large montre une zone cliquable. Le pointeur d'un curseur survole le bord de la zone cliquable — Une zone cliquable d’une largeur appropriée

Zone cliquable, détection de collision ; le sujet que je vais aborder dans cet article est connu sous de nombreux noms, selon le domaine dans lequel il est mentionné.

Dans les jeux vidéo, on parle généralement de détection de collision, parce qu’on fait habituellement référence à un moteur physique qui doit réagir à deux éléments entrant en collision l’un avec l’autre, afin qu’ils ne se traversent pas simplement. Lorsque la détection de collision est mal gérée, l’expérience des joueurs est généralement amoindrie, car le jeu ne semble alors pas se comporter comme les joueurs s’y attendent. Cette détection peut se faire de plusieurs façons différemment, mais on compare généralement les positions et les volumes de formes pour voir si elles se touchent ou se chevauchent. Lorsque la collision est détectée, des événements peuvent être déclenchés, selon ce que les concepteurs du moteur physique ou du jeu ont choisi de traiter ou d’ignorer.

Pour les interfaces numériques, le principe est similaire, quoi que l’effort nécessaire pour détecter si deux éléments sont en contact est beaucoup moindre. En général, dans le cas des sites web, des applications mobiles ou même des écrans interactifs installés dans des espaces physiques, il n’y a pas plusieurs éléments qui se déplacent en même temps à l’écran. Cela signifie qu’on ne cherche généralement qu’à savoir si les utilisateurs eux-mêmes interagissent avec des éléments de l’interface : avec un curseur de souris ou avec un doigt qui touche sur un écran, par exemple.

C’est ici qu’intervient la loi de Fitts, une heuristique de conception qui stipule que la difficulté d’interaction augmente en fonction de la distance que doivent parcourir les utilisateurs pour déplacer leur outil d’interaction vers la cible avec laquelle ils souhaitent interagir et de la dimensions de cette cible-même. J’oserais même simplifier en affirmant que, quelle que soit la distance que le curseur doit parcourir pour atteindre sa cible, il est tout simplement difficile d’interagir avec de petits éléments.

Malgré ceci, de petites zones interactives sont trop souvent utilisées dans la conception et le développement d’interfaces numérique. Dans cet article, je vais l’illustrer à l’aide d’un exemple vu assez fréquemment : les liens de pagination que l’on trouve souvent dans les résultats de recherche, les forums ou toute autre interface qui choisit de proposer des pages au lieu du défilement vertical.

Exemple : les liens de pagination

Les liens de pagination sont souvent proposés lorsque les résultats de recherche dépassent la longueur de ce que les designers considèrent comme une page. Ces liens permettent de voir les résultats de manière paginée, comme dans un livre.

(Note à part : nous avons pratiquement passé le premier quart du 21e siècle, il est temps que nous acceptions de désigner ce que nous faisons comme des écrans, et non des pages. Au diable le skeuomorphisme).

Comparaison de deux rangées de liens de pagination : à gauche, le curseur d'un pointeur est proche du lien, mais pas au-dessus ; à droite, le curseur est au-dessus du lien, montrant un pointeur en forme de main.

Très souvent, l’interaction avec ces liens est réduite au texte lui-même.

Si nous rendons la zone cliquable visible, comme dans l’image ci-dessus, il devient plus facile de comprendre que la surface avec laquelle les utilisateurs peuvent interagir est très petite, surtout lorsque libellé est un nombre à un seul chiffre. Il s’agit d’un bon exemple pour illustrer comment le design ne tient pas compte de la loi de Fitts. Ce choix de design est également mauvais pour l’accessibilité, car tous les utilisateurs n’ont pas la motricité fine nécessaire pour interagir avec des éléments si petits.

Comparaison de deux rangées de liens de pagination : à gauche, le curseur du pointeur est proche du lien, mais pas au-dessus ; à droite, le curseur est au-dessus du lien, montrant un pointeur en forme de main. Les zones sur lesquelles le curseur peut passer sont visibles.

Une solution simple consiste à faire en sorte que la zone avec laquelle les utilisateurs peuvent interagir soit beaucoup plus large que l’élément visuel lui-même.

Les utilisateurs ne voient peut-être pas la zone cliquable, mais l’élargir leur permet d’interagir avec les éléments beaucoup plus facilement, et sans qu’ils aient à être précis.

Exemples supplémentaires

Deux cases à cocher : à gauche, un curseur est proche du libellé, mais n'apparaît pas comme un curseur en forme de main, car la zone cliquable est uniquement le carré de la case à cocher ; à droite, le curseur est à la même position, mais apparaît comme un curseur en forme de main, car la zone cliquable englobe le libellé et un peu plus. La zone cliquable est visible dans les deux cas. — Case à cocher avec petites et grandes zones cliquables

Deux boutons radio : à gauche, un curseur est proche du libellé, mais ne s'affiche pas comme un pointeur en forme de main, car la zone cliquable est uniquement le cercle du bouton radio ; à droite, le curseur est à la même position, mais s'affiche comme un pointeur en forme de main, car la zone cliquable englobe le libellé et un peu plus. La zone cliquable est visible dans les deux cas. — Bouton radio avec petites et grandes zones cliquables

Les cases à cocher et les boutons radio souffrent souvent du même problème, car ils sont conçus et développés avec une petite zone cliquable. Je ne vais pas reprendre les arguments que j’ai présentés plus haut, dans la mesure où ils s’appliquent également à ces éléments. Notez que les éléments que je présente ici ne sont pas les seuls auxquels il faut penser, tous les éléments sur mesure créés dans chaque projet méritent le même niveau d’attention.

Bénéfice additionnel : l’indicateur de focus devient plus visible

De nombreux utilisateurs naviguent sur les sites web avec leur clavier. Pour que ces utilisateurs sachent où se trouve leur curseur, les sites Web et les produits numériques doivent mettre en place un indicateur de focus. Pour ceux qui ne sont pas familiers avec l’accessibilité, le curseur clignotant dans un éditeur de texte est un exemple indicateur de focus.

De plus, comme le résume Sara Soueidan dans son article intitulé A guide to designing accessible, WCAG-compliant focus indicators (traduction : Guide pour la conception d’indicateurs de focus accessibles et conformes aux normes WCAG) :

En fait, un indicateur de focus visible est une exigence pour qu’un site soit considéré comme accessible selon les directives d’accessibilité au contenu Web (WCAG). La suppression ou le masquage des indicateurs de focus constitue une violation et échoue donc au critère de réussite 2.4.7 : Focus visible (niveau A), qui stipule que « toute interface utilisateur utilisable au clavier possède un mode de fonctionnement où l’indicateur de focus clavier est visible. »

L’indicateur de focus n’est donc pas une fonctionnalité optionnelle, mais un élément obligatoire du travail que doivent effectuer les designers et les développeurs.

Comparaison de deux rangées de liens de pagination : à gauche, l'un des liens comporte un petit indicateur de mise au point très proche de l'étiquette ; à droite, un indicateur de focus plus visible, avec une plus grande surface.

Le plus souvent, ces indicateurs suivent la forme de l’élément qui est en focus. L’image ci-dessus illustre ce à quoi ressemblerait l’indicateur de focus en fonction des exemples que j’ai montrés précédemment dans cet article. À gauche, nous pouvons voir qu’avec une petite zone cliquable, il n’est pas vraiment facile de détecter que l’indicateur de focus est visible, alors qu’à droite, avec une zone cliquable plus large, nous pouvons voir qu’il est plus facile d’interagir avec l’élément dans ce mode de navigation également.

Intervenants concernés

Les designers doivent veiller à documenter la taille prévue de la zone cliquable d’un élément, qui ne doit pas nécessairement correspondre à l’espace occupé par l’élément sur l’écran
Les développeurs doivent veiller à mettre en place des zones cliquables et des indicateurs de mise au point plus larges