Tab bar : tendances dans les apps retail en 2023

Publié par USERADGENTS le 19 juin 2023 - mis à jour à 17:52

USERADGENTS vous propose une analyse approfondie des applications mobiles de 50 retailers parmi les plus populaires en France (Action, Asos, CDiscount, Amazon...), pour déterminer les tendances majeures en matière d'interfaces en 2023 (tab bar, hiérarchie des infos, entrées clés, header...).

Imprimer

Élément clé dans le parcours utilisateur sur mobile, la tab bar (bottom navigation bar sur Android avec Material design 3) est cette fameuse barre d’onglets située en bas de l’écran. Elle permet de situer l’utilisateur et de naviguer facilement entre les différentes pages et catégories d’une app, de rendre le contenu accessible et de favoriser sa découverte à tout moment. Dans cet article, nous avons analysé 50 applications* sur iOS, parmi les tops des acteurs du secteur¹ établis par Fevad Médiamétrie et Ranking Similar Web iOS. Dans ces 50, 44 sont des applications e-commerce, 4 se dédient à la fidélité / les promotions et 2 au booking de transports ou séjours. L’objectif ? Faire émerger les grands enseignements et tendances sur les tab bars dans les apps retail en 2023 pour déterminer leur pertinence dans l’expérience d’achat et ainsi continuer à proposer à vos clients des interfaces qui soient 100% adaptées à leurs attentes et leurs usages.

98% des apps analysées possèdent une tab bar

Premier constat, parmi tous les acteurs étudiés, seul Cdiscount ne possède pas de tab bar dans son application. Développée en React Native, l’absence de cette barre de navigation pourrait être justifiée par la volonté de mutualiser fortement l’ensemble des fronts (web mobile et apps mobile). En effet, CDiscount utilise le burger menu en haut à gauche, une pratique très web mobile, où une dizaine de catégories de premier niveau sont accessibles. Un choix très différent de son concurrent Amazon qui, lui, propose une tab bar avec ses 4 entrées clés (Home, Compte, Panier et aussi le fameux burger menu), pour un maximum de fluidité de recherche et d’orientation dans l’app. Deux autres acteurs ont fait le même choix qu’Amazon concernant le burger Menu (Etam et H&M), l’intégrant uniquement dans la tab bar. De leur côté, Shein et Uniqlo ont doublé la mise : une tab bar ET un burger menu en header pour accéder à des entrées supplémentaires.

Noemi Sponga - UX Designer @USERADGENTS : “Par principe ergonomique, le burger menu classique (en haut à gauche) n’a rien à faire dans une app car il est difficilement accessible au pouce. Les compléments d’informations vont plus facilement se trouver dans “Mon compte”. C’est pourquoi on a tendance à pousser la tab bar dans les apps plus que le burger menu et à déconseiller l’usage de ce dernier en plus de la tab bar”.

Notons également que si Apple préconise d’avoir la tab bar toujours visible (à l’exception des vues modales où il est recommandé de la masquer et lors de l’usage du clavier), Android autorise le masquage de celle-ci au scroll.

71,5% ont 5 entrées… et 26,5% en ont 4

Certains acteurs possèdent 4 entrées dans leur tab bar, comme Temu, Veepee ou encore Carrefour, mais la grande majorité en possède 5.

Noemi Sponga - UX Designer @USERADGENTS : “Malgré notre bien-aimée loi de Miller - qui exprime que l’utilisateur ne peut retenir qu’entre 5 et 9 items en mémoire vive - nous sommes face à un problème de place qui nous limite encore plus. La bonne pratique est de 3 à 5 items, comme le recommande Apple et Android d’ailleurs, ne serait-ce que pour conserver la lisibilité et l’accessibilité des rubriques”

^{Apple & Google s’accordent sur le nombre d’entrées de la tab bar (3 à 5)}

Quelles sont les entrées les plus communes en tab bar ?

L'Accueil (chez 43 acteurs), le Catalogue (chez 42 acteurs), le Compte (chez 40 acteurs), la Wishlist (chez 26 acteurs) et le Panier (chez 14 acteurs) sont les entrées les plus populaires en tab bar. Dans 67% des cas, les entrées Accueil, Catalogue et Compte sont d’ailleurs présentes en même temps. Des choix plutôt logiques qui correspondent à tous les moments clés du parcours d’achat et qui - bien structurés en tab bar - permettent de fluidifier l’expérience de l’utilisateur en le guidant naturellement et rapidement vers les étapes clés.

Noemi Sponga - UX Designer @USERADGENTS : “Ces rubriques ne sont que la continuité de ce que le client connaît déjà. Il conserve les repères du magasin physique, mais sur un écran de téléphone. Le client va trouver la vitrine et les têtes de gondoles (accueil), les rayons (catalogue), son caddie (panier) et pouvoir demander les informations qui le concernent à l’accueil (compte)”.

En plus de ces 5 entrées principales, on retrouve souvent dans les tab bars des éditeurs étudiés les entrées Messages, surtout chez des acteurs de seconde main comme Leboncoin ou Vinted (où les transactions peuvent nécessiter beaucoup d’échanges entre acheteur et vendeur), ou Magasins chez des acteurs possédant une large flotte de magasins comme Boulanger ou Uniqlo (qui souhaite faire de l’app un véritable canal de dialogue et de relation avec les consommateurs).

Que font les autres ?

Qu’en est-il des acteurs qui n’ont pas inclus ces catégories principales dans leur tab bar ? 24 applications ont choisi par exemple de ne pas inclure le panier dans la tab bar. 15 le placent dans leur header (Auchan ou eBay) et les 9 autres ne l’incluent pas du tout. Parmi eux : Action qui ne propose pas d’achat in-app ou Leboncoin qui ne propose pas de panier unifié car il s’agit d’un acteur de seconde main multi-vendeurs. Le catalogue lui, quand il n’est pas en tab bar, est toujours placé en header via une loupe ou un moteur de recherche (Etsy ou H&M). A noter que sur l’ensemble des acteurs qui possèdent un moteur de recherche en header (38 acteurs), 16 ont une alternative de recherche visuelle et 4 de recherche vocale. L’Accueil quant à lui est tout simplement absent de l’interface (Adidas ou Booking). On note d’ailleurs qu’Apple ne recommande pas l’usage du terme Accueil (Home), jugé trop générique pour l’utilisateur.

Le Compte utilisateur et la Wishlist ont quant à eux tendance à être insérés soit directement dans le header (Adidas, Carrefour, Etam ou Shein), soit dans des sous entrées de la tab bar (accessibles dans les entrées “Plus” ou “Autres” par exemple). Dans le cas spécifique de la Wishlist, on la retrouve principalement au sein des onglets de profils ou de comptes utilisateurs (12 acteurs comme Temu ou Fnac) ou on ne la retrouve pas du tout (10 acteurs comme Leclerc ou Veepee).

100% des apps possèdent des pictos et 73% ont aussi des textes :

Les onglets de ces tab bars sont représentés en général de deux manières différentes. Soit par des pictogrammes comme IKEA, H&M ou Decathlon, pour favoriser une expérience épurée, en s’appuyant sur des choix visuels les plus représentatifs possibles pour le plus grand nombre, soit avec en plus une petite légende textuelle sur chaque entrée. C’est le cas de Sephora, de Lidl Plus ou de Ebay. Le but étant de donner davantage de clarté au cas où les pictogrammes, parfois très stylisés, ne se suffisent pas à eux-mêmes.

Cyrille Legrand - Head of Mobile @USERADGENTS : “L’important ici c’est l'affordance. Les guidelines d'Apple sont de toujours préférer l'utilisation de pictogrammes pleins accompagnés de textes, car les screen readers ne lisent pas les pictogrammes seuls, ce qui pose un problème d'accessibilité. Attention en revanche à l’uniformité : si l’étiquette textuelle existe, il faut qu’elle soit sous tous les pictogrammes”.

Quel pictogramme pour quelle entrée ?

Ces entrées clés sont quasi à chaque fois représentées de la même façon chez nos différents acteurs et traduisent des codes visuels déjà bien ancrés dans le retail (mais pas que), les apps et l’esprit des consommateurs. Concrètement :

100% des apps représentent la Wishlist par un cœur
93% des apps représentent le Compte par une silhouette
88% des apps représentent la Recherche ou le Catalogue par une loupe
84% des apps représentent l’Accueil par une maison
Seul le panier suscite un léger débat… Sur les 24 acteurs possédant leur Panier en tab bar, 10 le représentent par un sac (principalement des acteurs du textile et de la beauté comme Shein ou Nocibé), 8 utilisent un véritable panier (certains vendeurs tech comme Fnac, Boulanger mais aussi de l’alimentaire comme Auchan) et 6 préfèrent le caddie (là, les acteurs sont variés : Carrefour, Temu ou encore Etsy). Choix assez logique entre les acteurs de la GSA (où le caddie est iconique) et de la GSS, plus varié.

Dounia Habach - UI Designer @USERADGENTS : “Le design des pictogrammes est clé pour permettre à l’utilisateur de se repérer dans l’application. Il faut par exemple faire attention à toujours utiliser des couleurs accessibles, choisir différents styles (du filaire, du non filaire) et des codes graphiques facilement identifiables comme le soulignage par exemple.”

Parlons micro-interactions :

Les micro-interactions sont depuis quelques années les stars - plus ou moins discrètes - de nos apps mobiles. Elles permettent d'améliorer l'expérience utilisateur de manière engageante voire chaleureuse, en le guidant vers une action ou en attestant du statut de cette dernière. Elles sont de plus en plus utilisées aujourd’hui dans les applications et notamment en tab bar, par exemple chez des acteurs comme LinkedIn ou Lydia par exemple.

Dounia Habach - UI Designer @USERADGENTS : “Les micro-interactions contribuent à créer un sentiment d’engagement de la part des utilisateurs et apportent une certaine satisfaction car elles les impliquent davantage dans l’expérience proposée, en communiquant instantanément avec eux. Attention, elles ne doivent pas être trop envahissantes, au risque de distraire ou ennuyer l’utilisateur”.

Dans le retail, on préférera utiliser de discrètes affordances dans la tab bar pour attester d’un état de sélection. Ces comportements sont d’ailleurs natifs sur iOS, réalisables en quelques lignes de codes. C’est le cas chez 60% des retailers que nous avons étudiés, avec plusieurs variantes :

Modification de couleur ou de remplissage : utilisée par 68% des applications, comme Darty, qui fait passer le pictogramme du gris au bleu/jaune/rouge (couleurs de la marque) lorsque l’entrée est sélectionnée ou comme Carrefour qui fait passer le pictogramme d’une forme creuse quand l’entrée n’es à une forme pleine.
Modification de forme : 18% des applications, à l’image de Cider, font évoluer leurs entrées : ex Accueil (en lui insérant une porte) ou Profil (en déplaçant son sourire). 14% des applications ajoutent ou remplacent un élément dans le pictogramme. Par exemple Zara, SNCF Connect ou La Redoute complètent le pictogramme sélectionné avec un léger trait en dessous. Attention, pour des raisons d’accessibilité, on ne peut pas se permettre de faire varier la forme seule, il faut aussi l’accompagner d’une distinction de couleur.
Mouvement / pression : 14% des applications intègrent un petit retour haptique ou un léger rebond au touch. C’est le cas chez Lidl Plus ou Galeries Lafayette.

L’utilisation d’Active Indicator (léger encadré du pictogramme) ou de badge est également préconisée par Apple et Android pour attester là aussi de l’état de sélection d’une entrée ou de l’arrivée d’un message, d’une notification ou du nombre d’items au panier.

Intégration d’Active Indicator ou de badges dans la tab bar (Android / Material design 3)

Cyrille Legrand - Head of Mobile @USERADGENTS : “Pour ces types de micro-interactions là, avec des changements d’états discrets sans transition entre non-sélection et sélection, il n’y a aucun impact côté consommation car c’est 100% natif. Lorsque l’on utilise en revanche des transitions animées, on entre dans du sur-mesure et on a recours ici aux formats Lottie, qui sont un peu plus complexes et exportables depuis AfterEffects avant d’être joués sur iOS ou Android. Attention encore une fois dans ces cas-là aux normes d’accessibilité… C’est pourquoi on préconise plutôt d’éviter de dégainer un gros framework comme Lottie si l’on peut s’en sortir avec les animations de l’OS”.

En conclusion, 10 bonnes pratiques pour optimiser votre tab bar !

La tab bar reste donc un incontournable en 2023 dans les apps ! Véritable guide dans les parcours - d’achat principalement - en en symbolisant chaque étape clé, elle remplit toujours sa mission principale : permettre à l’utilisateur de naviguer facilement dans l’app pour atteindre facilement ses objectifs et donc favoriser la conversion. Graphiquement, l’heure reste à la simplicité en misant sur des choix de pictogrammes toujours très codifiés ou des wordings très transparents. Les micro-interactions permettent, elles, d’ajouter un peu d’interaction et d’émotion et rencontrent donc un certain succès bien que l’optique reste la même : ne pas surcharger l’œil de l’utilisateur pour faire en sorte qu’il aille toujours à l’essentiel… l’action (achat, booking, opt-in…). Pour finir, voici 10 bonnes pratiques/ pistes pour optimiser votre tab bar :

Avoir entre 3 et 5 entrées dans la tab bar
Ne pas changer dynamiquement les entrées de la tab bar
Ne pas avoir de scroll horizontal dans la tab bar
Eviter les entrées type réglages/paramètres
Faire disparaître la tab bar avec parcimonie (vue modale, clavier sur Apple, au scroll sur Android) et gérer la transparence (sur Apple)
Opter pour des pictos (de préférence pleins sur iOS) et du texte
Eviter les textes (labels) avec des termes trop génériques (Accueil non recommandé par Apple)
Mettre en avant visuellement l’entrée sélectionnée (par exemple avec l’Active Indicator sur Android)
Utiliser le badging (comme les notifications) pour mettre en avant les nouveautés
Créer des micro-interactions légères pour rendre votre tab bar vivante

Tab bar, status bar, app bar..., si vous souhaitez analyser plus en profondeur la structure de l’information et de navigation dans votre app, n'hésitez pas à faire appel aux experts USERADGENTS.

¹Action, Adidas, AliExpress, Amazon, Asos, Auchan, Back Market, Booking.com, Boulanger, Brico privé, Carrefour, CDiscount, Cider, Darty, Decathlon, Ebay, Etam, Etsy, Farfetch, Fnac, Galeries Lafayette, H&M, IKEA, JD Sports, Jennyfer, La Redoute, Leboncoin, Leclerc, Leroy Merlin, Lidl, Lidl Plus, ManoMano, Nike, Nike SNKRS, Nocibé, Pimkie, Rakuten, Selency, Sephora, Shein, Showroomprivé, SNCF Connect, Temu, Uniqlo, Urban Outfitters, Veepee, Vestiaire Collective, Vinted, Zalando, Zara.