- Les menus contextuels réduisent le bruit visuel et le coût d’interaction, mais impliquent un compromis entre faible scent d’information et découvrabilité réduite
- Ils conviennent pour regrouper des actions secondaires ou complémentaires liées à un objet précis comme une publication, une photo ou un événement de calendrier, et les icônes kebab (⋮) et meatball (⋯) sont généralement perçues comme « voir plus / actions supplémentaires »
- Si la taille, le contraste ou l’emplacement de l’icône sont médiocres, il arrive souvent que l’icône elle-même passe inaperçue ou que son sens soit mal interprété ; cacher une action importante en fait alors une fonctionnalité clé difficile à trouver, ce qui dégrade l’expérience utilisateur
- Pour les utiliser efficacement, il faut des règles cohérentes, comme n’y mettre que des actions secondaires, les placer près du contenu concerné, ne pas y cacher une ou deux seules actions, distinguer leur rôle de celui du menu hamburger et garantir l’accessibilité
- Un menu contextuel bien conçu peut devenir un outil pour simplifier la mise en page et améliorer la concentration, mais en cas d’abus ou de mauvais usage, il risque d’augmenter la confusion, les clics supplémentaires et la charge d’apprentissage ; il doit donc être utilisé avec prudence
Aperçu des menus contextuels
- Un menu contextuel est un menu qui regroupe un ensemble d’actions associées à un élément d’interface, une zone d’écran, un fragment de données ou une vue d’application précise
- Pour une publication, on peut y trouver Edit, Pin, Delete ; pour une photo, Share, Download, Set as Background ; pour un événement de calendrier, Delete, Reschedule, Duplicate, Invite
- Ces menus servent généralement à garder à portée de main des fonctions secondaires, utiles de temps à autre mais qui n’ont pas besoin d’être visibles en permanence
- Sur desktop, ils sont souvent déclenchés par un clic droit ou un clic à deux doigts sur le trackpad ; sur tactile, par un appui long ; et de plus en plus souvent par les icônes kebab (⋮) ou meatball (⋯)
Perception et limites des icônes kebab et meatball
- Les participants aux études ont globalement compris les icônes kebab (⋮) et meatball (⋯) comme signifiant « il y a plus d’options / d’autres actions cachées »
- Cette perception reste valable sur mobile comme sur desktop, et elle est comprise de manière plus cohérente lorsque les bonnes guidelines sont respectées
- Ces icônes sont perçues comme un interrupteur qui ouvre un ensemble de fonctions ou d’icônes momentanément masquées
- En même temps, ces icônes ont une faible scent d’information : l’utilisateur clique souvent sans pratiquement savoir quelles options concrètes se trouvent derrière
- Lorsque l’icône est trop éloignée du contenu, trop petite ou conçue avec un contraste trop faible, on a observé des cas où le menu contextuel lui-même n’était même pas remarqué
Avantages et compromis des menus contextuels
- Côté avantages, les menus contextuels aident à réduire le bruit visuel, simplifier la mise en page et maintenir le focus
- En contrepartie, ils s’accompagnent de plusieurs problèmes d’utilisabilité
- Découvrabilité réduite (findability) : si l’icône est petite, discrète ou éloignée de la zone de travail, elle devient un élément très facile à manquer
- Manque de scent d’information (Information Scent) : comme il est difficile d’anticiper le contenu du menu, l’utilisateur a du mal à juger s’il vaut la peine de cliquer
- Risque de mauvaise interprétation : si le placement ou l’usage sont mauvais, l’utilisateur peut le confondre avec un indicateur de progression ou un contrôle de carrousel
- Il faut donc décider d’utiliser ou non un menu contextuel en trouvant le bon équilibre avec les contraintes de mise en page, les attentes des utilisateurs et la priorité des tâches
1. Ne mettre dans un menu contextuel que des actions secondaires et non essentielles
- Un menu contextuel n’est pas fait pour des actions principales, fréquemment utilisées, mais pour des actions additionnelles ou de moindre priorité
- Il est recommandé de sélectionner, sur la base de la recherche, les fonctions qui ne font pas partie du flux principal mais sont utilisées avec une certaine régularité, afin de les masquer
- Il est important de ne pas cacher derrière un menu contextuel des actions essentielles et fréquemment utilisées
- Par exemple, dans l’interface de chat d’AT&T, le fait d’avoir placé End Chat dans un menu contextuel est un mauvais exemple de masquage d’une action de sortie essentielle
- Quand une tâche importante est cachée derrière un menu, l’utilisateur peut ne pas trouver la fonctionnalité ou subir une gêne répétée sur des actions qu’il effectue souvent
2. Placer le menu contextuel près du contenu qu’il affecte
- Les utilisateurs interprètent les relations entre éléments à partir de la proximité spatiale ; la position de l’icône du menu contextuel doit donc indiquer clairement à quel objet les actions appartiennent
- Si le menu ne s’applique qu’à un élément précis, l’icône doit être placée dans cet élément ou juste à côté
- Si les actions s’appliquent à un champ entier ou à une transaction entière, il faut les placer près de la zone qui regroupe les informations concernées
- Il faut éviter de placer l’icône à un endroit aléatoire ou dans une position incongrue, sans lien apparent avec aucun élément
- Comme dans l’exemple de Ramp.com, une petite icône kebab à faible contraste placée en bas à droite de l’écran rend difficile de savoir à quel élément elle se rapporte, ce qui nuit à la fois à la découvrabilité et à la pertinence contextuelle
3. Garantir la visibilité avec une taille et un contraste suffisants
- Les icônes de menu contextuel sont souvent rendues trop discrètes pour être vraiment visibles, en particulier dans des écrans denses ou des applications complexes
- L’icône doit avoir une taille et un contraste suffisants et, si possible, rester visible en permanence, sans dépendre du survol
- Il est recommandé de suivre des guidelines de design visuel éprouvées, avec un contraste de couleur net et des bordures ou arrière-plans bien définis
- Le fait de ne l’afficher qu’au survol ou de la rendre excessivement pâle au nom du minimalisme nuit à la découvrabilité
- Comme dans l’exemple de Ramp, une icône kebab petite, à faible contraste et éloignée est facile à manquer
- À l’inverse, comme dans l’app mobile de Rippling, un encadrement, des points noirs sur fond blanc et un contraste fort améliorent la perception de sa cliquabilité et la scent d’information
4. Regrouper uniquement des actions liées entre elles
- Les options d’un menu contextuel doivent regrouper des actions qui appartiennent logiquement à un même objet, élément ou niveau hiérarchique
- Par exemple, pour un fichier, on n’y mettra que des actions liées au fichier, comme Duplicate, Share, Delete
- Si possible, il est aussi recommandé d’exposer directement certaines actions à côté de l’icône du menu, afin d’ajouter une scent d’information laissant deviner quel type d’actions supplémentaires est caché
- Il faut éviter de mélanger dans un même menu des actions globales et des actions liées à un élément spécifique, ou d’y mettre des actions sans rapport entre elles
- Ce mélange nuit à la clarté, à la facilité à trouver, à la mémoire spatiale et à la charge cognitive
- Comme dans l’app desktop de Slack, le fait de ne cacher dans le menu d’un message que des actions liées au message, tout en plaçant ailleurs les actions portant sur l’ensemble du fil constitue un bon exemple
5. Garder les icônes et leurs comportements cohérents dans toute l’interface
- Dans l’ensemble du produit, l’icône de menu contextuel doit conserver la même fonction, le même comportement et la même apparence
- Si vous choisissez d’utiliser une icône meatball ou kebab pour les menus contextuels, elle ne doit pas être réutilisée pour d’autres usages et doit rester réservée à cette signification
- Il faut éviter d’utiliser la même icône, à un endroit pour déployer du contenu caché, ailleurs pour ouvrir un pop-up, et ailleurs encore pour ouvrir un panneau latéral
- Ce type d’usage nuit au modèle mental et à la confiance des utilisateurs, et réduit leur capacité d’apprentissage et de mémorisation
- Dans les résultats de recherche Google, on voit par exemple que l’icône kebab des résultats sponsorisés ouvre la modale My Ad Center, tandis que celle des résultats ordinaires ouvre un panneau latéral, avec des comportements et emplacements incohérents
- En conséquence, des actions utiles comme Like, Block, Report, Share, Save restent cachées et peu visibles, et l’utilisateur a du mal à prévoir ce qui se passera en cliquant sur la même icône
6. Si l’icône est ambiguë, renforcer son sens avec un tooltip ou un label
- Les icônes kebab et meatball sont des icônes abstraites dont la signification intrinsèque est faible ; un simple indice textuel peut donc améliorer fortement l’utilisabilité
- Si possible, il vaut mieux ajouter un label visible ou un tooltip au survol pour indiquer plus concrètement quel type d’actions le menu contient
- Par exemple avec une formulation explicite qui inclut l’élément concerné, comme Post Actions ou Message Options
- Il faut éviter des libellés vagues comme Options, ou des libellés comme Ellipses qui ne décrivent que la forme de l’icône
- Comme dans l’exemple de Patagonia, le fait d’associer une action de zoom sur image à une icône meatball et d’afficher au survol le label Ellipses est un échec en matière de transmission du sens
- À l’inverse, dans l’app desktop de Notion, un tooltip au survol comme “Style, Export, and more…”, qui suggère concrètement les familles d’actions présentes dans le menu, constitue un bon pattern qui améliore fortement la scent d’information
- Ce tooltip varie selon le contexte et le contenu du menu
7. Réserver l’icône de menu contextuel aux actions, pas à l’expansion du contenu
- Les icônes meatball et kebab sont comprises comme le signal de l’ouverture d’actions ou d’options supplémentaires ; il vaut donc mieux ne pas les utiliser pour développer du texte ou agrandir une image
- Pour déplier un texte tronqué ou agrandir une image, il est recommandé d’utiliser un label textuel explicite comme Read more ou Expand
- Comme dans l’exemple des avis Etsy, ouvrir le texte complet d’un avis via une icône meatball sous l’avis est un mauvais exemple de faible scent d’information
- Le même type de fonctionnalité, proposé dans les avis Google sous la forme d’un lien texte More, convient mieux à une action d’expansion contextuelle
- L’icône kebab en haut des avis Google, qui ne propose que l’action Report, enfreint aussi la guideline indiquant qu’il ne faut pas cacher seulement une ou deux actions
8. Ne pas utiliser un menu contextuel pour une ou deux actions seulement
- Quand c’est possible, s’il n’y a qu’une action ou très peu d’actions à proposer, il vaut mieux les afficher directement dans l’interface
- Cacher une ou deux options derrière un menu apporte très peu de gain d’espace tout en augmentant le nombre de clics et le coût de découvrabilité
- C’est particulièrement vrai lorsqu’il existe déjà des icônes standard bien connues, comme “x”, une corbeille ou un drapeau de signalement : les cacher derrière une icône meatball ou kebab n’apporte rien
- Dans l’exemple de Weather.com, cliquer sur l’icône kebab la transforme en bouton noir contenant uniquement Delete
- Dans ce cas, l’espace utilisé à l’écran est pratiquement le même que si Delete avait été affiché directement dès le départ, ce qui rend ce masquage inutile
- À l’inverse, dans l’exemple de Pinterest, au survol d’un pin, des actions importantes comme Save (bouton en haut à droite) et Share (icône en bas à droite) sont affichées directement
- C’est un bon pattern, car il ne cache pas les actions importantes derrière un menu contextuel et les rend utilisables immédiatement quand nécessaire
9. Ne pas utiliser l’icône hamburger comme déclencheur de menu contextuel
- L’icône hamburger (☰) est largement reconnue comme le symbole de la navigation globale ou principale
- À l’inverse, les icônes kebab et meatball (⋮·⋯) se sont imposées comme le pattern pour des actions contextuelles rattachées à un élément ou un item précis
- Il est donc recommandé de réserver l’icône hamburger à la navigation globale du site ou de l’application, et d’utiliser les icônes kebab ou meatball pour les actions contextuelles
- Il faut éviter de placer un hamburger près d’un contenu pour y mettre des actions contextuelles, ou au contraire d’utiliser un kebab ou un meatball pour des actions globales comme les paramètres du compte ou les préférences générales du site
- Ce mélange brouille le sens de chacun de ces patterns et casse le modèle mental des utilisateurs, provoquant hésitation et oublis
- Dans l’exemple du chat Banana Republic, l’icône hamburger en bas à gauche de la fenêtre ouvre une structure qui ne contient qu’une seule action contextuelle : Save Transcript
- Cela enfreint non seulement la règle qui réserve le hamburger à la navigation globale, mais aussi la guideline 8, puisque une seule action y est masquée
10. Garantir absolument l’accessibilité au clavier et au lecteur d’écran
- Les menus contextuels doivent être utilisables aussi par les personnes qui n’utilisent ni souris ni tactile, ce qui suppose une structure qu’on peut ouvrir et parcourir au clavier et au lecteur d’écran
- Le menu doit pouvoir être ouvert et parcouru avec Tab, Enter et les touches fléchées, et les éléments qu’il contient doivent aussi pouvoir être lus par le lecteur d’écran, recevoir le focus et être activés
- Il faut éviter les menus accessibles uniquement au clic ou au tap, ainsi que les interactions personnalisées qui cassent les patterns d’accessibilité standard
- Une conception qui donne la priorité à l’accessibilité améliore l’efficacité non seulement pour les utilisateurs en situation de handicap, mais aussi pour les power users, tout en contribuant au respect des standards de design inclusif
Conclusion
- Les menus contextuels sont un outil puissant pour garder une interface simple tout en proposant des actions complémentaires au moment opportun
- Ils sont particulièrement utiles pour clarifier la mise en page et ouvrir des options supplémentaires uniquement quand on en a besoin, sans quitter sa tâche
- Mais comme leur structure limite la découvrabilité et la clarté, leur usage demande toujours de la prudence
- Il faut les réserver à de vraies actions secondaires et concevoir avec soin l’emplacement, la cohérence, la scent d’information et l’accessibilité
- Le message essentiel est de trouver un équilibre entre minimalisme visuel et utilisabilité réelle
- Les menus contextuels sont les plus efficaces lorsqu’ils servent à ordonner l’interface sans masquer le flux principal
Aucun commentaire pour le moment.