Dicas de design de botão: simples, pequeno e de vital importância
Falamos muito sobre detalhes no design. É por uma boa razão. Prestar atenção até nos mínimos detalhes pode criar ou quebrar um design.
Hoje, vamos nos aprofundar em um desses detalhes e procurar maneiras de criar botões nos quais os usuários desejam clicar (ou tocar). Embora os botões possam ser um dos menores elementos em seu design, eles são um dos mais importantes. De que outra forma você comunicaria ações a um usuário? De que outra forma eles forneceriam informações nesse ciclo de feedback?
Pense por um momento em uma das grandes reclamações sobre design plano nos estágios iniciais: os usuários não sabiam o que era e o que não era interativo no design. Portanto, a importância do excelente design de botão.
Explorar recursos de design
Deve parecer tocável
Os usuários devem ver um botão no design e pensar que precisam - um, querem - alcançar e tocar nele. Embora quase qualquer botão de tamanho possa ser clicado em uma tela, o tamanho e o preenchimento de um botão em um dispositivo de toque são vitais.
O usuário médio tem um tamanho de ponta do dedo entre 8 e 10 milímetros de diâmetro. Com isso em mente, um alvo de 10 a 10 milímetros é um ótimo tamanho de alvo inicial para botões em dispositivos touch. (Isso é um pouco menor que as teclas padrão do seu teclado.)
Existem algumas coisas de design que você pode fazer para que um elemento pareça tocável também.
- Uma sombra sutil pode "levantar" o elemento do plano de fundo para torná-lo um pouco mais próximo do usuário.
- O preenchimento aumentado dos botões facilita o clique e ajuda a guiar o usuário até o elemento.
- Ações de foco ou alternância coloridas podem mostrar aos usuários o que estão fazendo em tempo real e significar ação.
Questões de cor
A cor do botão precisa ser especial em todo o design do site. É um bom lugar para empregar uma cor de destaque específica e usá-la apenas para ações de botões.
A cor do botão deve ser brilhante e atraente. Há uma razão para que tantos designs incluam botões amarelos, azuis ou verdes. Eles são fáceis de ver e se destacam do resto do design. Para um botão que realmente se destaca, selecione uma cor que seja um par complementar à cor principal no design (opostos na roda de cores).
A outra preocupação com a cor é a marca. Você deseja selecionar uma cor de botão que funcione com a paleta de cores e a identidade da marca. Não importa o quanto você queira que uma cor de botão se destaque no design, ela deve funcionar com - e não contra - seu esquema de cores primárias.
O tamanho importa ainda mais
Faça isso grande!
Os botões precisam de algum peso para que os usuários sejam atraídos imediatamente para eles na tela. A tendência dos botões fantasmas - contornos sem cores distintas - se concentrou em botões grandes em termos de contagem de pixels, mas não tinha peso visual. Em termos de tamanho, um botão precisa ser grande em ambos os aspectos. (Esse é um dos motivos pelos quais a tendência saiu de moda.)
Há um ponto complicado, porém, quando um botão passa do tamanho perfeito para o tamanho excessivamente embaraçoso. Exatamente quando isso acontece depende da escala de outros elementos de design, mas você saberá com certeza quando isso acontecer. Se o botão for tudo o que você vê no design, é provável que seja muito grande.
O posicionamento é essencial
Para onde no design o botão deve ir? Existe um local que ajude a gerar cliques mais do que outros?
Na maioria dos casos, os botões devem seguir o conteúdo para o qual foram criados.
- No final de um formulário
- À direita de uma mensagem de apelo à ação
- Na parte inferior da página ou tela
- Centralizado abaixo de uma mensagem
Por que esses canais? Porque segue o caminho natural da ação e a maneira como os usuários lêem e interagem com os sites.
Foco no contraste
Com todos os elementos de design, o contraste é uma consideração importante. Isso vale para as técnicas usadas no próprio elemento, mas também para a relação entre o elemento e sua localização no design e os arredores.
Lembre-se de pensar nas seguintes técnicas neste ambiente duplo:
- Cor
- Digite peso e tamanho
- Tamanho dos elementos
- Forma no que se refere ao fundo
- Transparência ou animação
- Sombras ou graident
- Espaço em branco e preenchimento
Usar formas padrão
Quando se trata de botões, existem apenas duas formas que você deve considerar:
- Círculos. O botão circular tornou-se popular graças aos conceitos de Design de materiais e Material Lite. Com qualquer estética semelhante, um botão redondo trabalha com o design e se ajusta ao padrão do usuário.
- Retângulos. Essa forma padrão deve ser a sua opção para todos os botões, a menos que você esteja usando um círculo na instância acima. É o que os usuários sabem e estão acostumados. A maioria dos retângulos de botões tende a ter pelo menos o dobro da largura (algumas vezes três ou quatro vezes). Os usuários veem essa forma e imediatamente sabem o que fazer. Embora alguns possam argumentar os méritos dos cantos arredondados em relação aos ângulos de 90 graus, ambos são igualmente apropriados com base no seu estilo de design.
Diga aos usuários o que fazer
Cada botão deve incluir uma instrução de texto que informe aos usuários exatamente o que o botão fará. Você deseja manter o idioma curto e simples e deve corresponder ao tom do restante do design do site.
Então, cumpra essa promessa. A próxima coisa que aparecer deve informar ao usuário que eles chegaram ao destino esperado. Seja enviando um formulário, fazendo uma compra ou apenas passando para outro link, o usuário deve obter o resultado desejado ao interagir com o botão. (Caso contrário, verifique se há um erro indicado no ciclo de feedback para você saber quais correções precisam acontecer no design do site.)
Exemplos de mensagens de botão incluem:
- Clique aqui
- Crie uma conta agora
- Experimente Grátis
- Adicionar ao carrinho
- Consulte Mais informação
Dê alta importância visual aos botões
A maioria dos designs é preenchida com pequenos elementos da interface do usuário. Uma armadilha que acontece é o design desses elementos ser empurrado até que o projeto esteja quase completo. E então você escolhe um design para todos os elementos da interface do usuário, com algumas pequenas diferenças.
Não fique preso nessa situação perigosa.
No design, os botões devem parecer apenas botões! Nada mais no design deve ter a mesma forma, cor e peso visual que um botão. Eles precisam ser diferentes. Pense em criar um estilo para botões maiores do que qualquer outro elemento semelhante no design ou use uma cor de destaque que seja apenas para botões. Essas técnicas podem ajudar a fazer com que um botão pareça especial e enfatizar seu uso.
Conclusão
Você está começando a repensar algumas de suas opções de design de botão? Você acha que pode criar algo que incentive melhor os cliques?
Experimente algumas dessas dicas, mantendo um olho nas análises do site, para ver com precisão a quais mudanças de design a sua base de usuários responde. Use essas informações para ajudar a criar botões ainda mais clicáveis para projetos futuros.
