Meilleure façon d'afficher les onglets dans l'interface utilisateur

Question

Je travaille sur l'interface utilisateur où j'ai besoin d'ajouter des onglets. Actuellement, j'ai ajouté des onglets tous de la même taille mais la taille du texte à l'intérieur de chaque onglet peut être différente. L'onglet sélectionné est représenté par une couleur différente comme indiqué ci-dessous:

mais il n'y a aucun lien entre le volet sélectionné et sa zone pertinente lorsque je regarde mon interface utilisateur. De plus, on me demande d'afficher des onglets de tailles différentes en fonction de la taille du texte à l'intérieur de chaque onglet, mais des onglets de tailles différentes semblent étranges en ce qui concerne l'interface utilisateur. L'onglet actuel ressemble plus à des boutons.

Pouvez-vous suggérer de meilleures idées pour gérer ces onglets? J'ai également lu Apple UI guidelines on tabs mais je n'ai rien trouvé de pertinent. Aidez-moi à avoir les meilleurs onglets pour mon UI.

Answer 1

Inspirez-vous de cela. Ce schéma est suivi presque partout.

L'onglet sélectionné fusionne de manière transparente avec la zone de conten tandis que les autres onglets ont un ton plus sombre en général.

Answer 2

Cela s'appelle "interface de document à onglets", vous pouvez donc la rechercher sur Google.

Selon mon expérience:

1. La couleur arrière de l'onglet actif doit correspondre à la couleur arrière de la page, sans lignes séparant les deux.

2. Tous les onglets doivent avoir la même largeur maximale et, à mesure que davantage d'onglets s'ouvrent, la largeur des onglets doit diminuer. Maintenant, en fonction du nombre habituel d'onglets utilisés dans votre programme, vous pourriez arriver à un point où la largeur des onglets est trop petite et vous devrez ajouter un bouton le plus à droite au menu des onglets qui ne correspondent pas.

3. Permettez-moi de le répéter: tous les onglets doivent avoir la même largeur. De cette façon, les utilisateurs mémorisent la distance de déplacement entre les onglets et peuvent changer d'onglet avec la souris presque comme un réflexe. Si vous avez des onglets à largeur variable, cela devient une montre à chaque fois que vous cliquez sur l'exercice.

4. La couleur de fond des onglets inactifs doit être plus sombre.

5. Vous pouvez avoir un premier onglet fixe non fermé avec un menu, à partir duquel vous sélectionnez des options qui ouvrent les autres onglets. Cet onglet pourrait être la moitié de la largeur des autres onglets, ou peut-être assez large pour une icône "home".

6. Les légendes des onglets doivent être alignées à gauche, non centrées, ce sont des noms d'onglets, pas des légendes de bouton. Il est beaucoup plus facile de lire les noms des onglets s'ils sont tous alignés à gauche.

7. Les légendes de tabulation longues qui ne correspondent pas à la largeur de tabulation doivent être raccourcies avec des points de suspension et une info-bulle doit être disponible avec la légende complète.

8. Facultativement, l'utilisateur devrait être en mesure de glisser-déposer des onglets pour les réorganiser. Les onglets doivent avoir un bouton de fermeture près de la bordure droite.

Vous avez trois principaux exemples TDI à vérifier: Internet Explorer, Firefox et Google Chrome.

Answer 3

Et quelque chose comme ça

En fait, ici, je veux dire que l'onglet sélectionné doit être différent des autres non sélectionnés, pour cela la taille de l'onglet sélectionné, la couleur du texte et la couleur d'arrière-plan de l'onglet doivent être différentes. Je pense que c'est mieux.

Answer 4

Une stratégie simple consiste à inverser la couleur des onglets afin que l'onglet sélectionné ait un fond blanc avec une couleur de police noire. De cette façon, la zone d'affichage aura la même couleur que l'onglet et l'utilisateur pourra faire le lien.

Je ne sais pas ce que vous entendez par l'onglet ressemblant plus à des boutons. Ils doivent montrer qu'ils peuvent être cliqués, donc je ne pense pas que ce soit une préoccupation majeure. Vous pouvez peut-être essayer d'aligner à gauche l'étiquette de l'onglet et voir si cela rend les choses un peu mieux.

Answer 5

Concernant votre problème de taille:

Y a-t-il une taille de vos onglets dans laquelle 80 à 90% des étiquettes tiennent? Si c'est le cas, je suggère d'utiliser cette taille comme valeur par défaut. Et pour des onglets plus grands, vous pouvez les faire évoluer en fonction du contenu. De cette façon, vous aurez une bonne solution pour la plupart de vos utilisateurs et pourrez toujours accueillir ceux qui ont quelques noms plus grands pour les onglets.

Concernant la distinction de l'onglet et du contenu:

Cela se résume vraiment à la conception graphique. Comme certains des autres commentateurs l'ont souligné, laisser les couleurs d'arrière-plan des onglets se déplacer dans le document est le plus souvent utilisé pour fournir une indication visuelle. Voici un exemple de votre maquette:

Cependant, il existe des alternatives qui pourraient mieux convenir à votre problème. Voici quelques exemples d'Outlook, mais il y a beaucoup de choix.

• Utilisation normale des onglets, appliqués dans le ruban Microsoft. Remarquez la couleur différente du menu 'Bestand' (Fichier) pour indiquer clairement qu'il s'agit d'un onglet clé 

• Menu de navigation par onglets. Remarquez la manière différente de visualiser le lien entre le contenu et l'élément d'onglet.

• Liste d'onglets: c'est un bon moyen de gérer une grande quantité d'onglets (5+) car si vous avez trop de pages à onglets à afficher sur une ligne, vous devez soit reconsidérer le nombre d'onglets ou commencer à utiliser une liste comme celle-ci.
  

J'espère que cela vous aidera à obtenir des idées sur la façon de gérer votre problème de conception