Alors, quelle est l’icône le plus fiable montrer l’expansion et l’effondrement pour les accordéons ? Y a-t-il vraiment une différence notable entre les carets, les chevrons, les flèches et les triangles ?
Eh bien, la recherche montre qu’il existe effectivement une certaine différence. Mais ce qui est plus intéressant c’est que les menus partagés sont nocifspourquoi il est préférable de ne pas avoir d’icônes et d’étiquettes de texte liées à différentes actions, et pourquoi le curseur est le choix d’icône le plus sûr. Allons-y !
Aucune icône = ouverture de la page
Les résultats ne sont pas très surprenants : sans aucune icône utilisée, les utilisateurs s’attendent à ce qu’en appuyant sur l’élément de menu, ils accèdent directement à une nouvelle page. Les utilisateurs ont souvent du mal avec icônes personnalisées car ils ne signalent pas clairement qu’ils vont ouvrir un accordéon. Et les gens ont tendance à appuyer de manière assez égale sur l’icône et sur l’étiquette pour la plupart des icônes.
De nombreux modèles (comme celui ci-dessous) ont tendance à légèrement compliquer les choses à l’excès en ajoutant des flèches et des carets pointant partout, selon l’état de l’accordéon. Mais généralement, nous n’avons pas besoin d’utiliser une flèche pour indiquer un lien vers la catégorie.
La règle générale est très simple : s’il s’agit d’un lien, le moyen le plus simple et le plus efficace est de souligne-le simplement – sans aucune flèche, signe d’insertion ou autre icône. Ce n’est peut-être pas particulièrement excitant, mais cela fonctionne parfaitement à chaque fois.
Comportement confus avec les flèches ▶ et les boutons partagés
Utiliser une icône de flèche orientée vers la droite ▶ n’est-ce pas associé à l’attente d’accéder directement à une nouvelle page. Et avoir la même icône pointant vers le bas ▼ n’implique pas nécessairement qu’un accordéon va s’ouvrir en appuyant/cliquant.
C’est une bonne idée de éviter les boutons fendus pour les accordéons – où l’étiquette de texte renvoie directement à une page, mais l’icône ouvre l’accordéon. Au lieu de cela, il est beaucoup plus fiable de permettre aux utilisateurs de cliquer sur une catégorie principale et d’afficher le menu ; et pour accéder à la page de catégorie, nous ajoutons un lien vers celle-ci dans le menu.
Plus +/− et les flèches ↓/↑ sont compris, mais peuvent être mal compris
Pour les accordéons, nous utilisons généralement +/− ou des flèches ↓/↑ pour signaler les états développés et réduits, et cela fonctionne généralement bien. Cependant, les deux ont beaucoup d’interprétations différentes. Plus + peut signifier n’importe quoi, depuis l’enregistrement pour plus tard jusqu’à l’ajout au panier en passant par le zoom avant, et peut être particulièrement déroutant pour la navigation à plusieurs niveaux, avec plusieurs niveaux ouverts en même temps.
Les flèches ↓/↑ peuvent signifier faire défiler ou glisser ou trouver la correspondance suivante, mais aussi un saut vers une partie particulière d’une page. Les flèches plus et les flèches sont bien comprises et fonctionnent, mais selon la conception, cela peut prêter à confusion, principalement parce que ils sont surchargés.
Conclusion
Le choix le plus sûr consiste à utiliser le curseur/triangle pointant vers le bas ▼ par défautet remplacez-le par un curseur pointant vers le haut ou un curseur pointant sur le côté ▶ lors de l’interaction. Si vous avez besoin d’une alternative, alors +/- fonctionne généralement bien aussi.
Mais nous n’avons certainement pas besoin d’icônes ou de flèches supplémentaires pour indiquer où vont les liens. Il en va de même pour les menus fractionnés, qui produisent souvent plus d’erreurs que d’aide. Au lieu de cela, nous avons un bouton ou une liste déroulante qui fait exactement une chose : affiche toutes les options et permet aux utilisateurs d’explorer.
Et si vous avez besoin d’un lien direct, nous lions le titre directement à la page et souligne-le. Le plus souvent, plus simple est mieux.
Note de l’éditeur
Nous espérons que ces merveilleux projets vous seront utiles, mis en place par de merveilleux créateurs. Un merci amical à tous ceux qui partagent leur travail avec des gens à utiliser et à apprendre ! C’est l’une des raisons pour lesquelles nous aimons vraiment le Web et les personnes qui le construisent et le conçoivent. 💚
Chez Smashing, nous aimons le Web. C’est pourquoi nous publions des articles et des livres, organisons des ateliers et des événements autour de tout ce qui concerne le Web. Nous aimons voir ce que nous pouvons tous faire pour rendre le Web plus accessible et plus utilisable. Nous aimons également organiser et assister à des événements en ligne – avec remises amicales pour les grands groupes (5+ participants) et les écoles et étudiants. Intéressé? Envoyez-nous simplement un e-mail et nous réglerons le problème !
(ouais)
