Os botões desempenham um papel importante no processo de compra on-line: os botões projetados incorretamente têm baixa clicabilidade e, como resultado, baixa conversão. O artigo discutirá como corrigir isso.
Prefácio:
Este artigo está publicado nos hubs "Marketing na Internet", "Design" e é dirigido principalmente a profissionais de marketing e designers. Compartilhar opiniões, experiências e melhorar. A partir do primeiro parágrafo, fica claro o que é este artigo. Se você é um desenvolvedor que acredita que todas as lojas estão trapaceando e todos os profissionais de marketing são golpistas, essa é sua opinião e ela tem o direito de existir. Não perca seu tempo lendo este artigo e os subseqüentes menos pelo tempo gasto. É melhor ler sobre como a inteligência artificial faz um boquete - o tópico mais popular nos últimos dias em Habré. Boa sorte Agora, vamos ao artigo.
1. Disponibilidade do botão
Para que o botão seja clicado, o botão na página deve ser. Pode parecer estranho, mas existem sites sem botões. No exemplo abaixo, a página do produto da loja online
VeloDrive . O site é anunciado no Yandex.Market, mas não há botão Comprar na página, e ligar e ditar o número do artigo não é a opção mais conveniente.
Não há botões na página do produto de velodrive.ru2. O botão deve se parecer com um botão
Para que um botão seja clicado, os usuários precisam entender que o botão está na frente deles. Para fazer isso, eles devem ser claros e reconhecíveis, os botões devem ser semelhantes aos botões. Como conseguir isso, recomendações abaixo.
O link (esquerda) é menos visível que o botão (direita)2.1 Forma do botão
A forma pode ser qualquer uma (redonda, quadrada, retangular), mas a retangular é a mais usada, pois é possível ajustar a inscrição com a finalidade dela.
Botões no site da Tmall (AliExpress)2.2 Cantos arredondados dos botões
A maioria dos botões no mundo físico tem cantos arredondados, e esses botões no site são mais fáceis de reconhecer. Além disso, os cantos arredondados são mais familiares e, portanto,
mais fáceis de serem percebidos pelo cérebro . Talvez o exemplo mais óbvio sejam as teclas do teclado.
Teclado Apple Magic, todas as teclas têm cantos arredondados2.3 Botões de volume
É melhor fazer um botão volumétrico, para isso são usadas sombra, gradiente e quadro. A tendência dos últimos anos é design plano. Esse design é bonito, mas uma das desvantagens óbvias é que, devido à falta de sombras e ao volume do botão, é mais difícil distinguir dos elementos de design não clicáveis. O grupo Nielsen Norman realizou um
teste , durante o qual foi constatado que os usuários encontram os botões de volume 22% mais rápido que os botões simples.
Botão plano (esquerda) e botão volumétrico com sombra e gradiente (direita)2.4 Botões interativos
É desejável tornar o botão responsivo, ou seja, quando você passa o mouse sobre ele, altera sua cor e volume. Assim, mesmo quando você passa o mouse sobre o cursor (antes do clique), fica claro que o elemento é clicável.
Botão padrão (esquerda) e botão de foco (direito)3. O botão rei
Eu criei uma boa regra que nunca me falhou: uma página - um botão principal (CTA - call to action). Não sobrecarregue a página com muitos botões, isso dispersa a atenção, cria perguntas desnecessárias e, como resultado, reduz a clicabilidade.
Nix.ru, muitos botões chamam a atenção e reduzem a clicabilidadeNão faça os usuários pensarem, dê a eles apenas um botão principal na página. Isso não significa que não pode haver outros botões na página. Eles podem estar lá, mas suas tarefas são secundárias, portanto devem ser menos visíveis pelo tamanho e cor, bem como pela localização a uma distância do botão principal, criando espaço livre. Isso é para garantir que os botões secundários não concorram com o primário pela atenção dos usuários.
4. Cor do botão
4.1 Botão fantasma
O botão principal da página deve estar em uma cor contrastante para se destacar do fundo e dos elementos circundantes. Para botões menos prioritários, é melhor não usar cores, tornando-os transparentes e colocando-os em um quadro - esses são os chamados botões fantasmas.
A cor do botão separa o botão principal (superior) e o secundário (inferior)Mas não faça do botão fantasma o principal, caso contrário, ele se funde com o fundo e se torna menos perceptível.
O botão fantasma como botão principal é uma má decisão
Muito melhor mi-storekazan.ru4.2 Que botões de cores escolher
Acredita-se amplamente que a cor de um botão possa sugerir uma ação, por exemplo:
- Ação positiva (CTA: adicionar, enviar, salvar, carregar): azul, verde;
- Ação negativa (CTA: excluir, bloquear, redefinir): vermelho;
- Ação neutra (CTA: saiba mais, compare, adicione aos favoritos): preto;
- Ação inacessível: cinza.
Cor do botãoEssa opinião baseia-se no fato de uma pessoa desde a infância se acostumar com o significado dessas cores, e essa experiência é fixada no nível subconsciente. Porque é assim que os semáforos funcionam nas ruas (vermelho, verde, verde). É assim que os smartphones funcionam (verde - iniciar uma chamada, vermelho - redefinir) e assim por diante.
O significado familiar de vermelho e verdeMas, de fato, a situação com a percepção das cores é um pouco diferente. A cor vermelha do semáforo não foi escolhida por causa da percepção psicoemocional da cor e não por sua interpretação simbólica. Afinal, a visão de uma maçã vermelha ou cereja vermelha não causa emoções negativas, perturbadoras ou negativas em ninguém. Na China, vermelho é a cor da alegria, da vida. Na Índia, o berço do simbolismo das cores, é semelhante.
O ponto é
a dispersão Rayleigh , na qual a cor vermelha corresponde ao maior comprimento de onda do espectro visível. E isso significa que é menos suscetível à dispersão. Com todas as outras coisas iguais, o motorista poderá distinguir o semáforo vermelho a uma distância mais distante do cruzamento ou cruzamento de pedestres e terá um pouco mais de tempo para parar.
Mas voltando à conversão, como resultado do
teste de botões de cores diferentes, a melhor conversão foi para o botão vermelho - 52,25%, e a pior taxa foi para o botão verde 41,46%. Em outras palavras, a situação é absolutamente oposta às cores dos semáforos. O que fala a favor da lei de Rayleigh e a cor vermelha é mais perceptível.
Taxa de conversão de botões de cores diferentesEm outro
teste, a taxa de conversão de diferentes cores de texto nos botões foi medida. Como resultado, o branco foi o líder com uma grande vantagem, com uma conversão de quase 77%. A cor branca acabou sendo a mais legível devido ao alto contraste com o fundo de botões de cores diferentes.
Taxa de conversão para texto de cores diferentes nos botões5. tamanho do botão
O tamanho do botão é importante por dois motivos principais:
- Com a ajuda de um tamanho grande, você pode atrair atenção, portanto, é melhor aumentar o botão principal.
- Em dispositivos móveis, o cursor do mouse está ausente e o dedo humano é maior que o cursor; portanto, os botões precisam ser executados mais para que seja conveniente pressioná-los com as pontas dos dedos. Foi realizado um estudo no MIT (Massachusetts Institute of Technology), no qual foi constatado que o tamanho médio dos fingerpads é de 10 a 14 mm e as pontas dos dedos são de 8 a 10 mm. Portanto, o tamanho mínimo recomendado para botões é 10x10 mm.
Revista UX (esquerda) e um fragmento do manual da Apple (direita)Outro ponto importante que pode ser atribuído ao tamanho é a distância entre os botões. Se os botões estiverem próximos, os usuários móveis podem pressionar acidentalmente o botão errado com o dedo. A distância recomendada entre os botões é de 3 mm.
6. Layout do botão
Os botões devem estar visíveis, para isso, estão melhor posicionados onde se espera ver, por exemplo, ao lado do produto na página do produto ou ao lado do preço total na cesta. O botão principal da página deve ser colocado na tela inicial. Não force os usuários a procurar botões importantes no site, isso reduzirá a conversão.
O botão principal Comprar está localizado em um lugar de destaque, na primeira tela da página do produto no site da Sportmaster
O botão principal de checkout está localizado na primeira tela da cesta no site da Adidas. O botão também é duplicado no caso de um grande número de produtos na cesta.
O botão principal "Fazer um pedido" está ausente na primeira tela da cesta do mercado "Take".7. Texto do botão
7.1 Apelo à ação claro
Uma pessoa é tão organizada que fica apreensiva com algo desconhecido. Portanto, a inscrição no botão deve solicitar o que aguarda a pessoa após o clique e solicitar que ela aja. Caso contrário, a clicabilidade do botão será menor.
O texto no botão deve indicar claramente a ação7.2 Etiquetas de botão dinâmico
Outra opção é alterar os rótulos dos botões ao passar o mouse. Segundo eles, o usuário imediatamente entende qual ação ele executará clicando no botão. Isso reduz a incerteza e melhora a clicabilidade.
Botões dinâmicos no Twitter, o botão altera a inscrição e a cor quando você passa o mouse, solicitando ação7.3 Ícones de botão
Além das inscrições, você pode colocar um ícone no botão, para que fique muito mais claro. Abaixo está um exemplo de botão em um site da Amazon. Observe que, graças ao ícone da lixeira, o valor do botão é compreensível em qualquer idioma.
Botões na Amazon em russo (esquerda) e japonês (direita)Mas o uso dos ícones é deliberado. Pegue ícones simples e claros, não abuse de jóias. Os ícones devem estar dentro do significado da seção para a qual eles direcionam.
Ícones (em cima) e seus significados (em baixo)1 - conta pessoal (registro ou entrada).
2 ou 3 - você deve ter mais cuidado com esses ícones, pois eles podem indicar muitas funções: favoritos, salvos, lista de desejos, favoritos, como classificação. Fácil de se confundir.
4 - comparação de mercadorias (de acordo com as características).
5 - produtos visualizados anteriormente.
6 - ajuda (informações).
7.4 Texto ao lado dos botões
É aconselhável indicar as legendas para os botões e ícones. Sem uma assinatura, a clicabilidade diminui e, com ela, a conversão. Exemplo: quando a Microsoft lançou o cliente de email do Outlook 97, os botões dos comandos principais foram usados na nova interface de botão.
Mas os testes mostraram que as pessoas quase nunca usavam uma barra de ferramentas com ícones. Decidiu-se então fazer as correções: reorganizando os ícones em alguns lugares, desenhando novos ícones. Mas nada mudou a cada mudança, as pessoas não usavam botões com ícones.
Microsoft Outlook 97Por fim, a equipe do projeto decidiu colocar uma descrição em texto ao lado de cada ícone. E funcionou, as pessoas começaram a usar ativamente a barra de ferramentas.
Microsoft Outlook 2003O texto explicativo ao lado dos botões também ajuda a aliviar as preocupações dos usuários, por exemplo: "Clicarei no botão e meu dinheiro será debitado?"
Texto explicativo ao lado de um botão na Booking.com7.5 Não sobrecarregue botões com texto
Para fazer isso, você pode usar as recomendações acima.
Nix.ru***Postado por Eduard Faysullin, fundador do Conversant.me