Uma interface que funciona em um monitor grande pode se tornar cansativa no celular. A tela menor muda a forma de ler, tocar, comparar opções e concluir tarefas. Por isso, design mobile não é apenas reduzir elementos até caberem: é priorizar o que a pessoa precisa fazer e tornar cada passo compreensível.

A seguir estão erros frequentes que podem ser identificados durante o projeto e em testes rápidos com usuários.

1. Reproduzir a tela desktop em miniatura

Quando todos os elementos são simplesmente espremidos, textos, controles e imagens perdem espaço. Redesenhe a hierarquia para a largura disponível. Apresente primeiro a informação necessária para a tarefa e deixe detalhes secundários acessíveis sem competir com a ação principal.

2. Usar botões pequenos ou próximos demais

Alvos de toque minúsculos aumentam erros, principalmente quando ações diferentes ficam lado a lado. A WCAG 2.2 define no critério 2.5.8 uma dimensão mínima de 24 por 24 pixels CSS, com exceções e regras de espaçamento. A explicação do W3C sobre tamanho do alvo ajuda a avaliar esses casos. Use controles confortáveis e teste-os em um aparelho real, não só com o cursor.

3. Esconder navegação e ações importantes

Ícones sem rótulo ou menus com nomes vagos fazem a pessoa adivinhar. Dê nomes diretos às ações e mantenha visível o caminho para voltar, avançar ou pedir ajuda. Use padrões conhecidos quando eles forem adequados, mas confira se continuam claros para seu público.

4. Criar formulários longos e difíceis de preencher

Peça apenas os dados necessários naquele momento. Agrupe campos relacionados, use o tipo de teclado apropriado para e-mail ou telefone e mostre erros junto ao campo correspondente. Preserve o que já foi preenchido quando houver falha de validação ou conexão.

5. Ignorar conteúdo, teclado e estados intermediários

O projeto precisa prever carregamento, listas vazias, mensagens de erro, teclado aberto e retorno visual depois de um toque. Esses estados são parte da interface. Se o teclado cobre o botão de envio ou uma mensagem desaparece rápido demais, a tarefa fica interrompida.

6. Usar texto pequeno e contraste insuficiente

Teste leitura com o brilho reduzido e em tamanhos de tela diferentes. Não use cor como único sinal de estado e verifique o contraste entre texto e fundo. Acessibilidade e legibilidade ajudam também quem está com pressa, usando uma mão ou olhando para a tela sob luz forte.

7. Não testar tarefas reais

Uma inspeção visual não revela todas as dificuldades. Peça a algumas pessoas para realizar tarefas concretas, como localizar um serviço, comparar opções ou enviar um formulário. Observe hesitações e erros sem explicar previamente onde clicar. Corrija primeiro os problemas que bloqueiam a tarefa ou causam consequências relevantes.

O Google recomenda design responsivo como uma forma mais simples de manter o conteúdo e a experiência entre dispositivos. Veja as orientações do Google Search Central para sites mobile. Para manter componentes e padrões consistentes entre telas, este guia de design system simples no Figma pode complementar o processo.

Um checklist curto antes de publicar

  • Consigo identificar a ação principal sem procurar?
  • Os alvos de toque têm tamanho e espaçamento adequados?
  • O formulário é simples e explica como corrigir erros?
  • O conteúdo continua claro com teclado, carregamento e mensagens de sistema?
  • Alguém que não participou do projeto conseguiu completar as tarefas?

Uma boa interface mobile é resultado de prioridades claras, adaptação do conteúdo e validação com uso real. O objetivo não é colocar tudo na primeira tela, e sim ajudar cada pessoa a concluir o que veio fazer.