Um dos elementos de interface do usuário mais prevalentes é o botão. Eles permitem que os usuários interajam com um sistema e realizem uma ação, permitindo que eles façam escolhas. Formulários, páginas iniciais de sites, janelas de diálogo e barras de ferramentas, por exemplo, têm botões.
É fundamental distinguir entre botões e links. O design do botão de site é usado para direcionar os visitantes para outras páginas, e os links são usados para direcionar os visitantes para outras páginas quando você deseja que eles tomem uma ação (enviar, cancelar, excluir) (sobre mim, leia mais).
Os usuários estarão mais propensos a realizar a ação que você deseja se seus botões forem bem projetados. Este post mostrará como fazer um design de botão de site irresistível que as pessoas querem clicar no seu site.
Idéias de design de botão de site
Detalhamos alguns métodos excelentes e outros terríveis de design de botões da Web na lista abaixo, para fornecer um curso intensivo sobre como criar botões atraentes como os especialistas.
1. Bom design de botão de site
• Nítido: O texto e as cores dos botões devem ser nítidos, claros e fáceis de ler. Nos últimos anos, o design de botão plano tem sido uma tendência popular de web design, então este é um estilo seguro para experimentar. Evite usar botões sofisticados e chamativos que possam distrair os leitores.
• Conciso: Nos botões, o uso de texto mínimo é ideal. A ideia é usar apenas uma ou duas palavras. Mais do que isso se torna inconveniente e desconcertante. Faça uma pausa e pergunte a si mesmo: "O que eu quero que o leitor faça agora na página?" A primeira palavra que vem à mente é quase certamente um verbo. Para um texto de botão curto e conciso, adicione um advérbio de tempo depois disso.
• Contextual: Qual é a função do botão? O que exatamente isto faz? Botões difíceis de entender não são clicados. Se você tiver um botão "comprar agora", ele deve levar o visitante a uma página onde ele pode inserir as informações do cartão de crédito, em vez de uma página que mostra os produtos que deseja comprar
2. Design de botão de site ruim
• Não Responsivo: Quando se trata de web design, a experiência móvel é fundamental. Como você quase certamente estará projetando seus botões em um computador desktop, você precisará verificar manualmente se eles também funcionam em dispositivos móveis. Se você pular esta etapa, o design de botão de site pode ser muito grande ou muito pequeno para um dispositivo móvel, afetando sua taxa de cliques. Felizmente, o Strikingly fornece um botão de alternância que permite visualizar os elementos da página da Web em vários tipos de tela, permitindo alterar os designs dos botões de acordo.
• Sem cor: Botões brilhantes e em negrito funcionam bem como CTAs, pois chamam a atenção do visitante para aspectos importantes da página. Tenha em mente que seu site é uma jornada, e os botões que você definir nele devem servir como um mapa. Seus leitores podem ter dificuldade para percorrer a página e clicar se você não usar botões coloridos.
• Desalinhado: outro problema semelhante, os visitantes podem ficar confusos com botões mal posicionados. Um botão solitário no meio de um parágrafo não ajudará e pode até piorar as coisas se seus botões não forem colocados em um local que incentive o leitor a aprender mais ou fazer uma compra. Adicione botões exatamente onde você exige que o visitante tome medidas para manter as coisas simples. Perto de uma seção de recursos e benefícios, no cabeçalho e na parte inferior de uma página estão alguns exemplos desses pontos.
Inspiração de design de botão de site
A imagem foi retirada do site do usuário Strikingly
Antes de começar a criar seu próprio botão, confira vários modelos gratuitos para ver o que está disponível, o que se adapta ao seu estilo e o que faz mais sentido para o seu site.
1. Facilite a si mesmo
Tudo se resume ao velho ditado em design: "Keep It Simple" (“Mantenha simples”, em português). O design dos botões do site não é exceção. O design de um botão não precisa ser extremamente complicado. Deve ser auto-evidente e prático. Outras tendências de design de botão de site podem atrapalhar isso, o que pode prejudicar a taxa de conversão do seu site. Portanto, ao pensar em ideias de design de botões, tenha isso em mente – e não pense demais. Um botão deve ter a aparência de um botão. Isso é tudo o que há para isso.
2. Certifique-se de que há muito contraste
É quase tão crucial quanto ter um botão que ele seja distinguível para garantir que seja visível. Como os botões não tem contraste suficiente para serem imediatamente discerníveis, os estilos de botão fantasma em cima dos gráficos tendem a desaparecer rapidamente. Os usuários não conseguem localizá-los imediatamente.
Botões com baixo contraste não devem ficar ocultos. Faça-os aparecer usando muita cor e contraste de espaço para separá-los dos outros itens na tela. Deixe bastante espaço ao redor dos botões para permitir que eles respirem. Isso torna mais fácil para os usuários detectar e reconhecer botões como objetos clicáveis e torna-os fisicamente mais fáceis de clicar sem selecionar acidentalmente o botão errado.
3. Faça uso da cor
A imagem foi retirada do site do usuário Strikingly
Você já reparou quantos botões vermelhos ou laranjas existem? Como as cores brilhantes chamam a atenção para esses elementos e inspiram a ação, elas são usadas dessa maneira. A cor também é uma técnica popular de design de botão de site nos dias de hoje. A cor pode ajudar os consumidores a se conectarem com um design de várias maneiras, desde tons vibrantes até botões com gradientes simples.
4. Crie uma Microcópia que Provoque Antecipação
Não cometa este erro: As palavras "Clique aqui" escritas em um botão. (Isso não parece spam?) A microscopia de um design de botão deve fornecer ao usuário uma ideia clara do que acontecerá quando ele clicar nele. Informe os usuários sobre o que eles receberão em seguida. Pode ser tão simples quanto clicar em “Enviar” para inserir informações ou clicar em um link para “Saiba mais” ou visualizar um vídeo. Diga aos usuários qual é a ação na microscopia, independentemente do que seja. Essas informações podem ajudar a construir a confiança do usuário e aumentar as conversões por meio de ações/interações que as pessoas consideram atraentes.
5. Use animação sutil para envolver seu público
Os sites estão cada vez mais usando dois botões lado a lado em seu design de botão de site. Um está cheio, enquanto o outro é fantasma, ou transparente. Ambos têm um movimento de foco que chama a atenção para duas opções clicáveis. O uso de animação pode ajudar a chamar a atenção para o design do botão de site e talvez incitar as pessoas a clicar neles. As animações de foco nos botões tornaram-se um comportamento frequente do usuário e servem como uma dica direta para os usuários de que eles devem se envolver. Só não exagere. Botões que giram e piscam são mais irritantes do que benéficos.
6. Aumente o suficiente para clicar
A imagem foi retirada do site do usuário Strikingly
Os botões devem ter uma região clicável (tocável) com um diâmetro de pelo menos 10 milímetros, mas maior é sempre aceitável. Este conselho vem de um estudo do MIT Touch Lab que analisou o tamanho das almofadas dos dedos em relação aos dispositivos de toque. Vamos contextualizar isso. Em um teclado de computador físico, uma tecla típica mede 15 milímetros por 15 milímetros. Esse é um excelente objetivo para se ter. (Lembre-se de que larguras de tela variadas farão com que seu botão desapareça em dispositivos pequenos.) Se você precisar usar botões pequenos, tente dar a eles um raio de clique grande. Se o usuário perder os próprios botões, ainda haverá espaço suficiente ao redor deles para que a ação pretendida ocorra. (Os visitantes do seu site irão agradecer.)
7. Use um estilo que você já conhece
Todo mundo está familiarizado com alguns tipos diferentes de design de botão de site. Faça uso de um deles.
- Um botão retangular preenchido com cantos quadrados e texto no interior
- Um botão retangular preenchido com bordas arredondadas e texto no interior
- Um botão de retângulo preenchido com uma sombra perceptível (acima)
- Um botão fantasma, transparente re
8. Coloque em um local previsto
A imagem foi retirada do site do usuário Strikingly
Os botões não devem apenas aparecer e funcionar como esperado, mas também devem ser colocados em um local onde as pessoas os procuram.
- Isso inclui o posicionamento do botão atrás de um título principal ou bloco de conteúdo nas páginas iniciais. Os botões são normalmente alinhados com o texto ou no centro da tela.
- Os botões exibem as seguintes entradas nos formulários. Em alguns formulários de entrada única, o botão na mesma linha do campo de entrada é alinhado à direita do campo de entrada.
- Os botões de CTA para uso geral são exibidos exatamente abaixo do conteúdo ao qual se referem.
- Os botões de reprodução ou início de um vídeo ou jogo geralmente estão localizados no centro da tela de visualização.
- Os botões de comércio eletrônico ou carrinho de compras geralmente são encontrados no canto superior direito.
9. Não se esqueça de fornecer feedback
O design de botão de site é responsivo às suas ações? Certifique-se de que o design da interface do botão tenha um loop de feedback óbvio. Dê um indicador visual ou verbal de que o botão completou sua tarefa. Alguns botões levarão mais tempo para serem concluídos do que outros. Se a nova página for carregada, os botões que se conectam a outra página ou site, por exemplo, fornecem feedback de que o botão funcionou. Se as informações forem preenchidas corretamente, um botão de envio de formulário pode exibir uma mensagem de "obrigado" na tela.
A imagem foi retirada do site do usuário Strikingly
10. Use os botões intencionalmente
Quando há muitos botões, o caos acontece. Onde os botões são apropriados, use-os. Não deixe o design muito cheio espalhando botões por todo o lugar. Os usuários não terão certeza de onde clicar e o que é mais importante. Para usar com os objetivos do site, economize os botões. Eles devem direcionar os visitantes para as partes mais significativas do seu design geral.
Como fazer um design de botão de site atraente?
Você quer fazer um botão de site, mas não sabe como? Você está no lugar certo. Com Strikingly você pode desenvolver botões de comércio eletrônico que atrairão seus clientes e os incentivarão a comprar suas coisas. Vale a pena notar que você pode alterar a opção "Comprar agora" para "Reservar agora". O estilo de botão individual e as opções de alinhamento foram expandidos! Para acentuar um botão, aumente-o ou altere sua cor. Você também pode modificar a fonte do botão no tema do seu site. Para fazer ou modificar os botões do seu site Strikingly, clique em "ESTILOS" no editor do seu site. Um painel de estilo contendo Cabeçalhos e Navegações, Seções e Botões aparecerá, conforme mostrado abaixo.
Imagem retirada do site Strikingly
Conclusão
Um botão de site é um componente que transforma uma chamada à ação em um resultado. Considere todos os aspectos desse design de botão de site, da cor à função e à microscopia. Teste um design de botão de site para garantir que sua interface tenha a versão mais funcional. Se você tem um botão funcionando, não se deixe influenciar pela moda e modifique o design. Quando se trata de botões, a funcionalidade deve sempre vir em primeiro lugar.
