Face à l’usage en plein essor du mobile, les designers sont retournés aux fourneaux pour imaginer des solutions permettant d’adapter les interfaces utilisateurs des sites et des applications aux nouvelles dimensions des écrans.
Menu burger : gastronomie ou frugalité ?
Conventionnellement situé en haut à gauche de l’écran (on en trouve à droite aussi), l’icône Hamburger se compose de trois traits parallèles. Pour les spécialistes, son usage est sujet à controverse, car il s’avère aussi populaire pour les uns qu’incompréhensible pour les autres. L’invention de cette icône remonte pourtant à 1981. Norm Cox, son concepteur, voulait en faire un menu « simple comme un panneau de signalisation », les trois barres empilées imitant l’apparence d’une liste.
Alors qu’on le croyait digéré à tout jamais, le menu Hamburger fait à nouveau fureur avec l’essor des smartphones. Tour à tour, Apple, Facebook ou Twitter le ressortent du frigo, avant sa standardisation massive (Google, Starbucks, Disney, etc). L’icône offre plusieurs avantages comme un gain de place, une simplicité à l’usage et une identification rapide, fluidifiant l’action de l’utilisateur.
Cependant, la love story ne dure pas et une vague de contestations s’abat sur notre menu Hamburger. Josh Constantine de TechCrunch évoque le fait qu’il masque les fonctionnalités, suivant l’adage « ce qui est hors de vue est hors esprit ». Luis Abreu, UX designer, estime qu’il « introduit une friction dans la navigation » et augmente le nombre de tap requis pour accéder à la rubrique souhaitée. Enfin, certains designers jugent que les utilisateurs ne savent même pas ce que signifie l’icône. Cette accusation s’appuie sur le manque d’engagement qu’inspire le menu hamburger. Ainsi, le simple ajout du label « Menu » sous l’icône permet d’obtenir 61 % d’engagement supplémentaire (étude réalisée par Moovweb).
La carte s'enrichit : Menu Kebab, Meatballs, Döner…
L’icône représentant un hamburger se décline en plusieurs versions, avec plus ou moins de réussite. Le menu Kebab fait disparaître les trois barres empilées pour les remplacer par trois « bullets ». Recommandé par Google Material, il se veut complémentaire du menu Hamburger, tout en offrant un esthétisme supérieur. L’icône sied surtout aux menus qui ne couvrent pas toute l’interface. En revanche, comme le Hamburger il masque les options, d’où une déperdition d’information immédiate pour l’utilisateur.
Certains s’amusent à associer les icônes de navigation à d’autres plats. Si le double hamburger est explicite mais a tendance à perturber l’utilisateur, le menu Bento représente trois lignes de trois carrés, le menu Meatballs trois « bullets » alignées et le menu Döner trois lignes empilées plus épaisses et de longueur différente. Tous peuvent souffrir de la même appétence et du même rejet du menu Hamburger.
Si l’indigestion vous guette, vous trouverez peut-être les bons ingrédients avec une barre de navigation basse (bottom navigation), à l’instar de Facebook ou iTunes. L’accès aux rubriques est direct, à proximité du pouce (le haut de l’écran étant éloigné de sa position quand on tient un mobile). Elle doit toutefois être claire, simple, lisible et conçue selon la stratégie digitale préalablement définie. Néanmoins, cette navigation basse réduit les possibilités d’entrées à 5 ou doit être discrète en s’effaçant au scroll. Par ailleurs, pour ne pas perdre les utilisateurs, il est impératif de mettre en évidence le lien entre le pictogramme et la fonction sur laquelle il navigue.
Que choisir ? La navigation basse, intuitive mais limitée à 5 éléments, le « tiroir de côté » qui utilise les gestes (« glisser pour révéler ») mais augmente le nombre de tap, mur d’icônes compréhensif mais parfois fouillis : les designers en chef continuent d’œuvrer en cuisine pour composer la recette du succès… qui se doit avant tout d’être personnalisée en fonction de chaque projet !