Case à cocher

La case à cocher permet à l’utilisateur de sélectionner une ou plusieurs options dans une liste.

Exemple

On utilise la case à cocher dans une liste de plus de 2 options. On recommande de ne pas dépasser 10 options. 

En effet, une liste concise est facilement comprise par l’utilisateur . À l’inverse, un trop grand nombre de choix augmente sa charge cognitive et son temps de décision. 

Concernant le positionnement des éléments, ces critères doivent être respectés:

• Les cases à cocher sont placées les unes en dessous des autres, et non côte à côte.
• Le libellé est toujours placé à droite de la case, et celle-ci est alignée à gauche de la page. 
• La liste présente en premier les options les plus susceptibles d’être sélectionnées.
• Les options « Aucune de ces réponses », « Je ne sais pas » ou « Autre» doivent toujours être placées en dernier. Si l’option « Autre » est offerte, elle doit être accompagnée d’un champ texte pour préciser la nature du choix. 

Il est fortement recommandé de ne pas présélectionner d’options. Les cases à cocher doivent restées vides pour que l’utilisateur comprenne qu’il n’a pas encore répondu à la question et pour éviter les erreurs potentielles.

À faire

À ne pas faire

Informations techniques

Dimensions

La case à cocher a une dimension totale de 16 px en hauteur et en largeur. L’indicateur de sélection est de 10 px en hauteur par 12 px en largeur, laissant un dégagement intérieur de 3 px en haut et en bas, et de 2 px à gauche et à droite. 

Entre le libellé de la question et chaque choix de réponse, un espacement de 20 px est prévu. Un espacement de 8 px est aussi présent entre les cases et les choix de réponse.

La case à cocher ainsi que le libellé sont cliquables. La zone est d’une hauteur de 32 px et d’un largeur variable selon la longueur du texte. Une marge de 8 px à gauche et à droite doit être ajoutée à la longueur totale.

Exemple

Exemple