UI design: guia prático para interfaces modernas e eficientes

UX, de experiência do usuário, é o estudo da interação entre as pessoas e um sistema, com o objetivo de deixá-lo intuitivo e fácil de usar do ponto de vista de quem usa. A interface é a parte desse sistema com que a pessoa lida diretamente. Um jeito simples de separar: a UI é o que aparece na tela; a UX é o que acontece quando alguém tenta fazer alguma coisa com ela.

As duas andam juntas. Um botão bonito que ninguém reconhece como botão é um problema de interface; uma compra que pede o mesmo dado duas vezes é um problema de experiência que a interface pode resolver. Por isso, neste guia, cada decisão visual vem ligada ao que ela permite fazer.

O W3C reúne, nas dicas de design para acessibilidade, os cuidados de interface que ajudam a cumprir a WCAG. A lista serve de roteiro para qualquer tela.

• Hierarquia com títulos e espaço

  Espaço e proximidade mostram o que pertence a quê, e títulos agrupam o conteúdo, para a página ser percorrida de relance. Pela WCAG, títulos e rótulos descrevem o assunto ou a função do que vem a seguir.

• Contraste suficiente

  Texto precisa de contraste de pelo menos 4,5:1 com o fundo, ou 3:1 quando é grande, e isso inclui texto sobre foto, degradê e botão. O que identifica campos, botões e seus estados pede 3:1 contra as cores vizinhas.

• Cor nunca sozinha

  A cor não pode ser o único meio de passar uma informação, indicar uma ação ou distinguir um elemento. Campo obrigatório em vermelho ganha também um asterisco; gráfico com cores ganha rótulos.

• Elementos interativos fáceis de reconhecer

  Links e botões têm estilo próprio, que muda ao passar o mouse, ao receber o foco do teclado e ao toque. O foco precisa ficar visível, e componentes com a mesma função são identificados do mesmo jeito em todas as páginas.

• Navegação consistente

  O menu que se repete aparece na mesma ordem em todas as páginas, e há mais de um caminho até cada uma, como busca ou mapa do site. Migalhas e títulos claros mostram onde a pessoa está.

• Resposta a cada ação

  Envio confirmado, erro apontado, mudança avisada: a interface responde ao que a pessoa faz. Mensagens de status, como um item adicionado ao carrinho, chegam ao leitor de tela sem tirar o foco do lugar.

• Movimento sob controle

  Animação ou carrossel que começa sozinho, dura mais de cinco segundos e divide a tela com outro conteúdo precisa de um jeito de pausar, parar ou esconder. O CSS também consegue detectar quem pediu menos movimento no sistema; para essas pessoas, a página pode aparecer parada.

• Linha de leitura confortável

  O web.dev cita a referência clássica da tipografia: de 45 a 75 caracteres por linha é a medida tida como satisfatória para uma coluna de texto. Não existe propriedade de CSS para isso: a largura do bloco se limita com max-inline-size em ch ou rem, nunca em px, para a linha acompanhar o tamanho de letra que a pessoa escolheu.

• Letra que cresce sem quebrar

  Tamanho de letra só em vw impede a pessoa de ampliar o texto; a saída é misturar com rem, de preferência num clamp() com mínimo e máximo. A WCAG pede texto ampliável até 200% sem perda de conteúdo nem de função.

• Entrelinha e espaçamento

  Entrelinha sem unidade, como 1.5, acompanha o tamanho da letra. E o layout precisa aguentar quando a pessoa aumenta os espaços: entrelinha de 1,5 vez a letra, 2 vezes depois dos parágrafos, 0,12 entre letras e 0,16 entre palavras, sem texto cortado nem função perdida.

• Uma escala, não tamanhos soltos

  O web.dev recomenda dar prioridade à hierarquia com uma escala tipográfica dentro do design system. Na Scooto, a nova home usa só a Sora, a fonte da marca, e as cores da Scooto, com escala tipográfica e durações de movimento fixas.

• Telas de todos os tamanhos

  O Google usa a versão para celular da página para indexar e classificar, e recomenda o design responsivo: o mesmo HTML no mesmo endereço, com o layout adaptado à tela. O conteúdo do celular deve equivaler ao do computador; para poupar espaço, a orientação é usar acordeões ou guias em vez de cortar. Pela WCAG, tudo se lê numa largura de 320 px CSS sem rolar nos dois sentidos.

• Alvos de toque

  Botões e links precisam de pelo menos 24 × 24 px CSS no nível AA, ou de espaço livre em volta. Para os links e controles importantes, o W3C sugere mirar nos 44 × 44 px CSS do nível AAA, a medida dos alvos de toque da Scooto e da Welz.

• Tema claro e escuro

  Quem prefere tema escuro avisa pelo sistema, e o CSS lê essa preferência com prefers-color-scheme.

Formulário é a parte da interface em que a pessoa mais age: digita, escolhe, corrige e confirma.

• Rótulo à vista, junto do campo

  Todo campo tem um rótulo descritivo ao lado, em geral à esquerda ou acima, sem muito espaço entre os dois. O texto de exemplo dentro do campo não substitui o rótulo: tem contraste menor e some quando a pessoa começa a digitar.

• Erro dito em texto

  Quando o site detecta um erro, aponta o campo e descreve o problema em texto; se sabe como corrigir, sugere a correção. Borda vermelha sozinha não basta, pela mesma regra da cor.

• Preenchimento automático

  O atributo autocomplete diz ao navegador o que é cada campo, e ele oferece os dados já salvos, como nome, e-mail e endereço. A WCAG pede que o propósito dos campos sobre a pessoa possa ser lido pelo código.

• Nada de digitar duas vezes

  Num mesmo processo, o que a pessoa já informou vem preenchido ou fica disponível para escolher, um dos critérios novos da WCAG 2.2. Do mesmo grupo, a ajuda que se repete nas páginas, como contato ou perguntas frequentes, fica sempre na mesma ordem.

Design system é o conjunto de regras e componentes que uma interface reutiliza: cores, escala de texto, espaços, botões, campos e avisos. Com ele, componentes com a mesma função aparecem iguais em toda página, que é o que a WCAG chama de identificação consistente.

No código, as decisões viram variáveis e componentes. Na ABRAEL, os estilos usam CSS Modules e variáveis de cor e medida. Na Welz, o texto fica em arquivos de dados e o desenho nos componentes, e as três páginas de produto usam as mesmas peças de interface. Na Scooto, o balão com rabinho da marca foi redesenhado em geometria e virou botão, marcador de lista e balão de conversa.

Um design system pode começar pequeno: uma escala de texto, uma paleta com o contraste de cada par já medido e os estados de botão e campo, como normal, foco e erro.

Uma interface se avalia em três frentes: pessoas usando, critérios conferidos na tela e dados de quem visita o site.

• Pessoas com tarefas reais

  O W3C recomenda pedir a quem usa que revise protótipos com tarefas específicas, ao longo do design e do desenvolvimento, e incluir pessoas com deficiência e pessoas idosas nos casos de uso e nas personas. E alerta para não tomar a opinião de uma pessoa com deficiência como a de todas.

• Critérios conferidos na tela

  Contraste medido, navegação só pelo teclado, texto ampliado a 200%, largura de 320 px e o modo de menos movimento ligado. O guia de acessibilidade explica como testar cada um.

• Dados de quem visita

  A interface também se mede em campo. O INP observa a demora da página em responder a cliques, toques e teclas durante a visita inteira, e o CLS mede a maior sequência de deslocamentos inesperados do layout. O guia de Core Web Vitals traz os limites de cada um e como corrigir.