Onglets

Les onglets permettent de présenter des informations connexes sur des pages étiquetées distinctes.

capture d’écran

Ensemble classique d’onglets.

Les onglets sont généralement associés aux fenêtres de propriétés (et inversement), mais les onglets peuvent être utilisés dans n’importe quel type de fenêtre.

Les contrôles tabulation représentent les dossiers deila à onglets utilisés pour organiser les informations dans les classeurs couramment trouvés aux États-Unis. (Les dossiers de Manila ne sont pas utilisés dans le monde entier.)

C’est le bon contrôle ?

Pour décider, tenez compte de ces questions :

• Les contrôles peuvent-ils s’adapter confortablement à une page simple et raisonnablement dimensionnée ? Si c’est le cas, utilisez une seule page.
• Existe-t-il un seul onglet ? Si c’est le cas, utilisez une seule page.
• Les onglets sont-ils liés les uns aux autres d’une manière évidente ? Si ce n’est pas le cas, envisagez de fractionner les informations en fenêtres distinctes d’informations connexes.
• Si elles sont utilisées pour les paramètres, les paramètres sur différentes pages sont-ils complètement indépendants ? La modification d’un paramètre sur une page affecte-t-elle les paramètres d’autres pages ? S’ils ne sont pas indépendants, utilisez des pages de tâches ou un Assistant à la place.
• Les onglets sont-ils principalement des homologues les uns des autres, ou existe-t-il une relation hiérarchique ? Si elles sont hiérarchiques, envisagez d’utiliser la divulgation progressive ou les boîtes de dialogue enfants pour afficher les informations associées.
• Les onglets utilisés pour afficher les étapes d’une tâche sont-ils utilisés ? Vous pouvez utiliser des « onglets » pour afficher les étapes d’une tâche uniquement si elles sont présentées pour ressembler à des étapes, et il existe une alternative évidente pour accéder à l’étape de texte, telle qu’un bouton Suivant. Sinon, si les étapes sont requises, utilisez des pages dans un flux de page ou un Assistant . Si les étapes sont facultatives, affichez les étapes facultatives à l’aide des boîtes de dialogue modales à la place.
• Les onglets sont-ils différents affichages des mêmes données ? Si c’est le cas, envisagez d’utiliser un bouton fractionné ou liste déroulante pour modifier les vues. Bien que les onglets puissent être utilisés efficacement pour modifier les vues, les alternatives sont plus légères.

Modèles d’utilisation

Les onglets ont plusieurs modèles d’utilisation :

Usage	Exemple
surface de fenêtre dynamique comme les barres de défilement, les onglets peuvent être utilisés pour augmenter la surface de surface de la fenêtre pour afficher les informations associées.	Avec ce modèle, l’utilisation de tabulations est conceptuellement similaire à la mise en place de toutes les informations sur les onglets linéairement sur une seule surface défilante, avec les étiquettes d’onglet en tant qu’en-têtes. capture d’écran Dans cet exemple, les onglets augmentent efficacement la surface de la fenêtre.
plusieurs vues comme les boutons fractionnés ou les listes déroulantes, les onglets peuvent être utilisés pour afficher différentes vues des mêmes informations ou des informations connexes.	Dans cet exemple, les onglets modifient les vues dans un document.
plusieurs documents comme plusieurs fenêtres, les onglets peuvent être utilisés pour afficher différents documents dans une seule fenêtre.	Dans ces exemples, les onglets affichent différents documents dans une seule fenêtre d’application.
options exclusives comme les cases d’option, les onglets peuvent être utilisés pour présenter plusieurs choix exclusifs. dans ce modèle, seul l’onglet sélectionné s’applique et tous les autres onglets sont ignorés.	Dans cet exemple, les onglets sont utilisés (incorrectement) comme remplacement des cases d’option. Ce modèle n’est pas recommandé car il utilise un comportement non standard. Les onglets se comportent comme un paramètre au lieu d’un moyen purement de naviguer dans la fenêtre.

Si vous ne faites qu’une seule chose...

Vérifiez que les informations sur les onglets sont liées, mais que les paramètres sur différentes pages sont indépendants. Le dernier onglet sélectionné ne doit pas avoir de signification particulière.

Lignes directrices

Généralités

• Utiliser des onglets horizontaux si :

  • La fenêtre comporte sept onglets ou moins.
  • Tous les onglets tiennent sur une ligne, même lorsque l’interface utilisateur est localisée.

• Utiliser des onglets verticaux si :

  • La fenêtre de propriété comporte huit onglets ou plus.

  • L’utilisation d’onglets horizontaux nécessite plusieurs lignes.

    

    Dans cet exemple, les onglets verticaux prennent en charge huit onglets ou plus.

• N’imbriquez pas les onglets ou combinez des onglets horizontaux avec des onglets verticaux. Au lieu de cela, réduisez le nombre d’onglets, utilisez uniquement les onglets verticaux ou utilisez un autre contrôle tel qu’une liste déroulante.

• Ne faites pas défiler les onglets horizontaux. Le défilement horizontal n’est pas facilement détectable. Toutefois, vous pouvez faire défiler les onglets verticaux.

  Incorrect :

  

  Dans cet exemple, les onglets horizontaux sont défilements.

• Pour les onglets d’une fenêtre ou d’un volet redimensionnable, placez une barre de défilement, le cas échéant, sur la page, et non sur la fenêtre ou le volet. Les onglets doivent toujours être visibles et ne pas faire défiler l’affichage.

  de barre de défilement

  Dans cet exemple, la page d’onglets comporte la barre de défilement, et non le volet.

• Assurez-vous que les onglets ressemblent à des onglets et non à un autre type de contrôle.

  Incorrect :

  

  Dans cet exemple, ces onglets ressemblent à des boutons de commande.

Interaction

• Lorsque les contrôles s’appliquent uniquement à une page, placez-les dans la bordure de la page à onglets.
• Lorsque les contrôles s’appliquent à la fenêtre entière, placez-les en dehors de la page à onglets.
• N’affectez pas d’effets à la modification des onglets. Les onglets doivent être accessibles dans n’importe quel ordre. La modification de l’onglet actuel ne doit jamais avoir d’effets secondaires, appliquer des paramètres ou entraîner un message d’erreur.
• N’attribuez pas de signification spéciale au dernier onglet sélectionné. La sélection de tabulation est destinée à la navigation que la dernière sélection d’onglet de l’utilisateur n’est pas un paramètre.
• Ne faites pas en sorte que les paramètres d’une page dépendent des paramètres d’autres pages. Placez à la place les paramètres dépendants sur la même page.
• Si les utilisateurs sont susceptibles de commencer par le dernier onglet affiché, rendre l’onglet persistant et le sélectionner par défaut. Rendre les paramètres persistants par fenêtre, par utilisateur. Sinon, sélectionnez la première page par défaut.

Icônes

• Ne placez pas d’icônes sous onglets. Les icônes ajoutent généralement un encombrement visuel inutile, consomment de l’espace d’écran et n’améliorent souvent pas la compréhension utilisateur. Ajoutez uniquement des icônes qui facilitent la compréhension, telles que les symboles standard.

  Incorrect :

  

  Dans cet exemple, les icônes ajoutent un encombrement visuel et ne font que peu pour améliorer la compréhension de l’utilisateur.

  Exception : Vous pouvez utiliser des icônes clairement reconnaissables s’il peut y avoir un espace insuffisant pour afficher des étiquettes significatives :

  correct :

  

  Dans cet exemple, la fenêtre est si étroite que les icônes communiquent mieux les onglets que les étiquettes.

• N’utilisez pas les logos de produit pour les graphiques d’onglets. Les onglets ne sont pas destinés à personnalisation.

Modèle d’aire de fenêtre dynamique

• N’utilisez pas de barres de défilement sur les pages d’onglets. Les tabulations fonctionnent de la même façon que les barres de défilement pour augmenter la zone effective d’une fenêtre. Un mécanisme devrait être suffisant.

• Utilisez des étiquettes d’onglet concises. Utilisez un ou deux mots qui décrivent clairement le contenu de la page. Les étiquettes plus longues consomment de l’espace d’écran, en particulier lorsque les étiquettes sont localisées.

• Utilisez des étiquettes d’onglet spécifiques et significatives. Évitez les étiquettes d’onglets génériques qui peuvent s’appliquer à n’importe quel onglet, tel que Général, Avancé ou Paramètres.

• Si un onglet ne s’applique pas au contexte actuel et que les utilisateurs ne s’y attendent pas, supprimez-le. Cela simplifie l’interface utilisateur et les utilisateurs ne le manqueront pas.

  Incorrect :

  

  Dans cet exemple, l’onglet Emplacements de fichier est désactivé incorrectement lorsque Microsoft Word est utilisé comme éditeur de messagerie. Au lieu de désactiver cet onglet, il doit être supprimé, car les utilisateurs ne s’attendaient pas à afficher ou modifier les emplacements des fichiers dans ce contexte.

• Si un onglet ne s’applique pas au contexte actuel et que les utilisateurs peuvent s’y attendre :

  • Affichez l’onglet.
  • Désactivez les contrôles de la page.
  • Incluez du texte expliquant pourquoi les contrôles sont désactivés.

  Ne désactivez pas l’onglet, car cela n’est pas explicite et interdit l’exploration. Les utilisateurs qui recherchent une valeur spécifique sont obligés d’examiner tous les autres onglets.

  

  Dans cet exemple, aucune des options d’affichage ne s’applique dans la disposition de lecture. Toutefois, les utilisateurs peuvent s’attendre à ce qu’ils s’appliquent en fonction de l’étiquette d’onglet, de sorte que la page s’affiche, mais les options sont désactivées.

Modèles de plusieurs vues et documents

• Utiliser l’affichage ou les noms de documents sur les étiquettes d’onglet.
• Évitez les noms d’onglets trop longs. Si nécessaire, disposez d’une taille de nom maximale ou tronquez l’étiquette d’onglet affichée à l’aide de points de suspension. Les étiquettes plus longues consomment de l’espace d’écran, en particulier lorsque les étiquettes sont localisées.
• Si un onglet ne s’applique pas au contexte actuel, supprimez l’onglet.

Modèle d’options exclusives

• N’utilisez pas ce modèle ! Utilisez plutôt des cases d’option ou une liste déroulante.

  Incorrect :

  

  Dans cet exemple, les onglets sont utilisés de manière incorrecte comme substitut aux cases d’option.

  correct :

  

  Dans cet exemple, les cases d’option sont utilisées correctement à la place.

Étiquettes

• Étiqueter les onglets en fonction de leur modèle. Utilisez des noms plutôt que des verbes, sans mettre fin à la ponctuation. Pour plus d’informations, consultez les instructions de modèle précédentes.
• Utilisez la mise en majuscules de style phrase.
• N’attribuez pas de clé d’accès. Les onglets sont accessibles via leurs touches de raccourci (Ctrl+Tab, Ctrl+Maj+Tab, Ctrl+PgUp, Ctrl+PgDn). Il existe une pénurie de bons choix de clés d’accès. Par conséquent, ne pas affecter de touches d’accès aux onglets facilite leur affectation à d’autres contrôles.

Documentation

Lorsque vous faites référence à des onglets :

• Utilisez le texte exact de l’étiquette, y compris sa mise en majuscule et incluez l’onglet mot.
• Pour décrire l’interaction utilisateur, utilisez un clic.
• Lorsque cela est possible, mettez en forme l’étiquette à l’aide du texte en gras. Sinon, placez l’étiquette entre guillemets uniquement si nécessaire pour éviter toute confusion.
• Étant donné que plusieurs utilisations peuvent être ambiguës, en particulier pour un public mondial, utilisez l’onglet nom seul pour faire référence uniquement à un contrôle tabulation. Pour d’autres utilisations, clarifiez la signification avec un descripteur : la touche Tab, un taquet de tabulation ou une marque de tabulation sur la règle.

Exemple : dans le menu Outils, cliquez sur Options, puis sur l’onglet Afficher.