7 diretrizes de design do botão CTA – Ed Rodrigues - Web Designer Freelancer
7 diretrizes de design do botão CTA
Quando bem projetados, esses botões não apenas permitem ao usuário navegar efetivamente pelo seu produto, mas também são críticos nos fluxos de conversão.
Ao focar apenas alguns elementos-chave, aumentaria sua importância e eficiência, resultando em melhores taxas de conversão. Um desses elementos-chave é o "botão CTA", essencial para a maioria dos sites e produtos. Eles são projetados para permitir que o usuário execute ações específicas; criando uma conta, adicionando ao carrinho, comprando um produto e muito mais. Quando bem projetados, esses botões não apenas permitem ao usuário navegar efetivamente pelo seu produto, mas também são críticos nos fluxos de conversão.
O objetivo deste post é destacar algumas das principais diretrizes que sigo quando se trata de criar melhores botões de CTA, juntamente com exemplos de vários sites para ajudar você a ter uma idéia melhor de como incorporar essas características.
Este foi um dos principais princípios destacados por Allison Rung, UX Writer no Google. Menos é mais, mas conciso não significa apenas curto. É um equilíbrio entre o número de palavras usadas e a mensagem que essas palavras transmitem. Uma mensagem é concisa quando cada palavra tem um objetivo.
A cópia UX de uma página de destino é diferente da usada no botão CTA. Um é usado para transmitir uma mensagem mais longa e mais elaborada do que seu produto faz e de seus benefícios para o usuário. O outro é iniciar a ação relacionada ao botão com o mínimo de palavras possível.
Embora você esteja trabalhando apenas com 2 a 4 palavras, o idioma é o núcleo do seu design de CTA. As palavras que você escolher afetarão a maneira como o usuário percebe a ação pretendida do botão. Usar palavras erradas pode comunicar algo diferente, resultando em uma relutância em avançar ou uma experiência negativa de resultados não intencionais.
Gosto de como o Airbnb usou a palavra "Reserva" em sua página de listagem em vez de "Livro", pois isso comunica sua política de cobrar apenas do usuário 24 horas após o check-in, pois não tem nenhuma associação com o pagamento.
Como mencionado anteriormente, os botões podem ser usados ​​para guiar o usuário pelo fluxo de conversão, mas muitas sinalizações direcionais podem causar confusão em vez de clareza. É importante limitar o uso de botões em uma única interface do usuário para evitar sobrecarga cognitiva – quanto menos opções um usuário tiver, mais fácil será tomar uma decisão.
É também por isso que as cadeias populares de fast-food têm uma seleção limitada de opções no menu. Ao oferecer um número limitado de opções / botões, você facilita a vida do usuário, o que acabaria por aumentar suas taxas de conversão.
Você pode navegar facilmente por todos os novos produtos no mercado e descobrir que a maioria de suas páginas de destino consiste apenas em uma frase de chamariz principal; para solicitar ao usuário que se inscreva, inscreva-se agora ou alguma outra ação de conversão. Como designer de UX, você precisa se comunicar com todas as partes interessadas para entender o principal objetivo do negócio antes de decidir a cópia e a ação do botão.
A cor usada nos botões depende de vários fatores; o plano de fundo, a cor da sua marca ou até a natureza da ação pretendida. Embora não haja cor certa para usar, é importante selecionar uma que contrasta com o fundo. Se o fundo for azul, é melhor usar amarelo ou vermelho para criar um impacto.
Com bom contraste, o botão se destaca entre outros elementos e exige a atenção do usuário.
Utilize canais inteligentes
Mencionei acima que cores contrastantes são eficazes para chamar a atenção do usuário, mas utilizar canais inteligentes pode aumentar ainda mais essas chances. Existem dois tipos de canais inteligentes; um é entender o modelo mental do usuário e o segundo a jornada do usuário.
Modelos mentais são formados através do uso frequente de um sistema e da compreensão de como ele funciona. Se eu pedisse para você apontar para onde o botão de inscrição está localizado, sem olhar para a tela, para onde você apontaria? Eu provavelmente poderia ler sua mente e adivinhar que você pensava no canto superior direito. Ao entender como seus usuários estão acostumados a determinados sistemas, você pode colocar seus CTAs nos lugares certos.
Para o último, ao entender a jornada do usuário, você pode prever o movimento dos olhos e solicitá-los ao CTA com o layout da página. Por exemplo, para a maioria das páginas de destino, o banner terá um cabeçalho, subtítulo e, por fim, o botão CTA – o usuário terá uma chance maior de clicar no CTA depois de ler as informações.
Implementar hierarquia visual
Na maioria das vezes, os botões do CTA vêm em um par; "Faça login e inscreva-se", "confirme e cancele" etc. É por isso que é importante esclarecer seu CTA principal e criar uma hierarquia visual para torná-lo o foco. Isso pode ser feito projetando o botão principal de maneira mais ousada (usando uma cor contrastante) e colocando-o à direita. Embora a ação secundária possa ser representada usando um botão fantasma ou apenas um link de texto simples.
A implementação de uma hierarquia visual clara os guiará para a ação ideal que contribui para os objetivos de conversão de maneira importante.
Embora as dicas acima sirvam definitivamente para melhorar o design do botão, a única maneira de aperfeiçoar o botão CTA é através de vários testes A / B para descobrir o que funciona melhor para seus usuários; a cópia, cores, tamanho, posicionamento, forma e estilo diferem com base no design da interface e na personalidade do usuário.
Para projetar o botão de call to action perfeito, os designers precisam se concentrar em seus objetivos principais e avaliar sua eficácia por meio de várias rodadas de testes A / B. Um botão com o tamanho, cor, cópia e posicionamento apropriados chamaria a atenção do usuário e os encorajaria a executar a ação desejada.