- O design de UI pode ser melhorado de forma mais rápida e previsível ao tomar decisões sobre layout/espaçamento/tipografia/cores com regras lógicas consistentes, em vez de depender de senso artístico
- Agrupar elementos relacionados com espaço em branco, usar a mesma forma para a mesma função e criar uma hierarquia visual clara com tamanho/cor/contraste/posição é o básico
- É preciso reduzir cores decorativas e bordas desnecessárias, e usar cor de forma seletiva para indicar se algo é interativo, como links e botões
- De acordo com o padrão WCAG 2.1 AA, elementos de UI devem ter contraste de pelo menos 3:1, e textos pequenos de pelo menos 4.5:1; além da cor, também devem existir pistas como sublinhado ou forma
- Usar uma única fonte sem serifa com pesos regular/bold como base, além de aplicar x-height alto, sentence case, alinhamento à esquerda e altura de linha acima de 1.5, melhora a legibilidade e a consistência
Como melhorar a UI com regras lógicas
- O design de UI precisa considerar não só layout/espaçamento/tipografia/cores, mas também usabilidade/acessibilidade/psicologia, o que torna as escolhas facilmente complexas
- Em vez de mover elementos por intuição até encontrar algo visualmente agradável, aplicar um sistema de regras reutilizáveis permite tomar decisões fundamentadas com mais rapidez
- O artigo usa como exemplo a tela de detalhes de uma acomodação de aluguel de curta temporada e corrige passo a passo uma interface inicial complexa e difícil de usar
- O objetivo não é adicionar decoração de marca, mas garantir primeiro intuição, acessibilidade e um nível básico de acabamento visual
1. Agrupe elementos relacionados com espaço em branco
- Dividir a informação em pequenos grupos relacionados ajuda a entender e memorizar a estrutura da tela com mais rapidez
- Há quatro formas de agrupar elementos
- Colocá-los dentro do mesmo contêiner
- Reduzir o espaçamento entre elementos relacionados
- Representá-los com formas semelhantes
- Alinhá-los ao longo de uma linha contínua
- O contêiner é a pista de agrupamento mais forte, mas pode aumentar a decoração desnecessária na tela
- Espaço em branco e alinhamento são formas mais sutis de manter a tela simples
- No exemplo, o espaçamento entre os conteúdos é ampliado para separar com clareza diferentes grupos de informação
2. Mantenha consistência de forma e comportamento
- Elementos parecidos devem parecer e funcionar de forma semelhante, tanto dentro do produto quanto em comparação com outros produtos familiares
- Comportamentos previsíveis reduzem a necessidade de o usuário reaprender o uso a cada vez e diminuem a chance de erros
- No exemplo, os ícones misturavam estilos preenchidos e contornados, o que podia levar à interpretação de que os preenchidos indicavam estado selecionado
- Todos os ícones foram padronizados com cantos arredondados e contorno de 2pt para equilibrar o peso visual
- Também foram adicionados rótulos de texto para usuários que têm dificuldade de entender apenas o ícone e para usuários de leitores de tela
- Como elementos com a mesma aparência tendem a ser interpretados como funcionando da mesma forma, se a função for diferente, o tratamento visual também deve ser diferente
- No exemplo, o contêiner de ícone não interativo parecia um botão como
Book now, então a cor azul e o estilo de botão foram removidos
3. Crie uma hierarquia visual clara
- Nem toda informação tem o mesmo grau de importância, então elementos importantes devem se destacar mais
- Ajustar tamanho/cor/contraste/espaçamento/posição/profundidade ajuda o usuário a escanear a tela rapidamente e encontrar a área de interesse
- O Squint Test é uma forma de verificar se, mesmo semicerrando os olhos ou desfocando a tela, os elementos importantes e a função da interface continuam evidentes
- Na tela inicial, vários elementos competiam com intensidade semelhante, mas o principal botão de ação no canto inferior esquerdo quase não chamava atenção
- O botão principal passou a ter uma cor de fundo com alto contraste e fonte em negrito, tornando-se o elemento mais destacado da tela
- A descrição principal estava enfatizada além do necessário, então sua hierarquia foi reduzida depois com ajustes de cor e tipografia
4. Remova decoração desnecessária
- Linhas/cores/fundos/animações que não transmitem significado nem agrupam elementos podem distrair e aumentar a carga cognitiva
- O espaço em branco e a borda ao redor da imagem no exemplo foram removidos por não serem necessários para transmitir informação
- Reduzir elementos decorativos simplifica a tela e facilita focar nas informações e ações principais
5. Dê um papel claro para a cor
- É mais seguro usar cor de forma limitada para transmitir significado do que como decoração
- Uma abordagem eficaz é começar em preto e branco e adicionar cor só onde for necessário
- Aplicar a cor da marca a elementos interativos, como links de texto e botões, facilita ensinar o que pode ser clicado
- Em elementos cuja própria forma já indica interatividade, como cartões, não é obrigatório adicionar cor
- No exemplo, o título azul e a nota por estrelas pareciam clicáveis mesmo sendo elementos não interativos, então a cor foi removida
- Com isso, a distinção entre elementos interativos e informação comum ficou mais clara
6. Aplique contraste de pelo menos 3:1 aos elementos de UI
- A taxa de contraste expressa a diferença percebida de brilho entre duas cores em uma proporção que vai de
1:1a21:1 - Pelo critério WCAG 2.1 AA, elementos de UI como campos de formulário/ícones/botões precisam de contraste mínimo de 3:1
- No exemplo, as setas sobre a foto podiam ficar difíceis de ver dependendo da imagem de fundo
- Foram aplicados ícones cinza e fundo branco opaco para garantir contraste independentemente da foto
- Ao adicionar um contêiner de fundo, a área clicável também ficou maior e mais clara
- O botão principal inicial também tinha contraste insuficiente com o fundo, dificultando para usuários com baixa visão distinguir sua forma
- Aumentar o contraste do botão para 3:1 ou mais melhorou ao mesmo tempo acessibilidade e hierarquia visual
- O contraste pode ser medido com o WebAIM Contrast Checker ou o plugin Contrast para Figma
7. Aplique contraste suficiente ao texto
- O padrão WCAG 2.1 AA exige taxas de contraste diferentes conforme o tamanho e o peso do texto
- Textos pequenos de até 18px precisam de pelo menos 4.5:1
- Textos em negrito acima de 18px ou textos regular acima de 24px precisam de pelo menos 3:1
- O indicador de quantidade de fotos tinha contraste insuficiente com o fundo, então a opacidade do contêiner cinza foi aumentada e uma sombra no texto foi adicionada
- O texto de localização estava claro demais e com fonte muito fina, então foi trocado por um cinza mais escuro
- Mesmo atendendo ao critério de contraste, fontes excessivamente finas ainda podem ser difíceis de ler, então o peso também deve ser ajustado separadamente
8. Não diferencie estados apenas por cor
- Usuários com daltonismo podem ter dificuldade para distinguir certas combinações de cores ou até mesmo para perceber a própria cor
- Significado/estado/interatividade não devem ser transmitidos apenas por cor
- No exemplo, o link
Reviewsdeixava de se diferenciar do texto comum quando a cor azul era removida - Foi adicionada uma sublinhado para que o fato de ser um link pudesse ser identificado mesmo sem perceber a cor
9. Use uma única fonte sem serifa
- Uma typeface é um conjunto de estilos de fonte compartilhados, como Helvetica, enquanto variações como bold/regular em tamanho e peso correspondem a fontes individuais
- Em interfaces, o mais seguro em geral é usar uma única fonte sem serifa, por ser legível, neutra e simples
- A fonte serifada decorativa do título no exemplo era difícil de ler e podia não combinar com a foto da acomodação nem com o clima do serviço
- Padronizar com a mesma fonte sem serifa do corpo do texto aumentou a usabilidade e a consistência visual
10. Escolha uma fonte com x-height alto
- Fontes com x-height alto, que indica a altura das letras minúsculas, e com espaçamento adequado entre letras tendem a ser mais legíveis em tamanhos pequenos
- No exemplo, a League Spartan tinha um x-height relativamente baixo
- Ela foi substituída pela Inter, que tem x-height maior, melhorando a legibilidade do texto pequeno do corpo
11. Limite o uso de maiúsculas
- As pessoas tendem a ler rápido reconhecendo a forma geral das palavras, mais do que letra por letra
- Palavras escritas só em maiúsculas acabam tendo formas retangulares parecidas, obrigando a conferir as letras uma a uma e dificultando a leitura
- A informação de localização foi alterada de caixa alta total para sentence case, com maiúsculas apenas na primeira palavra e em nomes próprios
- Caixa alta total deve ser usada com moderação, exceto em expressões curtas que realmente precisem de ênfase
12. Use apenas os pesos regular e bold
- Mesmo que uma fonte ofereça vários pesos, usar todos aumenta o ruído visual e dificulta manter a consistência da tela
- É melhor manter o sistema de design simples, centrado em regular e bold
- Use bold em títulos e textos enfatizados
- Use regular em textos pequenos e comuns
- Se bold parecer pesado demais, pode ser substituído por semi-bold
- Pesos muito finos ou muito grossos devem ser limitados a títulos grandes, não a textos pequenos
- No exemplo, o texto de localização usava peso light, o que ainda podia dificultar a leitura mesmo após melhorar o contraste
- Ao mudar para regular, a legibilidade melhorou e a variedade de pesos em uso diminuiu
13. Evite texto em preto puro
- O preto puro cria contraste muito alto com fundo branco e pode aumentar a fadiga visual em leituras prolongadas
- Em fundo branco, é mais seguro usar cinza escuro em vez de preto puro
- Vários elementos pretos do exemplo foram alterados para cinza escuro para ajustar a legibilidade
- Na descrição da acomodação, que chamava atenção demais para sua importância, foi aplicado um cinza mais claro para reduzir a hierarquia visual
14. Alinhe textos longos à esquerda
- Em inglês, a leitura vai da esquerda para a direita e há uma tendência de escanear a tela em formato de F, por isso o alinhamento à esquerda é o mais estável
- Títulos ou frases curtas podem ser centralizados e ainda assim lidos rapidamente
- Quando um texto longo fica centralizado, o início de cada linha muda e fica mais difícil encontrar a próxima linha
- Texto justificado e centralizado pode tornar textos longos especialmente difíceis para usuários com deficiências cognitivas
- No exemplo, a descrição da acomodação foi alterada de alinhamento centralizado para alinhamento à esquerda, garantindo também consistência com o texto acima
15. Defina a altura de linha do corpo em 1.5 ou mais
- A altura de linha é a distância vertical entre duas linhas de texto
- Um espaçamento adequado entre linhas ajuda a evitar releitura da mesma linha e torna textos longos mais confortáveis de ler
- O texto do corpo precisa de altura de linha mínima de 1.5 (150%), e em geral a faixa adequada fica entre 1.5 e 2
- No exemplo, a altura de linha foi aumentada de 1 (100%) para 1.5 (150%), melhorando a legibilidade
Resultado das mudanças e princípios de aplicação
- Ao aplicar 16 regras em sequência, a tela inicialmente complexa foi transformada em algo mais simples, legível e acessível
- Elementos decorativos alinhados à identidade da marca podem ser adicionados depois, mas primeiro é preciso corrigir fundamentos como estrutura da informação, distinção entre interações, contraste e tipografia
- Usar regras objetivas em vez de gosto subjetivo permite projetar UIs intuitivas e acessíveis com mais rapidez
- Regras aplicadas repetidamente passam a se tornar uma base natural do fluxo de trabalho de design, sobre a qual é possível experimentar novas formas de expressão e decoração
Ainda não há comentários.