Como criar um CTA eficiente

Em qualquer design de site, os botões de call to action (CTA) são fundamentais para destacar as ações importantes disponíveis para os usuários. Aqui estão algumas perguntas importantes que você deve considerar ao projetar os botões de CTA a serem usados em seu site
como-criar-um-CTA-eficiente.jpg

O estilo do botão deve permanecer o mesmo?

Embora seja importante que o estilo do botão seja consistente em um site, em alguns casos, há várias ações disponíveis para um usuário em uma única janela de visualização. Para evitar sobrecarregar os usuários com vários botões idênticos na tela, você pode usar estilos diferentes para indicar uma hierarquia visual. Você já está pedindo a um usuário que tome uma decisão, portanto, o UX deve eliminar quaisquer decisões adicionais e desnecessárias em qual botão selecionar. Para ações que são de prioridade máxima, botões sólidos em negrito tendem a chamar a atenção do usuário primeiro. Estilos de botões secundários e terciários devem ser menos enfatizados, com caixas não preenchidas ou simplesmente texto sublinhado para indicar ações menos importantes. Os estilos devem ser distintos, mas ligados por elementos comuns, como cor ou forma, para torná-los facilmente reconhecíveis. Tente usar o estilo de botão principal predominantemente em todo o site e evite criar mais de três estilos de botão distintos.

 

Quais cores são melhores para usar nos botões de CTA?

Ao escolher a cor de preenchimento dos botões de CTA, pode ser tentador confiar no esquema de cores da marca da sua empresa. O design do botão não deve divergir totalmente da marca, mas a cor do botão deve se destacar do restante do conteúdo do seu site. Digamos que você tenha uma paleta de cores minimalista em preto e branco ou suave, você deseja que suas cores apareçam nesses fundos. Usar a cor predominante da marca arrisca o botão competindo pela atenção do usuário, levando a taxas de cliques mais baixas. A psicologia das cores também desempenha um papel fundamental na comunicação do significado por trás dos botões. Geralmente, é melhor evitar os botões vermelhos de CTA, porque os botões vermelhos estão associados a ações perigosas ou prejudiciais. Os botões azuis, por outro lado, têm conotações positivas para os usuários, pois o texto azul tem sido usado para indicar hiperlinks desde o início da internet. Os usuários estão familiarizados e se sentem à vontade para clicar no texto com hiperlink de pista, então por que iniciar uma mudança? Ao escolher a cor para um grupo de botões no site, atribuir cores diferentes a cada ação pode criar uma carga cognitiva maior para os usuários que tentam distinguir entre suas escolhas. É melhor usar a mesma cor para todos os botões de um grupo, para que os usuários possam se concentrar no texto. No entanto, você pode querer considerar a indicação de uma ação padrão para destacar uma escolha, conforme discutido na próxima seção.

 

Você deve destacar uma ação padrão?

Se você estiver mostrando opções em uma tela e uma das opções apresentadas tiver maior probabilidade de ser a ação preferida do usuário, talvez seja melhor destacar essa opção para indicá-la como “padrão” para ajudar os usuários a escolher essa opção mais rapidamente. No entanto, se as opções forem iguais, destacar uma ação padrão pode confundir o usuário ou orientá-lo a clicar na opção padrão em vez de considerar as opções igualmente. Ao mostrar duas opções uma ao lado da outra, também é importante considerar o posicionamento das mãos direita e esquerda. Mostrar uma opção à direita pode tornar os usuários mais propensos a escolhê-la devido ao viés da mão direita, por isso é melhor colocar a opção padrão à direita. No entanto, se a ação padrão for algo irreversível como “excluir tudo”, pode ser melhor colocar esse CTA à esquerda para forçar os usuários a considerar mais sua decisão. Ao apresentar várias opções, basta considerar qual opção será escolhida com mais frequência e com que rapidez você deseja que o usuário navegue na decisão.

Os ícones devem ser adicionados aos botões de CTA?

Normalmente, apenas o texto é suficiente para comunicar ações claras ao usuário, mas quando os botões são agrupados, pode ser mais difícil para o usuário distinguir a diferença entre as opções apresentadas. Por exemplo, se um novo usuário em seu site vir os CTAs “Fazer download” e “Fale conosco” um ao lado do outro, talvez ele precise pensar um pouco sobre a diferença entre as duas ações. Em casos como este, os ícones podem ajudar os usuários a discernir a diferença entre as opções mais rapidamente. Ao atribuir ícones aos CTAs, certifique-se de que o ícone seja útil para comunicar o significado por trás do texto. Se os próprios ícones forem muito semelhantes ou genéricos, eles só podem levar a mais indecisão do usuário. Escolher os ícones certos pode fazer toda a diferença na experiência do usuário.

Os designers devem pensar “out of the box”?

O estilo de botão padrão é uma forma de caixa retangular, com cantos arredondados. Embora os designers possam usar cores e estilo de texto para flexibilizar a marca, a forma geral do botão não deve se afastar muito da norma. O CTA de formato oblongo está ganhando popularidade com marcas mais arredondadas e orgânicas e é um ótimo exemplo de aplicação de elementos de marca sem se sentir estranho. O objetivo de um CTA é ser instantaneamente reconhecível para o usuário e, nesse caso, pensar fora da caixa pode levar os usuários a ficarem confusos ou menos propensos a interagir com os CTAs. Uma maneira de garantir a padronização entre os botões é aderir à medida de “grade comum”

O espaçamento da grade garante que os botões tenham espaço livre adequado ao redor do texto, tornando-os mais fáceis para os espectadores lerem e reconhecerem a anatomia. Designs limpos e simples também tendem a ser mais palatáveis, pois botões com vários efeitos aplicados podem acabar parecendo cafonas e pouco profissionais.

Que considerações devem ser feitas para acessibilidade?

A acessibilidade é necessária para a conformidade legal, mas também é recomendável garantir que os designs sejam fáceis de ler para todos os usuários. O tamanho da fonte e o contraste de cores são duas das principais considerações para a acessibilidade do botão. Os tratamentos de gradiente também podem adicionar complicações à acessibilidade do site, especialmente quando sobrepostos com texto. Como designer, é importante garantir que a legibilidade nunca seja sacrificada pela estética. A Importância da Acessibilidade do Site não é ignorada na Esmera; leia mais sobre como testamos a conformidade de acessibilidade para garantir que nossos sites sejam funcionais para todos.

Na Esmera, ao projetar um site para um cliente, a prioridade número um é garantir que o site envolva os usuários para atingir as metas de negócios. Designers experientes sabem que o estilo de CTA é fundamental para capturar usuários e direcioná-los para o conteúdo mais importante do site. Um design cuidadoso pode aumentar o reconhecimento da marca, melhorar as taxas de cliques e remediar as taxas de rejeição do seu site. Entre em contato com a Esmera para saber mais sobre nossos serviços e como podemos atender a todas as necessidades de design do seu site.