Defina a ação principal
Uma interface organiza decisões. Antes de escolher cores, escreva o que a pessoa precisa fazer naquela página. Em uma lista de pedidos, pode ser encontrar o item pendente e entender o próximo passo. A ação principal deve ter mais destaque que ações ocasionais.
Uma página com cinco botões visualmente idênticos exige que o usuário decida onde olhar. Diferencie ação principal, alternativa e informação. Isso não significa esconder opções: significa tornar a ordem de leitura compatível com a tarefa.
Por que aprender
A clareza da ação permite avaliar o design pelo uso. Você consegue perguntar se a pessoa encontrou e concluiu a tarefa, em vez de discutir apenas gosto pessoal.
✓ Fazer
Usar texto junto da cor para indicar pendência.
✗ Evitar
Aprovar só a tela com dados perfeitos.
Conceitos-chave
Observe antes de redesenhar
Registre a página atual e identifique problemas concretos: texto cortado, rótulo ambíguo, contraste baixo ou dificuldade para localizar uma informação. Ferramentas de auditoria e skills de design, como Impeccable, podem ajudar a investigar, mas a decisão deve apontar um efeito no uso.
Escolha três problemas para o primeiro ciclo. Preservar o comportamento que já funciona reduz o risco de transformar uma melhoria visual em uma regressão funcional. Se o problema é o rótulo de um botão, não é necessário reconstruir toda a navegação.
Por que aprender
Uma observação específica produz uma intervenção menor e mais fácil de conferir. O registro anterior permite comparar o resultado sem depender da memória.
Um caminho para aplicar
- Registre a tarefa e a página atual.
- Aplique três mudanças com critérios.
- Confira estados, teclado e tela pequena.
Conceitos-chave
Peça variações com critérios
Ao solicitar opções de layout, mantenha conteúdo e objetivo constantes. Varie um aspecto de cada vez, como posição da ação ou agrupamento dos campos. Assim você consegue atribuir a diferença de resultado à decisão visual.
Um pedido útil informa público, tarefa, restrições e o que precisa melhorar. “Deixe mais bonito” não define como comparar propostas. Peça, por exemplo, duas formas de destacar pedidos sem prazo, mantendo os demais itens e sem depender apenas de cor.
Por que aprender
Comparar propostas com os mesmos dados impede que uma opção pareça melhor apenas por usar menos conteúdo ou esconder um estado difícil.
Tarefa: encontrar pedidos que precisam de informação.
Dados: cinco pedidos, um sem prazo e um com nome longo.
Mudanças: hierarquia, rótulos e agrupamento.
Preservar: campos, navegação e ações existentes.
Conferir: teclado, tela estreita e texto ampliado.
Conceitos-chave
Desenhe estados, não apenas telas
Uma interface precisa lidar com lista vazia, carregamento, erro, sucesso e dados longos. O estado vazio deve explicar o próximo passo. O erro precisa dizer o que aconteceu e como recuperar. O sucesso deve confirmar o resultado sem esconder informações importantes.
Teste também o uso por teclado. A ordem de foco deve acompanhar a leitura, e o elemento ativo precisa ser visível. Um botão que só aparece ao passar o mouse pode deixar uma ação inacessível para outras formas de navegação.
Por que aprender
Os estados difíceis são parte do produto real. Considerá-los evita que a página funcione apenas com os dados curtos e completos usados na demonstração.
✓ Fazer
Comparar propostas com os mesmos dados.
✗ Evitar
Trocar toda a interface para corrigir um rótulo.
Conceitos-chave
Confira contraste e tamanho
Texto pequeno e pouco contraste exigem mais esforço para ler. Para conteúdo comum, use como referência uma relação de contraste de pelo menos 4,5:1 entre texto e fundo. Não avalie apenas a cor principal: legendas, campos e estados desabilitados também merecem atenção.
Em telas estreitas, confira se há rolagem horizontal involuntária e se as ações continuam alcançáveis. Aumente o texto para simular uma preferência de leitura. O layout deve acomodar o conteúdo, não obrigar o leitor a reduzir a fonte para caber.
Por que aprender
A conferência torna a melhoria visual inclusiva e mensurável. Você evita aprovar um desenho bonito que dificulta a leitura ou perde funções no celular.
| Critério | Evidência esperada |
|---|---|
| Tarefa | A pendência é localizada sem adivinhação. |
| Acesso | Todas as ações funcionam por teclado. |
| Layout | Texto longo não invade outros campos. |
Conceitos-chave
Prática: melhore uma lista de pedidos
Use uma tabela fictícia com cinco pedidos, incluindo um nome longo e um prazo ausente. Defina a ação principal e proponha três melhorias. Registre uma captura antes e outra depois, com os mesmos dados e a mesma largura.
Escreva uma justificativa de uso para cada alteração. Depois percorra a página com Tab, amplie o texto e reduza a janela. Sua entrega é uma página mais clara e um registro de verificação, não apenas uma imagem bonita.
Por que aprender
O exercício combina diagnóstico, intervenção e teste. O hábito de justificar cada mudança ajuda a manter consistência quando outras pessoas participam do projeto.
Seu exercício
Um pedido sem prazo aparece somente com fundo vermelho. O botão principal se chama “OK”. Proponha mudanças que deixem o próximo passo explícito.
Baixar ficha da práticaConferir resposta comentada
Adicionar o rótulo “Prazo pendente”, manter a cor como apoio e renomear a ação para “Informar prazo”. Agrupar a ação junto ao pedido correspondente. Verificar foco, leitura do nome longo e funcionamento sem depender de cor.
Cheque sua compreensão
Qual comparação entre duas propostas é mais útil?
Conceitos-chave
O que fica deste módulo
Uma comparação antes/depois com três melhorias verificadas.
- ✓ A pendência é localizada sem adivinhação.
- ✓ Todas as ações funcionam por teclado.
- ✓ Texto longo não invade outros campos.
O progresso registra sua leitura. A prática fica concluída quando você confere a entrega.