Comment résoudre le problème de l'icône Hamburger
L'icône hamburger-trois petites barres utilisées pour indiquer un lien vers un menu - est l'une des techniques les plus controversées sur le Web en ce moment. Les designers, nous dit-on, détestent tous ça; les clients, nous disons à tout le monde, détestent aussi. Pourquoi alors, est-ce partout?
L'icône de hamburger est facilement évolutive et s'intègre parfaitement dans une grille de pixels. C'était à l'origine une icône de liste qui a été intégrée dans son rôle actuel, mais comme un menu est simplement une liste d'options, il est sémantiquement correct d'utiliser l'élément de liste de cette manière.
Il y a eu énormément de débats, de tests A / B, de blogs et d’études d’utilisateurs sur le sujet, mais ces études se concentrent presque toujours sur la conception d’applications. Lorsque l’icône de hamburger est utilisée dans la conception de sites Web, cela indique un problème beaucoup plus important.
Le problème avec l'icône hamburger
Il y a beaucoup de designers qui s'interrogent sur la valeur de l'icône du hamburger. Il est souvent vu comme une icône de style iOS même si elle a été utilisée de cette manière avant qu'Apple ne l'adopte.
Il existe en effet de nombreuses preuves contradictoires quant à savoir si l'icône de hamburger est utilisable comme indication d'un menu. Certains concepteurs affirment que l'icône est facilement identifiable par un groupe démographique plus jeune, d'autres suggèrent qu'un groupe démographique plus âgé le reconnaît s'il possède une connaissance du Web. La seule conclusion que nous pouvons réellement tirer de cette preuve est que les tests d’utilisabilité se sont révélés peu concluants, les tests parallèles donnant souvent des résultats contradictoires.
Ce qui est universellement accepté, c’est que les utilisateurs ne reconnaissent pas l’icône hamburger comme un lien unique, probablement parce qu’il est conçu pour ressembler à un groupe de liens, plutôt qu’à une seule chose. Quelque chose qui est soutenu est que entourant l'icône hamburger avec une bordure, ou lui donnant un arrière-plan, de sorte qu'il ressemble plus à un bouton, j'ose dire, plus skeuomorphic-entraînera plus de clics.
Plus de problèmes avec l'icône hamburger
Outre la conception de l’icône elle-même, l’utilisation d’une icône de hamburger pose également problème.
Tout d'abord, et peut-être de manière plus significative, l'icône hamburger ajoute une action supplémentaire à votre navigation. quand il faut un clic pour atteindre une page particulière, il en faudra maintenant deux. La règle de base pour les concepteurs de sites Web a toujours été un maximum de trois clics (chaque fois que possible), loin de résoudre un problème de navigation, la technique des icônes de hamburger échange simplement un problème pour un autre. Bien sûr, ce n’est pas seulement un problème pour l’icône hamburger, c’est un problème pour toute navigation présentée de cette manière. Vous pouvez utiliser le mot "Menu" à la place de l'icône du hamburger et vous rencontrerez la même obstruction. La différence réside dans le fait que l'icône du hamburger ne peut être utilisée d'aucune autre manière.
La technique du hamburger dissimule également son contenu. Du point de vue de l'UX, les utilisateurs ne devraient pas avoir à entreprendre une action pour savoir quelles actions ils peuvent entreprendre. Il est trop facile d'oublier de «partager sur Twitter» ou de «passer à la caisse» lorsque ces options ne sont pas immédiatement devant vous. Les utilisateurs ne vont tout simplement pas chercher un lien qu'ils ne connaissent pas.
Enfin, la technique de l'icône hamburger masque l'état actuel de votre site et la position de l'utilisateur dans celui-ci. Les états bas dans un menu fournissent des informations contextuelles à un utilisateur que la technique de l'icône de hamburger cache.
Qu'est-ce que l'icône hamburger fait bien?
Étant donné que l'icône de hamburger est universellement détestée et entraîne une série de problèmes, pourquoi est-elle utilisée partout?
D'après mon expérience, certainement parmi certaines données démographiques, l'icône des hamburgers a récemment atteint le point de reconnaissance. Les études qui réfutent avoir un an ou plus et une année sont longues sur le web.
En fait, l’icône de lien est beaucoup plus reconnaissable que l’icône de lien ou l’icône de partage , dont les formes définitives doivent encore apparaître. L'icône hamburger est cohérente sur un nombre quelconque de conceptions différentes.
Plus important encore, l’icône de hamburger fait ce qu’elle a à faire: elle nous permet d’économiser une tonne d’écrans immobiliers. Si un client vous présente une liste d'éléments à ajouter à un menu, les déplacer hors de l'écran et y accéder est un moyen grossier mais efficace de faire de la place au contenu que le client souhaite également.
Je voudrais dire que l'icône hamburger résout le problème mieux que d'autres solutions, mais ce n'est pas vrai. Au lieu de cela, je dirai que l’icône de hamburger résout le problème moins mal que d’autres solutions.
La racine du problème
L'icône hamburger a tendance à être utilisée parce que les concepteurs, ou plus souvent les clients, ne sont pas totalement engagés dans une approche d'abord mobile. Ils veulent un site «régulier», mais ils sont coincés sur le téléphone de leur petite-fille.
Les opposants à l’icône du hamburger ont tendance à le remplacer par le mot «Menu». Ce faisant, ils manquent complètement le point. L'icône hamburger a, comme ça ou pas, acquis son sens maintenant, mais les utilisateurs comprenant ce qu'est le bouton ne résolvent pas le plus gros problème, à savoir que cacher notre navigation, cacher les options de nos utilisateurs, est un acte de soi terrible -sabotage.
En bref, l’icône de hamburger est un symptôme de notre échec collectif à adopter sans réserve tous les aspects de l’approche axée sur le mobile.
Une meilleure solution
Pour résoudre le problème des hamburgers, nous devons accepter que le Web tel que nous le connaissons ne fonctionne pas. L'essor du Web mobile signifie bien plus que la réduction du nombre de colonnes utilisées et la suppression de certains des fichiers image les plus lourds.
Le Web mobile est utilisé différemment du Web du passé. Le Web mobile existe dans le contexte d'applications dédiées, et les utilisateurs s'attendent à ce que le Web soit vécu de la même manière.
L'application de Facebook a tristement remplacé son icône de hamburger par une barre d'onglets, ce qui a permis d'améliorer les conversions. Mais Facebook a fait quelque chose de beaucoup plus important que les conceptions de menus d'échange. Récemment, ils ont publié leur application Messenger, et le gros problème à ce sujet est qu’ils avaient déjà une application parfaitement fonctionnelle et populaire avec laquelle ils auraient pu intégrer la messagerie. Facebook a compartimenté ses fonctions, en se concentrant sur le rôle de chaque application, ils sont parvenus à deux applications simples, au lieu d’un seul. La fonctionnalité réduite se traduit par un ensemble réduit d'options de menu et un besoin moindre d'un menu de hamburger.
Les bonnes applications sont très ciblées et elles ont évolué de cette manière grâce à des tests utilisateur beaucoup plus rigoureux que ceux auxquels le Web est soumis. Pour créer une expérience de style application, nous devons simplifier nos sites, simplifier à nouveau et simplifier un peu plus. Si nécessaire, décomposez votre architecture en petits morceaux gérables, presque des microsites. Lorsque nous présentons à nos utilisateurs un ensemble simple d'options, le problème d'un menu complexe ne se pose jamais.
L'utilisation de l'icône de hamburger, c'est comme gifler un pansement sur une blessure: il le remet en place, mais sous quelque chose est toujours cassé.
Ce n’est que si nous adoptons pleinement une approche axée sur le mobile et l’appliquons non seulement à notre conception, mais à notre contenu et à notre architecture de l’information, que nous consignerons le menu des hamburgers dans l’histoire.
Image / vignette en vedette, utilisations Image hamburger via Mononc 'Paul