Image illustrant Cet élément est cliquable ?

Cet élément est cliquable ?

Récemment j’ai reçu une invitation à participer à un concours et une fois n’est pas coutume, ai décidé d’y participer. Quelle n’a pas été ma surprise que de constater que cette initiative nationale (Zoomit) ne respectait pas les règles de base incitant aux interactions sur le web.

De l’affordance de vos éléments

L’affordance est la capacité d’un système ou d’un produit à suggérer sa propre utilisation.

Wikipédia.

C’est à dire qu’un lien se doit de se démarquer par rapport à son contexte : si votre texte est écrit en noir non souligné et que votre lien a exactement la même mise en page, jamais, je ne pourrai l’identifier et donc continuer ma visite sur votre contenu.

Les boutons, ça se pousse, ça s’enfonce, ça s’active


Les boutons (button ou input), avant d’être des balises dans votre page web, sont des éléments de notre quotidien. Éléments avec lesquels nous interagissons : on les enfonce, les appuie ou que sais-je.

L’affordance d’un bouton physique s’établit au moyen de sa forme, de sa couleur et de la réaction que l’on a en appuyant dessus (attention à ne pas confondre avec le résultat de l’action).

Sur une page web, l’action possible est indiquée par votre curseur

Une fois la question du design de votre bouton réglée, ne vous arrêtez pas à ça et gérez les aspects au survol, à l’activation.
Pourquoi ? Pour ne pas avoir pour résultat un élément qui ne "paraît" pas cliquable comme celui-ci (remarquez que le curseur reste "no réactif") :

Ou pire encore celui-ci qui ne répond même pas au survol de la souris :

En tant que visiteur je n’ai pas une seule indication du fait que les éléments sont réactifs au clic, il y a bien la couleur du texte des deux propositions qui change mais mis à part ça, rien.

Comment l’indiquer ?

Ce n’est pourtant ni sorcier ni compliqué :

input, button {
        cursor: pointer;
}

Ça en devient vite plus clair :

Et en bonus, si vous utilisez les labels comme il se doit —ce qui n’est pas le cas ici— insérez-les aussi dans votre déclaration.

input, button, label {
        cursor: pointer;
}

Trois lignes de CSS qui risquent bien de ne pas vous faire perdre des visiteurs.

Cher Zoomit, améliorez vos prochains projets web

Utilisez l’association <label> et <input type="radio"> pour réaliser vos prochains formulaires.