La tap barre est un élément incontournable des applications mobiles modernes.

Son design et son utilisabilité ont un impact direct sur l’expérience utilisateur globale.

Pour créer une tap barre efficace, il existe des règles UI/UX à suivre.

Benchmark des meilleures tap barres d’applications mobiles populaires

Avant de se lancer dans la conception d’une tap barre, il est judicieux d’analyser ce que font les applications mobiles les plus populaires. Des apps comme Instagram, Spotify ou Twitter ont investi beaucoup de ressources pour optimiser leur tap barre au fil des années.

Voici un tableau comparatif des caractéristiques principales des tap barres de ces apps :

On constate que ces apps ont fait des choix similaires :

• Un nombre limité d’items (4 ou 5 maximum)
• Des icônes reconnaissables pour chaque item
• Pas ou peu de labels textuels
• Pas de personnalisation de la tap barre par l’utilisateur

Ces caractéristiques communes constituent une bonne base pour concevoir sa propre tap barre. Mais attention à ne pas copier aveuglément ces exemples. L’important est de comprendre les principes sous-jacents qui les rendent efficaces.

Erreurs de conception fréquentes à éviter pour sa tap barre

Si les meilleures apps montrent la voie à suivre, il existe aussi de nombreux exemples de tap barres mal conçues. Voici les erreurs de conception les plus fréquentes à éviter absolument :

Trop d’items dans la tap barre

Certaines apps essaient de caser un maximum de fonctionnalités dans leur tap barre. C’est une très mauvaise idée. Au-delà de 5 items, la tap barre devient difficile à utiliser. L’utilisateur est perdu et ne sait plus où cliquer. Il faut savoir faire des choix et ne garder que les items les plus importants.

Des icônes peu claires ou trop similaires

Le choix des icônes est crucial pour l’utilisabilité de la tap barre. Chaque icône doit être unique, reconnaissable et représentative de l’action associée. Des icônes trop proches graphiquement ou dont le sens est ambigu vont perturber l’utilisateur.

Changer l’ordre ou la fonction des items

L’utilisateur prend ses repères avec la tap barre. Il s’habitue à la position et au rôle de chaque item. Changer cela au fil des mises à jour de l’app est très perturbant. La tap barre doit rester consistante dans le temps pour maintenir une bonne expérience.

Utiliser des labels trop longs

Quand on utilise des labels textuels en plus des icônes, il faut s’assurer qu’ils restent courts et explicites. Des labels trop longs ne rentreront pas dans l’espace réduit de la tap barre. Ils seront tronqués et deviendront plus une gêne qu’une aide.

Astuces pour rendre sa tap barre accessible à tous les utilisateurs

Une bonne tap barre doit être utilisable par tous, quelles que soient les capacités de l’utilisateur. Voici quelques astuces pour rendre sa tap barre plus accessible :

Assurer un contraste suffisant

Les couleurs de la tap barre doivent être choisies pour offrir un contraste élevé entre le fond et les éléments interactifs. Cela permet aux utilisateurs malvoyants ou daltoniens de distinguer facilement les différents items.

Permettre un agrandissement des icônes

Pour les utilisateurs ayant des difficultés de vision ou de motricité, il est important de pouvoir agrandir la taille des icônes de la tap barre. Cela peut se faire via les options d’accessibilité du système ou des réglages dans l’app.

Fournir des alternatives textuelles

Chaque icône de la tap barre doit avoir une alternative textuelle pour être interprétable par les lecteurs d’écran utilisés par les personnes non-voyantes. Cette alternative est invisible mais peut être lue par les technologies d’assistance.

Supporter le contrôle au clavier

Certains utilisateurs interagissent avec leur appareil uniquement au clavier, sans utiliser l’écran tactile. Il faut donc s’assurer que la tap barre et chacun de ses items sont atteignables et activables avec le clavier.

Adaptabilité de la tap barre selon le contexte et le type d’application

Il n’y a pas de solution universelle pour concevoir une tap barre. Cet élément d’interface doit être adapté au contexte et au type d’application dans lequel il s’inscrit.

Voici quelques exemples de variantes de tap barres selon les cas :

L’idée est vraiment de coller aux besoins spécifiques des utilisateurs pour chaque type d’app. Il faut se demander quelles sont les actions principales que l’utilisateur va vouloir faire, et les rendre facilement accessibles dans la tap barre.

Le contexte d’utilisation de l’app va aussi influencer la conception de la tap barre. Par exemple, une app destinée à être utilisée en mobilité mettra en avant des actions rapides. À l’inverse, une app de création de contenu favorisera des items plus avancés.

Cohérence de la tap barre avec l’identité visuelle de la marque

Enfin, la tap barre ne doit pas être conçue isolément du reste de l’interface. Elle doit s’intégrer harmonieusement avec l’identité visuelle globale de l’app et de la marque.

Reprendre les codes couleurs de la marque

Les couleurs de la tap barre doivent être cohérentes avec la charte graphique de la marque. Il faut utiliser les couleurs principales du logo ou de l’identité visuelle pour créer une association forte dans l’esprit de l’utilisateur.

Utiliser des icônes dans le style de la marque

Le style des icônes de la tap barre doit aussi être en accord avec celui de la marque. Si l’identité visuelle est minimaliste, on utilisera des icônes épurées. Si elle est plus fun ou décalée, on se permettra des icônes plus originales.

Faire écho aux autres éléments d’interface

La tap barre ne doit pas donner l’impression d’être un élément à part dans l’interface. Elle doit reprendre des codes visuels qu’on retrouve dans les autres composants, comme les boutons, les menus, etc. Cela passe par des détails comme les arrondis, les ombres ou les effets de survol.