Duas em cada três submissões de formulários acontecem agora num telemóvel. Mesmo assim, a maioria dos websites desenha os formulários num computador e depois aperta-os num ecrã de telemóvel. O resultado: formulários frustrantes de preencher, com mais abandono e que convertem menos visitantes em clientes.
O design de formulários para telemóvel não é encolher os formulários do computador. É repensar toda a experiência para uma pessoa que segura um ecrã de 6 polegadas, usa o polegar, num autocarro a abanar ou num café cheio. Tudo muda. O espaço disponível encolhe. As áreas de toque engordam. O teclado aparece e esconde metade do formulário. O visitante é interrompido e sai.
O design de formulários mobile-first significa otimizar cada detalhe de um formulário para a forma como as pessoas realmente usam os telemóveis. Este capítulo explica as mudanças concretas que reduzem o abandono, aceleram a conclusão e transformam mais visitantes de telemóvel em leads ou clientes.
Formulários para telemóvel desenhados para computador perdem clientes
Olha para o que acontece quando alguém abre um formulário no telemóvel em vez de no computador. O utilizador de telemóvel tem menos espaço de ecrã, menos paciência e mais distrações. Está a gerir vários contextos. A atenção está fragmentada. Uma interação desajeitada e sai.
Os dados confirmam-no. Os formulários com mau design para telemóvel veem taxas de abandono que sobem 20-40 pontos percentuais face ao computador. Um único campo mal colocado pode desencadear uma onda de abandonos. Um botão pequeno e difícil de tocar cria um atrito que se multiplica por milhares de submissões.
Mas eis o que a maioria das marcas não vê: otimizar para telemóvel não abranda os utilizadores de computador. Um formulário desenhado primeiro para telemóvel e depois melhorado para ecrãs maiores funciona, na verdade, melhor para todos. Disposições mais compactas. Melhor espaçamento. Hierarquia mais clara. Não são compromissos para o telemóvel; são melhorias de design.
O desafio do design de formulários para telemóvel: o que é realmente diferente
Os formulários para telemóvel enfrentam limitações que os do computador não têm. Perceber o que muda ajuda-te a desenhar melhor:
O espaço do ecrã é limitado
Um ecrã de telemóvel mostra cerca de 30-40% do conteúdo que um monitor de computador consegue mostrar de uma vez. Cada elemento ocupa espaço físico. Etiquetas extra, instruções, dicas e campos de formulário competem pelo mesmo espaço minúsculo. O teclado aparece e encolhe ainda mais o espaço disponível. Parágrafos longos de texto de instruções desaparecem do ecrã.
As áreas de toque são maiores e menos precisas
Um dedo tem 40-50 pixéis de largura. Um cursor de rato tem 1 pixel. Isto significa que botões, caixas de seleção, botões de opção e ligações precisam de ser significativamente maiores no telemóvel para serem fáceis de tocar. Os tamanhos padrão recomendados pela Google e por outros fabricantes de sistemas móveis são 44x44 pixéis no mínimo. Se for mais pequeno, os utilizadores falham o alvo, ficam frustrados e abandonam o formulário.
Os teclados tomam o controlo
No telemóvel, quando um utilizador toca num campo, o teclado sobe e cobre metade do ecrã. Alguns campos ativam teclados diferentes: os campos de email mostram o símbolo @, os campos numéricos escondem as letras, os campos de data abrem seletores de calendário. Cada tipo de teclado muda o que o utilizador vê e como interage. Desenha para cada um em separado.
O contexto muda constantemente
Os utilizadores de computador sentam-se e preenchem um formulário sem interrupções. Os utilizadores de telemóvel preenchem formulários em comboios, em lojas, entre outras aplicações. Recebem uma notificação, mudam de aplicação, voltam cinco minutos depois. O scroll parece interminável. Os campos do formulário misturam-se. Qualquer passo que exija memória ou mudança de contexto faz as pessoas desistir.
Uma só mão controla o dispositivo
A maioria dos utilizadores de telemóvel segura o aparelho com uma mão e navega com o polegar. Os botões no canto inferior direito são alcançáveis. Os botões no topo de um formulário comprido exigem a outra mão ou um esticão desajeitado. As etiquetas do lado esquerdo dos campos são mais difíceis de ler mantendo a posição do polegar. Desenha para uso com uma só mão.
Regra 1: Reduz o número de campos que pedes
Cada campo que pedes é mais um toque, mais uma decisão, mais uma oportunidade para alguém sair. O formulário não precisa de tudo. Só precisa do que realmente usas para dar seguimento.
Olha para os teus casos de uso reais. Um formulário de contacto raramente precisa de nomes do meio, dimensão da empresa ou categoria de setor na primeira submissão. Um formulário de reserva não precisa do apelido de solteira da mãe do cliente. Uma subscrição de newsletter não precisa do código postal no primeiro dia. Podes pedir mais informação mais tarde, quando já tiveres criado confiança.
Uma grande plataforma de viagens testou este princípio e poupou $12 milhões por ano ao remover campos opcionais do seu formulário de reserva. Os utilizadores concluíram mais formulários. Houve mais conversões. A simplificação compensou.
Começa com o mínimo absoluto. No telemóvel, a regra é mais estrita: se não precisas disso para concluir a ação principal, remove. Testa remover campos um a um e vê a tua taxa de conclusão a subir.
Regra 2: Empilha os campos numa única coluna
Disposições de duas colunas no telemóvel são um erro. Exigem scroll horizontal, criam uma hierarquia visual confusa e desperdiçam espaço horizontal. Uma coluna, empilhada na vertical, é a mais rápida de percorrer e preencher.
Cada campo ocupa a largura toda. As etiquetas ficam por cima do campo, não ao lado. O utilizador desce, lê a etiqueta, toca no campo, escreve e passa ao seguinte. O fluxo é linear. A carga cognitiva é baixa.
Resiste à tentação de pôr nome e apelido lado a lado, ou morada e código postal na mesma linha. O empilhamento vertical é mais lento no computador, sim. Mas o telemóvel representa dois terços do teu tráfego. Otimiza para o caso da maioria.
Regra 3: Faz as áreas de toque grandes o suficiente para acertar com fiabilidade
Os botões precisam de ter pelo menos 44x44 pixéis. As caixas de seleção e os botões de opção precisam de ter pelo menos 40x40 pixéis. Botões pequenos obrigam os utilizadores a apontar com cuidado ou a tocar várias vezes. A frustração acumula-se. Saem.
Observa o teu próprio uso do telemóvel durante um dia. Repara em quantos toques falham. Até os utilizadores experientes falham. Desenha para a taxa de falhas que vem com os dedos humanos.
O espaçamento entre áreas de toque também importa. Se um botão de sim está mesmo ao lado de um botão de não, os utilizadores vão acertar no errado. Acrescenta 10-15 pixéis de folga entre elementos interativos.
Regra 4: Põe as etiquetas por cima dos campos, não dentro
O texto de exemplo dentro dos campos desaparece assim que o utilizador começa a escrever. Esquecem-se para que servia o campo. Depois cometem um erro, veem um erro e não sabem o que corrigir.
As etiquetas têm de ficar fora e por cima do campo. Claras, visíveis, sempre presentes. Quando o utilizador toca no campo e o teclado aparece, a etiqueta continua visível e lembra-o do que está a escrever.
Uma etiqueta dentro de um campo é só uma comodidade para o designer. Poupa uns pixéis de espaço. Custa-te conversões.
Regra 5: Escolhe o tipo de campo certo para o teclado do telemóvel
Tipos de campo diferentes ativam teclados diferentes nos dispositivos móveis. Usa-os para tornar a introdução de dados mais rápida e precisa:
Endereços de email
Usa `type="email"` para ativar um teclado com o símbolo @ e as teclas .com/.org visíveis. Os utilizadores não precisam de procurar caracteres especiais. A validação também acontece automaticamente.
Números de telefone
Usa `type="tel"` para mostrar um teclado numérico. Dispensa a formatação sofisticada que divide o campo em segmentos de (indicativo) código-número. Os utilizadores têm dificuldade com divisões rígidas de campos e apagam para o bloco errado. Um único campo de telefone simples que aceita dígitos e espaços é mais rápido.
Números e quantidades
Usa `type="number"` para mostrar só números no teclado. Esconde as letras. Alguns campos numéricos precisam de decimais; usa `inputmode="decimal"` para os permitir.
Datas
Usa `type="date"` para ativar um seletor de datas nativo, em vez de pedires aos utilizadores que escrevam 03/15/2026. O seletor de calendário é mais rápido, tem menos erros e parece nativo do telemóvel.
URLs
Usa `type="url"` para mostrar um teclado com a barra e a tecla .com. Os utilizadores podem introduzir um endereço web sem procurar caracteres especiais.
Cada tipo de campo diz ao navegador do telemóvel que dados esperas. O navegador otimiza então o teclado em conformidade. Não precisas de explicar o formato. O teclado faz o trabalho.
Regra 6: Escreve mensagens de erro claras que aparecem em tempo real
Quando alguém preenche um formulário no telemóvel e carrega em enviar só para ver "Endereço de email inválido", já se esqueceu do que escreveu. Não sabe que campo causou o erro. Num ecrã pequeno, a mensagem de erro pode estar abaixo da dobra. Tem de voltar a subir.
Em vez disso, valida os campos enquanto o utilizador os preenche. Assim que passa ao campo seguinte, verifica o que acabou de deixar. Se houver um erro, mostra-o de imediato, logo por baixo desse campo. Vê o problema enquanto o contexto ainda está na sua cabeça.
As mensagens de erro têm de ser específicas. ERRADO: "Entrada inválida." CERTO: "O endereço de email tem de incluir um símbolo @." O utilizador sabe exatamente como corrigir.
Evita usar só a cor vermelha para sinalizar erros. Os utilizadores daltónicos não a vão ver. Usa vermelho mais um ícone ou uma etiqueta de texto. "Erro: Este campo é obrigatório."
Regra 7: Otimiza os botões para a interação no telemóvel
Os botões de envio devem ser grandes, obviamente tocáveis e localizados onde o polegar descansa naturalmente. Um texto de botão de 16 pixéis num botão com 44 pixéis de altura é fácil de tocar. Um texto de 14 pixéis num botão de 32 pixéis é um toque falhado à espera de acontecer.
A largura do botão deve ocupar a maior parte da largura do ecrã, e não apertar-se numa coluna estreita. Botões de largura total no telemóvel reduzem a carga cognitiva do "onde clico a seguir".
Evita botões secundários no mesmo ecrã, a menos que seja absolutamente necessário. Demasiados botões criam paralisia de decisão. Uma ação principal por ecrã é a regra mobile-first.
Regra 8: Usa indicadores de progresso em formulários com vários passos
Se o teu formulário se estende por vários ecrãs, mostra uma barra de progresso no topo. "Passo 1 de 3" diz ao utilizador o que esperar. Sabe que não está a preencher um formulário infinito. Consegue ver a meta.
Cada passo deve tratar de um bloco lógico de informação. Não despejes cinco temas diferentes no passo um. Divide-os. Deixa os utilizadores sentir progresso à medida que avançam.
Permite aos utilizadores voltar atrás e editar os passos anteriores. Não devem sentir-se presos. Os utilizadores de telemóvel são esquivos. Oferecer uma saída de emergência reduz a ansiedade.
Regra 9: Garante que o teu formulário funciona com os teclados do telemóvel e com interrupções
O teclado aparece e esconde o teu formulário. O utilizador desce para ver o campo seguinte. Bom. Agora chega uma notificação e o teclado fecha. O formulário está visível, mas o utilizador esqueceu-se do que estava a preencher. Mau.
Testa o teu formulário num telemóvel real e com um teclado real. Percebe quanto do formulário desaparece quando o teclado aparece. Se um campo fica totalmente escondido, é inutilizável. Redesenha a disposição para que o campo ativo fique visível com o teclado aberto.
Guarda o progresso do formulário à medida que o utilizador preenche cada campo. Se mudarem de aplicação ou o formulário fechar por acidente, os dados persistem. Quando voltarem, o formulário está exatamente como o deixaram. Isto elimina uma enorme fonte de abandono.
Regra 10: Usa o preenchimento automático e o pré-preenchimento para acelerar a conclusão
Os telemóveis guardam informação de contacto, endereços de email, nomes e dados de pagamento. Quando o teu formulário usa nomes de campo e atributos HTML padrão, o navegador pode preenchê-los automaticamente. Um campo de telefone com `autocomplete="tel"` mostra os números de telefone guardados como sugestões.
Pré-preencher campos com dados que já conheces é ainda mais poderoso. Se alguém inicia sessão e começa um formulário, o email já está preenchido. A morada já está preenchida. Só escrevem o que é novo. As taxas de conclusão disparam quando os utilizadores não têm de reintroduzir informação que já tens.
O preenchimento automático e o pré-preenchimento não são batota. Respeitam o tempo do utilizador. Reduzem a escrita. Reduzem os erros. Aumentam a conclusão.
Regra 11: Testa em telemóveis reais com utilizadores reais
Os navegadores de computador têm emulação de dispositivos. Simula um ecrã de telemóvel. É útil para verificações rápidas. Mas não simula a experiência móvel real. O teclado não funciona da mesma forma. O scroll não se sente da mesma forma. As áreas de toque não exigem o teu polegar de verdade.
Testa o teu formulário em telemóveis reais. Pede a um colega que o preencha. Observa onde hesita. Observa onde comete erros. Observa onde abandona. Esses dados reais dizem-te mais do que qualquer lista de verificação.
Os erros comuns em formulários para telemóvel são difíceis de detetar sem testes. Um botão que parece grande num emulador de computador pode ser pequeno demais num telemóvel real, sob sol forte. Etiquetas que parecem claras num wireframe podem ser difíceis de ler no ângulo em que se segura um telemóvel. Só os testes reais revelam estes problemas.
Como o WEMASY ajuda no design de formulários para telemóvel
O criador de formulários do WEMASY inclui design mobile-first por defeito. Os formulários empilham-se automaticamente numa única coluna no telemóvel. As áreas de toque têm o tamanho certo. As etiquetas ficam visíveis enquanto os utilizadores preenchem os campos. O teclado do telemóvel é otimizado para cada tipo de campo.
A validação de formulários incorporada acontece em tempo real, não depois da submissão. Os indicadores de progresso aparecem nos formulários com vários passos. As respostas dos formulários são guardadas automaticamente, para os utilizadores nunca perderem o progresso. A análise acompanha que campos causam mais abandono, para otimizares os maiores pontos de atrito.
Vê o que está incluído em cada plano WEMASY e como o criador de formulários se adapta ao teu fluxo de trabalho.