5 conseils pour concevoir un «bouton d'achat» gagnant

Si vous êtes un designer, ou un professionnel du marketing en ligne, ou si vous possédez un site Web sur lequel vous essayez de vendre quelque chose, vous allez devoir créer un bon "bouton d'achat". Et puis, vous découvrirez rapidement que le simple fait de mettre un “Acheter maintenant” le texte sur un rectangle bleu ne suffit tout simplement pas si vous espérez obtenir de bons résultats.

Heureusement, concevoir un bon "bouton d'achat" n'est pas si difficile une fois que vous maîtrisez certaines connaissances de base. Voici.

Tout d'abord, le le texte sur votre bouton est la chose la plus importante, mais il y a d'autres caractéristiques à prendre en compte. Pourquoi dis-je que le texte est le plus important? Imaginez ceci: quel est l’intérêt d’avoir un bouton joliment conçu si le texte le dit? “Va au diable!”? Affaire classée. Bonne copie est l'endroit où l'argent est fait.

Dans l'article d'aujourd'hui, nous discutons 5 traits essentiels d'un bon "bouton d'achat". Nous allons jeter un coup d'oeil!

1. style général

C’est le point n ° 1 de cette liste non sans raison, car c’est le trait le plus important.

Tu veux transforme ton bouton en vache violette. C'est un concept popularisé par Seth Godin. En bref, vous voulez que ce soit remarquable; Par remarquable, je veux dire quelque chose qui ne peut pas être négligé. Quelque chose comme une vache pourpre au milieu d'un pâturage.

Certains designers ne sont pas particulièrement doués pour cela. Il est tentant de créer un bouton qui se marie parfaitement avec les couleurs et le style du site Web sur lequel il repose. Au début, cela semble être une très bonne idée, mais ce n’est pas le cas..

Le problème est qu'un tel bouton est loin d'être remarquable. Vous ne voulez pas que votre bouton se fonde dans; vous voulez qu'il se démarque. Par conséquent, il devrait être créé comme un élément totalement distinct qui se trouve simplement sur un site Web, et non comme quelque chose qui doit être en harmonie avec ce site..

Permettez-moi de vous donner un excellent exemple d'un bouton ressemblant à une vache violette.

Mozilla Firefox

Voici à quoi ressemble une page de téléchargement de Firefox. Je veux que vous remarquiez une chose. Le bouton à gauche, le bouton de téléchargement, ne ressemble à rien d'autre sur cette page. C'est la seule chose verte. C'est le seul endroit qui présente le logo Firefox. C'est l'un des plus gros éléments là-bas. Il est situé au dessus du pli.

Tous ces traits rendent ce bouton extrêmement visible. C'est une vache pourpre. Si vous dites que vous ne le voyez pas, vous essayez simplement d'impressionner quelqu'un.

En un mot: Vise à avoir un bouton remarquable.

2. apparence

Commençons avec la couleur.

Si vous voulez être remarquable, utilisez une couleur qui n’a été utilisée nulle part ailleurs sur la page. Tout comme Firefox les gars font sur leur site web. Vous pouvez utiliser un outil tel que Color Scheme Designer pour trouver une couleur qui va bien avec le jeu de couleurs actuel de votre site Web mais qui reste très différente.

Et “différent” est le mot clé ici. Si votre site Web est principalement bleu, vous ne voulez pas de bouton d’achat bleu. Vous ne voulez pas une nuance de bleu. Vous ne voulez rien qui ait l'air bleuâtre. Vous voulez du rose ou de l'orange, etc. Je suis sûr que vous comprenez.

Un autre truc. L’orange est connue comme la couleur la plus visible juste après le rouge. Mais, il ne soulève pas toutes les émotions négatives rouge fait (des choses comme “Arrêtez”, “Attention!”, et “danger”). Le bouton orange le plus populaire sur Internet se trouve sur amazon.com.

La prochaine chose à se concentrer est la taille du bouton. Eh bien, que puis-je dire, il faut que ce soit GRAND. Plus c'est gros, mieux c'est. (Encore une fois, exemple Firefox.)

“Puis-je le rendre encore plus grand?” C'est une bonne question à poser pendant la phase de conception. Fais-le beaucoup.

Devrait-ce être simple ou flashy? Un bouton ne peut pas être trop flashy. Regardez le bouton Firefox une fois de plus. C'est flashy. Il a un renard orange, mais il ressemble toujours à un bouton. Et c'est une limite que vous ne pouvez pas franchir. Si votre bouton ne ressemble pas à quelqu'un, personne ne cliquera dessus.

C'est pourquoi il n'y a pas de réponse simple pour savoir lequel est le meilleur - flashy ou simple. Vous devez juste découvrir par vous-même. Toujours diviser le test. Créez deux boutons, un flashy et un simple. Utilisez les deux en même temps et voyez lequel fonctionne le mieux. Google Website Optimizer vous aidera à résoudre ce problème..

Juste un exemple rapide d'un simple bouton.

ThemeFuse

Comme vous pouvez le constater, le bouton n’utilise pas de renard orange, mais il reste très visible. En fait, ThemeFuse (un magasin de thèmes WordPress haut de gamme, auquel je fais partie) fournit un petit quelque chose appelé codes abrégés. Ces codes abrégés facilitent, entre autres choses, la création de beaux boutons..

Par exemple, avec une seule ligne de:

[button link = "domain.com"] Cliquez ici pour acheter mon produit génial! [/ button]

J'obtiens ce résultat:

3. Police

Police sans serif est la norme pour toutes sortes de boutons. En effet, les polices sans empattement sont très lisibles pour chaque utilisation en ligne. (D'un autre côté, les polices empattées conviennent mieux aux publications imprimées.)

Vous voulez que la copie de votre bouton soit aussi lisible que possible, car il s'agit du texte le plus important de la page. Les majuscules ne sont pas une bonne idée. Les cas mixtes fonctionnent beaucoup mieux. Par mixte, je veux dire la première lettre de chaque mot étant un caractère majuscule. (Sauf pour des mots comme “pour”, “la”, “et”, etc.)

(Source de l'image: Gomediazine)

Voici quelques polices sûres que vous pouvez utiliser: Arial, Helvetica, Franklin Gothic, Myriad ou toute autre police classique sans empattement..

Maintenant, qu'en est-il de la couleur. Bien entendu, la copie doit présenter un contraste élevé avec la couleur du bouton. Vous ne voulez pas de gris sur gris. Vous voulez du noir sur blanc ou du bleu sur orange.

Encore une fois, le texte doit être très lisible.

4. placement

Le meilleur placement dépend de la conception de votre site Web, ce qui n’est probablement pas surprenant. Mais il y a encore des règles à respecter.

Placez-le dans le endroit le plus évident possible. N'essayez pas d'être créatif ici. Le placement doit être évident pour le client / utilisateur.

Chaque fois que quelqu'un visite le site Web, il s'attend à voir certaines choses à certains endroits. Des éléments tels que: logo dans le coin supérieur gauche, résumé du panier d’achat dans le coin supérieur droit, clause de copyright dans le pied de page, etc. Votre travail consiste à essayer de déterminer l’endroit le plus évident pour un bouton d’achat et de le mettre ici..

Bien sûr, il doit être l’endroit le plus visible en même temps. Cela signifie deux choses:

1. Il absolument doit être placé au dessus du pli, et
2. N'ayez pas peur des espaces. Whitespace est l’ami de tous les bons concepteurs de sites Web. Rappelez-vous que peu importe le nombre d'éléments que vous pouvez placer sur un site Web, ce qui compte est le nombre d'éléments que vous pouvez en retirer..

Vous pouvez mettre votre stratégie de placement sur les stéroïdes en dupliquant le bouton et en le plaçant également au bas de la page. De cette façon, quand quelqu'un lit toute la page, il peut toujours agir au bas de la page..

5. Éléments supplémentaires

C'est la cerise sur le gâteau. Des éléments supplémentaires améliorent encore la visibilité de votre bouton. Exemples d'éléments: flèches, paniers d'achat, loupes, signes plus ou divers éléments de marquage.

Mon exemple préféré - l'exemple de Firefox - utilise un élément supplémentaire vraiment cool - le renard orange (alias leur logo).

Une règle empirique consiste à utiliser des éléments supplémentaires qui souligner le but du bouton. Par exemple, deux flèches pointant vers le bas conviennent parfaitement à un bouton de téléchargement. Une icône représentant un panier d'achat fonctionne parfaitement avec un bouton d'ajout au panier (exemple amazon ci-dessus). La loupe fonctionne très bien avec un bouton de recherche. Etc.

Vous pouvez également utiliser certains éléments de marque. Par exemple, une icône RSS standard avec un bouton S'abonner au flux, une icône d'oiseau avec un bouton Suivez-moi sur Twitter, un renard orange avec un bouton de téléchargement Firefox, votre propre logo avec un bouton d'achat. bouton de bourrage.

Voici quelques exemples:

Wakeinteractive

Commercialiq

Médiatemple

Débloquer.com

Sofasurfer.eu

Uploadify

Pouvoir de "libre"

Une autre astuce consiste à utiliser le mot le plus puissant de la langue anglaise - GRATUIT. Chaque fois que quelque chose est annoncé comme gratuit, les gens commencent à agir de façon prévisible irrationnelle (consultez un excellent livre de Dan Ariely, "The Upside of Irrationality" pour savoir ce que je veux dire.)

Plus d'exemples:

Freshbooks

Wufoo

Freeagent.com

Et après?

Si vous maîtrisez assez bien Photoshop ou tout autre logiciel similaire, vous pouvez créer un bouton agréable dès maintenant. Une autre solution consiste à devenir l'heureux propriétaire de n'importe quel thème WordPress de ThemeFuse, comme je l'ai déjà mentionné dans ce message..

Quel est votre conseil sur la conception d'un bon bouton d'achat? J'aimerais mettre à jour ce post avec vos opinions.