Les bonnes pratiques d’une Tab Bar (iPhone)

2 mai 2011

Depuis maintenant plusieurs années l’iphone est devenu un joujou incontournable et ultra médiatisé. Sa facilité d’adaptation, et ce même pour les plus novices en high tech (même constat pour l’ipad : chez les enfants, chez les personnes âgées), n’est pas si anodine.

Le secret ? la fameuse « Tab Bar » , une barre de navigation située en bas de l’écran et composée généralement de plusieurs onglets, un icône, un libellé et l’ultra connu effet « glossy » (marque de fabrique Apple).

Cet article est très largement inspiré de l’excellent article anglais « The iPhone Tab Bar » du blog Significantpixels. Ayant également travaillé sur la conception pour applications iphone au cours de cette année j’ai trouvé intéressant de pousser l’analyse en y ajoutant ma touche personnelle et mon point de vue. De plus celui-ci a pour but de compléter un ancien article (que j’espère vous avez bien tous lu) sur la conception des menus pour applications mobiles

 

5 mais pas « plus »

La barre d’onglet Apple a été conçue pour contenir 5 onglets au maximum et cela dans un but bien précis : la lisibilité (icône et texte) !
Un standard qui est cependant facilement contournable avec l’intégration d’un onglet « Plus », « More » ou « Autres » . Mais cette fonctionnalité est à éviter si possible.

  • On pourrait très bien se dire : j’ai trop d’onglet et n’arrive pas à entrer toutes mes catégories dans ma tab bar, je choisis la facilité et ajoute un onglet « plus ». Oui mais alors quel contenu mettre en avant sur la navigation principale ? Pourquoi ce contenu et pas un autre? Si déjà vous êtes vous-même perdu, imaginez vos mobinautes.. Soyez simple, allez à l’essentiel ! faites en le moins possible tout le monde y sera gagnant.
  • Il est difficile pour les utilisateurs de se rappeler ou de deviner ce qui est caché sous l’onglet « Autres », et cela devient particulièrement gênant si le nombre d’articles/catégories dans cet onglet excède 5 tab bar, application ipod(un effet de double navigation). La charge cognitive devient alors trop pesante pourle mobinaute.
  • Toutefois, il y a des exceptions pour lesquelles l’utilisation de ces onglets ont un sens. Le tri des données, la catégorisation laissant l’utilisateur maître dans l’édition de ses onglets préférés est logique. On retrouve cela par exemple dans l’application Ipod (image ci-contre) mais également dans la plupart des applications d’actualités : 20 minutes, Le Monde, Slate. Le choix de mettre nous même telle ou telle catégorie en avant est particulièrement judicieux (comportement d’un utilisateur avancé).

 

Application Le Monde, 20 minutes, Slate

 

 

Faites vous aider (et pensez aux utilisateurs)

Comme pour toute conception, il est utile (voir indispensable) d’être plusieurs à réfléchir pour trouver le bon processus de navigation, la bonne classification, le bon terme … et qui de mieux que les utilisateurs eux-mêmes ? :) on peux ainsi demander à un échantillon de la cible de donner son avis que ce soit de façon individuelle ou collective ou de façon ouverte ou fermé (restriction sur le choix des termes). La méthode du card storring est ici tout à fait appropriée  (et fera l’objet d’un nouvel article).

card storing - test utilisateur

Photo by Ivo Gomes.

 

Le changement automatique d’onglet est à éviter

Parfois il est difficile de faire autrement mais c’est une méthode assez déroutante pour l’utilisateur. C’est pour eux quelque chose d’inattendue et perturbant pouvant entrainer une grande frustration si cela n’est pas fait de manière intuitive .

Si vous n’avez pas d’autres choix, n’oubliez surtout pas de montrer de manière subtile  que la barre de navigation a changé : transition de droite à gauche, transition avec effet rotatif.

Un exemple : l’application twitter (effet de transition) et au vue de la cible utilisant l’application twitter, il ne semble pas que ce changement de navigation pose problème quand à l’intuitivité de l’application.

ou application linkedin (cas à part) ou là navigation est constamment différente

 

 

Personnalisation de la tab bar

La personnalisation apporte de la personnalité, du caractère et permet une mémorisation plus rapide de l’application et de la marque. C’est par conséquent un vrai atout en terme de stratégie de communication et d’identification de marque.

Cependant il y a quelques petites choses à prendre en compte avant de se lancer dans la modification graphique d’une tab bar :

  • cela demande du temps au graphiste, mais également au développeur (développement spécifique)!
  • il faut également garder à l’esprit que les choix graphiques par défaut de apple ne sont pas anodin. La couleur  de fond, l’aspect etc permettent une séparation parfaitement nette entre la navigation et son contenu.

Exemple de tab bar personnalisée :

H&M, Color, Dismoiou, Instagram


Les bonnes pratiques iconographiques :

  • prenez le temps nécessaire !
  • assurez vous que l’icône est représentatif de son contenu et non ambigue. Il n’y a rien de plus frustrant que de se demander ce que contient l’onglet, cela doit être évident.
  • Eviter de créer des discordances entre l’icône et le libellé. On n’associera pas l’icône « pinceau » avec le libellé « rapports » par exemple. On parle de « picture-word interférence »
  • Si vous créez un onglet « Favoris », n’essayez pas de chercher ou réinventer un mot ou un symbole original. Le mot Favoris, et l’icône en forme d’étoile est le plus parlant, pas besoin d’aller chercher plus loin. Il faut aider les utilisateurs à réduire aux maximum leur charge cognitive. Autre exemple parlant (dans le e-commerce) l’utilisateur s’attend à voir écrit en haut à droite « Panier » et non « Caddie » ou « Sac ».
  • Evitez les redondances comme par exemple : Mes Vidéos, Mes musiques, Mes livres…  C’est l’effet stroop.

Une fois de plus, si l’inspiration vous manque ou que vous n’êtes pas sur de vos choix, n’hésitez pas  demander de l’aide aux utilisateurs : « Qu’est ce que cette icône représente pour vous? »

 

 

 

Spotify utilise une icône maison avec pour libellé « Quoi de neuf ». Un icône peu judicieux et difficilement utilisable autrement que pour un onglet « Accueil ».

 

 

 

 

 

 

crédit image