14 dicas de UI para interfaces mais eficientes
Projetar interfaces não é fácil. Com inúmeras decisões sobre layout, espaçamento, tipografia e cor, é fácil se perder. E quando considerados usabilidade, acessibilidade e psicologia humana, o desafio só cresce.
A boa notícia é que UI Design não precisa ser tão complexo; a maioria das decisões visuais e de interação pode ser guiada por um conjunto claro de diretrizes lógicas - não por genialidade artística ou instinto, mas por regras diretas.
Claro que a criatividade tem seu valor, mas muito do que torna uma interface intuitiva, inclusiva e esteticamente agradável pode ser aprendido.
Ter uma abordagem estruturada permite tomar decisões inteligentes e consistentes. Sem ela, você depende de tentativa e erro para “fazer parecer certo”.
E sabe qual é a melhor forma de aprender? Fazendo. Então vamos a 14 dicas de UI para interfaces mais eficientes.
Dicas de UI Design: exemplo de ajuste de interface
Vamos a um exemplo clássico: a página de perfil de uma plataforma de blogs.
À esquerda, o design original; à direita, o resultado de aplicar algumas dicas de UI para interfaces mais eficientes.
Mesmo sem experiência em UI/UX, é possível “sentir” que o design original não “parece certo”. Ele possui várias falhas de interface e usabilidade.
A seguir, o processo passo a passo para melhorar o design usando estas dicas de UI:
- Espace elementos com base na relação entre eles
- Garanta que elementos da interface tenham contraste de 3:1
- Use um único botão primário para a ação mais importante
- Garanta que botões tenham tamanho suficiente
- Certifique-se de que conteúdos importantes estejam visíveis
- Reduza o espaçamento entre letras em texto grande
- Não dependa apenas da cor como indicador
- Evite usar múltiplos alinhamentos
- Assegure que o texto tenha contraste de 4,5:1
- Considere remover contêineres para simplificar a interface
- Use apenas pesos de fonte normal e negrito
- Seja consistente
- Não confunda minimalismo com simplicidade
- Saiba equilibrar ícones com texto
1. Espace elementos com base na relação entre eles
O espaçamento entre elementos de interface deve refletir a relação entre eles. Elementos mais relacionados devem ficar próximos; os não relacionados, mais afastados.
Usar o espaçamento dessa forma é um dos métodos mais eficazes para dividir informações em grupos menores. Essa é uma das dicas de UI para interfaces mais eficientes mais poderosas.
Se você pensar em cada grupo como um retângulo, começará a notar que as interfaces são compostas por muitos retângulos pequenos dentro de outros maiores.
Comece aplicando um espaçamento pequeno aos retângulos mais internos e aumente gradualmente o espaçamento entre os retângulos à medida que avança para os externos.
Selecionar espaçamentos ideais pode ser frustrante e demorado. Em vez de ajustar pixel a pixel, é mais eficiente usar um conjunto simples de opções predefinidas.
É bastante comum definir opções de espaçamento com incrementos de 8 unidades - conhecido como grade de 8 pontos (8 point grid) - alinhando todos os elementos a diretrizes verticais e horizontais separadas por 8 unidades.
Como em uma escala tipográfica, os espaçamentos devem crescer proporcionalmente para elementos maiores.
Claro que a criatividade tem seu valor, mas muito do que torna uma interface intuitiva, inclusiva e esteticamente agradável pode ser aprendido.
No exemplo, apenas as opções de espaçamento predefinidas extra pequeno (8pt) e pequeno (16pt) são usadas, independentemente de quão próximos eles estejam.
Isso resulta em um design que parece meio desorganizado, “achatado” e difícil de entender.
Aumentar o espaçamento entre os elementos com base em quão próximos eles estão ajuda a separar e agrupar o conteúdo com clareza.
Essa é uma dica de UI muito importante para interfaces mais eficientes.
Veja como fica o nosso exemplo antes e depois da aplicação das opções de espaçamento predefinidas.
2. Garanta que elementos da interface tenham contraste de 3:1
Contraste é uma medida da diferença no brilho percebido entre 2 cores. É expresso como uma proporção que varia de 1:1 a 21:1.
Por exemplo, texto preto em um fundo preto tem a menor proporção de contraste, de 1:1, enquanto texto preto em um fundo branco tem a maior proporção, de 21:1.
Existem muitas ferramentas (incluindo plugins do Figma) para ajudar a medir o contraste de cores, tais como:
- https://webaim.org/resources/contrastchecker/
- https://contrastchecker.com/
- https://color.review/
- https://colourcontrast.cc/
- https://www.siegemedia.com/contrast-ratio
Para garantir que pessoas com dificuldades visuais consigam ver claramente os detalhes da interface, procure atender, no mínimo, aos requisitos de contraste de cores nível AA das WCAG 2.1.
Isso significa que os elementos da interface, como campos de formulário e botões, precisam ter uma taxa de contraste de, pelo menos, 3:1.
No exemplo, o contraste dos ícones e botões é muito baixo. O risco dos botões de baixo contraste é que pessoas com baixa visão podem não identificá-los como botões, pois não conseguem ver seu formato.
Adicionar uma borda com contraste suficiente aos botões pode ajudar torná-los acessíveis.
O preenchimento de fundo cinza claro também ser removido para que as pessoas não os confundam com botões desativados ou inativos.
3. Use um único botão primário para a ação mais importante
Na maioria dos projetos, use 3 tipos de botões para hierarquia visual: primário, secundário e terciário, podendo haver variações de tamanho conforme a complexidade da interface.
Os estilos de botão a seguir são familiares, acessíveis e têm uma hierarquia visual clara, que não depende apenas da cor. Eles não são a única maneira de estilizar botões, mas são uma opção segura.
Diretrizes para botões primários para interfaces mais eficientes:
- Se não houver uma ação claramente mais importante, use botões secundários ou terciários para as demais ações
- Evite múltiplos botões primários na mesma tela para não gerar competição visual e confusão
O objetivo de um botão primário é destacar a ação mais importante em uma interface. Isso ajuda as pessoas a entenderem o que fazer em seguida para concluir alguma tarefa.
No exemplo do artigo, vamos supor que a ação “Follow” seja a mais importante e torná-la um botão primário.
4. Garanta que botões tenham tamanho suficiente
Alvos pequenos são mais difíceis de clicar ou tocar do que alvos grandes.
Isso é especialmente verdadeiro para pessoas com controle motor prejudicado ou mesmo para alguém que segura o celular com uma mão e usa o polegar.
Tente seguir algumas diretrizes para garantir que os botões (e outros elementos interativos) tenham um tamanho suficiente e a interface seja mais eficiente:
- Crie botões com pelo menos 48pt por 48pt de tamanho. Isso se alinha com uma grid de 8pt e é um pouco maior do que a recomendação da WCAG de 44pt por 44pt
- Crie botões usados