L'icône du hamburger - menu ou faire glisser les primes?
Il semble y avoir une différence de sens pour cette icône émergente:
Pour certains, cela signifie "menu", pour d'autres, il représente un "élément déplaçable" (de préférence aux petits points utilisés dans GMail par exemple).
Le contexte suffit-il à lui seul à lever toute ambiguïté?
Le contexte est essentiel, et vous devrez probablement apprendre ce que cela signifie pour chaque contexte. Même lorsque vous savez qu'il s'agit d'un menu, il n'est pas clair de quel type de menu il s'agit. Prenez Chrome. Sous Windows, il n'y a que le hamburger, tandis que sous Mac OS, il y a aussi le menu principal supérieur, comme dans toutes les Mac Apps. Le Hamburger ne dit pas de quel type de menu il s'agit.
Le icône de poignée déplaçable est en plus du cas de la barre de défilement, également courant pour réorganiser les listes, par exemple en appuyant sur Modifier dans une liste dans certaines applications iOS, lorsque l'icône de suppression apparaît sur un côté, et la "poignée déplaçable "icône de l'autre. Qu'est-ce qui dit que cela ne signifie pas qu'il y a un menu sur chaque ligne? Il faut essayer, savoir.
Il vient de ce que les interrupteurs physiques et glissables ont souvent un ensemble de lignes, pour une meilleure adhérence.
En tant que icône de bouton, je dirais que trois lignes ont plusieurs significations. C'est un symbole si simple qui ressemble à une liste ou à un ensemble de lignes (de texte).
Trois lignes sont également utilisées dans l'édition de texte pour les colonnes, les listes et le texte Justifier vs par ex. aligner à gauche. Il y a probablement plus d'utilisations pour cela.
Son utilisation en tant qu'icône de menu vient du fait qu'un menu est souvent également composé de quelques lignes de texte. Lorsque le menu est à la place une grille, le bouton de menu peut également ressembler à une grille.
Ce menu de la grille Google était auparavant sous la forme d'une barre de menu horizontale en haut de la page.
La représentation émergente d'un menu par le hamburger vient du besoin de boutons comme ceux-ci, provenant de la tendance à cacher les "menus principaux" traditionnels, qui résidaient en haut de la fenêtre. Les écrans d'appareils plus petits n'ont pas de place pour toutes les options de menu. Les conceptions s'éloignent de "facilement accessible à l'écran" et du "nombre de clics le plus bas" et se dirigent vers la clarté, et se concentrent davantage sur les éléments principaux à l'écran. Dans les applications qui ne dépendent pas entièrement des menus, le type d'utilisateurs qui utilisent réellement les options des menus sera toujours en mesure de les trouver derrière ce bouton comme directement à l'écran.
Pour répondre à ta question:
- Les trois lignes doivent être situées sur quelque chose qui a du sens à glisser, pour être interprétées comme une poignée déplaçable.
- Dans toute application qui manque de menus à l'écran, il est probable que le menu se trouve derrière ce bouton.
- Dans un éditeur de texte, s'il apparaît dans un bouton à côté de l'icône Alignement à gauche, ce n'est probablement pas une barre de défilement. ;) Etc.
Il est donc difficile de trouver/créer des applications où cela se révèle ambigu. Les exemples sont bien sûr les bienvenus!
J'observe que le noyau du problème est que ce sont simplement deux icônes sémantiquement différentes, à savoir
Grab handle est un symbole qui reproduit a une zone de friction pour un pouce ou un doigt
Menu Hamburger est un symbole qui représente une liste d'éléments de menu
ces deux icônes sont tombées accidentellement sur le même symbole. Le fait qu'ils se ressemblent est purement fortuit, inutile et plutôt regrettable pour UX.
Question clé Y a-t-il une bonne raison de dépendre uniquement du contexte pour lever l'ambiguïté des icônes? Non. Voici un exemple de poignée de déplacement qui est une icône distincte.
Il doit être au milieu d'une barre verticale (comme une barre de défilement) pour être considéré comme un élément déplaçable.
Test d'affordance
Avant de répondre, j'aimerais poser une question (en espérant que vous n'êtes pas un utilisateur Mac). Comment interagiriez-vous avec les deux flèches apparaissant en haut à droite de cette fenêtre?
Le fait que l'icône rappelle le curseur de redimensionnement, et le fait qu'il ne soit pas contenu dans un bouton, fait que beaucoup de gens le font glisser.
The Button Affordance gagne son icône
Je suis à peu près sûr que l'icône Origin était la similitude visuelle avec la 'vue en colonne' qui s'ouvre lorsque vous appuyez sur le bouton (voir ci-dessous)
Cependant, comme Sara l'a mentionné, la plupart des gens connaissent les lignes des barres de défilement ou d'autres éléments déplaçables.
Comme l'accessibilité est définie comme "une propriété dans laquelle les caractéristiques physiques d'un objet ou d'un environnement influencent sa fonction", vous pouvez affirmer qu'avant la popularité des icônes de hamburger, leur accessibilité est élément déplaçable.
Cependant, le bouton dans lequel réside l'icône signifiera aux gens que ce n'est rien d'autre qu'une icône de bouton, et la possibilité d'un bouton est de cliquer (en dehors du logiciel de conception d'interface utilisateur, les boutons ne peuvent presque jamais être traîné). Donc, l'abordance est maintenant élément cliquable. Cela changera radicalement si nous voulons supprimer les limites du bouton du bouton - l'icône permettra alors de faire glisser.
Si ces icônes étaient conçues pour permettre la traînée, elles ressembleraient à ceci (ce qui pourrait être un meilleur design - en utilisant la manipulation directe):
Voici une étude sur le taux de conversion avec les menus hamburger: http://conversionxl.com/testing-hamburger-icon-revenue/
Je pense que Luke Wroblewski a déclaré le même résultat il y a une fois.