Nouveau Conception UI/UX
Case à cocher
La case à cocher est un composant d’interface courant utilisé dans presque toutes les applications du marché. Les directives de ce composant sont claires, mais les designs ne fournissent souvent pas ces informations aux développeurs. Cela peut entraîner une mauvaise expérience pour les utilisateurs. Par exemple, l’utilisateur doit pouvoir naviguer au clavier et la case à cocher doit être utilisable avec un lecteur d’écran.
Au-delà des ordinateurs de bureau, il faut également penser aux appareils mobiles. Vous devez tenir compte de la taille de la case à cocher et de l’espace entre chaque élément pour que l’utilisateur puisse appuyer facilement dessus.
Anatomie
Un composant case à cocher possède une anatomie simple. Il se compose de :
- Un élément de saisie
- Un signe
- Un libellé
Qui peut prendre l'une des trois options suivantes : aucune, cochée ou état intermédiaire
De plus, la case à cocher peut également afficher un texte d'erreur ou d'aide pour communiquer des informations à l'utilisateur. La taille de la case à cocher peut varier selon l'appareil de l'utilisateur. Généralement, la taille de la case pour les ordinateurs de bureau est de 20×20 pixels afin que l'utilisateur puisse cliquer facilement et la voir clairement. Mais la zone cible doit avoir une taille minimale de 48px.
États de sélection des cases à cocher :
Une case à cocher possède 6 types de sélection :
- Non sélectionnée : Lorsque la case n'est pas sélectionnée
- Cochée : Lorsque la case est marquée d'une icône de validation à l'intérieur
- Survolée : Lorsque la case est survolée par votre curseur
- Focalisée : Lorsqu'un utilisateur sélectionne la case à cocher au clavier (généralement avec la touche Tab) ou d'autres outils d'assistance
- Désactivée : Lorsque la case n'est pas disponible pour l'interaction
- Intermédiaire : C'est une situation où la case indique que certains éléments sont sélectionnés et d'autres non. Elle est utilisée dans une liste avec des relations hiérarchiques comme une arborescence ou des listes imbriquées
Bonnes pratiques de conception pour les Case à cocher
Rester simple
En tant que designer, vous voulez faire ressortir les choses et vous explorez de nouvelles façons révolutionnaires de les faire. Cependant, ce n'est pas le cas lors de la conception de cases à cocher. Ce composant est très courant et de nombreuses personnes savent comment l'utiliser. Gardez donc les choses aussi simples que possible pour que les utilisateurs comprennent rapidement sa fonction.
Organiser les cases à cocher verticalement pour une meilleure lisibilité
Les listes de plusieurs cases à cocher doivent être organisées verticalement plutôt qu'horizontalement, car les listes verticales sont plus faciles à lire et à parcourir, permettant aux utilisateurs de naviguer et de trouver ce qu'ils cherchent plus rapidement :
Indiquer le nombre minimum de sélections requis
Si l'utilisateur doit sélectionner un nombre minimum d'éléments dans un groupe de cases à cocher, indiquez-le. Ainsi, il comprendra combien d'éléments il doit sélectionner. Cela garantit que l'utilisateur sait quoi faire pour accomplir la tâche :
Rendre l'étiquette cliquable
Les étiquettes cliquables permettent aux utilisateurs de sélectionner la case à cocher plus facilement car ils peuvent cliquer ou appuyer sur une zone plus grande :
S'assurer que la case à cocher est contrastée
Testez le contraste des couleurs et assurez-vous que les lecteurs d'écran et la navigation au clavier fonctionnent bien pour que tous les utilisateurs puissent utiliser le composant facilement :
Texte tronqué
Pourquoi faut-il l'éviter ?
Lorsque le texte est tronqué, les utilisateurs peuvent :
- Mal interpréter les informations
- Faire de mauvais choix
- Se sentir frustrés ou ralentis
Idée clé :
Les utilisateurs ne devraient pas avoir à deviner ou à travailler pour comprendre le contenu.
Quand utiliser les cases à cocher ?
Les cases à cocher permettent aux utilisateurs de sélectionner une ou plusieurs options dans un ensemble. Chaque option fonctionne de manière indépendante.
Nouveau Conception UI/UX
Case à cocher
La case à cocher est un composant d'interface courant utilisé dans presque toutes les applications du marché. Les directives de ce composant sont claires, mais les designs ne fournissent souvent pas ces informations aux développeurs. Cela peut entraîner une mauvaise expérience pour les utilisateurs. Par exemple, l'utilisateur doit pouvoir naviguer au clavier et la case à cocher doit être utilisable avec un lecteur d'écran.
Au-delà des ordinateurs de bureau, il faut également penser aux appareils mobiles. Vous devez tenir compte de la taille de la case à cocher et de l'espace entre chaque élément pour que l'utilisateur puisse appuyer facilement dessus.
Un composant case à cocher possède une anatomie simple. Il se compose de :
- Un élément de saisie
- Un signe
- Un libellé
Qui peut prendre l'une des trois options suivantes : aucune, cochée ou état intermédiaire
De plus, la case à cocher peut également afficher un texte d'erreur ou d'aide pour communiquer des informations à l'utilisateur. La taille de la case à cocher peut varier selon l'appareil de l'utilisateur. Généralement, la taille de la case pour les ordinateurs de bureau est de 20×20 pixels afin que l'utilisateur puisse cliquer facilement et la voir clairement. Mais la zone cible doit avoir une taille minimale de 48px.
États de sélection des cases à cocher :
Une case à cocher possède 6 types de sélection :
- Non sélectionnée : Lorsque la case n'est pas sélectionnée
- Cochée : Lorsque la case est marquée d'une icône de validation à l'intérieur
- Survolée : Lorsque la case est survolée par votre curseur
- Focalisée : Lorsqu'un utilisateur sélectionne la case à cocher au clavier (généralement avec la touche Tab) ou d'autres outils d'assistance
- Désactivée : Lorsque la case n'est pas disponible pour l'interaction
- Intermédiaire : C'est une situation où la case indique que certains éléments sont sélectionnés et d'autres non. Elle est utilisée dans une liste avec des relations hiérarchiques comme une arborescence ou des listes imbriquées
Rester simple
En tant que designer, vous voulez faire ressortir les choses et vous explorez de nouvelles façons révolutionnaires de les faire. Cependant, ce n'est pas le cas lors de la conception de cases à cocher. Ce composant est très courant et de nombreuses personnes savent comment l'utiliser. Gardez donc les choses aussi simples que possible pour que les utilisateurs comprennent rapidement sa fonction.
Organiser les cases à cocher verticalement pour une meilleure lisibilité
Les listes de plusieurs cases à cocher doivent être organisées verticalement plutôt qu'horizontalement, car les listes verticales sont plus faciles à lire et à parcourir, permettant aux utilisateurs de naviguer et de trouver ce qu'ils cherchent plus rapidement :
Indiquer le nombre minimum de sélections requis
Si l'utilisateur doit sélectionner un nombre minimum d'éléments dans un groupe de cases à cocher, indiquez-le. Ainsi, il comprendra combien d'éléments il doit sélectionner. Cela garantit que l'utilisateur sait quoi faire pour accomplir la tâche :
Rendre l'étiquette cliquable
Les étiquettes cliquables permettent aux utilisateurs de sélectionner la case à cocher plus facilement car ils peuvent cliquer ou appuyer sur une zone plus grande :
S'assurer que la case à cocher est contrastée
Testez le contraste des couleurs et assurez-vous que les lecteurs d'écran et la navigation au clavier fonctionnent bien pour que tous les utilisateurs puissent utiliser le composant facilement :
Texte tronqué
Pourquoi faut-il l'éviter ?
Lorsque le texte est tronqué, les utilisateurs peuvent :
- Mal interpréter les informations
- Faire de mauvais choix
- Se sentir frustrés ou ralentis
Idée clé :
Les utilisateurs ne devraient pas avoir à deviner ou à travailler pour comprendre le contenu.
Les cases à cocher permettent aux utilisateurs de sélectionner une ou plusieurs options dans un ensemble. Chaque option fonctionne de manière indépendante.