checkbox-ergonomique

Pour des cases à cocher et radio boutons faciles à utiliser

Les cases à cocher et les radio boutons sont des éléments essentiels dans un formulaire de contact ou d’inscription.
Pour autant, il n’est pas toujours simple de les utiliser, car on est obligé de cliquer sur ce tout petit carré (ou rond).
Heureusement, il existe des façons très simples d’améliorer leur utilisation.

Utiliser la balise label

Les cases à cocher sont toujours adosser à un texte. Ce texte doit être intégré dans une balise « <label> » afin d’être associée à la case à cocher correspondante.
De cette façon, l’utilisateur aura la possibilité de cliquer sur le texte pour cocher/décocher la case.

Mettre des effets de survol

Mettre un label est le minimum pour rendre ses cases à cocher un peu plus user-friendly.
Mais l’utilisateur peut ne pas savoir qu’il peut cliquer sur le texte pour cocher la case. On se retrouve du coup avec une fonctionnalité très intéressante, mais inutilisée.
C’est dommage, rappelez-vous la règle des 3U, clé du succès : avoir une solution Utile, Utilisable, Utilisée

Pour rendre nos cases à cocher utilisées, un petit effet au survol du texte s’avère nécessaire : au minimum, un curseur en forme de pointeur.

Placer les cases à cocher dans une zone dédiée

En alliant label cliquable, et effet de survol très visible, on obtient des cases à cocher très ergonomiques.

Il ne reste plus qu’à placer l’ensemble des cases à cocher d’un ensemble dans une zone dédiée pour maximiser la compréhension et l’utilisation des cases à cocher.

On en trouve de très beaux exemples dans les applications mobiles (ici jQueryMobile) :

Voilà une méthode simple et rapide pour rendre vos formulaires plus agréables à renseigner pour l’utilisateur.

Lire la suite

indeterminate-checkbox

Indeterminate checkbox

Par défaut, une case à cocher peut être cochée … ou non cochée.

Cela se symbolise de la façon suivante selon la version de HTML:








Mais il existe un troisième état que l’on voit souvent sur des applications « client lourd », notamment lorsqu’on installe une application et que l’on coche ou décoche dans une arborescence.

C’est l’état « indeterminate » alias « ni-coché-ni-décoché » !

Cet état existe aussi pour le web, mais n’est pas accessible en tant qu’attribut HTML (dommage), mais uniquement en tant propriété du DOM (donc via Javascript).
Ce champ est défini dans la spec HTML5 des checkbox.

Il est à noter que cet attribut ne change que l’aspect graphique de la case à cocher, et qu’elle reste considérée comme non-cochée lors de la soumission du formulaire au serveur.

Lire la suite