Burger menu ou Tab Bars ? Lorsqu’une arborescence comprend plusieurs niveaux, la navigation sur mobile dite “user-friendly” devient vite un casse-tête. Ce case study propose une idée de fusion entre ces deux types de menu mobile 🤘.
Quid du mobile ?
Comme l’a mentionné la célèbre marque à la pomme sur une de ses publicités :
Votre pouce…il va de là… à là.
De nos jours, difficile de donner raison à la pomme tant les mobiles ont été déclinés sous différents formats : plus large, plus haut, parfois même plus épais (pourquoi ? 🤔).
Le mobile a reconsidéré notre manière de consommer du contenu et de naviguer sur le net à travers un petit écran. Que ce soit sur une app ou un site responsive, l’utilisateur doit pouvoir naviguer et trouver son contenu “naturellement” et au moindre effort.
Challenge accepted!
L’idée de cette nouvelle navigation est survenue lors de mon travail sur le site mobile “Dailyslim”.
Contexte
Dailyslim est un site de coaching personnalisé pour perdre du poids tout en mangeant équilibré et sans contrainte (projet développé par la société Kyrena).
Pour qui ?
La cible de Dailyslim est principalement un public féminin comprenant les milléniaux (génération Y), mais aussi une partie de la génération X (avant 1980).
Problème identifié
Lors de la phase de définition, un détail manque à l’appel : la navigation sur mobile à une main. En effet, selon le persona identifié, la cible étant urbaine/mobile, elle doit pouvoir consulter le site selon certaines situations telles que :
- Consulter ses repas de la journée : dans le métro, en marchant.
- Consulter la liste des ingrédients : pendant la préparation des repas ou en faisant les courses dans les allées des supermarchés.
Comme l’indique Denislav Jeliazkov dans son article (UX Planet) :
75% is using just their thumb to touch the screen
Solution proposée
La phase d’idéation s’est construite autour de 3 étapes :
- Remplacer le menu burger par une tab bars (appelée aussi “bottom navigation bar”), rendant ainsi la navigation plus intuitive. De plus, la tab bars répond parfaitement aux contraintes de la navigation à une main. Beaucoup d’applications l’ont adopté ces dernières années (Facebook, Spotify, Netflix, etc).
- Accéder facilement aux menus de niveau 2, tout en gardant en tête les limites d’une navigation à une main.
L’idée n’est pas de reproduire le comportement d’un menu burger (avec un panneau latéral contenant tous les menus et sous-menus). Certaines applications le proposent, mais cela ne répond aucunement à notre problématique.
- Inclure un accès rapide au programme de la journée. Puisque l’objectif de Dailyslim est de coacher en permanence ses utilisatrices. Il faut donc que les informations soient accessibles en 1 seul clic.
Mettre les idées sur papier
Prototype (high-fid)
Conclusion
Le processus d’idéation fut très intéressant, notamment sur la recherche pour concevoir l’affichage et la navigation des sous-menus. L’inspiration a été trouvée grâce à l’application Google Drive (Google Sheets).
Le fait d’afficher le menu d’options à mi-hauteur de l’écran, de pouvoir le parcourir d’un simple scroll, et le fermer avec un swipe. Ce fut une piste intéressante à explorer et un axe principal de réflexion.
Actuellement, le site n’a pas adopté cette proposition. Étant en phase béta, l’équipe a préféré conserver la navigation de base. Certes classique, cette dernière reste encore parlante pour la grande majorité des utilisateurs, et éprouvée avec le temps.
Toutefois, lorsque nous aurons rassemblé et analysé les premières données sur l’usage de Dailyslim, peut-être sera-t-il l’occasion de proposer/tester ce nouveau menu mobile… 🤗
