Partager l'article
  •  
  •  
  •  
  •  
5 min

La navigation sur mobile en web design, c’est tout un art !

Depuis l’apparition de l’index Mobil First de Google en novembre 2016, adapter votre site web à la navigation sur mobile est devenu salutaire pour votre visibilité sur web. Généralement la navigation sur mobile et desktop est soumise à des contraintes ergonomiques et marketing. Cependant en web design, la navigation sur mobile possède ses propres caractéristiques et fondamentaux qui diffèrent de la version desktop.

Illustration : Navil Shah

Dans un espace minimal et avec une expérience utilisateur optimale, la navigation mobile ne doit pas omettre ni cacher le contenu proposé dans la ligne de flottaison affichée. Dans ce nouveau volet de web design nous allons décortiquer les avantages et désavantages des différents types de menus existants.

La navigation sur mobile à ses débuts

Nous sommes en 2007 à San Francisco, Steeve Jobs commence sa keynote et annonce l’iPhone. Les premiers mots de sa conférence furent : « De temps en temps, un produit révolutionnaire arrive et change tout ».

Autrefois utilisé uniquement pour communiquer, ce petit rectangle devenu plus grand par la suite nous sert aujourd’hui à nous instruire, nous divertir, payer, partager, et communiquer accessoirement. 🙂

Ce changement a été aussi rapide que brutal. En conséquence, il a fallu trouver une solution pour faire rentrer des sites web de 1024 pixels dans … 320 pixels de large. Si le contenu textuel s’adapte naturellement, c’est en revanche plus complexe quand il s’agit des éléments d’interface comme la navigation.

La navigation sur mobile : entre ergonomie et marketing

Quand un nouveau problème arrive, de nouvelles solutions émergent jusqu’à que l’une d’elles devienne dominante sans que ce soit rationnellement la plus adaptée.

On a par exemple le clavier Bepo qui est plus adapté pour la rédaction en français et pourtant, j’utilise un clavier azerty quotidiennement. La chaine Youtube Dirty Biology l’explique très bien dans sa vidéo : « Pourquoi le PQ est sous-optimal ».

Faisons un tour d’horizon des solutions imaginées jusqu’à aujourd’hui et comparons-les pour voir s’il existe une navigation qui propose un équilibre parfait entre les contraintes ergonomiques et les contraintes marketing où il est nécessaire que le contenu soit accessible rapidement.

Disclaimer
En design, il n’existe pas vraiment de solution universelle qui fonctionne partout et tout le temps. Les arguments cités dans cet article sont donné d’un point de vue de designer de site vitrine où l’une des priorités fondamentales reste bien évidemment la conversion.

Le menu – Statu quo –

Ici, on adopte le même principe responsive que pour le contenu en laissant les items revenir à la ligne. Le menu rempli son rôle d’un point de vue ergonomique parce qu’il est visible et l’exploration du site en devient plus facile.

Trop visible ? Oui certainement parce que du coup, on ne peut voir qu’une petite partie de l’en-tête qui sert le discours. Donc du côté marketing, c’est une catastrophe.

Le menu – Hamburger –

L’appellation – Hamburger – vient de l’icône qui représente 3 traits les uns sur les autres, faisant penser au sandwich emblématique américain : un bun, un steak et un bun (sans fromage malheureusement).

Ce menu consiste à adopter la méthode de la poussière sous le tapis. La carpette devient un bouton et les items jouent le rôle de la poussière.

Cependant l’équilibre entre les besoins ergonomiques et marketing est meilleur.

Pourquoi ? Parce que le bouton s’insère parfaitement à côté du logo donc il laisse la place pour le contenu à faire valoir.

Oui mais…

Ok, il ne prend pas de place et c’est cool mais il pose certains problèmes d’ergonomie. Je vous parlais dans l’introduction qu’une solution adoptée en masse n’est pas forcément la réponse la plus optimale.

Nous y sommes. Parce que ce menu est présent dans la plupart des sites responsives et pourtant … Pourquoi le menu hamburger n’est pas optimal ?

Il cache du contenu

L’étude du cabinet Norman le montre, une navigation cachée est moins utilisée. Pourtant, il n’y a qu’un simple bouton sur lequel il faut cliquer.

Pourquoi cela fait chuter l’exploration d’un site ? Tout simplement parce qu’il n’est pas à porter de clic.

Laissez une rangée de chocolat gratuit à portée de main et tout partira en un rien de temps. Placez une affiche sur laquelle il est écrit “chocolats gratuits au 2éme étage” et seul les plus gourmands feront l’effort d’aller chercher leur petit plaisir.

Avec la navigation, c’est un peu le même principe. Si vous avez les items juste sous vos yeux, vous serez susceptible d’avoir un item qui attire votre attention que si vous avez à cliquer sur un bouton pour les découvrir.

Il est arbitraire

La bascule entre l’affichage mobile et celui pour écran d’ordinateur se fait par un humain.

Soit il décide par lui-même à partir de quelle largeur d’écran le site passe en mode “mobile”, soit il écrit un script pour que le changement se fait automatiquement quand il n’y a plus de place.

Mais quand je vais visiter un site avec une tablette, j’ai normalement assez de place pour voir au moins quelques items et pourtant, c’est le bouton au trois traits qui est affiché.

Autrement dit, il n’y a aucun entre-deux.

Le menu – scroll-

Adopté par Google depuis quelque temps, l’expression – responsive design – prend tout son sens avec ce type de menu. Le concept est d’interdire les éléments aller à la ligne puis si la barre de navigation est plus grande que l’écran, un défilement horizontal apparait.

Autrement dit, si je visite un site avec mon smartphone, je verrai uniquement les premiers items. Si je visite le même site avec mon ordinateur, je verrai tous les items.

Nous sommes presque à l’équilibre parfait mais il y a ce petit caillou dans la chaussure qui vient gêner la cohabitation.

Comme vous le voyez sur l’illustration au dessus, l’utilisateur peut avoir l’impression qu’il voit tous les items de la navigation mais ce n’est pas le cas.

Selon la longueur des items et la largeur de mon écran, je peux avoir un item coupé…ou pas. Et là, c’est le drame !

Je n’ai aucun moyen de deviner qu’il existe d’autres items à côté de ceux que j’ai sous les yeux. Mais heureusement, notre prochain menu va corriger ça !

Le menu – priorité plus –

Et si on prenait les qualités de chaque menu pour les servir au moment opportun ?

L’idée du menu priorité + c’est d’utiliser un scroll horizontal et de lui greffer un bouton + pour être sûr que l’utilisateur comprenne qu’il y a d’autres items qu’il ne voit pas. Et quand on clique sur ce bouton, on passe en mode statu quo.

C’est pour moi le meilleur compromis entre l’ergonomie, la facilité d’exploration d’un site et les besoins de conversion en mettant en avant le contenu plutôt qu’un élément d’interface. Vous pouvez le tester sur notre site, il est actif et prêt à vous rendre service !

Savoir se renier en cas de besoin

Comme évoqué dans l’introduction, les arguments avancés sont ciblés principalement pour la création d’un menu de navigation destiné à des sites orientés contenus.

Mais si demain, je dois concevoir une application ou un site e-commerce, je pourrais tout à fait privilégier le menu hamburger pour mieux organiser l’interface et la rendre plus légère visuellement.

Tout est une affaire de contexte et c’est tant mieux ! Ce serait ennuyeux si on avait une recette qui empêche toute forme de réflexions non ?

Pour résumer

La morale de l’histoire est que ce n’est pas parce qu’une solution est adoptée en masse qu’elle est forcement la plus adaptée. Il faut toujours essayer de trouver le meilleur compromis entre les besoins des utilisateurs et vos objectifs marketing.

Cet article vous a plu ? Dites le nous en commentaire et abonnez-vous à notre newsletter, ça nous ferait très plaisir 🙂

#ResponsiveDesign #NavigationMobile

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *