Erreur de webdesign : lien de menu sans display:block

Publié le 01/09/2012 à 16h27

Lors de la conception d'un webdesign, il y a parfois une petite erreur dans la conception d'un menu ou de boutons. Les liens en forme de bouton doivent avoir en CSS un "display:block;". Si cette propriété CSS n'est pas utilisée, seul le texte est cliquable alors qu'en utilisant "display:block" la zone cliquable est bien plus grosse.

L'exemple ci-dessous montre cette erreur sur le site "viedemerde.fr". Le bouton intitulé "VDM people" est cliquable uniquement sur le mot. Ça se voit parce qu'au survol du bouton la souris ne s'est pas transformé en pointeur.

Bouton sans display block

Bouton sans display block

Cette petite erreur de conception cause plusieurs problèmes :

  • Erreur lors du clic. Dans le pire des cas, il peut y avoir des visiteurs qui n'arriveront pas à accéder au contenu
  • Plus de temps pour cliquer. L'internaute doit se concentrer à survoler juste la partie cliquable qui est bien plus petit
  • Loi de Fitts n'est pas applicable de la même façon. Cette loi permet normalement de prédire le temps pour accéder à une zone en fonction de sa taille et de sa distance de la souris, mais avec cette erreur la taille de la zone cliquable est difficile à estimer

Donc n'oubliez pas ce petit bout de code CSS dans vos menu et bouton :

1
2
3
a{
display:block;
}

Auteur: Tony Archambeau

Développeur web passionné par le référencement et l'ergonomie d'utilisation des sites et applications web, j'édite plusieurs sites web dont infowebmaster.fr.

Commentaires »


Stc
Le 1 septembre 2012

Merci, je me suis souvent fait la remarque « Ce serait bien de pouvoir cliquer hors du lien sur le bouton » j’ai enfin la réponse à la question.


Patrice
Le 2 septembre 2012

Mais du coup tout le bouton doît être conçu en CSS ? Est ce que vous auriez un exemple de bouton complet en css ?


Nathan [site]
Le 4 septembre 2012

Bonjour,
Cette petite astuce ne paie pas de mine, mais comme vous le signalez, c’est bien mieux une fois qu’elle est appliquée, et pour le webmaster et pour l’internaute. Je me la mets de côté en tout cas si besoin est ;-)


Maxime
Le 15 septembre 2012

Hello,
C’est vrai que j’avais vu régulièrement sur différents sites la même chose que ce que vous montrez pour vdm et je me demandais d’où provenait ce problème. En fait c’est finalement tout bête, mais encore faut-il le savoir!

Leave a comment