A l’heure où les guidelines Android et iOS se font de plus en plus précises afin de proposer une expérience utilisateur plus cohérente sur leurs appareils, les deux géants du mobile proposent toujours des solutions de navigation différentes pour des produits qui restent très similaires. Même si la bataille entre les pro-iOS et les fervents défenseurs d’Android fait rage depuis toujours, tous les smartphones restent des écrans tactiles rectangulaires. Les applications changent régulièrement de moyens de navigation, testent de nouvelles solutions ergonomiques et les différents acteurs décrient ou copient ce que font les autres. Que peut-on déduire de tout cela ? Bien sûr, chaque projet est différent et ce qui est vrai pour l’un ne l’est peut être pas pour l’autre. Tout est une question d’aptation, et les solutions actuelles ne sont pas si nombreuses. Petit décodage…

Le menu hamburger : lapidé sur la place publique et pourtant…

Apparu et adopté par beaucoup très rapidement, le menu hamburger est aujourd’hui en déclin et critiqué. Au départ, cette icône composée de 3 barres horizontales apparaissait comme une façon élégante et simple d’organiser l’application et de faciliter l’accès aux différentes fonctionnalités proposées. Assez simple à mettre en place, il est natif sous Android et permet de présenter de nombreux items. Ce n’est pas la place qui manque puisqu’il occupe un écran entier après avoir été déployé.

Du point de vue de la découverte, ce moyen laisse à désirer. Pourquoi ? Parce qu’en règle générale, un utilisateur scanne son écran en recherchant des mots clés. Il les compare ensuite pour choisir celui qui correspond le plus à ce qu’il veut faire. Trois petites barres horizontales d’un menu hamburger ne lui évoquent donc rien, elles ne guident pas sa navigation.

Certains critiquent également le fait d’avoir à ajouter un clic à chaque fois qu’un utilisateur doit changer de page. On peut facilement contourner ce problème en définissant les scénarios en amont pour permettre une navigation fluide entre les différentes fonctionnalités sans passer par le menu hamburger à chaque fois.

Aujourd’hui l’argument d’une icône réservée aux technophiles n’est plus vrai. Le menu hamburger s’est réellement intégré dans l’utilisation des smartphones. Et s’il manquait au départ d’intuitivité pour le commun des mortels, il est aujourd’hui devenu familier aux utilisateurs de smartphones en particulier sur Android.

Hamburger menu abandon

Exemple de cas où le taux de conversion est meilleur après avoir abandonné le menu Hamburger

On trouve de nombreux exemples pour lesquels le taux de conversion est moins bon avec un hamburger menu. Airbnb l’avait pourtant réintégré sur son application Android en avril 2016, pour finalement privilégier une barre de navigation en bas de l’écran (illustration ci-dessous).

Navigation-Mobile-Android-Air-Bnb.png

La barre de navigation iOS maintenant copiée par Google

La barre de navigation semble être une excellente alternative proposée par iOS. Native, elle donne la possibilité d’avoir accès à trois à six items en bas de l’écran. Avec ce genre de solution, il faut bien penser à montrer à l’utilisateur dans quelle partie de l’application il se trouve. Par exemple, iOS utilise nativement la couleur bleue pour identifier la page active. Et pour faciliter la navigation mobile, elle se situe dans une partie de l’écran très simple d’accès avec le pouce.

Aujourd’hui, elle est même validée et surtout copiée par Google qui l’utilise sur Android. Pour sauver l’honneur, Google la présente tout de même avec une interaction sur le FAB (Floating Action Button).

barre de navigation google

Le seul bémol de cette solution est qu’elle est contestable d’un point de vue « hiérarchie de l’information ». Les différentes catégories parentes sont situées en dessous de leur contenu et cela peut manquer de logique et d’intuitivité au départ. Mais à l’image du menu hamburger sur Android, elle est devenue extrêmement familière aux utilisateurs iOS. Elle est même utilisée dans les applications natives comme celle de l’App Store. Pour le moment sur Android, elle est trop peu familière aux utilisateurs pour espérer un bon rendu. La proximité avec les boutons d’action situés en bas de l’écran d’un smartphone Android peut également conduire à des erreurs d’appui assez gênantes.

Les autres solutions

Sur Android il existe aussi la solution qui consiste à proposer une barre de scroll en haut de l’écran. La découverte est meilleure que dans le cadre du menu hamburger car les noms des catégories ou les icônes sont directement disponibles. Cependant, ce menu s’accompagne souvent du swipe pour passer d’une catégorie à une autre et cela peut être compliqué à comprendre pour les moins technophiles.

barre de scroll

L’avis de Sylvia, Ergonome chez Wopata

 » L’idéal est bien sûr de proposer plusieurs solutions de navigation et d’organiser des tests utilisateurs pour déterminer quelle solution fonctionne le mieux. Il n’est cependant pas toujours possible de mettre en place une telle logistique (par manque de temps ou de budget). Voici donc quelques conseils lorsque vous devez faire un choix rapide.

Pour Android, il est possible de proposer un menu hamburger. Bien intégré et souvent utilisé, il est désormais familier aux utilisateurs. Les applications Google, présentes de base dans l’OS, l’utilisent beaucoup et favorisent l’habitude de s’en servir. Ceci est d’autant plus vrai si le projet nécessite d’afficher de nombreux items avec des labels assez longs. Et pour limiter les erreurs de navigation, il suffit de ne pas rendre obligatoire le passage par le menu principal : il faut penser à tous les workflows en amont et proposer des accès intermédiaires entre les différentes étapes. Il est donc très important de bien concevoir la homepage qui devra répertorier et proposer tous les workflows de navigation possibles.

Capture d’écran 2016-12-01 à 18.32.22.png

Legrand Android : L’îcone en haut à droite amène aux listes sans passer par le menu hamburger

C’est de cette façon que nous avons procédé pour l’application Legrand. L’application est un e-catalogue qui sert à créer des listes de matériel. Il est possible de parcourir le catalogue et ses (très nombreuses) catégories, rechercher un item par son nom ou sa référence et ajouter des produit à une liste. Indépendamment, l’application permet de gérer les listes, les modifier et les partager. Cependant, rechercher un produit, le sauvegarder et/ou de le commander reste le scénario de navigation le plus classique. Nous avons donc intégré la création de liste directement après le tap sur « Ajouter au panier ». Ainsi, l’accès aux listes ne nécessite pas de revenir sur la page d’accueil. Une icône prend le relai et rend accessible la consultation des listes en un seul clic. L’utilisateur peut tout de même accéder à sa liste de matériels favoris via le hamburger menu, dès l’ouverture de l’application. 

Pour iOS cependant, il est préférable d’éviter le menu hamburger et de privilégier la barre de navigation en bas de l’écran. En dehors du manque de logique d’avoir le contenu au dessus de la catégorie parente elle ne présente pas d’autre défaut sur iOS. Android suivra certainement cette lancée si les application Google adoptent ce type de navigation. »

Sources :