Por que criar um guia de design para botão? Botões são tão importantes assim? Por que gastar tanta energia em uma parte tão pequena da interface de usuário?
Por mais que um botão seja super comum no web design e pareça ser simples, a importância dele não deve ser subestimada. Botões são elementos vitais do site que exercem tarefas muito importantes.
Especialmente como elementos de camada para ação e como parte de sites de e-commerce, os botões literalmente influenciam a decisão final. Porém, botões de compartilhamento em redes sociais, botões de cadastro de e-mail e de envio de formulário também são centrais ao sucesso de um site.
Portanto, nesse artigo vamos falar desse elemento por vezes negligenciado, e como criar botões de alta taxa de conversão em sites WordPress. Enquanto nosso foco será nos CTAs (call to action – chamada para ação), também vamos abordar várias dicas gerais relacionadas ao design de botões.
Esse assunto apertou seu botão de interesse? Continue lendo!
Antes de começarmos, um pouco sobre testes A/B
Mais abaixo, vamos abordar uma série de passos a seguir ao criar botões que convertem. Esses fundamentos vão te ajudar a pensar no design, no posicionamento e em outros atributos importantes no seu site.
Porém, ao mesmo tempo, é importante manter em mente que isso apenas forma a base para a melhoria da sua taxa de conversão. Os princípios do design permitem que você se aproxime do funcional, mas para realmente saber que tipo de botão é o ideal para converter seus visitantes em inscritos, compradores e etc, o segredo está nos testes.
Assim, fazer testes A/B permite que você descubra o que realmente funciona no seu site, que cores, texto, posição e outras características têm mais resultado.
Tudo importa. Até a mais sutil mudança pode causar um salto assustador nas taxas da conversão – tanto positivos como negativos. Dê uma olhada nestes exemplos.
Então, enquanto nosso guia de design de botões que convertem vão te ajudar a entender boas práticas, é ideal suplementar a teoria com testes bem-feitos para descobrir a combinação ideal para o sucesso do seu site.
Como projetar botões que convertem
Depois desse adendo, vamos voltar aos ingredientes da receita para botões de sucesso, com boas chamadas para ação e altas taxas de conversão. Aproveite!
O design tem que combinar com sua marca
Antes de entrarmos no design funcional, é importante pensar no contexto no qual os botões vão aparecer. Não adianta criar um botão perfeito se ele não encaixar no seu site.
Por esse motivo, por mais que as dicas abaixo sejam importantes, também há grande importância na harmonia do resultado com o contexto dele. Ou seja: o botão tem que combinar com as cores, o estilo, e o design adotados pelo site.
Claramente, você quer botões que chamem a atenção para motivar a ação. Dessa maneira, o importante é que chamem a atenção de uma maneira positiva, ou seja, que estejam em harmonia com o restante do design e não destruam o visual.
Ao mesmo tempo, não tenha medo de experimentar. Talvez um botão em uma cor bem contrastante é tudo que você precisa para dar charme a um design sem sal.
Botões que parecem botões
O primeiro passo para criar botões que convertem é fazê-los parecerem botões. CTAs e opções para compartilhar não servem pra nada se seus usuários não entenderem que o elemento em questão é um botão clicável.
Usuários têm algumas expectativas quando se trata de botões. Se você não cumpri-las, eles vão ter dificuldade em realizar a ação desejada. Assim, é importante incluir dicas visuais para ajudá-los a entender.
A primeira dica é a forma. Eventualmente, a forma mais comum para botões é o retângulo, ou o retângulo com cantos arredondados. Os usuários de computadores estão expostos a isso há muito tempo e estão muito acostumados.
É claro, outras formas também são possíveis, como quadrados, círculos, triângulos, até formas personalizadas. Existem vários exemplos de botões exóticos e chamativos, como por exemplo no dribble.
Adotar uma forma menos tradicional pode fazer sentido para manter congruência no design do seu site. Isso não quer dizer que não vai funcionar. O iOS da Apple por exemplo, com seus quadrados arredondados, é a prova disso.
Consistência
Independentemente da sua escolha, preze pela consistência. Evite usar designs diferentes para botões diferentes. Isso torna a interface de usuário muito melhor, te dando a certeza de que seus usuários estão conseguindo identificar os botões em qualquer lugar do seu site.
Outra dica importante de design é o sombreamento e as luzes. Sombras tornaram-se o elemento universal para simbolizar elementos clicáveis ou pressionáveis. Dessa maneira até designs mais limpos costumam usar sombras para simbolizar funcionalidade.
Clareza é tudo
Além do design básico, a clareza no texto do botão também é importante para o uso dos botões. Então, com um botão sem um texto claro e direto, não há maneira de os usuários saberem o que estão fazendo.
Um rótulo claro para o botão não precisa ser escrito: ícones também funcionam (como botões de redes sociais). Usar ambos ícone e texto é outra possibilidade, especialmente em botões relacionados a e-commerce.
A parte importante é tornar possível que o usuário entenda o que acontecerá quando o botão for clicado. Se não estiver claro o suficiente, o usuário pode acabar evitando o botão totalmente.
Siga essas dicas para bons rótulos de botão:
- Seja descritivo e específico
- Use verbos de ação, por exemplo: Criar Conta, Fazer Login, Enviar
- Dirija-se ao usuário diretamente
- Crie um senso de urgência com palavras como Agora ou Hoje
- Mantenha a simplicidade e clareza
Rótulos são importantíssimos ao lidar com CTAs. Mudar uma palavra ou outra pode ter um impacto gigante no desempenho do botão. Por exemplo, a Unibounce conseguiu um aumento de 90{c4ed89b24512c12669a9ce013188fd91944b738a09daf7eed2015eacd40ed6a4} nos cliques simplesmente mudando o texto de seu botão de “Comece seu teste de 30 dias” para “Começar meu teste de 30 dias”.
Sim, um par de palavras pode ter um efeito gigante.
Coloque os botões onde os usuários possam encontrá-los
Esta dica é um pouco óbvia. Se seus usuários não conseguirem encontrar seus botões com facilidade, não vão clicá-los. Por esse motivo, outro fator para boa efetividade é a localização.
Há algumas convenções. Por exemplo, o CTA principal normalmente está localizado acima do fold (“dobra” entre o cabeçalho e o resto do site). Isso faz sentido e é algo esperado pelos usuários.
O mesmo vale para outros tipos de botões onde os usuários são treinados para esperar uma localização. Um exemplo é o par de botões anterior e próximo, normalmente colocados um ao lado do outro.
Porém, para botões que convertem de maneira flexível, como os de compartilhamento em redes sociais, pensar onde colocá-los é primordial. Por exemplo, você pode pensar que colocar esses botões no fim do seu post é a melhor alternativa. Assim, quando os usuários terminarem de ler, podem compartilhar com os amigos, certo?
O fato é que a maioria dos leitores nem chegam ao fim do seu post. Como consequência, uma ideia melhor é colocar os botões em uma barr lateral, para serem acessados a qualquer momento durante a leitura. Um exemplo é a barra lateral flutuante Monarch:
Quando houver dúvida, uma boa regra a seguir é perguntar-se onde o usuário vai olhar. O design precisa mostrar o caminho ao usuário para que o botão seja a conclusão lógica de seu caminho pelo site.
Dê atenção ao tamanho e espaçamento
Agora abordamos um tópico de importância especial para design mobile. As pessoas que interagem com o seu site via touch são muito menos precisas com suas interações do que as que estiverem usando um mouse. Por esse motivo, você precisa tornar possível que eles usem os botões sem problemas e sem o risco de apertar outro botão.
O primeiro passo é ter a certeza de que seus botões são grandes o suficiente. A média da ponta do dedo humano é por volta de 8 a 10 mm. Como consequência, a Apple sugere projetar elementos usados por touch com dimensões de pelo menos 44×44 pixels. As recomendações de outras fabricantes também variam por volta dos 10 mm. É claro, o tamanho pode ser levemente diminuído para sites voltados para desktop.
Ao mesmo tempo, você precisa considerar o espaçamento entre os botões. Você não pode deixar que o usuário se frustre por pressionar um botão acidentalmente. Espaçamento amplo, além de resolver esse problema, torna os elementos mais fáceis de serem enxergados, o que é essencial para o CTA primário.
Forneça feedback
A partir do momento em que os botões do seu site estão bem identificáveis e utilizáveis, está na hora de pensar no que acontece no momento em que eles são chamados para a ação. Os botões podem passar por vários estados de existência:
Normal – identificável como botão, sinaliza a possibilidade de ser clicado
Focado – muda levemente quando o mouse está acima dele, confirma ao usuário que a ação é possível
Pressionado – muda mais um pouco para recompensar a ação do usuário e confirmar que algo aconteceu
Ocupado – quando alguma ação está ocorrendo no fundo, o botão pode refletir isso
Desabilitado – mostra que a ação é possível, porém não agora
Ao fornecer o feedback visual para os usuários, você torna a interação mais clara e mais prazerosa. Para outras ideias similares, confira o artigo sobre micro-interações.
Faça bom uso do contraste
Nem todos os botões são iguais. Quando uma landing page tiver vários links para serem clicados, deve haver apenas um de suma importância.
As ferramentas para tornar isso claro aos visitantes são: cor, contraste e localização. Use-as efetivamente para chamar a atenção e fazer os usuários clicarem.
Contrastando os botões com o resto da interface, você torna eles muito mais visíveis. Além disso, isso previne que eles fiquem perdidos no meio dos outros elementos.
Cor
Quando falamos de cor, não existe opção definitiva. Novamente, depende muito do restante do design. Uma boa regra a seguir é escolher uma cor bem contrastante e partir daí. Para mais informações, confira o artigo a respeito de combinações de cores.
Além da cor, você pode usar maneiras diferentes de introduzir contraste, como tamanho, tipografia e whitespace. Contraste entre a cor do botão e o texto podem ampliar ainda mais o efeito, e tornar o texto mais legível. Combine tudo isso com uma posição boa, e você tem a receita definitiva para botões que convertem.
Para determinar se a sua chamada para ação está bem destacada, faça o bom e velho “teste da vista embaçada”. Aplique o design, dê alguns passos do monitor, embace sua vista e confira se o botão ainda chama a atenção. Não parece muito profissional, mas é um ótimo teste!
Contrastar entre botões também é uma boa prática para estabelecer ordem entre eles. Quando houver duas ou mais escolhas, uma cor mais forte simboliza qual deve ser preferencialmente clicado pelos usuários.
Recapitulando
Botões são elementos centrais do web design que às vezes não recebem a atenção que merecem. Especialmente na forma de chamadas para ação, eles podem ter tremendo impacto na taxa de conversão, taxa de cliques e outras marcas de sucesso importantes.
Por esse motivo, o tópico de design e posicionamento de botões não deve ser negligenciado. Para recapitular, para criar botões que convertem:
- tenha a certeza de que eles combinam com o seu design geral
- assegure-se de que os usuários podem identificá-lo como botão
- elabore um rótulo claro
- coloque-os onde os usuários podem encontrar facilmente
- dê atenção ao tamanho e espaçamento
- faça o botão fornecer feedback quando utilizado
- torne o botão bem destacado no design do site
Essas regras gerais vão te ajudar a fabricar botões que convertem com muito sucesso. Porém, como já dito no início, essas práticas devem ser tratadas como pontos de partida. Para realmente descobrir quais os melhores botões para o seu site e como aumentar suas conversões, o design do botão deve passar por um rigoroso teste A/B.
Qual é a sua experiência com design de botões? Quer acrescentar algo importante? Deixe seu comentário abaixo!
Comentários