Éléments distincts

La structure de base des éléments offerts aux concepteurs et aux développeurs pour créer une page web ou un écran repose sur des composantes de la structure HTML de base ou des applications natives. Elles ont toutes des caractéristiques et des qualités visuelles par défaut. Notre code, notre texte et nos conceptions nécessaires pour faire fonctionner un élément sont évidents en comparaison avec d’autres éléments de la page ou de l’écran.


Exemples d’éléments

Exemples d’éléments

Tous les éléments et leurs états  ont une apparence distincte qui permet de déterminer en un coup d’œil ce qu’ils sont :

  • Listes non ordonnées
  • Listes ordonnées
  • Liens
  • Boutons
  • Tableaux
  • En-têtes
  • Et plus encore

Ce sont les outils fournis par les trousses de développement du format HTML5 et de notre interface utilisateur native dans nos boîtes à outils créatives.

Tout ce qui se trouve en dehors de nos boîtes à outils natives, comme les sélecteurs de date, superpose plusieurs de ces composants de base.

Lorsque nous personnalisons ou créons de magnifiques conceptions pour rendre notre expérience plus attrayante visuellement, nous devons conserver certains éléments et symboles visuels pour qu’un client puisse comprendre ce que l’élément est censé faire en fonction de sa conception.

Tous les éléments et leurs états  ont une apparence distincte qui permet de déterminer en un coup d’œil ce qu’ils sont :

  • Listes non ordonnées
  • Listes ordonnées
  • Liens
  • Boutons
  • Tableaux
  • En-têtes
  • Et plus encore

Ce sont les outils fournis par les trousses de développement du format HTML5 et de notre interface utilisateur native dans nos boîtes à outils créatives.

Tout ce qui se trouve en dehors de nos boîtes à outils natives, comme les sélecteurs de date, superpose plusieurs de ces composants de base.

Lorsque nous personnalisons ou créons de magnifiques conceptions pour rendre notre expérience plus attrayante visuellement, nous devons conserver certains éléments et symboles visuels pour qu’un client puisse comprendre ce que l’élément est censé faire en fonction de sa conception.


Type d’élément de conception

Type d’élément de conception

Pour toute conception visuelle d’un élément, faites correspondre la fonctionnalité et la structure du contenu sémantique à la conception visuelle.

Par exemple (liste non exhaustive) :

  • Si les en-têtes sont mis en niveaux de gris, leurs tailles doivent demeurer facilement reconnaissables
  • Il doit être évident qu’une liste non ordonnée est une liste, pour qu’un développeur sache les programmer en tant que listes sans instructions
  • Les tableaux de données et les tableaux Flexbox ont des exigences de contenu différentes et des exigences d’expérience utilisateur différentes pour le contenu. Pour les tableaux de données, créez les tables visuellement pour répondre aux exigences fonctionnelles afin de pouvoir effectuer un suivi horizontal ou vertical dans le tableau
  • Un lien ou un bouton doit avoir un indicateur visuel pour montrer qu’il diffère du contenu du paragraphe

Ensemble, la conception visuelle distinctive et le contenu de structure sémantique aident les gens à comprendre la fonction du contenu et la façon dont nous sommes censés l’aborder.

Consultez le guide sur le contenu structuré pour en savoir plus.

Pour toute conception visuelle d’un élément, faites correspondre la fonctionnalité et la structure du contenu sémantique à la conception visuelle.

Par exemple (liste non exhaustive) :

  • Si les en-têtes sont mis en niveaux de gris, leurs tailles doivent demeurer facilement reconnaissables
  • Il doit être évident qu’une liste non ordonnée est une liste, pour qu’un développeur sache les programmer en tant que listes sans instructions
  • Les tableaux de données et les tableaux Flexbox ont des exigences de contenu différentes et des exigences d’expérience utilisateur différentes pour le contenu. Pour les tableaux de données, créez les tables visuellement pour répondre aux exigences fonctionnelles afin de pouvoir effectuer un suivi horizontal ou vertical dans le tableau
  • Un lien ou un bouton doit avoir un indicateur visuel pour montrer qu’il diffère du contenu du paragraphe

Ensemble, la conception visuelle distinctive et le contenu de structure sémantique aident les gens à comprendre la fonction du contenu et la façon dont nous sommes censés l’aborder.

Consultez le guide sur le contenu structuré pour en savoir plus.


Identificateurs d’éléments

Identificateurs d’éléments

Les éléments distinctifs sont aussi facilement reconnaissables les uns des autres. Nous utilisons des traitements visuels comme la couleur, la graisse de la police, les formes et les soulignements pour que l’apparence du contenu des paragraphes diffère de celle du contenu des liens. Lorsqu’il y a différents états , il doit être évident qu’ils ne sont pas identiques.

Voici quelques lignes directrices pour améliorer la distinction visuelle entre les éléments :

  • Utilisez des formes pour différencier les éléments et les états, comme un chevron, un contour ou un soulignement.
  • Si vous utilisez seulement la couleur pour indiquer la distinction, mettez en place un rapport de couleur de 3:1 entre la couleur de base et l’état différent

Par exemple, un état sélectionné personnalisé pour indiquer la couleur du téléphone qu’un client souhaite choisir doit avoir un rapport de 3:1 comparativement à l’état non choisi pour être discernable

Passez en revue le guide sur le contraste des couleurs pour savoir comment vérifier le contraste des couleurs.

Passez en revue le guide sur la communication de l’état actuel pour en savoir plus sur les états.

Les éléments distinctifs sont aussi facilement reconnaissables les uns des autres. Nous utilisons des traitements visuels comme la couleur, la graisse de la police, les formes et les soulignements pour que l’apparence du contenu des paragraphes diffère de celle du contenu des liens. Lorsqu’il y a différents états , il doit être évident qu’ils ne sont pas identiques.

Voici quelques lignes directrices pour améliorer la distinction visuelle entre les éléments :

  • Utilisez des formes pour différencier les éléments et les états, comme un chevron, un contour ou un soulignement.
  • Si vous utilisez seulement la couleur pour indiquer la distinction, mettez en place un rapport de couleur de 3:1 entre la couleur de base et l’état différent

Par exemple, un état sélectionné personnalisé pour indiquer la couleur du téléphone qu’un client souhaite choisir doit avoir un rapport de 3:1 comparativement à l’état non choisi pour être discernable

Passez en revue le guide sur le contraste des couleurs pour savoir comment vérifier le contraste des couleurs.

Passez en revue le guide sur la communication de l’état actuel pour en savoir plus sur les états.


Explore more

Explore more