5 dicas para criar um botão de compra vencedora

Se você é um designer, ou um profissional de marketing on-line, ou se simplesmente possui um site onde tenta vender algo, em algum momento terá que criar um "botão de compra" adequado. E então, você vai descobrir rapidamente que basta colocar um “compre” texto em um retângulo azul não é suficiente se você espera por bons resultados.

Felizmente, projetar um "botão de compra" adequado não é tão difícil quando você conhece algum conhecimento básico. Aqui vai.

Primeiro de tudo, o texto no seu botão é a coisa mais importante, mas existem alguns outros recursos que precisam ser abordados. Por que digo que o texto é o mais importante? Imagine isso - o que é o ponto de ter um botão belamente projetado se o texto nele diz “Vá para o inferno!”? Caso encerrado. Boa cópia é onde o dinheiro é feito.

No artigo de hoje, discutimos 5 traços cruciais de um "botão de compra" adequado. Vamos dar uma olhada!

1. estilo geral

Este é o ponto # 1 desta lista não sem razão, já que é o traço mais importante.

Você quer transformar seu botão em uma vaca roxa. Este é um conceito popularizado por Seth Godin. Em suma, você quer que seja notável; por notável eu quero dizer algo que não pode ser negligenciado. Algo como uma vaca roxa no meio de um pasto.

Alguns designers não são particularmente bons nisso. É tentador criar um botão que combine lindamente com as cores e o estilo do site em que ele se encontra. No começo parece uma boa ideia, só que não é.

O problema é que esse botão está longe de ser notável. Você não quer que seu botão se misture; você quer que ele se destaque. Portanto, ele deve ser criado como um elemento totalmente separado que apenas acontece em algum site, não como algo que precisa ser congruente com esse site..

Deixe-me dar um ótimo exemplo de um botão parecido com uma vaca roxa.

Mozilla Firefox

Isto é o que uma página de download do Firefox parece. Eu quero que você perceba uma coisa. O botão à esquerda, o botão de download, parece nada com qualquer outra coisa nessa página. É a única coisa verde. É o único lugar que apresenta o logotipo do Firefox. É um dos maiores elementos lá. Está localizado acima da dobra.

Todas essas características tornam este botão extremamente visível. É uma vaca roxa. Se você está dizendo que não vê, está apenas tentando impressionar alguém.

Em poucas palavras: Apontar para ter um botão notável.

2. Aparência

Vamos começar com a cor.

Se você quiser ser notável, use uma cor que não tenha sido usada em nenhum outro lugar da página. Assim como os caras do Firefox estão fazendo em seu site. Você pode usar uma ferramenta como o Color Scheme Designer para encontrar uma cor que fique bem com o esquema de cores atual do seu site, mas que ainda seja muito diferente.

E “diferente” é a palavra chave aqui. Se o seu site é na maior parte azul, você não quer um botão de compra azul. Você não quer um tom de azul. Você não quer nada que pareça azulado. Você quer rosa, ou laranja, etc. Tenho certeza que você entendeu.

Mais um truque. A laranja é conhecida como a cor mais visível logo após o vermelho. Mas não aumenta todas as emoções negativas que o vermelho faz (coisas como “Pare”, “tenha cuidado!”, e “perigo”). O botão laranja mais popular na internet pode ser encontrado em amazon.com.

A próxima coisa a se concentrar é o tamanho do botão. Bem, o que posso dizer, precisa ser GRANDE. Quanto maior, melhor. (Novamente, o exemplo do Firefox.)

“Posso aumentar ainda mais?” é uma boa pergunta a fazer durante a fase de design. Faça muito.

Deveria ser simples ou chamativo? Um botão não pode ser muito chamativo. Veja o botão do Firefox mais uma vez. É chamativo. Tem uma raposa laranja, mas ainda parece um botão. E esse é um limite que você não pode atravessar. Se o seu botão não se parece com um ninguém nunca vai clicar nele.

É por isso que não há uma resposta simples para qual deles é melhor - chamativo ou simples. Você apenas tem que descobrir por si mesmo. Sempre teste de divisão. Crie dois botões, um chamativo e um simples. Use os dois ao mesmo tempo e veja qual deles tem melhor desempenho. O Otimizador de website do Google ajudará você com isso.

Apenas um exemplo rápido de um simples botão.

ThemeFuse

Como você pode ver, o botão não está usando nenhuma raposa laranja, mas ainda é altamente visível. Por uma questão de fato, ThemeFuse (uma loja de tema premium para WordPress, da qual faço parte) fornece uma coisinha chamada shortcodes. Entre outras coisas, esses códigos de acesso facilitam muito a criação de botões bonitos.

Por exemplo, com apenas uma linha de:

[button link = "domain.com"] Clique aqui para comprar o meu incrível produto! [/ button]

Eu recebo este resultado:

3. Font

Fonte sem serifa é o padrão para todos os tipos de botões. Isso porque as fontes sem serifa são muito legíveis para todos os usos on-line. (Por outro lado, as fontes com serifa são melhores para publicações impressas.)

Você quer que a cópia em seu botão seja o mais legível possível, pois é a parte mais importante do texto na página. Todas as tampas não são uma boa ideia. O caso misto funciona muito melhor. Por misto, quero dizer que a primeira letra de cada palavra é um caractere maiúsculo. (Exceto por palavras como “para”, “a”, “e”, etc)

(Fonte da imagem: Gomediazine)

Algumas fontes seguras que você pode usar são: Arial, Helvetica, Franklin Gothic, Myriad ou qualquer outra fonte sans-serif clássica,.

Agora, e a cor? A cópia deve, claro, estar em alto contraste com a cor do botão. Você não quer cinza-sobre-cinza. Você quer preto sobre branco ou azul sobre laranja.

Mais uma vez, o texto tem que ser altamente legível.

4. Colocação

A melhor colocação depende do design do seu site, o que provavelmente não é surpreendente. Mas ainda existem algumas regras que valem a pena.

Coloque-o no lugar mais óbvio possível. Não tente ser criativo aqui. A colocação deve ser óbvia para o cliente / usuário.

Toda vez que alguém visita o site, espera ver certas coisas em certos lugares. Coisas como: logotipo no canto superior esquerdo, resumo do carrinho de compras no canto superior direito, cláusula de direitos autorais no rodapé, etc. Seu trabalho é tentar descobrir qual é o lugar mais óbvio para um botão de compra e apenas colocá-lo lá.

Claro, ele precisa ser o lugar mais visível ao mesmo tempo. Isso significa duas coisas:

1. isto absolutamente tem que ser colocado acima da dobra, e
2. Não tenha medo do espaço em branco. O espaço em branco é amigo de todo bom web designer. Lembre-se, não importa quantas coisas você possa colocar em um site, o que importa é quantas coisas você pode remover dele.

Você pode colocar sua estratégia de canais em esteróides duplicando o botão e também colocando-o na parte inferior da página. Dessa forma, quando alguém lê a página inteira, ela ainda pode agir na parte inferior dela.

5. Elementos extras

Esta é a cereja no topo do bolo. Elementos extras melhoram ainda mais a visibilidade do seu botão. Exemplos de elementos: setas, carrinhos de compras, lupas, sinais de adição ou vários elementos de marca.

Meu exemplo favorito - o exemplo do Firefox - usa um elemento extra muito legal - a raposa laranja (também conhecida como logo).

Uma regra é usar elementos extras que enfatize o propósito do botão. Por exemplo, duas setas apontando para baixo funcionam muito bem para um botão de download. Um ícone de carrinho de compras funciona muito bem com um botão adicionar ao carrinho (o exemplo da amazon acima). Lupa funciona muito bem com um botão de pesquisa. E assim por diante.

Você também pode usar alguns elementos de marca. Por exemplo, coisas como: ícone padrão de RSS com um botão de inscrição para alimentação, um ícone de pássaro com um botão "siga-me-no-twitter", uma raposa laranja com um botão download-firefox, seu próprio logotipo com um botão de coisas.

aqui estão alguns exemplos:

Wakeinteractive

Commercialiq

Mediatemple

Unlocking.com

Sofasurfer.eu

Uploadify

Poder de "grátis"

Mais um truque é o uso da palavra mais poderosa no idioma Inglês - GRÁTIS. Sempre que algo é anunciado como livre, as pessoas começam a agir previsivelmente irracionais (confira um ótimo livro de Dan Ariely, "The Upside of Irrationality" para descobrir o que quero dizer.

Mais exemplos:

Freshbooks

Wufoo

Freeagent.com

Qual é o próximo?

Se você é um especialista em Photoshop ou outro software similar, basta ir em frente e criar um belo botão agora mesmo. Outra maneira é tornar-se um afortunado proprietário de qualquer tema WordPress por ThemeFuse, como eu mencionei anteriormente neste post.

Qual é o seu conselho sobre como criar um ótimo botão de compra?? Eu adoraria atualizar este post com suas opiniões.