Ne soyez pas timide sur la taille de vos boutons d’action

C’est en substance le contenu de ce billet publié chez Get Elastic : Call To Action Buttons – Does Size Matter?

A l’origine de la discussion, ces boutons d’action ridiculement petits issus d’un site anonyme :

buy_now_original.jpg

Avouez que c’est grotesque ! L’auteur préconise (à juste titre) de revoir la taille et le contraste :

buy_now_4.jpg

C’est tout de même mieux ainsi, non ?

Sur le même thème, je vous recommande un détour par les boutiques de ProFlowers ou de JCrew pour voir des vrais boutons d’action ! Et si vous avez le temps, allez donc voir également celui de Firefox.

11 commentaires sur “Ne soyez pas timide sur la taille de vos boutons d’action

  1. Bonjour Fred!

    Je suis d’accord, le bouton rouge est laid. On a besoin d’un équilibre dans la conception. Et le choix de couleur est tres important.

    Je n’ai pas écrit en français pendant des années, je suis désolé si ma grammaire n’est pas bonne !

  2. La taille, c’est une chose.
    Mais, à mon sens, il est aussi important de considérer la couleur du processus de commande.

    Ainsi, j’invite toujours les graphistes avec lesquels je travaille de respecter un code couleur unique pour les éléments du processus de commande :
    – le prix des produits
    – le bouton « acheter »
    – la boxe panier
    – les X étapes du processus de commande.

    Par ailleurs, dans la mesure du possible :
    – les actions de progression ( boutons ou liens à droite )
    ex : acheter ce produit, commander, valider votre commande
    les actions d’annulation ou de retour ( boutons ou liens à gauche )
    ex : annuler, vider mon panier

    Evidemment, ces règles personnelles ne sont pas toujours réalisables.

  3. @ Linda > Le rouge n’est pas laid, par contre c’est une couleur très complexe à manier qui véhicule des notions comme la passion, le désir mais également le danger.

    in English: Red is not ugly. But it is a very complex color to handle since it is associated to powerful feelings (passion, desire…) but also dangerous once (danger, speed, blood…).

    /Fred

  4. Je ne cesse de le dire à mon intégrateur !
    Pour ceux que ça interessent je vous conseille de d’approfondir la recherche du côté de la « Loi de Fitts » :)

  5. Au delà de l’aspect purement visuel, il manque à mon gout la réaction du bouton lors du survol de la souris. Seul le site de Firefox offre cette distinction et rend l’expérience utilisateur plus riche et le rôle du bouton plus évident.

  6. Ce débat me rappelle un échange sur le blog du Gizz qui parlait d’ergonomie incitative(j’ai pas retrouvé). Pour ma part je pense que la taille des boutons dépend du parcours client(un gros bouton me semble plus approprié sur une landing page par exemple). Selon la loi de Fitts(bravo Daxey !), la taille d’un bouton doit avoir un rapport avec la taille de la page.
    Outre ce débat de taille, il me semble qu’un code couleur balisant les différentes étapes du processus de commande est très performant(voir Amazone). Pour être d’accord sur toute la ligne avec Enrique : une seule couleur mais avec différentes tonalités. Pour faire ressortir un bouton, le cercle chromatique est efficace.

  7. Le problème avec les petits boutons c’est surtout qu’ils risquent de ne pas être trouvés pendant les 10 secondes que l’internaute daigne consacrer à une page donnée… Le rouge est effectivement très rouge mais au moins on le voit vite et un bon moyen pour le faire disparaitre c’est de cliquer dessus ;-)

  8. Si on prend l’exemple de proFlowers, certes, ils ont UN gros bouton qui va bien mais j’aurai aimé retrouver cette même logique dans le calendrier qui permet de d’indiquer la date de livraison (la remarque va aussi au bouton « close » etc… de ce calendrier).
    Après tout, si j’ai du mal indiquer cette date (une partie de ma tâche), pourquoi j’irai appuyer sur ce gros bouton qui va me demander de l’argent ? :)

    Bref, on en reviens à la loi de Fitts (et l’ergonomie générale du site) qui ne s’applique pas que sur UN bouton…

Laisser un commentaire