Bouton or not bouton, that is the question!

Lorsque j'étais adolescent j'avais beaucoup de boutons, mais après avoir utilisé clearabil... Mais non, ne vous inquiétez pas il ne s'agit pas d'une chronique beauté! Je vous parlerai plutôt de l'importance cruciale de l'utilisation des boutons web pour créer une interface ergonomique et aussi comment créer des boutons et liens qui augmenteront le taux de clics. Lorsque l'on démarre un design web, on évalue les besoins du client et l'on s'assure de bien représenter l'image de marque à travers l'interface du site web, mais ensuite notre boulot ne se termine pas là. On se doit de concevoir une interface facile d'utilisation respectant la première loi de Steve Krug, consultant en utilisabilité réputé  mondialement. Cette loi est "Je ne veux pas chercher!".

L'importance des boutons web

Pour s'assurer de créer des boutons web efficaces, il faut respecter toujours ces deux critères : le nom du bouton se doit d'être évident et le bouton ou le lien se doit d'être clairement identifiable.

Est-ce que le texte est évident et ne demande pas trop de réflexion?

"Job" par exemple, peut sembler un peu léger pour l'entreprise ACME inc. "Job-O-Rama" peut aussi s'imposer pour des questions de politique interne, ou parce qu'il s'agit du nom utilisé dans l'infolettre. Selon moi, en cas d'hésitation, la balance doit pencher en faveur de "évident pour tout le monde".

Est-ce que les boutons et liens sont clairement identifiables?

Vous vous dites peut-être que le fait de déterminer si un objet est cliquable ne nécessite pas un gros effort intellectuel. Il suffit de placer le curseur de la souris sur l'élément ; s'il change en main, c'est qu'il s'agit d'un lien. Ce n'est pas compliqué, quand même!

Dans la pratique, chaque interrogation s'ajoute à la réflexion nécessaire à l'analyse d'une page et détourne l'attention de l'objectif initial. Ces distractions peuvent être légères, mais elles finissent par s'accumuler et parfois suffisamment pour nous perturber.

Pour les liens textes il serait avantageux de considérer un soulignement dans votre CSS ou du moins de souligner le lien lorsqu'on le survole, puisque le standard : "Lien souligné = lien cliquable" est encore ancré dans la tête des utilisateurs.

Le design de bouton web avec Photoshop

En respectant les critères énumérés plus tôt, il vous suffira de donner un aspect 3D ou embosser pour améliorer le taux de clics. L'emplacement dans la page ainsi que la grosseur du bouton influencera également le taux de conversion. N'oubliez pas de considérer aussi les 3 états lors du codage de votre CSS (normal, hover et selected) pour encore plus d'interactivité. Voici deux ressources pour améliorer le design et l'utilisabilité de vos boutons web grâce à Photoshop.

• Créer des boutons web 2.0
• "Call to Action Buttons" un incontournable du fameux Smashing Magazine

Le design de bouton web en CSS

Et voici quelques ressources pour améliorer le design et l'utilisabilité de vos boutons web grâce au CSS.

• Des boutons "sexy" avec CSS
• Créer des boutons avec des images PNG et des couleurs de fond
• Sexy CSS Hover Button
• Bouton submit en CSS
• Boutons arrondis (Wii Buttons)
• Créer des boutons avec la technique css dite "des portes coulissantes"
• Boutons avec icônes
• Technique des portes coulissantes avec une seule image
• Redécouvrir l'élément button

Donc maintenant vous n'aurez plus aucune raison pour ne pas faire de design de boutons web efficace!