En 2008, la tab bar était la barre d’onglets phare lors de la sortie des applications iOS. Aujourd’hui, elle a fait son grand retour et est très vite devenue la structure d’application la plus choisie par les acteurs du digital. Pour rendre la Tab bar performante, personnelle et innovante, les designers exploitent toutes les possibilités techniques. Presque tous les acteurs majeurs ont dû revoir l’architecture de leur application afin d’utiliser cette forme de navigation qui s’impose comme la nouvelle forme de navigation des applications mobiles. L’UX mobile pour l’UX Design, représente un enjeu majeur.
Qu’est-ce que la tab bar ?
Il s’agit d’un menu de navigation constitué de nombreux onglets. Ce menu est disposé en haut ou en bas de l’écran. Un petit pictogramme qu’il est possible de cliquer matérialise chaque entrée et est parfois accompagné d’un court label. La tab bar a été rendue populaire grâce à l’iOS et est aujourd’hui le modèle de navigation qu’on retrouve le plus dans les applications pour iPhone. Elle est incontournable dans une démarche d’UX mobile, comme le souligne Fabien Raquidel de l’agence Seo Vip-agence.com dans ce tweet :
Clairement la Tab Bar peut améliorer l’ux sur mobile. https://t.co/AakcmtTmTb
— Fabien SEO ✳️ (@fabienr34) April 8, 2020
Principaux avantages de la tab bar
L’exploitation de ce menu de navigation permet d’afficher clairement les fonctionnalités de l’application. La tab bar pousse à faire une réflexion en amont sur l’information, ce qui est profitable à tous, et diminue de 22 % le temps de navigation. Elle est capable de contenir 4 entrées, en plus d’une 5èmequi est sous forme de « burger menu » garantissant l’affichage des entrées secondaires de l’application. Ce menu de navigation crée également la meilleure zone ambidextre accessible d’une main avec le pouce.
Vous en saurez plus sur son fonctionnement en visitant cette vidéo :
Bonnes pratiques UX d’une navigation axée sur une tab bar bottom
Pour réaliser une bonne stratégie d’UX mobile par la mise en place d’une tab bar bottom, de bonnes pratiques doivent être adoptées. Par exemple en positionnant ce bouton en bas, il est bon de veiller à ce qu’il soit simple, clair et lisible. Il est aussi important de faire en sorte qu’il soit discret, en s’effaçant au scroll. En outre, ce tab bar bottom doit pouvoir mettre en relief les actions principales de votre stratégie digitale.
Le véritable but visé avec ce menu de navigation est de permettre aux utilisateurs de trouver plus vite vos contenus afin de convertir et créer le levier pour votre ROI. Vous avez forcément un objectif stratégique, que votre site soit e-commerce ou institutionnel, ou soit simplement un blog d’info. Vous gagnez à adopter cette solution pour atteindre cet objectif.
Conception du menu tab bar mobile
Optimisé pour le mobile, le menu tab bar est visible sur les sites et applications célèbres, comme Facebook. Il permet d’avoir accès rapidement à des contenus importants et occupe très peu de place. Cela a été pensé ainsi pour donner plus de place au contenu. Pour la conception du menu tab bar mobile, vous pouvez décider de mettre uniquement du texte, de mettre seulement des images ou de mettre à la fois texte et images.Il est bon de faire le choix par la facilité de compréhension de vos liens. Pour ne pas surcharger la navigation, limitez les liens à 5.
Points négatifs à noter
Il est difficile pour une tab bar de contenir plus de 5 entrées, ce qui pose des problèmes aux sites et applications les plus riches. En outre, quand elle est placée en bas de l’écran, on ne la trouve pas forcément dans la zone de tap la plus accessible. Le chercheur en UX Steven Hoober a réalisé une étude dans ce sens et a conclu que si on n’a pas un pouce de 15 cm, il est compliqué d’avoir accès aux coins inférieurs de l’écran. Par ailleurs, il s’agit d’un modèle de navigation peu évolutif.
Résumé de la façon dont les gens tiennent et interagissent avec les téléphones mobiles
Utilisation à deux mains pour tenir un téléphone verticalement ou horizontalement
Deux méthodes pour tenir un téléphone à écran tactile d’une main
A lire également : Qu’est-ce que l’UI Design ?
