Cada campo que acrescentas a um formulário é uma decisão. A investigação mostra que cada campo obrigatório adicional reduz as taxas de conclusão em 10 a 15%. Mas pedir menos dados também significa receber menos dados. O segredo para fazer subir a conversão não é remover campos por completo. É ser estratégico quanto aos campos que marcas como obrigatórios, aos que marcas como opcionais e aos que escondes até se tornarem relevantes.
O que os campos obrigatórios realmente fazem às taxas de conversão
Quando alguém chega ao teu formulário, faz uma leitura rápida em segundos. Não palavra a palavra. Olha para quantos campos há, quanto scroll vai ter de fazer e se os pedidos parecem razoáveis.
Os campos obrigatórios enviam um sinal. Cada um transmite a mensagem "preciso disto de ti". Dois ou três campos obrigatórios parecem geríveis. Sete campos obrigatórios parecem uma candidatura a um emprego. A diferença nas taxas de abandono não é pequena.
Pega em qualquer pagamento de loja online e vês isto em ação. Se o campo do código postal está marcado como opcional mas a morada de envio está marcada como obrigatória, os clientes ficam. Se ambos são obrigatórios e não estão claramente marcados, o abandono do carrinho dispara. A psicologia é simples. Os visitantes inseguros vão-se embora.
A regra de marcar a minoria: quando marcar obrigatório, quando marcar opcional
A maioria dos formulários tem um desequilíbrio. Um formulário de contacto pode ter cinco campos obrigatórios e um opcional. Um formulário de registo pode ter oito campos obrigatórios e dois opcionais. Nestes casos, marcar todos os campos obrigatórios desperdiça espaço e carga mental.
A melhor abordagem é marcar só a minoria. Se 80% dos teus campos são obrigatórios, marca apenas os opcionais com a palavra "(opcional)" junto à etiqueta. Os campos sem marca serão assumidos como obrigatórios. Isto reduz a confusão visual e faz o formulário parecer mais curto.
Por outro lado, repara nos formulários complexos em que os campos obrigatórios estão espalhados. As candidaturas a seguros, os formulários de crédito e os inquéritos de várias páginas têm muitas vezes campos obrigatórios e opcionais misturados. Quando isso acontece, marca ambos. Usa um asterisco (*) para os campos obrigatórios e "(opcional)" para os opcionais. Uma etiquetagem clara vence as convenções implícitas.
A regra é direta. Marca a minoria, seja ela qual for.
Como etiquetar os campos obrigatórios de forma que as pessoas reparem
Um asterisco sozinho não chega. Os utilizadores de leitores de ecrã não ouvem um asterisco. Quem não tem o português como língua materna pode não reconhecer a convenção. Os utilizadores que fazem scroll depressa podem nem ver um símbolo pequeno.
A solução é uma etiquetagem em camadas. Precisas do asterisco, da palavra "obrigatório", e ambos visíveis e claros também ao nível do código.
Usa um asterisco e junta-lhe a palavra obrigatório
A investigação mostra que juntar um asterisco vermelho (*) ao texto "obrigatório" na etiqueta elimina a confusão. O asterisco chama a atenção. A palavra "obrigatório" confirma o que significa. Juntos funcionam para utilizadores que veem, para utilizadores de leitores de ecrã e para pessoas com dificuldades cognitivas.
Experimenta Endereço de email * (Obrigatório) ou Número de telefone * seguido de um texto que diz "Os campos marcados com asterisco são obrigatórios." Este formato funciona bem.
Acrescenta uma legenda que explique o que significa obrigatório
Antes de os campos do formulário começarem, inclui uma linha simples a dizer "* = campo obrigatório" ou "Os campos marcados com um asterisco (*) são obrigatórios." Esta frase é curta e elimina a necessidade de os utilizadores interpretarem o símbolo sozinhos.
Junta a isto atributos HTML ao nível do código. No código do teu formulário, acrescenta required ou aria-required="true" a cada campo obrigatório. Isto diz ao navegador e ao leitor de ecrã que o campo é obrigatório sem depender só do design visual.
A cor importa menos do que o contraste e a posição
Os asteriscos vermelhos são convencionais, mas a verdadeira questão é o contraste. Se o teu asterisco é de um cinzento ténue ou se mistura com a etiqueta, os utilizadores com baixa visão não o vão ver. Faz o asterisco a negrito e garante que tem um forte contraste com o fundo.
A posição também importa. Coloca o asterisco logo a seguir ao texto da etiqueta, e não solto à parte. Isto mantém o sinal de "obrigatório" ligado ao nome do campo, de forma visual e fácil de ler da esquerda para a direita.
Quando esconder os campos opcionais é melhor do que marcá-los
Alguns formulários beneficiam de uma abordagem diferente, chamada divulgação progressiva. Esconde os campos opcionais até se tornarem relevantes. Isto funciona quando o teu formulário tem um caminho principal claro e os campos opcionais só se aplicam a certos utilizadores.
Pensa num formulário de marcação. "Nome da marca" pode ser obrigatório para clientes empresariais mas opcional para particulares. Em vez de o marcares como opcional e sobrecarregares o caminho principal, mostra-o só depois de o utilizador escolher "tipo de marcação" como "empresa". Nunca vê o campo a não ser que se aplique a ele.
A divulgação progressiva faz os formulários parecerem mais curtos
Os formulários que escondem os campos opcionais até serem precisos convertem melhor do que os que mostram tudo logo à partida. A razão é a perceção. Um formulário que mostra 12 campos (mesmo que 3 sejam opcionais) parece mais longo do que um que mostra 9 campos e revela mais 3 com base nas respostas do utilizador.
A lógica condicional revela campos com base em respostas anteriores
Os criadores de formulários modernos suportam isto de origem. Quando um utilizador escolhe uma certa opção, aparece um novo campo. Quando muda essa opção, o campo desaparece. O formulário adapta-se às necessidades dele em tempo real.
É aqui que a lógica condicional do WEMASY se destaca. Podes definir regras como "se o setor é saúde, mostrar o campo de conformidade HIPAA" ou "se o orçamento é inferior a $1000, mostrar opções de pagamento para planos pequenos". O utilizador só vê as perguntas que lhe interessam.
Campos obrigatórios condicionais: obrigatórios só quando faz sentido
O design de formulários avançado vai um passo além. Alguns campos são opcionais por defeito mas tornam-se obrigatórios com base em respostas anteriores do utilizador. É o ponto ideal entre a recolha de dados e a experiência do utilizador.
Imagina que "Fala-nos da tua marca" é opcional numa inscrição grátis. Mas se o utilizador escolhe "Sou dono de uma marca" numa lista pendente, o mesmo campo passa a ser obrigatório. O formulário muda o requisito em tempo real.
Mostra a transição com clareza
Quando um campo passa de opcional a obrigatório, o utilizador precisa de saber. A melhor abordagem é acrescentar o asterisco e a etiqueta "(Obrigatório)" logo que o campo se torna obrigatório. Alguns criadores de formulários destacam a mudança do campo com uma animação subtil ou uma mudança de cor. Isto sinaliza que algo mudou sem ser brusco.
Erros que matam discretamente as tuas taxas de conclusão
Mesmo com as regras certas em vigor, pequenos erros somam abandono. Fica atento a estes.
Misturar símbolos sem uma legenda
Usar um asterisco em alguns campos e o texto "(obrigatório)" noutros cria confusão. Escolhe uma abordagem e mantém-na. A consistência em toda a tua marca importa mais do que o símbolo específico que escolheres.
Marcar campos opcionais como obrigatórios por acidente
É comum em formulários migrados de sistemas antigos ou quando os requisitos mudam a meio do projeto. Um campo fica etiquetado como opcional mas o sistema exige-o, ou vice-versa. Os utilizadores preenchem um campo que achavam opcional, enviam o formulário e recebem um erro. Abandonam.
Esconder informação que os utilizadores precisam de ver
A divulgação progressiva funciona quando o campo escondido é realmente opcional ou realmente condicional. Sai pela culatra quando escondes campos obrigatórios atrás de lógica complexa. Se um campo é essencial, mostra-o. Não deixes os utilizadores a perguntar-se se precisam de o preencher.
Usar asteriscos sem texto explicativo
Um asterisco sozinho é um mistério para quem nunca viu essa convenção. Sem uma legenda, alguns utilizadores vão saltar o campo a pensar que é opcional. Acrescenta a legenda. Uma linha no topo. Cinco palavras. Evita o abandono.
Mudar o estado de obrigatório a meio do formulário
Se um campo é obrigatório, mantém-no obrigatório. Se precisares de o tornar opcional mais tarde por mudança das necessidades da marca, faz uma revisão completa. Não mudes discretamente um campo de obrigatório para opcional e esperes que ninguém repare. Os utilizadores reparam, e ficam confusos.
Como o WEMASY ajuda com os campos obrigatórios e opcionais
O criador de formulários do WEMASY dá-te controlo total sobre os requisitos dos campos sem tocar em código. Define qualquer campo como obrigatório ou opcional no editor. Acrescenta lógica condicional que torna um campo obrigatório só quando se cumprem condições específicas. Acrescenta legendas personalizadas para explicar os símbolos dos teus campos obrigatórios.
Podes também ver dados em tempo real sobre que campos causam mais abandono. Se um campo opcional em particular está a atrasar as tuas conversões, podes escondê-lo com divulgação progressiva. Se os utilizadores estão confusos com um campo obrigatório, podes passar a marcar só os opcionais e ver qual abordagem converte melhor.