Padrões de design de formulários que ajudam a otimizar a conversão
Embora sejamos grandes fãs de testes A/B de diferentes padrões de formulários para encontrar o design ideal para você, às vezes isso não é possível. Você pode não ter tamanhos de amostra grandes o suficiente para desenhar um resultado estatisticamente significativo ou pode estar projetando seu formulário do zero, então não tem ponto de comparação.
Para esses casos, há padrões de formulários que, em média, demonstraram melhorar a experiência do usuário , minimizando desistências desnecessárias e otimizando o número de pessoas que preenchem o formulário, o que significa que você pode usá-los “prontos para uso” sem se preocupar que eles prejudiquem sua experiência com o formulário.
Na Zuko Analytics,
Vimos biblioteca de números de telefone esses padrões funcionarem muito bem em formulários que adicionaram o Zuko para rastrear o comportamento do usuário e, claro, garantimos que os incorporamos ao nosso novo software de criação de formulários quando o criamos.
Este artigo compartilha 10 dessas dicas importantes para oferecer uma ótima experiência de formulário para seus visitantes com exemplos ao vivo do Zuko Form Builder para mostrar como eles funcionam na prática:
Use padrões e pesquisa inteligente em seus menus suspensos
Use validação inline ao vivo
Divida formulários longos em várias etapas
Não use validação excessivamente rigorosa no campo de número de telefone
Incluir uma barra de progresso e permitir que o usuário navegue entre os estágios
Rotule os campos opcionais claramente
Torne os elementos tocáveis compatíveis com dispositivos móveis
1. Use padrões e pesquisa inteligente em seus menus suspensos
Os menus estratégia poderosa de marketing e negócios para reter seus clientes suspensos (também conhecidos como elementos <SELECT>) não são os formatos mais fáceis de usar, principalmente para dispositivos móveis, mas às vezes são um mal necessário (se você tiver uma longa lista de países, por exemplo).
Se você realmente informações ricas precisar usar um menu suspenso, há algumas coisas que você pode fazer para tornar a experiência menos incômoda:
Coloque as respostas mais comuns no topo da lista. Por exemplo, se a maioria dos seus clientes mora nos EUA, então não os faça rolar mais de 100 opções antes de encontrar a resposta que precisam.
Torne o menu suspenso pesquisável. Isso significa que o usuário pode encontrar a resposta que precisa com alguns toques de tecla em vez de ter síndrome de esforço repetitivo ao rolar.
Colocar opções comuns no topo e incluir uma função de pesquisa significa que este usuário pode encontrar facilmente o país de que precisa
2. Use validação inline ao vivo
Mensagens de erro são essenciais para guiar os usuários pelo seu formulário até uma conclusão bem-sucedida. Se eles cometerem um erro, é importante que você os avise imediatamente. Se você esperar até que eles cheguem ao final de um formulário longo e clique em enviar antes de disparar erros, eles ficarão pulando para cima e para baixo para tentar localizar onde erraram.
Tão importante quanto isso, se eles digitarem uma resposta válida, dar a eles aquele grande sinal verde imediatamente proporciona uma sensação de segurança e alivia o estresse da jornada do formulário.
Não acredite apenas em nossa palavra: este famoso estudo de Luke Wrobleski mostrou um aumento de 22% na taxa de sucesso do formulário e uma redução de 22% nos erros cometidos ao usar validação em linha em vez de validação no envio.
A validação ao vivo significa que os usuários são notificados imediatamente se cometerem um erro
3. Divida formulários longos em várias etapas
Você já tentou preencher um formulário com dezenas de campos todos em uma página? Nós já tentamos e não é uma experiência agradável. Você está constantemente se perguntando se inseriu tudo certo e quando essa loucura vai acabar.
Dividir seu formulário em etapas menores e mais fáceis de gerenciar evitará que seu usuário sofra sobrecarga cognitiva e desista devido ao acúmulo de estresse.
Se você for fazer isso, recomendamos:
Comece de forma simples – Se você puder facilitar o preenchimento do formulário pelo usuário (pense em campos como nome ou endereço de e-mail), é mais provável que ele se comprometa a preenchê-lo.
Use uma barra de progresso para informar ao usuário o quanto ele já concluiu e o quanto ainda falta para ele avançar.
Não dê muitos passos. De 4 a 7 geralmente é aceitável, mas definitivamente não mais do que 10.
Deixe o usuário avançar e retroceder entre as etapas. Se ele não puder voltar para corrigir algo, isso só aumentará sua irritação e aumentará as chances de ele abandonar o processo.
Agrupe perguntas semelhantes. Por exemplo, detalhes pessoais, detalhes de entrega, detalhes de pagamento, etc.
Dividir o formulário em várias etapas evita sobrecarregar o visitante do formulário
4. Não use validação excessivamente rigorosa no campo de número de telefone
Os campos de número de telefone costumam ser complicados para os usuários. Eles não têm certeza se devem incluir o código do país. Espaços estão OK? E os travessões?
Se sua validação for muito rigorosa e impedir que as pessoas insiram seus números de telefone da forma como estão acostumadas, isso leva a aborrecimento e abandono. Essa é uma das razões pelas quais “Número de telefone” é o terceiro campo mais problemático com base nos dados do Zuko.
Em vez disso, limite sua validação ao mínimo de caracteres necessários para determinar que um número de telefone foi inserido (geralmente 8).
Então, use seu backend para reformatar o número, se necessário. Ou, mais comumente, as pessoas que realmente terão que discar o número de telefone são mais do que capazes de interpretar o que o número é elas mesmas.
Mantenha o campo de número de telefone simples – deixe o usuário ditar como deseja inserir suas informações
Quando você tem apenas uma pequena lista de opções para um usuário escolher, os botões de rádio são a maneira mais elegante de perguntar a eles. Um toque e pronto.
Usar outros métodos, como menus suspensos, significa que o usuário tem que clicar para abrir, rolar para baixo, selecionar sua opção, adicionando complexidade desnecessária. Você pode ver um pouco da distração que eles introduzem em um estudo de rastreamento ocular que Zuko conduziu.
Considere usar menus suspensos em vez de botões de opção somente se você tiver uma longa lista de opções que seria muito difícil de usar para incluir uma opção de opção de opção.
Os botões de opção requerem apenas um clique para serem concluídos
A microcópia é o lubrificante que ajuda a guiar o usuário pela jornada do formulário sem problemas.
Sem uma cópia para fornecer contexto e explicação, algumas perguntas podem levar o visitante do formulário à distração, confusão e segundas intenções. Apenas um pequeno pedaço de texto pode ser a diferença entre o usuário progredir com sucesso no formulário ou desistir com raiva.
Alguns bons usos da microcópia incluem:
Informar aos usuários o que eles precisarão para preencher o formulário (número do passaporte, etc.)
Esclarecendo o que é necessário (quais são os requisitos de senha, por exemplo)
Explicar por que você precisa das informações (os usuários podem ficar desconfiados – se você precisar do número de telefone deles, diga o que você fará ou não com ele)
Persuadi-los – diga-lhes os benefícios de lhe dar as informações
Esclarecendo erros
Reforçando a voz da sua marca
Ao usar microcópia, certifique-se de que ela esteja claramente visível para o usuário. Não a esconda atrás de uma dica de ferramenta que a maioria das pessoas não verá.
Este é um ótimo uso da microcópia para tranquilizar os clientes e explicar o que é necessário
Todos nós já estivemos em formulários onde tivemos que rolar para trás 20+ anos (pelo menos) para adicionar nosso ano de nascimento. Menus suspensos e seletores de data são extremamente ineficientes para campos de data. Em vez disso, use um padrão simples de três caixas de texto – três entradas e o usuário está pronto.
Não somos só nós que inventamos. A Zuko Analytics tem uma pesquisa de rastreamento ocular em campos DOB que nos ajudou a chegar à conclusão.
8. Inclua uma barra de progresso e deixe o usuário mover entre os estágios
Se você tem um formulário multietapas, usar uma barra de progresso ajuda a gerenciar as expectativas do usuário. Eles sabem quantas etapas devem passar antes de terminar.
Se você estiver usando uma barra de progresso, certifique-se de que o usuário possa ir e voltar entre os estágios. Se você não deixá-los voltar, eles vão desistir frustrados quando perceberem que cometeram um erro em um estágio anterior.
E tenha certeza de que suas entradas anteriores serão salvas para eles quando voltarem. Se você destruiu todos os dados deles, eles não ficarão felizes.
Uma barra de progresso mostra aos visitantes o quanto do formulário eles concluíram e quantas etapas ainda faltam
9. Rotule os campos opcionais claramente
Nem sempre queremos tornar um campo de formulário obrigatório. Alguns podem argumentar que se um campo não é importante o suficiente para ser obrigatório, então por que você o está incluindo? No entanto, há circunstâncias em que pode ser garantido.
Por exemplo, se você estiver solicitando feedback contextual, forçar as pessoas a responder pode significar que você receberá um absurdo (pessoas respondendo por responder em vez de informar o que acreditam), o que polui seus dados.
Se você tiver campos opcionais, certifique-se de que eles estejam claramente identificados para que não haja confusão.
Um rótulo claro de “opcional” não deixa margem para dúvidas
10. Torne os elementos tocáveis compatíveis com dispositivos móveis