Navigation par onglets : quand l'utiliser et comment l'optimiser

L'une de mes citations UX préférées vient de Chikezie Ejiasi, responsable du studio et des systèmes de conception chez Google.

Il a écrit : « La vie est conversationnelle. La conception Web devrait être de la même manière. Sur le Web, vous parlez à quelqu'un que vous n'avez probablement jamais rencontré. Il est donc important d'être clair et précis. Ainsi, une navigation bien structurée et une organisation du contenu vont de pair avec une bonne conversation.

La navigation par onglets peut-elle être claire et précise ? Bien sûr, c'est possible, ce qui en fait une forme valable de navigation et d'organisation de contenu.

Ce qui compte, comme pour la plupart des choses liées à l'UX, c'est comment vous l'implémentez et comment vous l'optimisez.

Qu'est-ce que la navigation par onglets ?

La navigation par onglets est un style de navigation et d'interface utilisateur dans lequel les informations sont organisées en onglets, qui séparent le contenu en différentes sections.

Généralement, lorsque vous regardez les navigations par onglets, vous remarquerez certaines caractéristiques communes :

1. Coins des onglets arrondis ;
2. Séparation des onglets, qu'il s'agisse d'un espace ou d'une seule ligne ;
3. Effets de survol sur les onglets ;
4. Dégradé pour ajouter de la profondeur et de la dimension aux onglets.

La navigation par onglets est basée sur la métaphore du dossier, que toute personne travaillant dans un bureau ou regardant la télévision devrait connaître. Tout comme l'explique Mifsud de UsabilityGeek…

Justin Mifsud, Usability Geek :

« Dans la terminologie de l'interface utilisateur, les métaphores sont des idées ou des objets qui sont utilisés pour faciliter la familiarité entre l'utilisateur et l'application.

L'utilisation d'onglets dans l'interface utilisateur est une excellente métaphore car ils ressemblent à des séparateurs d'onglets réels dans des fichiers ou des onglets sur des dossiers dans un tiroir de fichiers.

Ainsi, il est plus intuitif pour les utilisateurs de savoir que ces onglets divisent le contenu en sections et, comme dans la vraie vie, atteindre l'onglet (émulé sur le Web en cliquant sur un onglet) affichera le contenu respectif. (via UsabilityGeek)

Parce que la métaphore est si courante, il est important que vous fassiez attention à la mise en œuvre. Les navigations par onglets ont un prototype solide, elles doivent donc ressembler et fonctionner exactement comme elles sont attendues.

Comme tout bon système de navigation, les onglets permettent de :

• Séparez judicieusement le contenu en différentes sections ;
• Montrez aux gens quel contenu est disponible pour eux et comment ils peuvent accéder à ce contenu ;
• Montrez aux gens, visuellement, où ils se trouvent sur votre site.

Quand est-ce une bonne idée d'utiliser la navigation par onglets ?

Généralement, c'est une bonne idée d'utiliser la navigation par onglets lorsque…

• Vous avez entre deux et neuf catégories de contenu différentes.
• Les noms de catégories sont relativement courts et prévisibles, à la fois en termes de position et de copie (c'est-à-dire qu'ils correspondent au prototype).
• Il est peu probable que le nombre de catégories change régulièrement.
• Les catégories sont de nature similaire; il est logique qu'ils soient tabulés ensemble.
• Les catégories tiennent sur une seule ligne.

Comme l'explique Jakob Nielsen de Nielsen Norman Group, lorsque la navigation par onglets devient si complexe qu'elle nécessite plusieurs lignes, des problèmes commencent à surgir…

Jakob Nielsen, Groupe Nielsen Norman :

« Plusieurs lignes créent des éléments d'interface utilisateur sautants, qui détruisent la mémoire spatiale et empêchent ainsi les utilisateurs de se souvenir des onglets qu'ils ont déjà visités.

De plus, plusieurs lignes sont un symptôme certain d'une complexité excessive : si vous avez besoin de plus d'onglets que ne peut en contenir une seule ligne, vous devez simplifier votre conception. » (via NN/g)

Plusieurs lignes créent également des problèmes de hiérarchie visuelle. Lorsqu'il y a une deuxième rangée, cela peut signaler à l'utilisateur que les onglets de la deuxième rangée sont des sous-catégories ou, du moins, moins importants que les onglets de la première rangée.

Généralement, ce n'est pas une bonne idée d'utiliser la navigation par onglets lorsque :

• Vous voulez que les gens comparent le contenu simultanément. Cela sollicite la mémoire et augmente considérablement la charge cognitive.
• Vous envisagez d'ajouter un lien de style « Plus… ».

Bien sûr, ce ne sont que des directives de base. Vous pourriez correspondre à toutes les règles "vous devriez l'utiliser" et constater que cela ne fonctionne pas pour votre public. C'est finalement quelque chose que vous devrez tester.

N'oubliez pas que vous pouvez utiliser vos analyses numériques pour déterminer si votre navigation par onglets crée des problèmes pour vos visiteurs. À partir de là, vous pouvez soit apporter des modifications pour résoudre les problèmes, soit expérimenter un nouveau type de navigation.

La controverse

Alors que les pratiques de conception modernes ont beaucoup de sites ressemblant à ceci…

… certaines personnes utilisent la navigation par onglets comme navigation principale.

Comme Luke Wroblewski de Google l'a relaté il y a des années, Amazon a vraiment été le pionnier de cette tendance…

Luc Wroblewski, Google :

« En 1998, le site comportait deux catégories principales : les livres et la musique.

Au fur et à mesure que des catégories supplémentaires ont été ajoutées (telles que des vidéos et des cadeaux), le système d'onglets horizontaux s'est assez bien adapté et a créé une belle opportunité de différencier les catégories de produits par la couleur. (via LukeW)

Voici un aperçu de la façon dont Amazon utilisait la navigation par onglets dans les premiers jours…

Au fur et à mesure que le site gagnait en popularité, le nombre d'onglets dont Amazon avait besoin augmentait également…

En 1999, Jakob a qualifié cela de "mauvaise conception et d'abus de la métaphore de l'onglet":

Je maintiens que les onglets seraient mieux utilisés pour basculer entre des vues alternatives (mais liées) que pour naviguer vers des emplacements non liés.

Vous devez utiliser les onglets pour alterner entre les vues dans le même contexte, et non pour naviguer dans différentes zones. C'est le point le plus important, car rester en place tout en alternant les vues est la raison pour laquelle nous avons des onglets en premier lieu

Jacob Nielsen

Pourtant, de nombreux sites ont suivi l'exemple d'Amazon et la définition de la navigation par onglets a commencé à changer par rapport au "basculement entre les vues alternatives" de Nielsen.

Bien que l'utilisation de la navigation par onglets comme système de navigation principal soit un peu démodée, cela peut fonctionner. Comme pour la plupart des choses, votre principale préoccupation ne devrait pas être ce que dit Nielsen à propos de la navigation par onglets, mais ce que dit votre public.

Le trouvent-ils difficile à utiliser ? Naviguent-ils correctement sur votre site ? Peuvent-ils trouver les éléments les plus importants de votre site ? Effectuez des tests d'utilisabilité pour être sûr.

Comment implémenter la navigation par onglets

Air Canada, ainsi que la plupart des grandes compagnies aériennes, utilise bien la navigation par onglets…

Lorsque vous implémentez vous-même la navigation par onglets (à n'importe quel niveau), voici quelques éléments à garder à l'esprit :

• Tout d'abord, concevez l'architecture de l'information (IA) de votre site afin de pouvoir prendre des décisions plus intelligentes concernant les onglets.
• L'onglet entier doit être cliquable, pas seulement le nom de la catégorie (texte).
• N'utilisez pas d'onglet « Accueil », même si vous utilisez la navigation par onglets pour l'ensemble de votre site. Au lieu de cela, demandez à votre logo de diriger les visiteurs vers la page d'accueil.
• L'onglet doit être connecté à la zone de contenu qu'il contrôle afin que la portée de l'onglet soit claire.
• Les noms de catégorie doivent être longs d'un ou deux mots et écrits en anglais courant. Évitez d'utiliser toutes les majuscules car cela rend les onglets plus difficiles à lire.
• N'empilez pas plusieurs rangées d'onglets. Si vous le devez, utilisez plutôt des sous-catégories (c'est-à-dire une deuxième barre horizontale sous les onglets). Si vous utilisez des sous-catégories, assurez-vous qu'il existe une connexion visuelle entre l'onglet sélectionné et la barre des sous-catégories ci-dessous. Assurez-vous que le nombre de sous-catégories que vous utilisez n'est pas écrasant ; condenser et simplifier.
• L'onglet sélectionné doit être mis en évidence pour indiquer l'emplacement actuel. Cependant, les onglets non sélectionnés ne doivent pas être si silencieux qu'ils sont oubliés ou négligés.
• Un ordre de tabulation cohérent doit être maintenu d'une page à l'autre afin que l'utilisateur comprenne parfaitement comment les onglets sont liés les uns aux autres.

Jakob explique pourquoi ce type de cohérence est important…

1. Reconnaissabilité. Quand quelque chose a toujours la même apparence, vous savez ce qu'il faut rechercher et vous savez ce que c'est quand vous le trouvez.

2. Prévisibilité. Quand quelque chose fonctionne toujours de la même manière, vous savez ce qui se passera lorsque vous agirez en conséquence.

3. Autonomisation. Lorsque vous pouvez compter sur vos connaissances passées de toutes les fonctionnalités disponibles, vous pouvez facilement composer un ensemble d'actions pour atteindre votre objectif.

4. Efficacité. Il n'est pas nécessaire de passer du temps à apprendre quelque chose de nouveau ou à s'inquiéter de l'effet de fonctionnalités incohérentes.

Jacob Nielsen

Exemples de navigation par onglets bien faite

La meilleure façon de comprendre la navigation par onglets, d'autant plus qu'elle peut être utilisée de différentes manières, est de regarder quelques exemples.

1. Collection de pochettes d'albums

Album Art Collection est un exemple assez populaire de navigation par onglets…

Deux choses sont intéressantes ici…

1. La navigation est verticale et non horizontale.
2. La navigation comprend des icônes.

En règle générale, vous trouverez des navigations par onglets présentées horizontalement. Cela est dû en partie aux prototypes de conception. Comme c'est courant, les gens ont tendance à rechercher les navigations dans l'espace horizontal sous le logo.

Bien sûr, cela ne signifie pas que vous êtes limité à l'utilisation de cet espace pour la navigation. Assurez-vous simplement d'utiliser les tests utilisateur. Vous ne voulez pas que le déplacement de votre navigation pour des raisons stylistiques impacte la facilité d'utilisation de votre site.

Notez que si Album Art Collection utilise des icônes de navigation, ils n'abandonnent pas les descriptions textuelles. Le test d'utilisabilité des icônes est un article à part entière, mais le plus souvent, les descriptions textuelles sont plus utilisables que les icônes seules. Jacob Gube de Six Revisions explique…

Jacob Gube, Six révisions :

"Évitez d'utiliser des icônes pour remplacer le texte de contrôle des onglets, car les symboles peuvent signifier différentes choses pour différentes personnes - le pari le plus sûr consiste à utiliser du texte brut pour décrire les informations du volet." (via Smashing Magazine)

2. La machine à facturer

La machine à factures est votre navigation par onglets de base comme exemple de navigation principal…

Cependant, ils incluent un onglet "Accueil", qui est redondant. Notez comment l'onglet sélectionné est avancé et les onglets sont connectés à la zone de contenu.

3. Tampon

Buffer était l'un de mes exemples préférés de navigation par onglets. Dans le passé, ils avaient une offre pour les particuliers et une offre pour les entreprises, ils utilisent donc des onglets pour séparer leur contenu sous le pli.

C’était le début du contenu pour les particuliers…

Et voilà le début du contenu pour les entreprises…

Cela leur a permis de s'adresser à deux publics différents sans créer un site ou une expérience entièrement distincts.

Plus tard, la page produit de Buffer a subi de profonds changements, avec Publier, Répondre et Analyser entre autres offres (toutes assez explicites). Voici la navigation par onglets qu'ils ont utilisée pour leurs pages :

Outre les différents plans tarifaires, ces onglets basés sur les produits affichaient un témoignage différent, pertinent pour le produit sur l'onglet :

Comme l'explique David Leggett de UX Booth, la navigation par onglets est pertinente au-delà des niveaux de navigation primaire et secondaire. Ils peuvent même être utilisés sous le pli, comme dans le cas de Buffer…

David Leggett, stand UX :

« Les onglets n'ont pas besoin d'être limités aux niveaux de navigation primaire et secondaire. S'ils offrent à un utilisateur la possibilité de basculer entre les zones du même contenu, ils peuvent s'avérer très utiles.

Combiné avec une technologie qui change de contenu sans recharger une page, cela peut donner une sensation tangible à l'utilisateur final qui navigue sur la page. (via UX Booth)

3 bonnes pratiques à retenir

Avant d'expérimenter la navigation par onglets ou de décider qu'elle ne fonctionne pas pour vous, tenez compte de ces trois facteurs : accessibilité, segmentation et vitesse.

1. L'accessibilité est importante

Vous voulez que votre site soit accessible aux personnes handicapées ou ayant des limitations. Pour ce faire avec la navigation par onglets, vous devrez…

• Autorisez les utilisateurs à naviguer dans les onglets à l'aide de la touche "Tab" de leur clavier.
• Autoriser les utilisateurs à sélectionner un onglet à l'aide de la touche "Entrée" de leur clavier.
• Indiquez quel onglet est sélectionné en utilisant une méthode alternative. Par exemple, vous pouvez inclure un attribut de titre avec le mot "actif".

Rendre votre site plus facile à utiliser pour plus de personnes ne nuira jamais aux conversions.

2. Le découpage compte

Avec la navigation par onglets, la façon dont vous décidez d'organiser et de segmenter votre contenu est extrêmement importante. C'est pourquoi ma première recommandation de mise en œuvre ci-dessus était liée à l'architecture de l'information de votre site.

Justin explique pourquoi une bonne organisation est vitale…

Justin Mifsud, Usability Geek :

"Les onglets divisent le contenu en sections significatives qui occupent moins d'espace à l'écran. À cet égard, les utilisateurs peuvent facilement accéder au contenu qui les intéresse (plutôt que d'avoir tout le contenu dans des paragraphes). (via UsabilityGeek)

Considérez tout le contenu que vous souhaitez sur votre site. Ensuite, regroupez ce contenu en quatre à cinq compartiments. Vous pourrez probablement répéter cet exercice et vous retrouver avec deux ou trois seaux différents. C'est bien. Effectuez des tests utilisateur pour voir à quelles personnes répondent mieux et avec lesquelles la navigation est la meilleure.

Avant tout, vous voudrez vous assurer…

1. Votre contenu est découpé d'une manière logique, attendue et claire pour les visiteurs.
2. L'ordre de vos onglets est significatif et logique.
3. Vos onglets suivent les prototypes existants. Par exemple, les sites SaaS sont souvent segmentés d'une manière spécifique, tandis que les sites de commerce électronique sont souvent segmentés d'une autre.

3. La vitesse compte

Nous avons écrit à maintes reprises sur l'importance de la vitesse. Il n'est donc pas surprenant que la vitesse joue également un rôle dans l'efficacité de la navigation par onglets.

Jacob l'explique très bien...

Jacob Gube, Six révisions :

« L'utilisation des onglets de module a pour but de permettre une présentation rapide et interactive du contenu. Pour cela, vous devez essayer d'avoir le contenu du volet inactif écrit en ligne dans le document HTML, puis utiliser CSS et JavaScript pour styliser et masquer visuellement le volet, ce qui est plus rapide que d'exiger un rechargement de page ou de demander des données de source distante.

Évitez les rechargements de page lors du basculement entre les volets, car cela retarde considérablement la navigation entre les volets. Le contenu chargé à distance à l'aide d'Ajax peut être une option pour les informations de volet dynamiques et distantes, mais présente un défi pour les utilisateurs de lecteurs d'écran qui peuvent ne pas être conscients des nœuds insérés de manière asynchrone dans le DOM dans l'arborescence du document. (via Smashing Magazine)

Ce conseil ne s'applique pas à ceux qui utilisent la navigation par onglets comme navigation principale, mais ceux qui utilisent la navigation par onglets comme Air Canada et Buffer doivent en prendre note.

Conclusion

La navigation par onglets peut absolument aboutir à "une bonne conversation" avec vos visiteurs. S'il est correctement mis en œuvre, il est suffisamment clair et précis pour indiquer à vos visiteurs : exactement où ils se trouvent, exactement ce qui est à leur disposition et exactement comment ils peuvent accéder à ce qui est à leur disposition.

Avec l'aide de tests d'utilisabilité et d'optimisation, cette conversation s'améliore encore plus.

Comme pour tout, cependant, assurez-vous de mener vos recherches (dans ce cas, vos recherches sur l'architecture de l'information) et de tester, tester, tester.

En résumé…

1. La navigation par onglets peut être utilisée comme système de navigation principal ainsi qu'au-delà des niveaux de navigation principal ou secondaire.
2. Essayez la navigation par onglets lorsque vous avez deux à neuf catégories solides et similaires avec des noms courts qui tiennent sur une seule ligne.
3. N'essayez pas la navigation par onglets lorsque vous voulez que les gens comparent le contenu ou pensez à ajouter un lien « Plus… ».
4. Vous pouvez suivre les meilleures pratiques de mise en œuvre, mais…
5. Ce qui compte, ce sont vos données. Vos visiteurs ont-ils du mal à naviguer sur votre site avec la navigation par onglets ? Effectuez des tests d'utilisabilité pour le savoir.
6. Corrigez les problèmes qui apparaissent. Ou, s'il y a de nombreux problèmes coûteux, envisagez un autre système de navigation.
7. L'accessibilité, la segmentation et la vitesse sont importantes lorsqu'il s'agit de navigation par onglets, alors faites très attention.

Travailler sur quelque chose lié à cela? Postez un commentaire dans la communauté CXL !