Guia de design de botão: como projetar botões que convertem

Por que escrever um guia de design de botão? Os botões são tão importantes? Por que gastar tanta energia em uma parte tão pequena da interface do usuário?

Embora os botões sejam muito comuns em web design e pareçam simples, sua importância não deve ser subestimada. Eles são elementos vitais do site que desempenham funções muito importantes.

Especialmente como principais apelos à ação e em sites de comércio eletrónico, os botões influenciam literalmente os resultados financeiros. No entanto, também como botões de compartilhamento social, botões de inscrição de e-mail e envio de formulário, eles são essenciais para o sucesso de um site.

Por esse motivo, neste artigo, quero falar em detalhes sobre esse elemento de design frequentemente negligenciado e como criar botões de alta conversão para sites WordPress. Embora o foco esteja em CTAs (chamadas para ação), também falaremos sobre muitos conselhos gerais quando se trata de design de botão.

Esse tópico apertou seu botão? Então continue lendo.

Antes de começarmos, uma breve descrição dos testes A / B

Mais adiante, veremos algumas diretrizes claras para criar e usar botões. Esses princípios o ajudarão a pensar sobre o design, o posicionamento e outros atributos importantes de quaisquer botões em seu site.

No entanto, ao mesmo tempo, é importante ter em mente que isso só constitui a base para melhorar sua taxa de conversão. Os princípios de design permitem que você adivinhe o que funcionará, mas saiba realmente que tipo de botão é a chave para converter visitantes em assinantes, compradores ou então está em teste. A execução de testes A / B permite que você descubra o que realmente funciona para seu site, a quais cores de botão, cópia, posição e outros marcadores os visitantes respondem melhor.

Porque tudo é importante. Mesmo a menor alteração pode ter um efeito surpreendentemente grande nas taxas de conversão - tanto positivas quanto negativas. Examine esses exemplos para entender do que estou falando.

Portanto, embora nosso guia de design de botão ajude você a entender as práticas recomendadas, é melhor complementá-lo com experiências saudáveis ​​para encontrar a combinação vencedora para o sucesso do seu site.

Como projetar botões nos quais os usuários realmente clicam

Após essa advertência, agora nos voltamos para o que se passa na criação de botões de bom desempenho para melhores frases de chamariz e maiores taxas de conversão. Aproveitar!

Projete-os de acordo com sua marca ou site

Antes de entrar no design funcional, é importante pensar sobre o contexto em que os botões aparecerão. Não adianta criar o botão perfeito se isso bagunçar o seu site.

Por esse motivo, embora as diretrizes abaixo sejam importantes, também é importante que seu resultado se integre bem ao contexto em que aparece. Isso significa que seus botões se ajustam à paleta de cores, estilo e diretrizes gerais de design do seu site.

Embora você queira que os botões se destaquem para solicitar uma ação, o objetivo é que eles se destaquem de forma positiva. Isso significa que está em harmonia com o design geral e não o destrói.

Ao mesmo tempo, não tenha medo de experimentar um pouco. Às vezes, um botão em uma cor contrastante é exatamente o que é necessário para apimentar um design que de outra forma seria insípido.

Fazer com que os botões se pareçam com botões

A primeira etapa para criar botões clicados é torná-los realmente semelhantes a botões. As frases de chamariz e as opções de compartilhamento não servem para nada se os usuários não entendem que devem tirar proveito delas.

Os usuários têm certas expectativas quando se trata de design de botão. Se você não cumpri-los, eles terão dificuldade em realizar a ação desejada. Portanto, é importante incluir dicas visuais que os ajudem a entender.

A primeira pista é a forma. O formato mais comum dos botões é retangular ou retangular com cantos arredondados. Os usuários de computador foram expostos a esse design por um longo tempo e, portanto, estão muito familiarizados com ele.

Fonte: Wikipedia usado com permissão da Microsoft

Claro, outras formas também são possíveis, incluindo quadrados, círculos, triângulos ou até formas personalizadas. Na verdade, existem muitos exemplos de botões peculiares e incomuns, por exemplo, no dribbble

Usar um formato menos tradicional pode fazer sentido para manter o design do seu site congruente. Ainda assim, como o iOS da Apple provou com seus quadrados arredondados, isso não significa que ele não funcione.

Imagem de Ienjoyeverytime / shutterstock.com.

Seja qual for sua escolha, certifique-se de permanecer consistente. Evite usar designs diferentes para botões diferentes. Isso não apenas torna a IU muito melhor, mas também garante que os usuários serão capazes de identificar botões em todo o site.

Outra dica de design importante são as sombras e os destaques. As sombras projetadas se tornaram uma sugestão universal para mostrar que os elementos são clicáveis ​​ou podem ser tocados. Mesmo o design plano os usa como um sinal de funcionalidade.

Fonte: Material.io

Fornece etiquetas claras

Além do design básico, rótulos claros também são importantes para o uso dos botões. Sem um rótulo, não há como os usuários determinarem o que fazem.

Os rótulos não precisam necessariamente ser escritos, os ícones também funcionam (veja os botões de compartilhamento social). Usar os dois juntos é outra possibilidade, principalmente em botões relacionados ao e-commerce.

Imagem por Prixel Creative / shutterstock.com.

O importante é que o usuário possa entender o efeito que sua ação de clicar em um botão terá. Se não o fizerem, eles podem evitar fazê-lo em primeiro lugar.

Aqui estão algumas diretrizes para rótulos claros:

• Seja descritivo e específico
• Use verbos de ação, por exemplo, inscreva-se , envie formulário , crie uma conta
• Dirija-se ao usuário diretamente
• Crie um senso de urgência com palavras como Agora ou Hoje
• Mantenha-o simples e claro

As etiquetas são de especial importância quando se trata de CTAs. Alterar apenas algumas palavras pode ter um grande impacto no desempenho dos botões. Por exemplo, a Unbounce observou um aumento de 90% na taxa de cliques simplesmente alterando a cópia do botão de “Comece seu teste gratuito de 30 dias” para “Comece meu teste gratuito de 30 dias”.

Sim, esse pode ser o poder de uma palavra.

Coloque botões onde os usuários possam encontrá-los

Este é realmente um acéfalo. Se seus usuários não conseguirem encontrar seus botões, terá dificuldade para clicar neles. Por isso, outro fator para sua eficácia é a localização.

Existem algumas convenções. Por exemplo, o CTA principal geralmente pode ser visto acima da dobra. Isso faz sentido e já foi antecipado pelos usuários.

Fonte: Netflix

O mesmo se aplica a outros tipos de botões em que os usuários foram treinados para esperar determinados locais. Por exemplo, os botões anterior e seguinte são geralmente ordenados à esquerda e à direita um do outro.

Como isso está tão arraigado na consciência do público, inverter a ordem pode frustrar os visitantes e fazer com que eles saiam. E essa é a última coisa que você deseja.

No entanto, também para botões com localizações mais flexíveis, por exemplo, botões de compartilhamento social, é fundamental pensar onde colocá-los. Por exemplo, você pode pensar que colocar botões sociais no final de seus artigos é uma boa ideia. Dessa forma, os usuários podem compartilhar a postagem depois de terminá-la, certo?

No entanto, a maioria dos leitores nem chega ao fim de suas postagens. Como consequência, uma ideia melhor é colocar botões onde eles possam ser acessados ​​em qualquer ponto da experiência de leitura. Um exemplo é a barra lateral flutuante Monarch:

Em caso de dúvida, uma boa regra para o posicionamento do botão é perguntar a si mesmo para onde os usuários irão olhar a seguir. O design deve orientar o usuário em seu caminho, de modo que os botões podem ser a conclusão lógica de seu caminho pelo site.

Preste atenção ao tamanho e espaçamento

Agora chegamos a um tópico que é especialmente importante no design de dispositivos móveis. As pessoas que interagem com o seu site por meio do toque são menos precisas em suas ações do que as que usam o mouse. Por isso, é necessário que eles possam usar e alcançar os botões sem problemas ou o perigo de tocar no botão errado.

Fonte: Apple

A primeira etapa é verificar se os botões são grandes o suficiente. A ponta do dedo humano médio tem de 8 a 10 mm de largura. Como consequência, a Apple sugere fazer elementos para serem usados ​​pelo toque de pelo menos 44px por 44px (use pontos em vez de pixels para telas de retina). As recomendações de outros fabricantes também giram em torno da marca dos 10 mm. Obviamente, o tamanho pode ser ligeiramente reduzido para web design voltado para uso em desktop.

Ao mesmo tempo, você precisa considerar o espaçamento entre os botões. Você não quer frustrar os usuários porque eles acidentalmente enviam coisas que não pretendiam. O espaço amplo também torna os elementos mais fáceis de localizar, o que é importante para as chamadas para a ação principais.

Dar uma resposta

Assim que os botões ou seu site forem identificáveis ​​e utilizáveis, é hora de pensar no momento em que eles são realmente chamados para a ação. Os botões podem ter vários estados de existência:

• Normal - Identificável como botão, sinaliza capacidade de ser clicado
• Focado - Mudança ao passar o mouse sobre ele, confirmação para o usuário de que a ação é possível
• Pressionado - Mudança adicional para recompensar o usuário por agir e confirmar que algo está acontecendo
• Ocupado - Quando a ação está ocorrendo em segundo plano, o botão pode refletir isso
• Desativado - Mostra que outras ações são possíveis, mas não agora

Fonte: Material.io

Ao fornecer feedback visual aos usuários para o uso dos botões, você pode tornar a interação mais clara e agradável. Para outras ideias semelhantes, consulte o artigo sobre microinterações.

Faça bom uso do contraste

Nem todos os botões são criados iguais. Embora uma página de destino possa ter vários links para clicar, deve haver apenas um que realmente importe.

As ferramentas para deixar isso claro para os visitantes são cor, contraste e localização. Use-os de forma eficaz para chamar a atenção e fazer os usuários clicarem.

Ao contrastar os botões do resto da interface, você os torna mais perceptíveis. Além disso, evita que se percam entre outros elementos.

Quando se trata de cores, não existe uma opção melhor. Novamente, muito aqui depende do seu próprio projeto. Uma boa regra é escolher uma cor contrastante e partir daí. Para obter mais informações sobre esse tópico, verifique nosso artigo sobre técnicas de correspondência de cores.

Além da cor, você pode usar diferentes maneiras de introduzir contraste, incluindo tamanho, tipografia e espaços em branco. O contraste entre a cor do botão e o texto pode aprimorar ainda mais o efeito e tornar a cópia mais legível. Combinado com uma posição proeminente, esses botões realmente se destacam.

Fonte: Prezi

Para descobrir se sua chamada à ação é perceptível, use o bom e velho “teste de estrabismo”. Aplique o design, dê alguns passos na tela, aperte os olhos e veja se o botão se destaca. Eu sei, não parece muito profissional, mas funciona!

Você está apertando os olhos testando seu #CTA? É a melhor maneira de saber se sua frase de chamariz se destaca. http://t.co/uO53xJIOPu pic.twitter.com/wzNPyTErD2

- Design Pickle (@designpickle) 25 de julho de 2015

Botões contrastantes também são importantes para estabelecer a ordem entre eles. Quando há duas ou mais opções, uma cor mais forte pode indicar qual você prefere ou aconselhar os visitantes a escolherem.

Fonte: Quicksprout

Resumindo

Os botões são um elemento central, mas frequentemente negligenciado, do design da web. Imerecidamente assim. Especialmente na forma de frases de chamariz, eles podem ter uma grande influência nas conversões, nas taxas de cliques e em outros marcadores importantes de sucesso.

Por esse motivo, o tópico de design e posicionamento de botões não deve ser considerado levianamente. Para recapitular, a fim de criar botões eficazes:

• certifique-se de que eles se encaixam no seu design geral
• garantir que os usuários possam identificá-los como botões
• fornecer rótulos claros
• coloque-os onde os usuários possam encontrá-los
• preste atenção ao tamanho e espaçamento
• fornecer feedback quando eles forem usados
• faça com que eles se destaquem do resto do site

Essas diretrizes o ajudarão a configurar botões em que seus usuários não podem deixar de clicar. No entanto, conforme mencionado no início, essas práticas recomendadas devem ser tratadas como um ponto de partida. Para realmente descobrir quais botões funcionam para o seu site e como melhorar as conversões, o design do botão deve sempre ser acompanhado de testes A / B completos. Felizmente, também temos um artigo sobre esse assunto.

Qual é a sua experiência com design de botões? Algo importante para adicionar ao acima? Por favor, deixe-nos saber na seção de comentários abaixo!

Imagem em miniatura do artigo por BerryCat / shutterstock.com