Lorsqu’on réalise un design pour le web ou pour une application, les composants interactifs doivent être perçus aisément. Pour ce faire, on utilise des repères visuels, des conventions, une adhésion à des standards du web. Le « clic » ou le « tap » doivent être évidents. Ils doivent « sauter aux yeux ». Jakob Nielsen dit même que « La vie est trop courte pour cliquer sur des choses que vous ne comprenez pas ».
Il faut économiser le nombre de clics des utilisateurs. Pourquoi devraient-ils ruiner les boutons de leur souris ou le bout de leurs doigts parce qu’un design est mal conçu?
Les repères visuels (position, bordure, texte, …) permettent de percevoir l’utilisation d’un objet. Norman Nielsen nomme cela « l’affordance perçue » : ce qui est perçu comme étant permis, au regard des repères qui délimitent cet objet). Les signifiants doivent répondre aux comportement attendus des objets, afin d’éviter les doutes, les errements, les frustrations…
La transformation du design, ou plutôt sa simplification à travers le design plat, rend parfois plus compliquée l’interprétation de ce qui est cliquable ou non. Les objets en 3D étant supprimés, les utilisateurs sont souvent confrontés à de nouvelles difficultés de décodage.
Hoa Loranger a énuméré une série de principes qu’il est bon de retenir à titre de lignes-guides. Je les ai un peu redistribués à ma façon.
Liens textuels
- Du bleu d’abord
Le bleu reste la couleur la plus sûre pour signaler des liens. D’autres couleurs fonctionnent tant que les liens se détachent clairement du reste du corps du texte. Il est préférable de se confiner au bleu à moins que l’on ait une raison valable. La couleur bleue sera proscrite pour des éléments statiques. On évitera les couleurs qui manquent de contraste (jaune sur fond blanc par exemple). - Eviter les mélanges de genres
Les éléments statiques ne doivent pas avoir la même couleur que les hyperliens : imaginez des titres bleus non cliquables et des liens bleus cliquables sur la même page et préparez-vous à une belle crise d’énervement! - Tester la couleur
On testera la couleur des liens pour être certain que les daltoniens peuvent les repérer. - Le bon usage du soulignement
La position des liens peut aider à déterminer si le soulignement est nécessaire ou non. Les menus et les listes, en particulier en zones périphériques, ne demandent pas de soulignement : la position informe sur leur cliquabilité. Le soulignement sera aussi proscrit sur les éléments non cliquables. - Consistance
Le traitement des liens devra être consistant sur tout le site : évitez des liens bleus sur une page, des liens en orange sur la suivante, …
Boutons
- Un bouton doit ressembler à un bouton
Les boutons doivent ressembler à des boutons physiques : il est préférable d’employer une forme rectangulaire avec des coins arrondis, si on renonce à l’aspect 3D.
En design plat (flat design), les composants interactifs doivent apparaître comme étant clairement cliquables, même sans utiliser des artifices tels les dégradés, les ombres, … L’espace réservé autour du bouton aide à son repérage. - Ce qui n’est pas un bouton ne doit pas ressembler à un bouton
Tout élément non cliquable ne devra pas être représenté sous forme de bouton : pas de titres avec des fonds colorés, par exemple.
On se focalisera donc sur la hiérarchie du contenu de la page.
On évitera le multiplication de boîtes colorées de tailles variées sur une même page car cela crée des conflits de zones concurrentes qui altèrent la lisibilité et accroissent les difficultés.
Images et graphiques
- Zoomer et agrandir
Les images doivent pouvoir s’agrandir au clic ou au tap. - Associer pour mieux cliquer
Les éléments qui sont associés doivent être cliquables : cela permet d’étendre la taille de la cible et d’augmenter les chances de capturer une intention de clic. - Eviter des actions multiples
Evitez les appels à l’action (CTA) multiples sur une image unique, à moins que les options ne soient clairement présentées, sous forme de liste de liens ou de boutons avec labels. Evitez plus de trois options sous peine de vous heurter au paradoxe du choix : plus il y a d’options, moins on a envie de choisir et de cliquer.
Icônes et symboles
- Reconnaissance et conventions
Les icônes cliquables doivent toujours être reconnaissables immédiatement. Elles doivent être ressemblantes ou elles doivent avoir acquis une valeur de convention. Si ce n’est pas le cas, elles doivent s’accompagner d’une aide visuelle telle un label textuel. - Limiter l’usage des flèches
Une flèche peut aider à suggérer la cliquabilité si aucun repère visuel n’est présent. Cette approche n’est guère conseillée car la flèche n’est pas un repère standardisé et est très subtile à reconnaître pour certaines personnes. Il faut en user avec logique et parcimonie.
D’après : Beyond Blue Links: Making Clickable Elements Recognizable, Hoa Loranger, 8 mars, 2015
