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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>