UX/UI mobile : le grand retour de la Tab bar

ux mobile

Rédigé par Xavier

18 avril 2020

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 :

 

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.

Exemple d’application de la barre de navigation

Sur un site de casino en ligne, la barre de navigation (navbar) joue un rôle crucial dans l’expérience utilisateur, à l’instar de la barre d’onglets sur mobile évoquée dans l’article. Elle sert de point d’ancrage principal, permettant aux joueurs de naviguer intuitivement entre les différentes sections du site. Les liens essentiels y figurent généralement : l’accès aux différentes catégories de jeux (machines à sous, jeux de table, live casino), les promotions et bonus, les informations sur le programme de fidélité, l’aide et le support client, ainsi que les options de dépôt et de retrait. Une navbar claire et bien organisée assure une navigation fluide, évitant aux utilisateurs de se sentir perdus parmi la multitude d’offres. Elle doit être facilement identifiable et accessible en permanence, permettant aux joueurs de passer d’une section à l’autre en un seul clic ou tap. Son design doit s’intégrer harmonieusement à l’esthétique du site tout en se distinguant suffisamment pour une reconnaissance rapide, contribuant ainsi à une expérience utilisateur positive et engageante. Pour allier une navigation mobile optimisée à des avantages pratiques, découvrez les offres exclusives et profitez des bonus sans dépôt sur Lucky-7-bonus.fr dès maintenant.

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.

UX mobile inteaction Smartphone

Résumé de la façon dont les gens tiennent et interagissent avec les téléphones mobiles

UX mobile tenue mobile

Utilisation à deux mains pour tenir un téléphone verticalement ou horizontalement

UX mobile 2 méthodes pour tenir un téléphone à écran tactile d'une main

Deux méthodes pour tenir un téléphone à écran tactile d’une main

A lire également : Qu’est-ce que l’UI Design ?