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.Tuitar isso
Tuitar isso
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 com frequência ainda maiores para aumentar a eficiência e evitar que sejam esquecidos
- Separe os botões em pelo menos 8pt para evitar que as pessoas cliquem no botão errado por engano
No nosso exemplo, o tamanho alvo dos 2 botões já é suficiente, mas há bastante espaço para torná-los maiores.
5. Certifique-se de que conteúdos importantes estejam visíveis
O que não está visível não é usado.
Esconder funções em menus interativos pode deixar o design mais limpo, mas também abre margem para que sejam ignoradas. Se houver espaço, mantenha ações e conteúdos importantes sempre visíveis.
No exemplo, as ações estão ocultas dentro de um menu interativo para ajudar a organizar e deixar a interface mais clean. Embora pareça limpo e minimalista, existe o risco de algumas pessoas não perceberem as ações.
Como há espaço para exibir as duas ações, “Compartilhar” e “Favoritar”, é interessante torná-las visíveis para garantir que essas 2 interações importantes não passem despercebidas.
6. Reduza o espaçamento entre letras em texto grande
Um truquezinho para melhorar a aparência de títulos grandes é diminuir o espaçamento entre letras — em tipografia, chamado de tracking.
Em interfaces mais eficientes e profissionais, detalhes fazem a diferença, e este é um pequeno grande detalhe que pode dar aquele diferencial em muitas interfaces.
A quantidade de espaçamento entre letras depende da fonte e do tamanho, mas, em geral, é interessante diminuir ainda mais o espaçamento à medida que o texto fica maior.
Isso ocorre porque muitas fontes foram projetadas para serem lidas em tamanhos pequenos em textos longos.
Elas são conhecidas como fontes “tipo texto” e têm espaçamento amplo entre letras para torná-las mais legíveis em tamanhos pequenos.
Comumente, não será preciso diminuir o espaçamento entre letras das fontes “tipo exibição”, pois elas foram projetadas para serem usadas em tamanhos grandes e geralmente têm espaçamento mais próximo entre letras.
No exemplo, o espaçamento entre letras do nome da pessoa foi diminuído para melhorar a estética.
7. Não dependa apenas da cor como indicador
Não confie apenas na cor para transmitir significado ou distinguir elementos visuais, pois pessoas com baixa visão, daltonismo ou outra deficiência visual podem não conseguir ver o indicador.
Use dicas visuais adicionais para diferenciar os elementos da interface.
No nosso exemplo, há 2 áreas que podem ser confusas. Vamos esclarecê-las.
Se você observar as 3 abas acima da lista de artigos, pode não ficar óbvio que “artigos” é a aba selecionada.
Isso ocorre porque uma diferença de cor muito sutil está sendo usada para indicar que uma aba está selecionada.
Adicionar um sublinhado à aba selecionada ajuda a torná-la mais clara.
Da mesma forma, na navegação inferior, uma sutil mudança de cor está sendo usada para diferenciar o ícone selecionado dos demais. Para torná-lo mais óbvio, o ícone selecionado é preenchido.
8. Evite usar múltiplos alinhamentos
Quanto mais tipos diferentes de alinhamento se usar (esquerda, direita ou centro), mais complexa e confusa uma interface pode parecer.
Nossos olhos são forçados a trabalhar mais enquanto se movem para tentar acompanhar cada alinhamento.
Isso fica evidente quando vários alinhamentos diferentes são usados em um pequeno componente ou seção de uma interface.
Uma dica importante de UIs para interfaces mais eficientes é manter um único alinhamento (ou o mínimo possível), fazendo com que ela pareça mais planejada e estruturada.
No exemplo, as abas são centralizadas, enquanto a maioria dos outros elementos da página são alinhados à esquerda.
A mistura de alinhamentos adiciona complexidade desnecessária, resultando em um ligeiro aumento da carga cognitiva (a quantidade de energia cerebral necessária para usar uma interface).
Alinhar as abas à esquerda ajuda a organizar as coisas.
9. Assegure que o texto tenha contraste de 4,5:1
Para ajudar a garantir que pessoas com deficiência visual possam ler o texto claramente, ele precisa atender aos seguintes requisitos de contraste WCAG 2.1 nível AA:
- Textos pequenos (18px ou menos) precisam de um contraste mínimo de 4,5:1
- Textos grandes (acima de 18px com espessura em negrito ou acima de 24px com espessura regular) precisam de um contraste mínimo de 3:1
No exemplo, o texto pequeno nas abas não selecionadas apresenta contraste insuficiente. Usar um cinza mais escuro torna o contraste suficiente.
10. Considere remover contêineres para simplificar a interface
Dividir as informações em grupos menores de elementos relacionados ajuda a estruturar e organizar uma interface.
Isso torna a compreensão e a memorização mais rápidas e fáceis para as pessoas. E uma interface eficiente é uma interface fácil de usar.
Algumas dicas de UI para interfaces mais eficientes para agrupar elementos relacionados:
- Coloque os elementos relacionados no mesmo contêiner
- Aproxime os elementos relacionados
- Faça com que os elementos relacionados pareçam semelhantes
- Alinhe os elementos relacionados em uma “linha contínua”
No exemplo, os contêineres claros ao redor de cada artigo são desnecessários, pois vários outros métodos de agrupamento já estão sendo utilizados.
Remover a sombra dos contêineres também cria mais espaço para o conteúdo.
11. Use apenas pesos de fonte normal e negrito
Só porque há muitos pesos (ou espessuras) de fonte disponíveis em uma mesma fonte, não significa que você precise usar todas elas.
Usar muitas espessuras de fonte diferentes pode adicionar ruído e desorganização em uma interface. Também dificulta o uso consistente de cada espessura de fonte.
Mantenha o design system simples e conciso, usando apenas fontes com espessuras regulares e em negrito.
Algumas fontes têm uma opção de fonte semi-negrito (semi-bold) para ser usada em vez de negrito, caso o negrito seja muito pesado.
Dicas rápidas:
- Use fonte em negrito para títulos para enfatizá-los
- Use fonte com espessura normal para outros textos menores
- Se optar por usar fontes muito finas ou grossas, reserve-as para títulos e textos maiores, pois podem ser difíceis de ler em tamanhos menores
No exemplo, usa-se 3 espessuras de fonte diferentes para os detalhes do artigo. Mesmo que o contraste das espessuras de fonte “extra leve” (extra light) e “fina” (thin) esteja acima da taxa de contraste necessária (4,5:1), os caracteres ainda podem ser difíceis de ler para algumas pessoas.
Aumentar a espessura da fonte para “regular” ajuda a melhorar a legibilidade e simplifica o design. Usar “semi-bold” para o título do artigo ajuda a destacá-lo.
Usar apenas 2 espessuras de fonte resulta no design a seguir.
12. Seja consistente
Consistência em UI significa que elementos semelhantes têm aparência e funcionamento semelhantes. Uma interface jamais será eficiente/profissional se não for consistente.
Isso deve ser verdade tanto no seu produto quanto em comparação com outros produtos já conhecidos pela maioria.
Comportamentos e funcionalidades previsíveis melhoram a usabilidade e reduzem a possibilidade de erros, pois as pessoas não precisam aprender de novo e de novo como as coisas funcionam.
No exemplo, as fotos de cada artigo têm cantos bem definidos, o que não combina com os cantos arredondados e suaves dos botões e ícones.
Arredondar os cantos das fotos ajuda a criar uma linguagem visual mais consistente.
Você pode achar que pequenos detalhes como esse não fazem muita diferença, mas todos eles se somam para fazer com que o design pareça “correto” e tenha um aspecto mais profissional.
13. Não confunda minimalismo com simplicidade
Minimalismo não significa simplicidade. Uma interface minimalista tem menos elementos e estilos, mas não é, necessariamente, simples de entender e usar.
Interfaces minimalistas podem frequentemente ser vagas ou confusas, pois carecem de detalhes cruciais para uma boa usabilidade. Simplificação não se trata apenas de redução.
Remover ou ocultar demais pode prejudicar a usabilidade.
Certifique-se de que não está removendo informações ou detalhes críticos.
No exemplo, os ícones de navegação na parte inferior parecem limpos e minimalistas, mas será que está claro o que eles significam? Pode não ser para todos.
Adicionar labels aos ícones ajuda a garantir que as pessoas entendam o que eles significam, especialmente aqueles que usam leitores de tela.
14. Saiba equilibrar ícones com texto
Ao combinar ícones com texto, tente garantir que eles tenham destaque visual semelhante para uma aparência mais equilibrada e coesa.
No exemplo, os pares de ícones e texto na navegação inferior estão ligeiramente desequilibrados: os ícones e o texto têm a mesma cor, mas os ícones são mais grossos e maiores, o que lhes confere mais destaque.
Escurecer o texto aumenta sua proeminência, equilibrando-o com os ícones.
Aumentar o contraste do texto para pelo menos 4,5:1 também garante que ele seja acessível a pessoas com baixa visão.
Conclusão
Com apenas algumas dicas simples de UI, foi possível identificar e resolver uma série de problemas na interface de exemplo.
É claro que você pode ir além, adaptando o estilo visual para se adequar à personalidade de uma marca específica, se necessário. Para este exemplo, porém, o foco foi em acertar os fundamentos.
UI Design não precisa ser algo muito desgastante. Embora às vezes possa parecer uma arte misteriosa, reservada para os naturalmente talentosos, grande parte de UI/UX de alta qualidade se baseia em diretrizes claras e lógicas.
Confiar em diretrizes objetivas, em vez de opiniões subjetivas, torna muito mais fácil (e rápido) projetar interfaces intuitivas, acessíveis e visualmente refinadas.
Quanto mais você praticar o uso dessas 14 dicas de UI para interfaces mais eficientes, mais naturalmente elas se tornarão parte do seu processo pessoal.
Use essas dicas de interface como base e não tenha medo de explorar, experimentar e impulsionar sua criatividade a partir daí.