Burger menu, approche-t-on l’indigestion ?

2

01_burger menu image-1

L’ère du mobile first a amené bon nombre d’ux designers à repenser l’ergonomie des interfaces sur ces devices (45% de la navigation Internet se fait via Smartphones et tablettes).

Problématique majeure : le manque de place sur ce type de terminaux (desktop : 1024px  VS mobile : 320px). Pour répondre à cette contrainte l’icône s’est entre autre imposée comme une norme (home-page, my cart, magnificent glass, my account…) notamment afin d’accéder au menu de navigation. Le burger menu, sandwich icon ou encore nav icon (☰), s’est ainsi largement démocratisé comme l’icône de navigation de référence. Alternative à la traditionnelle barre de navigation, son utilisation massive, parfois maladroite, à la fois sur mobile et desktop soulève aujourd’hui différents types de questions et débats.

02_tailles e¦ücrans

Genèse d’une icône qui s’est imposée comme un
best of

Si la démocratisation du burger menu est assez récente, son apparition remonte quand à elle à plusieurs décennies… C’est en effet d’après cette source, au début des années 1980, que son papa, Norm Cox, designer de Xerox Star lui donne naissance. L’objectif étant selon le créateur d’être le symbole d’un menu, simple, facilement identifiable, englobant différentes rubriques pour favoriser un gain de place.

03_burger-xerox

Délaissé pendant plusieurs années, son apparition refait surface vraisemblablement lors de la sortie des premiers smartphones. Ce serait en effet Apple, selon la source précédemment citée qui réintroduit ce principe de navigation pour son application Voice.

C’est ensuite Facebook qui en 2008 pour son appli mobile, reprend ce principe de navigation par le biais d’une icône qui ne cessera de muter au fil des années, ce qui s’avèrera assez désorientant côté utilisateur. Réseau social numéro 1 à travers le monde avec aujourd’hui 1,49 milliards d’utilisateurs actifs, Facebook a très largement participé à la démocratisation de ce symbole, si bien que bon nombre d’UX designers ont par la suite fait du burger l’une des icônes incontournables de navigation sur mobile, tablettes et même desktop…

04_e¦üvolution-burger-fb

Un classique qui fait débat…

Si les atouts du burger comme cités précédemment sont incontestables (gain de place, simple et facilement identifiable donc favorisant l’action utilisateur), son utilisation à toutes les sauces font de lui une référence parfois indigeste.

  • Un symbole qui n’est pas figé en terme de représentation

À l’origine représenté à l’aide de 3 barres, symbolisant une notion de liste de rubriques, le burger menu dispose cependant d’un nombre important de « variantes » (cf évolution du burger menu Facebook), rendant son interprétation parfois peu évidente côté utilisateur.

C’est en effet ce que révèle un test utilisateur. Au cours de ce test, quatre « variantes » de l’icône menu ont été analysées.

05_user-test-burger

Les résultats de ce test révéleront que l’icône « menu + border » est la plus performante suivie, par le symbole « menu + burger + border », tandis que le picto « burger + border » arrive en troisième position.

Le texte facilite donc l’interprétation du symbole, mais ne règle malheureusement pas la contrainte de place. Il est en effet recommandé d’utiliser une taille de police d’au moins 14px pour une visibilité correcte sur mobile, ce qui se révèle au final plus important en terme de place que la simple utilisation d’un burger menu.

Ces multiples représentations de l’icône font aujourd’hui l’objet de questionnements tant du point de vue utilisateur qu’auprès des experts UX… À quand un consensus global afin d’établir une représentation graphique unique et distinctive ?

  • Quand le burger menu joue à cache à cache avec l’utilisateur

Tantôt en haut à gauche, tantôt en haut à droite ou encore carrément en bas (plus rare), d’une plateforme web à une autre le burger ne semble pas encore savoir où trouver sa place…

 06_burger-position

Même s’il faut reconnaître que le burger se place la majeure partie du temps en haut à gauche de votre smartphone, cette position n’est peut-être pas la plus pertinente afin de faciliter l’action utilisateur. En effet, si l’on se fie aux touch zones sur mobile et tablette on peut vite se rendre compte que le coin gauche sur le haut du smartphone reste la partie la moins accessible côté utilisateur. Quitte à placer le burger sur la partie supérieure de l’écran le coin droit semble plus pertinent.

07_TOUCH-ZONES

D’autre part, en prenant en compte la taille des derniers modèles de smartphones, il est intéressant de souligner que la taille des écrans ne cesse de s’allonger. L’accès au haut de l’écran y est ainsi plus complexe. On peut donc légitimement se questionner là aussi sur la pertinence de placer le menu de navigation sur cette zone de l’écran.

Enfin, certaines applis sont quand à elles encore plus déstabilisantes pour l’utilisateur, dans la mesure où celles-ci ne positionnent pas le burger sur zone fixe en fonction du niveau de rubrique sur lequel on navigue.

08_spotify-burger
  • Une sur-utilisation du symbole sur desktop

En s’imposant sur mobile et tablette, le burger menu a vu son utilisation se démocratiser également sur desktop. Ici encore, son utilisation bien que parfois pertinente peut susciter certaines interrogations…

L’enjeu de l’utilisation du burger sur desktop répond là aussi à un objectif de gain de place. Sa présence s’est imposée sur de nombreux sites de médias dont le nombre de thématiques et/ou les niveaux de rubriques sont trop importants pour pouvoir être affichés correctement (esthétique et/ou pratique) sur une unique page.

Par ailleurs, afin d’immerger l’utilisateur dans un univers spécifique certaines marques ont aussi recours au burger (storytelling de marque/produit). Ces plateformes généralement composées d’images full screen ou encore de vidéos en arrière plan ont pour but de plonger l’internaute au cœur de l’expérience de marque. Il s’agit de capter durablement l’attention de l’utilisateur dans un premier temps et ne pas le distraire au travers de différentes rubriques visibles comme c’est le cas sur les barres de navigation « classiques ».

09_site_immersif_absolut

http://www.absolut.com/us/oak/

Malgré certains avantages notables, l’utilisation du burger menu sur desktop pose quelques inconvénients non négligeables.

En effet, lorsque l’on sait que le temps d’attention d’un utilisateur sur le web est comparable à celui d’un poisson rouge, il est déterminent de pouvoir guider rapidement celui-ci dès son arrivée sur votre page. Et c’est justement ici que le recours au burger menu peut poser de nouveaux problèmes.

– L’une des erreurs récurrentes dans l’utilisation du burger menu sur ce type de device est que celui-ci n’est que très rarement adapté en terme de dimensions. Il est en effet souvent bien trop discret afin d’être rapidement identifié. À la suite de plusieurs tests sur différents sites via l’inspecteur web, on peut effectivement vite remarquer que sa taille est loin d’être normalisée. Elle n’atteint que très rarement les 44x44px alors que cette taille est souvent recommandée dans différentes guidelines.

– Le second inconvénient de l’utilisation du burger sur desktop est que celui-ci a tendance à multiplier les clics. Un premier clic pour visualiser l’ensemble des rubriques. Un second clic afin d’accéder à la page désirée. Le recours au roll over serait ici plus pertinent mais ce n’est malheureusement que très rarement le cas.

– Effet de mode, certains sites l’utilisent sans raison véritablement apparente. Ces derniers composés de peu de rubriques peuvent aisément intégrer une barre de nav classique avec l’ensemble des pages qu’il contient. Ce type de pratique en plus de cacher le contenu du site à son utilisateur, peut facilement inciter celui-ci à sortir du site (say hello to the bounce rate!). Enfin, plus déstabilisant, certaines plateformes un poil trop gourmandes n’hésitent pas quand à elles à intégrer deux burgers sur une seule et même page…

10_double-burger
Cuisiné et servi à toutes les sauces, le burger menu s’est largement imposé sur nos écrans. La pertinence de son utilisation comme nous l’avons vu est aujourd’hui sujette à différents débats.

S’il existe un certain nombre de best-practises à prendre en compte lorsque l’utilisation du burger s’impose, il n’existe néanmoins pas de solution figée en termes de conception, de design. Tout dépend de la nature de votre site, ses cibles, ses objectifs… Il est donc primordial de confirmer et ajuster certains choix par le biais d’un travail en profondeur auprès des utilisateurs que l’on cible. L’analyse de leurs habitudes, leurs réflexes, permettra ainsi de déterminer les solutions les plus justes.
Toutefois, régulièrement confrontées à des annonceurs frileux face aux coûts supplémentaires que représentent ces tests, les agences peinent encore aujourd’hui à convaincre leurs clients d’ajouter ce type de prestations à leur enveloppe budgétaire, ce qui mène parfois à quelques maladresses…
Et si le challenge de demain était finalement de faire prendre davantage conscience aux annonceurs de l’ensemble des enjeux que peuvent revêtir ces tests ? À l’occasion, discutons-en autour d’un bon burger 😉

 

Charger les commentaires

2

Commentaires

  1. arnaud Répondre

    Très bon article, merci pour le (gros) travail de fond 🙂

    Si je peux juste me permettre, l’exemple sur le burger qui se déplace dans l’application de Spotify tombe un peu à plat : en effet, sur la 3e capture d’écran, c’est un icône différente : elle permet d’affiche la « liste d’attente » et non pas le menu. Cela est signifié par une 1ere ligne plus épaisse dans l’icône.

Laissez un commentaire :

  • (will not be published)