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