Campos de Formulário: Desenho Visual Prático
Como desenhar campos de entrada que são fáceis de preencher. Inclui estados de foco, validação e feedback de erro.
Ler ArtigoTécnicas de Design de Botões que Funcionam
Aprenda a desenhar botões que os utilizadores conseguem encontrar, entendem o que fazem, e querem clicar. Abrange tamanho, cor, espaçamento, feedback visual e acessibilidade.
Por que o Design de Botões Importa Tanto?
Um botão é uma das coisas mais simples numa interface. Ou pelo menos parece. Mas na realidade, um botão bem desenhado consegue aumentar as conversões em 20-30% — e um mal desenhado consegue fazer com que as pessoas cliquem em lado nenhum.
Não é só sobre parecer bem. É sobre comunicação visual clara. Os utilizadores precisam de entender, num instante, que algo é clicável, o que vai acontecer quando clicarem, e se é realmente o que eles querem fazer. Quando acertas nestas três coisas, tudo fica mais fácil.
Os 3 Pilares de um Botão que Funciona
- Visibilidade — as pessoas conseguem vê-lo
- Clareza — entendem o que ele faz
- Confiança — sentem-se bem em clicar
Tamanho: Não é Só Sobre Pixels
A maioria das pessoas pensa que um botão precisa de ser grande para ser visível. Não é bem assim. Um botão de 40px 40px pode ser muito mais eficaz que um de 100px 100px se estiver bem desenhado.
O que realmente importa é o espaço negativo à volta — a margem que o separa de outras coisas. Se um botão estiver rodeado de cliques potenciais, os utilizadores vão ficar confusos. Mas se estiver isolado, mesmo que seja pequeno, ele vai sobressair.
A Apple entendeu isto bem. Os seus botões não são maioritariamente grandes, mas são sempre claros porque têm espaço respirável à volta deles. Paddings internos também contam — 12px a 16px horizontalmente é normalmente suficiente. Verticalmente, 8px a 12px funciona bem.
Cor: O Sinal Visual Mais Poderoso
A cor de um botão precisa de estar separada do fundo. Completamente separada. Se o teu botão é azul e o fundo é azul claro, as pessoas não vão conseguir vê-lo. Simples assim.
Mas há mais. A cor também comunica intenção. Um botão verde sinaliza “prosseguir”. Um botão vermelho sinaliza “cuidado”. Um botão cinzento? Esse é secundário, opcional. Isto não é opinião — é psicologia visual testada há anos.
O contraste mínimo é de 4.5:1 segundo as normas WCAG. Mas sinceramente, em botões, é bom ir mais além. 7:1 de contraste faz diferença real, especialmente para pessoas com visão reduzida ou que estão a olhar para o ecrã sob luz solar direta.
Estados Visuais: Feedback Que Funciona
Um botão precisa de ter pelo menos 3 estados: normal, hover, e active. Mas não é só mudança de cor — precisa de ser perceptível.
Estado Normal:
O botão repousa. Cor clara, sombra subtil se for necessário.
Estado Hover:
O utilizador passa o rato sobre ele. Ligeira mudança de cor, talvez uma sombra mais marcada, ou movimento subtil para cima. A transição precisa de ser rápida — 200ms é ideal.
Estado Active:
O utilizador está a clicar. Cor mais escura, sombra invertida, ou uma sensação de “pressão”. Isto dá feedback tátil visual.
E depois há o estado desativado. Um botão desativado precisa de ser claramente desativado — muito mais cinzento, cursor diferente, sem hover effect. Caso contrário, os utilizadores vão clicar nele e ficar confusos quando nada acontecer.
Tipografia: Texto Que Faz Sentido
O texto dentro de um botão precisa de ser legível num instante. Isto significa: fonte clara, contraste alto, tamanho adequado. Não é lugar para fontes decorativas ou muito finas.
14px a 16px é normalmente bom para a maioria dos botões. Em mobile, pode ir até 16px para garantir legibilidade. O peso da fonte (font-weight) também importa — 600 ou 700 (semi-bold ou bold) faz o texto parecer mais “clicável” do que 400 ou 500.
E aqui está uma coisa que muitas pessoas esquecem: o texto de um botão não precisa de ser sempre maiúsculas. “Enviar” funciona tão bem quanto “ENVIAR”, e por vezes até melhor porque é menos agressivo. Pensa na intenção do botão — é amigável ou formal?
Acessibilidade: Botões para Todos
Isto não é opcional. Acessibilidade é parte do design responsável. Um botão bem desenhado funciona para toda a gente — independentemente da deficiência visual, auditiva, motora ou cognitiva.
Tamanho Mínimo de Toque
Em mobile, um botão precisa de ser pelo menos 4444 pixels (ou 4848, ainda melhor). Isto não é para parecer grande — é para as pessoas conseguirem clicar nele sem clicar em coisas ao lado.
Não Apenas Cor
Se diferencias botões apenas por cor, as pessoas daltónicas não vão conseguir distinguir. Usa também forma, ícone, ou padrão. Um botão principal pode ser azul + mais grande. Um botão secundário pode ser contornado + mais pequeno.
Feedback Além do Visual
Para utilizadores de leitores de ecrã, o texto do botão precisa de fazer sentido. “Enviar Formulário” é melhor que “OK”. “Fechar Diálogo” é melhor que “X”. O código HTML também importa — usa
Ordem de Tabulação Lógica
As pessoas que usam teclado precisam de conseguir navegar pelos botões numa ordem que faz sentido. Normalmente, da esquerda para a direita, de cima para baixo. Usa a ordem HTML natural — não manipules com CSS ou JavaScript.
Na Prática: Uma Checklist para Começar
Quando estás a desenhar um botão, aqui está o que deves verificar:
- É visível? Existe contraste de cor suficiente com o fundo (mínimo 4.5:1)?
- É claro? O texto diz exactamente o que vai acontecer quando se clica?
- É clicável? Tem espaço suficiente à volta e tamanho mínimo de 4444px em mobile?
- Tem estados? Normal, hover, active, e desativado são todos claros e diferentes?
- Funciona sem rato? As pessoas conseguem ativar com teclado ou toque?
- Tem feedback? O utilizador sente que algo aconteceu — mesmo que seja apenas uma transição de 200ms?
- É consistente? Todos os botões no site funcionam da mesma forma?
“O design de um botão é o design de um momento — aquele instante em que o utilizador decide se clica ou não. Tudo o que fizeste até ali determina essa decisão.”
— Don Norman, Design de Interacção
Resumo: Botões Simples, Impacto Grande
Um botão bem desenhado parece simples — porque é. Mas a simplicidade que vês é resultado de decisões deliberadas: tamanho, cor, tipografia, espaçamento, feedback visual, acessibilidade.
Não é sobre impressionar ninguém com design fancy. É sobre respeitar o tempo do utilizador, deixar claro o que vai acontecer, e dar-lhe confiança para clicar. Quando acertas nisto, os botões desaparecem — porque funcionam tão bem que as pessoas nem pensam neles. E é isso que é um bom design.
Comça pela checklist acima. Testa os teus botões com pessoas reais. Vê como elas interagem com eles. E depois ajusta. O design de botões é iterativo — nunca está completamente “feito”, mas cada versão pode ser melhor que a anterior.
Nota Sobre Este Artigo
Este artigo é informativo e educativo. As técnicas aqui apresentadas baseiam-se em boas práticas de design de interface e acessibilidade. Cada projeto é único — o que funciona bem num contexto pode não funcionar noutro. Recomenda-se sempre testar com utilizadores reais e seguir as normas WCAG 2.1 para acessibilidade. Para questões técnicas específicas sobre implementação, consulta a documentação oficial de acessibilidade web.
Artigos Relacionados
