A arte do design de botões da interface do usuário do site: 10 tendências e dicas
Um ótimo design de botão é algo que a maioria dos usuários de sites nunca pensa ... porque quando funciona bem, é quase invisível. Os melhores botões são fáceis de clicar ou tocar, têm uma função óbvia e ajudam os usuários a interagir com o design sem pensar.
É uma fórmula bastante simples, mas pode ser difícil projetar se você deixar como uma reflexão tardia.
Hoje, analisamos as tendências no design de botões, além de algumas dicas para ajudá-lo a criar um botão de interface do usuário no qual as pessoas clicam repetidamente. Dê um impulso ao seu design de botão com essas dicas, tendências e idéias para inspirar inspiração.
Explorar recursos de design
1. Mantenha as coisas simples
Tudo volta a essa frase clássica da teoria do design: mantenha as coisas simples, estúpidas (ou tolas, se você preferir).
O design do botão do site não é diferente. Um design de botão não precisa ser excessivamente complexo. Deve ser óbvio e funcional. Às vezes, outras tendências de design podem atrapalhar isso e afetar as conversões no seu site.
Portanto, quando se trata de design de botões, pense assim - e não pense demais. Um botão deve se parecer com um botão. É simples assim.
2. Forneça bastante contraste
Quase tão importante quanto ter um botão identificável é garantir que seja fácil ver.
A razão pela qual os estilos dos botões fantasmas sobre as imagens tendiam e desbotavam rapidamente é porque os botões não tinham contraste suficiente para serem facilmente discerníveis. Os usuários não conseguiram encontrá-los imediatamente.
Não esconda botões com pouco contraste. Faça com que eles se destaquem e gritem com bastante cor e contraste de espaço, para que se destacem dos outros elementos na tela. Deixe bastante preenchimento ao redor dos botões para que eles possam respirar.
Isso facilita os botões para os usuários encontrarem e identificarem como elementos clicáveis, além de torná-los fisicamente mais fáceis de clicar sem obter o elemento errado por engano.
3. Use cores
Você já reparou quantos botões são vermelhos ou laranja? É porque as cores brilhantes chamam a atenção para esses elementos e incentivam a ação.
Usar cores também é uma técnica de design bastante moderna. De cores brilhantes a botões com gradientes simples, a cor pode ser uma das maneiras mais fáceis de ajudar as pessoas a interagir com o design.
4. Escreva uma microcópia que cria expectativa
Não cometa este erro: um botão com as palavras "Clique aqui". (Quão spam é isso?)
A microcópia em um design de botão deve criar uma expectativa clara do que acontecerá com um clique. Diga aos usuários o que eles receberão a seguir. Pode ser tão simples como "Enviar" para inserir dados ou clicar em um link para "Saiba mais" ou assistir a um vídeo. Independentemente da ação, informe os usuários na microcópia.
Essas informações podem ajudar a criar confiança com os usuários e aumentar as conversões com ações / interações que os usuários considerem desejáveis.
5. Envolver-se com animação sutil
Há uma tendência no design de botões, em que os sites usam dois botões lado a lado. Um é preenchido, outro é um estilo fantasma. Ambos incluem uma animação instantânea que enfatiza ainda mais duas opções clicáveis.
A animação pode ajudar a chamar a atenção para os botões e até incentivar cliques. Tornou-se um padrão de usuário comumente aceito incluir uma animação instantânea nos botões e fornece uma dica simples para os usuários que eles devem se envolver.
Só não exagere. Botões giratórios, giratórios e intermitentes são mais irritantes do que úteis.
6. Tornar grande o suficiente para tocar
Os botões devem incluir uma área clicável (com toque) que tenha pelo menos 10 milímetros de diâmetro e que a maior sempre esteja OK. Esse conselho vem de um estudo do MIT Touch Lab que analisou os tamanhos de um touch pad em relação aos dispositivos de toque.
Vamos colocar isso em perspectiva. A tecla típica em um teclado físico de computador é de 15 milímetros por 15 milímetros. Esse é um bom objetivo. (Não se esqueça de considerar os diferentes tamanhos de tela, para que seu botão não se perca em telas pequenas.)
Se você precisar usar botões menores, considere adicionar um raio de clique amplo. Dessa forma, se o usuário perder os botões, haverá espaço suficiente ao redor para que a ação desejada ainda aconteça. (Os visitantes do seu site agradecerão.)
7. Use um estilo familiar
Existem alguns estilos gerais de botão com os quais todos estão familiarizados. Use um deles.
- Um botão retangular preenchido com bordas quadradas e texto dentro
- Um botão retangular preenchido com bordas arredondadas e texto dentro
- Um botão retangular preenchido com uma sombra visível (acima)
- Um botão fantasma retangular
- Botões de círculo simples, mais usados no canto inferior direito para indicar suporte, ajuda ou bate-papo
8. Coloque em um local esperado
Não apenas os botões precisam aparecer e funcionar como esperado, eles também precisam estar localizados em um local que os usuários os procurem.
- Para páginas iniciais, isso inclui o posicionamento do botão abaixo de um título ou bloco de texto principal. Os botões geralmente ficam alinhados com o texto ou no centro da tela.
- Para formulários, os botões aparecem após as entradas. Alguns formulários de entrada únicos alinham o botão na mesma linha à direita da entrada.
- Os botões de CTA geral são exibidos diretamente abaixo do conteúdo que eles fazem referência.
- Os botões para reproduzir ou iniciar um vídeo ou jogo geralmente estão no centro da tela de visualização.
- Os botões do carrinho de compras ou de comércio eletrônico estão geralmente no canto superior direito.
9. Não esqueça o feedback
O botão responde à interação? Verifique se há um loop de feedback óbvio incluído no design da interface do botão.
Forneça uma dica visual ou instrutiva de que o botão fez seu trabalho. Alguns botões exigirão mais trabalho que outros. Os botões vinculados a outra página ou site, por exemplo, fornecem feedback de que o botão funcionou se a nova página carregar. Um botão de envio de formulário pode fornecer uma mensagem de agradecimento na tela se as informações forem enviadas corretamente.
10. Use botões intencionalmente
Muitos botões criam caos.
Use os botões onde eles fazem sentido. Não sobrecarregue o design com botões em todo o lugar. Os usuários não terão uma ideia clara de onde e no que é mais importante clicar.
Salve os botões para usar com as metas do site. Eles devem direcionar os visitantes aos elementos mais importantes em seu design geral.
Conclusão
Um botão de site é um elemento que converte sua frase de chamariz em resultado. Reserve um tempo para pensar sobre esse design, da cor à função e à microcópia. Teste os designs dos botões para garantir que você tenha a versão mais funcional em sua interface.
Se você tem um botão que está funcionando, não caia na armadilha das tendências e mude o design. Quando se trata de botões, a função deve ser a principal prioridade.
