Menus de hamburgers dans la conception de sites Web

Toute personne utilisant Internet a probablement vu des dizaines d'exemples de menus Hamburger sur Internet. Cette icône simple à trois lignes fait partie des boutons les plus reconnaissables aujourd'hui. De nombreux sites Web l'utilisent pour masquer des éléments de navigation souvent robustes et économiser de l'espace. Cependant, malgré leur utilité, les menus Hamburger dans la conception de sites Web font toujours partie des options de conception de sites Web les plus discutables . Pour certains, c'est une véritable solution qui devrait se retrouver entièrement dans toutes les conceptions réactives. Pour d'autres, c'est un effet secondaire malheureux qui vient d'une mauvaise interprétation de la conception structurelle pratique.

Une introduction aux menus Hamburger dans la conception de sites Web

Pas exclusivement, mais les menus de hamburgers se trouvent généralement sur des sites Web et des applications réactifs lorsqu'ils s'adaptent aux affichages sur petit écran. Qu'ils soient à gauche ou à droite, les concepteurs et développeurs professionnels utilisent le menu hamburger pour économiser un espace précieux. Il s'agit d'une solution populaire car ils masquent la navigation principale pour laisser plus de place au reste du contenu . Mais tout le monde ne pense pas que c'est une solution appropriée. Beaucoup prétendent tout le contraire.

Pour vous aider à mieux comprendre le menu hamburger, nous aborderons ici :

• Quels sont les menus Hamburger
• Le concept de menus Hamburger dans la conception de sites Web
• La controverse derrière
• Mise en œuvre alternative
• Avantages et inconvénients généraux des menus Hamburger dans la conception de sites Web

Quels sont les menus Hamburger?

En termes simples, un menu hamburger est une alternative simple et plus petite aux grandes barres de navigation . Il sert essentiellement de tiroir où vous pouvez placer tout ce qui encombre votre site Web depuis la navigation. Les menus de hamburgers ressemblent généralement à trois lignes les unes sur les autres. Le nom vient de sa ressemblance évidente avec les hamburgers.

Tout a commencé en 1981. au poste de travail Xerox Star. Norm Cox, le concepteur d'interface utilisateur graphique de l'époque, a créé une icône pour ouvrir une liste d'éléments cachés. L'intention était de proposer une solution alternative peu encombrante pour les longues listes d'options . Quelque chose de similaire au menu conceptuel du clic droit sur les ordinateurs de bureau. Mais, jusqu'en 2009, le menu hamburger n'a pas connu beaucoup de gloire. Ce n'est que lorsque Facebook et quelques autres sites Web l'ont réintroduit que le menu hamburger a commencé son voyage. C'était une solution presque parfaite pour économiser de l'espace d'écran précieux sur les appareils mobiles alors émergents.

Mais, était-ce?

L'éternel débat sur le menu hamburger

L'intention du créateur original était de créer quelque chose de simple mais efficace. Un petit bouton qui réduira l'encombrement en suivant le même principe derrière le menu clic-droit. Il était censé être similaire, mémorable et facile à utiliser. Et il l'est, même dans sa forme actuelle pour laquelle il n'était pas destiné à l'origine.

Cependant, tout le monde ne partage pas le même enthousiasme en ce qui concerne les menus de hamburgers . De nombreux concepteurs le critiquent car il cache la partie la plus importante de la navigation sur le site Web. Par conséquent, les visiteurs auront du mal à le trouver. Ils recommandent d'utiliser le menu Hamburger uniquement lorsqu'il y a plus de quatre éléments de navigation dans le menu. D'un autre côté, ces affirmations pourraient changer à l'avenir, car la plupart des gens s'habituent déjà à l'apparence et au fonctionnement des menus de hamburgers.

Utilisation et mise en œuvre alternatives

Outre la règle des «quatre éléments» , il existe d'autres suggestions sur la façon d'améliorer la convivialité du menu hamburger.

• Combinez le menu hamburger avec d'autres fonctionnalités . Par exemple, vous pouvez placer la fonction de recherche et le menu hamburger juste à côté.
• Utilisez des espaces réservés de formes, de bordures et de couleurs différentes pour rendre le « hamburger » plus reconnaissable.
• Trouvez un positionnement alternatif qui n'est pas nécessairement l'un des coins.
• Créez un menu hamburger flottant avec une position fixe une fois que les visiteurs commencent à faire défiler la page.

L'idée est de fournir un design épuré mais distinctif, pratique pour les utilisateurs mobiles, quelle que soit la taille de l'écran de leur appareil.

Avantages et inconvénients généraux des menus Hamburger dans la conception de sites Web

Du point de vue de l'UX (expérience utilisateur), les menus hamburger peuvent être une arme à double tranchant. Bien que cela puisse fonctionner dans la plupart des situations, dans d'autres, cela peut créer de la confusion. Pour comprendre quand l'utiliser, il est préférable de vérifier tous les avantages et inconvénients des menus Hamburger.

Avantages:

• Le menu hamburger réduit l'encombrement - il fonctionne quand cela compte le plus. Une bonne utilisation de l'espace peut parfois signifier tout pour les sites Web et les applications mobiles. Vu la taille de l'écran à votre disposition, tout ce qui peut vous donner plus d'espace est bon. De plus, trop d'éléments à l'écran ne peuvent que détourner l'attention des visiteurs du bon contenu.
• Maintient la navigation compréhensible - Aujourd'hui, presque tout le monde comprend à quoi il sert lorsqu'il voit le menu hamburger. Nous sommes des êtres visuels et il est facile de remarquer une icône qui ressemble à trois lignes horizontales dans une colonne. Surtout si cela nous rappelle l'un des repas rapides les plus appréciés. Pensez simplement au nombre d'icônes et de logos de marque différents que vous connaissez par leur nom.
• Peut être une excellente option pour garder l'élément de navigation secondaire à l'écart - Il n'y a aucune règle qui dit que vous devez placer toute votre navigation dans le menu hamburger. Très souvent, l'une des meilleures solutions consiste à laisser les principaux éléments de navigation sur le site Web et à placer toutes les autres options secondaires dans le menu hamburger. Cela prend essentiellement le meilleur des deux mondes et sert toujours son objectif.

Les inconvénients:

• La navigation importante n'est pas visible - Lorsque vous transformez votre navigation en un menu hamburger, vous la rendez presque invisible. Quelques recherches confirment que l'engagement sur le site Web peut chuter considérablement pour cette raison. En d'autres termes, certaines personnes ne cliqueront pas plus loin car cela n'attire pas leur attention immédiatement.
• Tout le monde ne le comprend pas - moins probablement, mais il y a encore des visiteurs qui découvrent les menus de hamburgers pour la première fois. Cela peut sembler familier, mais pas assez motivant ou explicite pour leur faire faire l'action. Ils le laisseront tel quel parce qu'il n'y a aucune autre indication sur son utilisation. Cela change, mais cela peut parfois être non intuitif. Surtout lorsque les concepteurs utilisent trop de liberté et la rendent complètement abstraite. Ou le "hamburger" lui-même n'est pas assez distinctif visuellement.
• Le menu hamburger nécessite un «effort» supplémentaire à utiliser - Bien que cela puisse sembler idiot, mais, techniquement, un menu hamburger prend quelques étapes de plus que la navigation typique. Sans parler du fait que tout le monde ne peut pas l'atteindre avec son pouce en tenant son téléphone d'une main.

Quelle que soit votre opinion subjective, n'oubliez jamais de considérer quelle est la meilleure option pour vos utilisateurs. Vous aimez peut-être les menus de hamburgers, mais vous finissez toujours par ne pas les utiliser si les circonstances ne vous conviennent pas. Ou, vous pouvez le détester complètement, mais cela pourrait être la meilleure solution pour votre site Web ou votre application. N'oubliez pas que la bonne application de hamburger manus dans la conception de sites Web peut être situationnelle et différente d'un cas à l'autre . Pour voir si c'est pour vous, effectuez quelques tests A/B et voyez ce que votre public en pense.