Le retour en Chine a coïncidé avec l'événement UXday organisé par le département de l'expérience utilisateur de Baidu. Le sujet de notre discussion de groupe était les tabous lors de l'utilisation des onglets.
Le sujet que nous avons abordé s'est concentré sur un point : comment gérer les onglets massifs ?
Tout d’abord, passons en revue l’historique de Tab. L'onglet ici est un terme général désignant un type d'éléments interactifs, y compris la navigation dans la conception Web et l'utilisation dans les logiciels de bureau tels que les navigateurs. Les éléments interactifs appelés onglets présentent généralement les deux caractéristiques suivantes :
Il a à la fois des significations d’action et de statut. L'une des raisons pour lesquelles les onglets sont populaires est qu'ils sont faciles à utiliser et permettent en même temps aux utilisateurs de savoir clairement où ils se trouvent actuellement (onglet)
Du point de vue de l'architecture de l'information, le contenu entre les onglets ne se chevauche généralement pas. Et la relation entre les onglets doit être égale et il ne doit y avoir aucune affiliation mutuelle.
Ainsi, au sens large, la plupart des menus de navigation peuvent en fait se résumer à des onglets.
L'utilisation d'onglets dans la conception de sites Web est généralement considérée comme un pionnier d'Amazon. Je pense que beaucoup d'entre vous ont lu l'article de critique classique de LukeW : L'histoire de la navigation par onglets d'Amazon (pour la version chinoise, veuillez cliquer ici). À partir de cet article, nous pouvons voir que la navigation d'Amazon a évolué, passant de seulement deux onglets : Livre et Musique à deux rangées d'onglets à son apogée en 2000. Évidemment, lorsque le nombre d'onglets augmente, la méthode d'interaction par onglets rencontre certaines difficultés.
Un autre exemple est la boîte de dialogue Paramètres dans Word 2003. Comme le montre la figure ci-dessous, lorsqu'il y a trop d'étiquettes et que l'espace d'affichage est limité, Microsoft doit disposer les étiquettes sur deux lignes. Un gros problème est que, lorsque la rangée supérieure d'étiquettes est sélectionnée, comment exprimer la relation entre l'état sélectionné et la page de contenu actuelle ?
L'approche de Microsoft a été critiquée. Dans l'image ci-dessus, lorsque l'utilisateur clique sur la rangée supérieure d'étiquettes, la ligne supérieure permute automatiquement avec la ligne inférieure pour maintenir une relation étroite entre les étiquettes et la page de contenu. Cependant, cette approche rend la position du label très incohérente. Je pense que beaucoup de gens vivent la même expérience déroutante.
Dans certains autres logiciels, tels que Firefox 3 (comme illustré ci-dessous), lorsque vous cliquez sur l'étiquette de la ligne supérieure, l'affichage de l'étiquette est uniquement modifié à l'état sélectionné. L'avantage est que la cohérence de la position de l'étiquette est maintenue, mais. certaines indications de position sont perdues.
Alors, si plusieurs rangées d’étiquettes ne sont pas une bonne idée, comment gérer un grand nombre d’entre elles ?
Une idée évidente est de changer la disposition des étiquettes de la disposition horizontale habituelle à la disposition verticale. Généralement, cette disposition se trouve sur le côté gauche de la vue et peut prendre la forme d'icônes ou de texte.
Cependant, cette approche pose certains problèmes. Tout d'abord, si le nom de l'étiquette est très long, il occupera beaucoup d'espace gauche précieux, et cet espace se trouve être le centre de l'attention de l'utilisateur sur l'écran et constitue un champ de bataille pour les stratèges militaires. Certains sites Web placent le texte verticalement. Cette approche, notamment pour les sites Web anglais, est un désastre en termes de lisibilité. S'il est placé sur le côté droit, il peut interférer avec la barre de défilement et il n'est pas facile pour les utilisateurs de le remarquer. Deuxièmement, lorsqu’il n’y a pas beaucoup de balises (compte tenu du nombre variable de balises), c’est aussi un casse-tête de mettre quel contenu sous les balises.
Une idée est que s'il existe une certaine structure entre les balises, celles-ci peuvent être regroupées. Ajoutez ensuite un niveau de navigation. OneNote de Microsoft a atteint le summum à cet égard : il divise les informations en trois niveaux : bloc-notes, section et page. Chaque niveau est représenté par des onglets de navigation. Le résultat est que les côtés supérieur, gauche et droit de la page sont remplis d'étiquettes. ... Microsoft gère très bien la navigation par étiquettes à trois couches en utilisant la gestalt (division à gauche), le marquage des couleurs (couleur pour la section et blanc pour la page) et d'autres techniques.
