Um campo de formulário não parece uma coisa pequena quando estás a preencher um. É o momento em que decides se continuas ou se vais embora. E esse momento depende por inteiro de o campo ser claro, de as instruções serem fáceis de seguir e de as mensagens de erro fazerem sentido quando algo corre mal.
Os estudos mostram que 67% das pessoas abandonam formulários porque são difíceis de navegar. A maior parte dessa dificuldade não vem de pedir demasiada informação. Vem da forma como essa informação é apresentada ao nível do campo. Uma única etiqueta pouco clara, um texto de exemplo confuso ou um erro de validação vago pode impedir alguém de concluir um formulário que até quer preencher.
Este artigo cobre as regras práticas, sem teoria, que transformam os campos de formulário de pontos de atrito em ferramentas de conversão. Vais aprender como as etiquetas devem funcionar, porque falham os textos de exemplo quando os designers dependem deles e como as mensagens de validação determinam se os utilizadores confiam no teu formulário ou o abandonam. Domina estes detalhes e vais perceber porque é que algumas marcas têm 80% de conclusão nos formulários enquanto outras lutam para chegar aos 50%.
O que faz um campo de formulário parecer fácil ou avassalador
Um campo de formulário é mais do que uma caixa de texto. É uma conversa entre a tua marca e o visitante. O campo faz uma pergunta, a etiqueta explica o que queres e o texto de exemplo dá uma pista. A mensagem de validação responde quando algo não está bem. Cada peça trabalha em conjunto para criar uma sensação.
Essa sensação pode ser "Sei exatamente o que fazer e confio nisto" ou "Não sei o que vai aqui e este formulário parece estragado." A diferença não é sorte. É estrutura.
Quando os campos são fáceis, parecem sem esforço. A etiqueta diz-te que informação pertence ao campo antes de clicares. O campo tem espaço suficiente para escreveres. Se te enganares, a mensagem de erro diz-te exatamente o que correu mal e como corrigir. Avanças pelo formulário com confiança.
Quando os campos são difíceis, criam atrito. A etiqueta pode faltar ou ser pouco clara. Começas a escrever e o texto de exemplo desaparece, por isso esqueces-te do que devias introduzir. Surge um erro sem te dizer qual é o problema e tens de adivinhar. Cada campo torna-se um pequeno puzzle para resolver. Depois de três ou quatro destes puzzles, as pessoas vão-se embora.
Etiquetas de formulário: torna-as claras e sempre visíveis
Uma etiqueta não é decoração. É a instrução que diz a alguém que informação pertence a um campo. As melhores etiquetas são claras, descritivas e sempre visíveis. Não escondidas. Não a desaparecer. Sempre lá.
Eis o que a investigação mostra. Quando uma etiqueta está mesmo por cima de um campo e continua visível enquanto o utilizador escreve, as taxas de conclusão sobem. Quando as etiquetas são substituídas por textos de exemplo que desaparecem no momento em que alguém começa a escrever, as taxas de conclusão descem. A razão é simples. As pessoas precisam de se lembrar do que introduziram, verificar erros de escrita e confirmar o seu trabalho antes de submeter. Se a etiqueta desaparece, não conseguem fazer nenhuma destas coisas.
A etiqueta deve descrever o campo de forma a responder a uma pergunta. Que informação vai aqui? "Endereço de email" faz mais do que "Email". "Número de telefone" é mais claro do que "Telefone". "Nome da empresa" vence "Empresa". Estas pequenas diferenças de especificidade fazem a diferença entre clareza instantânea e um momento de hesitação.
Evita etiquetas que escondem informação. Não uses etiquetas vagas como "Outro", "Informação adicional" ou "Detalhes". Estas obrigam o utilizador a clicar ou a passar o rato para perceber para que serve o campo. Uma etiqueta específica como "Como ouviste falar de nós?" ou "Qual é o teu maior desafio?" faz o trabalho logo à partida e mantém as pessoas em movimento.
Os campos obrigatórios e opcionais precisam de distinção visual, mas não de explicação verbal. A maioria dos formulários diz "Os campos obrigatórios estão marcados com um asterisco" e depois espera que as pessoas se lembrem desta regra. Em vez disso, marca os campos obrigatórios de forma visível (um asterisco ou um ponto) e torna os campos opcionais óbvios com uma pequena etiqueta "(opcional)". As pessoas vão saber num relance o que é obrigatório e o que não é.
Os formulários longos ou complexos beneficiam de um texto de ajuda curto por baixo da etiqueta. Isto não são instruções para a vida. É uma única frase que esclarece quando é preciso. Se pedes um número de telefone e precisas de um formato específico, acrescenta uma linha por baixo da etiqueta: "Inclui o indicativo. Não vamos usar isto para te ligar sem perguntar primeiro." Essa linha evita erros de formato e cria confiança. Mas mantém-na curta. Parágrafos de texto de ajuda por baixo de cada campo fazem o formulário parecer avassalador.
Para ver melhor como as decisões de layout afetam a perceção dos formulários, consulta o nosso guia sobre princípios de design de formulários: layout, espaçamento e hierarquia visual.
Porque falham os textos de exemplo e o que usar em vez disso
Um texto de exemplo é o texto dentro de um campo que desaparece no momento em que alguém clica nele. Parece útil. Parece uma pista. Na prática, é o erro mais comum no design de formulários.
Eis o que acontece quando alguém depende de textos de exemplo em vez de etiquetas. Um visitante chega ao formulário. O texto de exemplo diz "john@example.com" para mostrar o formato esperado. Clica no campo de email e começa a escrever. O texto de exemplo desaparece. Agora já não vê que formato era esperado, por isso fica na dúvida se está a fazer bem. Termina de escrever. Passa ao campo seguinte com a tecla tab. Agora não se lembra se escreveu o email corretamente, mas não pode voltar atrás para verificar porque o campo já não mostra o texto de exemplo. Então apaga a entrada e volta a escrever. Isto repete-se em cada campo com instruções só em texto de exemplo. As taxas de conclusão afundam.
A investigação é esmagadora. Os textos de exemplo prejudicam a conclusão dos formulários, prejudicam a acessibilidade (os leitores de ecrã têm dificuldade com eles) e criam atrito para pessoas com deficiências cognitivas ou para quem preenche um formulário depressa e distraído. Remover os textos de exemplo como instrução principal e acrescentar etiquetas visíveis aumenta as taxas de conclusão de forma mensurável.
Eis o que funciona: usa etiquetas para a instrução e textos de exemplo só para exemplos. Um campo com a etiqueta "Endereço de email" e o texto de exemplo "your.name@company.com" funciona lindamente. A etiqueta diz ao utilizador o que vai no campo. O texto de exemplo mostra o formato sem esconder a instrução. Quando o utilizador clica e o texto de exemplo desaparece, já sabe para que serve o campo porque tem uma etiqueta visível a dizer-lho.
Nem todos os campos precisam de texto de exemplo. Campos simples como "Primeiro nome" ou "Nome da empresa" só precisam de uma etiqueta. O texto de exemplo é útil em campos onde o formato importa (números de telefone, datas, URLs) ou onde o utilizador pode não saber que dados de exemplo introduzir (nome de utilizador numa rede social, código de recomendação).
Se tiveres a tentação de usar um texto de exemplo em vez de uma etiqueta para poupar espaço, constrói o formulário com etiquetas na mesma e deixa-as empilhar. Um formulário com etiquetas visíveis e sem textos de exemplo terá sempre melhor desempenho do que um formulário com etiquetas flutuantes e textos de exemplo escondidos. Os utilizadores concluem os formulários mais depressa, cometem menos erros e confiam mais no formulário.
Mensagens de validação: transforma erros em orientação
A validação é o que acontece quando alguém preenche um campo incorretamente. Aparece uma mensagem de erro. Neste momento, o utilizador sente alguma coisa. Ou sente que o formulário está estragado e confuso, ou sente que o formulário o está a ajudar a acertar.
As más mensagens de validação são vagas. Dizem "Entrada inválida" ou "Erro" e mais nada. O utilizador não sabe o que correu mal. O formato estava errado? A entrada era curta demais? Usou um caractere que não é permitido? Tem de adivinhar e tentar de novo.
As boas mensagens de validação são específicas e acionáveis. Em vez de "Inválido", diz "A palavra-passe tem de ter pelo menos 8 caracteres e incluir uma letra maiúscula e um número." Isto diz ao utilizador exatamente o que correu mal e o que fazer para corrigir. O formulário deixa de parecer estragado. Parece que está a ajudar.
O momento também importa. A validação pode acontecer de duas formas. A validação em tempo real verifica o campo quando o utilizador acaba de escrever e mostra o erro de imediato. Isto parece reativo e ajuda a apanhar erros antes da submissão. A validação do formulário todo acontece quando alguém clica em submeter, e todos os erros aparecem de uma vez. Isto parece menos reativo mas funciona bem em formulários simples. Combina as duas quando puderes. Validação em tempo real para os campos críticos (email, palavra-passe, número de telefone) e validação do formulário todo na submissão para o resto.
A posição das mensagens de erro afeta se as pessoas conseguem corrigi-las. O texto do erro deve aparecer mesmo por baixo do campo que causou o problema, não no topo do formulário numa lista-resumo. Quando o erro está por baixo do campo, o utilizador consegue ler o erro e o campo ao mesmo tempo. Vê o que escreveu, percebe o que correu mal e corrige de imediato. Quando o erro está no topo do formulário numa lista, tem de voltar a subir, encontrar o campo e lembrar-se de qual era o erro.
A cor sozinha não chega para sinalizar um erro. Não dependas apenas de uma borda vermelha ou de texto vermelho. Alguns utilizadores não distinguem cores. Acrescenta um ícone (um X, um símbolo de aviso) e texto de apoio para que o erro seja claro para todos. Os leitores de ecrã também precisam de texto para anunciar o erro, não apenas de uma mudança de cor.
O tom das mensagens de erro importa para o que as pessoas sentem sobre o teu formulário. Uma mensagem dura como "Introduziste um email inválido" faz as pessoas sentir que fizeram algo errado. Uma mensagem útil como "Não reconhecemos esse formato de email. Verifica se há erros de escrita e tenta de novo" faz com que se sintam ajudadas. A segunda mensagem faz o mesmo trabalho mas faz a experiência parecer mais colaboração do que julgamento.
Para orientações sobre como criar formulários que pareçam acessíveis a todos os utilizadores, vê o nosso artigo sobre design de formulários acessíveis.
Como o espaçamento dos campos afeta se um formulário parece acessível
Um formulário é um ambiente visual. O espaço à volta de cada campo, a distância entre etiquetas e campos e os intervalos entre grupos de campos enviam sinais sobre se o formulário é gerível ou avassalador.
Um espaçamento apertado faz dez campos parecerem trinta. Cada campo compete pela atenção visual. O utilizador não sabe que campos pertencem juntos. As etiquetas ficam coladas aos campos por baixo e a etiqueta seguinte fica a poucos píxeis. O formulário todo parece apertado e avassalador. A desistência acontece antes de o primeiro campo ser preenchido.
Um espaçamento generoso entre campos relacionados e intervalos maiores entre grupos de campos fazem os mesmos dez campos parecerem um processo curto e organizado. Primeiro, preenches a informação de faturação. Depois um intervalo claro. Depois a informação de envio. Depois outro intervalo. Dados de pagamento. O formulário parece estruturado, não caótico. Isto não é espaço em branco desperdiçado. É arquitetura de informação que guia o utilizador pelo processo.
Os formulários para telemóvel precisam de atenção especial ao espaçamento. Num ecrã de telemóvel, um formulário apertado é inutilizável. Cada campo precisa de espaço vertical suficiente para que um dedo lhe toque sem acertar num campo vizinho. Um formulário para telemóvel com espaçamento vertical generoso e secções bem separadas converte significativamente melhor do que um desenhado para computador e encolhido para telemóvel. O espaço não é desperdiçado. É funcional.
A posição das etiquetas também afeta a perceção do espaçamento. As etiquetas devem ficar mesmo por cima dos campos, não ao lado. Quando as etiquetas ficam à esquerda, a distância entre a etiqueta e o campo aumenta, criando confusão sobre que campo pertence a que etiqueta. Isto é especialmente verdade no telemóvel, onde as etiquetas à esquerda obrigam o texto a quebrar ou a encolher para tamanhos ilegíveis. As etiquetas por cima mantêm-se ligadas ao seu campo e parecem mais limpas.
Indicadores de campos opcionais e obrigatórios que funcionam mesmo
Cada campo é obrigatório (tem de ser preenchido) ou opcional (pode ser saltado). O utilizador precisa de saber qual é qual num relance, sem ler texto de ajuda nem instruções.
A abordagem tradicional marca os campos obrigatórios com um asterisco e diz "Os campos obrigatórios estão marcados com um asterisco". Isto só funciona se os utilizadores se lembrarem da regra. Muitos não se lembram. Passam os olhos pelo formulário e veem asteriscos sem perceber o que significam.
Uma abordagem melhor marca os campos obrigatórios de forma visível (asterisco ou ponto colorido) e rotula explicitamente os campos opcionais com "(opcional)" junto à etiqueta. Agora uma vista de olhos diz ao utilizador se cada campo é necessário. Os campos obrigatórios parecem normais com um marcador. Os campos opcionais têm uma etiqueta clara. Isto elimina a necessidade de memorizar uma regra.
Alguns formulários usam cor para distinguir campos obrigatórios de opcionais. Isto pode funcionar, mas exige contraste alto e deve ser combinado com etiquetas de texto, não usado sozinho. Um asterisco vermelho junto à etiqueta funciona melhor do que um fundo vermelho no campo, porque o fundo do campo pode tornar o texto menos visível.
Campos condicionais e mostrar apenas o necessário
Alguns campos só devem aparecer depois de o utilizador fazer uma escolha num campo anterior. Uma caixa de seleção "Vivo nos EUA" pode mostrar uma lista de estados. Selecionar "Empresa" num campo de tipo de conta pode mostrar um campo de nome da empresa. Estes campos condicionais reduzem a carga cognitiva ao mostrar apenas os campos que o utilizador realmente precisa de preencher.
Quando os campos condicionais aparecem, devem aparecer com suavidade e de forma óbvia. Um aparecimento súbito, sem animação, pode assustar. Um efeito de desvanecimento ou de deslize para baixo torna a mudança clara. O campo que acabou de aparecer deve ter a sua própria etiqueta e validação, como qualquer campo normal. Não assumas que o utilizador vai perceber o que precisa de fazer só porque o campo apareceu.
Os campos condicionais funcionam melhor quando aparecem por baixo do campo que os aciona, não por cima nem ao lado. O utilizador faz uma escolha e, logo por baixo dessa escolha, aparecem campos novos relacionados com ela. Isto mantém o caminho cognitivo linear e reduz a confusão.
Como a WEMASY ajuda no design de campos de formulário
O criador de formulários da WEMASY inclui opções de campos personalizáveis, regras de validação e mensagens de erro em tempo real. Podes configurar campos obrigatórios e opcionais, definir regras de validação específicas para diferentes tipos de campo e controlar exatamente que mensagens de erro aparecem e quando. Isto significa que podes criar formulários que seguem todas as boas práticas deste artigo sem precisar de programar.
Também podes controlar o layout dos campos, o espaçamento e a posição das etiquetas através das ferramentas de design de formulários da WEMASY. Cria formulários que parecem claros, profissionais e fáceis de concluir.
Vê que funcionalidades estão incluídas em cada plano WEMASY.