Onglets

Utilisation d’un composant en cours d’élaboration

Cette version est en cours d’élaboration et n’a pas encore été finalisée pour le Système de conception de l’Ontario. Elle comprend actuellement des conceptions préliminaires dans Figma ainsi que des directives provisoires, mais aucun code correspondant.

Les équipes peuvent utiliser ce composant comme point de départ, mais pourraient devoir effectuer des recherches supplémentaires et adapter les conceptions à leurs besoins particuliers.

Exemple de conception

---

Pour demander l’accès au fichier du composant en cours d’élaboration, envoyez un courriel à design.system@ontario.ca.

Quand utiliser ce composant

Utilisez des onglets intégrés à une page pour organiser du contenu connexe dans un petit nombre de sections clairement définies. Les onglets sont particulièrement efficaces lorsque les utilisateurs peuvent voir et comparer rapidement toutes les options offertes. Un trop grand nombre d’onglets rend la page plus difficile à parcourir et à utiliser, surtout sur les écrans de petite taille.

Utilisez des onglets lorsque :

• le contenu peut être divisé logiquement en sections distinctes et clairement étiquetées;
• les sections sont étroitement liées et se rapportent au même sujet ou à la même tâche;
  • par exemple, pour une page intitulée « Cas » :
    • bon exemple d’onglets : « En cours », « À venir », « Passés »;
    • mauvais exemple d’onglets : « Cas en cours », « Admissibilité », « Divers »;
• le passage d’une section à l’autre ne nécessite pas l’enregistrement ni la soumission de données.

Quand ne pas utiliser ce composant

N’utilisez pas cette conception d’onglets pour la navigation entre différentes pages. Cette conception est destinée à permettre de passer d’une vue à une autre au sein d’une même page.

Les onglets masquent du contenu et ne conviennent pas à toutes les situations.

N’utilisez pas des onglets lorsque :

• vous devez indiquer une progression ou que le contenu est structuré par étapes, comme dans un formulaire (utilisez plutôt un processus étape par étape);
• les sections sont trop complexes ou trop longues (envisagez alors de créer des pages distinctes ou d’utiliser un autre mode d’organisation du contenu);
• les utilisateurs doivent comparer du contenu côte à côte, ce qui exige de nombreux allers-retours entre les sections.

Pratiques exemplaires

Lors de la conception ou de la mise en œuvre d’onglets :

• gardez un nombre d’onglets raisonnable afin que les utilisateurs puissent repérer rapidement les options et naviguer facilement entre elles;
• choisissez un onglet par défaut qui correspond le mieux à la tâche de l’utilisateur; il devrait généralement s’agir du premier onglet;
• évitez de dupliquer le même contenu dans plusieurs onglets;
• permettez l’utilisation de liens directs vers chaque onglet;
• utilisez des libellés courts et clairs qui décrivent le contenu de chaque onglet;
• assurez-vous que les libellés sont uniformes quant au style et à la longueur.

Faites-nous part de vos constatations

Si votre équipe utilise ou met à l’essai cette version préliminaire, nous vous encourageons à nous faire part de vos constatations. Vos commentaires contribueront à l’évolution future du composant.

Écrivez-nous à design.system@ontario.ca.