Melhore a experiência do usuário com esses processos de design de formulários de práticas recomendadas
Praticamente todos os sites têm um formulário que solicitará suas informações pessoais em troca de um serviço. No entanto, o design desses formulários é frequentemente tratado como algo secundário, seja sendo transportado da era dos formulários em papel ou sendo tratado como uma tarefa de baixa prioridade em comparação a projetos “mais atraentes”, como a criação de homepage ou página de produto.
Na Zuko Analytics
Estamos totalmente cientes de quão importantes os formulários podem ser para o seu negócio e somos apaixonados por fazê-los corretamente. É por isso que criamos um software que ajuda você a otimizar a conversão – nosso criador de formulários permite que você publique formulários de forma rápida e fácil com ótima UX, enquanto nossa plataforma de análise permite que você rastreie qualquer um dos seus formulários para ver onde os usuários estão tendo dificuldades.
Este artigo descreve por que o design do seu formulário é importante, fornece conselhos práticos sobre como estabelecer as bases para um bom design de formulário e fornece princípios e dicas que ajudarão você na implementação do formulário.
Dicas de execução
O que é design de formulários?
O design de formulário é o processo pelo qual você reúne e executa todos os elementos do seu formulário da web ou checkout. Inclui decidir quais perguntas você fará, como o usuário enviará as informações, além biblioteca de números de telefone de qual será o layout, formato e experiência. Um bom design de formulário deve sempre ter a experiência do usuário em mente para maximizar o número de pessoas que concluem o formulário com sucesso.
Por que o design de formulários é importante?
Formulários mal componentes para teste a/b no seu checkout de comércio eletrônico projetados custarão dinheiro e clientes para sua empresa. Em média, ⅓ de todas as pessoas que iniciam formulários não os completam . Se seu formulário não for bem projetado, a proporção de pessoas que desistem pode ser substancialmente maior do que isso, o que significa que você está desnecessariamente jogando valor fora.
O design do seu formulário afeta a experiência geral do usuário, o que, por sua vez, determinará se você tem clientes informações ricas felizes ou frustrados. Um formulário bem projetado mostra que você pensou na experiência dos visitantes do seu site e está preparado para gastar tempo garantindo que eles tenham uma boa experiência. Isso torna mais provável que eles se convertam com sucesso para se tornarem clientes.
A fase de planejamento
Para maximizar sua chance de sucesso, é importante gastar algum tempo revisando o que você precisa do seu formulário e planejando como entregá-lo. Esta seção analisa as fases pelas quais você passará para fazer isso.
(i) Por que você precisa de um formulário?
A primeira parte de qualquer projeto de design de formulário é se perguntar: “O que queremos alcançar com este formulário?”. Isso pode ser tão simples quanto “precisamos capturar um endereço de e-mail para adicionar a pessoa a uma lista de mala direta” ou tão complicado quanto “precisamos obter informações financeiras e pessoais detalhadas para que possamos fazer uma avaliação precisa e justa de um pedido de hipoteca”.
Depois que você tiver clareza sobre isso, você pode montar uma equipe de stakeholders – marketing, conformidade, site, finanças, etc. Eles, sem dúvida, terão opiniões sobre as informações necessárias, então você precisará envolvê-los, mas tenha cuidado para que muitos cozinheiros não façam do seu formulário um café da manhã de cachorro (veja abaixo como evitar isso).
Que informações precisamos solicitar?
Depois de reunir a equipe, comece registrando todas as informações que você acredita que precisará do usuário do seu formulário. É útil criar uma matriz como a de um checkout de e-commerce abaixo que define explicitamente por que você precisa de cada ponto de dados.
Informação Por que é necessário
Título Então sabemos o título preferido do cliente
Nome Para que saibamos quem é a pessoa que está comprando de nós (e para lidar com ela corretamente)
Endereço de email Para confirmar a conclusão bem-sucedida do pedido e enviar atualizações
Detalhes do pagamento Para processar o pagamento da transação
Número de telefone Para atualizar o pedido por mensagem de texto e caso haja algum problema com a entrega
Endereço físico Para entregar o item pedido
Hobbies do cliente Para nos permitir fazer vendas cruzadas para eles no futuro
Depois de reunir todas as informações possíveis que você pode precisar, é hora de passar para a próxima etapa.
Auditar e rever as informações
Se você tem um elenco de milhares em sua equipe de design de formulários, sem dúvida você terá uma lista inchada de informações que vários departamentos querem extrair do visitante do formulário. Agora é a hora de pensar sobre a experiência do cliente e reduzir essa lista para algo mais elegante.
Para fazer isso, somos grandes fãs do framework Prune – Tune – Postpone – Explain desenvolvido pela otimizadora de formulários OG Caroline Jarrett . Você pode ler mais sobre o framework aqui, mas, em essência, você olha para cada uma das perguntas que está planejando fazer no contexto a seguir.
Prune – Você precisa perguntar isso? Se você realmente não precisa, então remova completamente. Da matriz de eCommerce acima, poderíamos olhar para o campo de título. Por que precisamos dele? Existe algum efeito negativo em simplesmente removê-lo?
Tune – Você pode refinar a maneira como faz a pergunta para facilitar a resposta do usuário. Um exemplo do checkout de e-commerce acima pode ser o campo de endereço. Você pode simplesmente pedir o código postal/CEP e usar uma pesquisa automática?
Adiar – Você precisa perguntar isso agora
Você pode adiar até depois do preenchimento do formulário (no seu site ou por e-mail)? A pergunta sobre o hobby do cliente é o exemplo óbvio da matriz de checkout. Não é essencial para o sucesso do pedido, então você realmente deveria procurar outra maneira de obter essas informações (assumindo que sejam importantes o suficiente para serem desejadas em primeiro lugar).
Explique – Entre em mais detalhes sobre o porquê de você precisar das informações do usuário e como respondê-las. O número de telefone é o caso clássico. As pessoas odeiam dar seus números de telefone, então explicar por que você precisa deles é essencial para fazê-las compartilhá-los.
Se você quiser entender mais sobre Podar – Ajustar – Adiar – Explicar, fizemos uma sessão de vídeo com Caroline que pode ser útil para você.
Princípios de Design
Quando estiver satisfeito com a lista truncada de informações necessárias, você pode começar a fazer alguma estruturação e escrita de alto nível para o formulário em si. Nesta seção, veremos alguns dos princípios gerais de design que você aplicaria para entregar uma experiência suave ao usuário.
(i) Minimize as informações que você solicita
Conforme descrito acima, você não deve pedir mais informações do que precisa. Use Prune – Tune – Postpone – Explain para reduzir as perguntas ao mínimo absoluto. Cada pergunta desnecessária que você faz adiciona atrito extra e carga cognitiva ao formulário, tornando mais provável que o usuário não o conclua.
(ii) Use o formato ideal
Existem vários tipos diferentes de campos de formulário que você pode usar em seus formulários. É importante que você aplique o mais amigável para cada informação que você está solicitando. Aqui, nós detalhamos os formatos de campo mais comuns e destacamos quando você deve (ou não) usar cada um.
Caixas de texto
Geralmente o formato mais comum, caixas de texto padrão são usadas quando o cliente precisa digitar uma informação curta, como endereço de e-mail, número de telefone ou nome.
Entradas de caixa de texto simples. Fonte: Brand Alley
Embora esse formato humilde possa parecer simples, você ainda precisa ter cuidado. Certifique-se de que eles estejam definidos para o tipo de entrada correto para que o teclado mais apropriado seja exibido em dispositivos móveis.
Caixas de texto de formato longo
Caixas de texto de formato mais longo são para quando uma caixa de texto padrão simplesmente não dá conta. Use-as se quiser que o usuário insira uma resposta de formato mais longo e ainda consiga ver o que escreveu.
Caixas de texto padrão nem sempre funcionam
É quando você precisa das versões estendidas
Botões de rádio
Bonitas e fáceis, os botões de opção são usados para perguntas em que você quer uma resposta de um número limitado de opções possíveis. Perguntas do tipo Sim/Não ou “Escolha entre estas opções” são onde você deve usar os botões de opção.
Bônus a menos para você: os botões de opção são chamados assim porque eles replicam a funcionalidade dos botões dos antigos rádios : quando você pressiona um, os outros são redefinidos.
Um formato simples de botão de opção para uma opção de pagamento de comércio eletrônico
Seleciona / Menus suspensos
Os menus suspensos podem ser problemáticos por vários motivos , entre eles uma experiência ruim para o usuário em dispositivos móveis ao tentar rolar para baixo para encontrar a resposta desejada.
Isso não se traduz bem na experiência móvel
Geralmente, para perguntas com 6 ou menos opções possíveis, recomendamos usar botões de opção.
Se você realmente precisar usar menus suspensos, certifique-se de que a lista tenha padrões inteligentes e seja pesquisável para que o usuário possa encontrar rapidamente a resposta que deseja.
Caixas de seleção
Caixas de seleção são os formatos binários de “marque aqui” onde elas são marcadas ou não. Elas são usadas principalmente para confirmar consentimento , mas também podem ser úteis quando um usuário pode selecionar várias opções de um grupo grande – “Marque todas as que se aplicam”.
Caixas de seleção opt-in do Moneysupermarket.com
Botões
O desenlace de um formulário, botões são normalmente usados para o envio final. Se você estiver usando um formulário multietapas, então você também pode usá-los para as funções ‘Continuar’ e ‘Voltar’ entre os estágios.
Uma execução simples de botão
Um ponto a ser cauteloso: quando os desenvolvedores adicionam botões a um formulário, eles geralmente não dão a eles um nome HTML ou ID. Isso torna difícil para qualquer pacote de análise distinguir entre diferentes botões . Faça um favor a si mesmo e peça aos seus desenvolvedores para adicionar nomes exclusivos a cada botão. Isso vai lhe poupar muito trabalho no futuro.
(iii) Estabelecer uma estrutura apropriada
A maior questão estrutural geralmente se resume a se o formulário é de etapa única ou multietapas . A pesquisa por aí parece indicar que, a menos que você tenha um formulário muito curto (4-5 campos), um formulário de múltiplas etapas quase certamente converterá a uma taxa melhor. Esta deve ser sua hipótese inicial (a menos que seja provado o contrário por testes).
Se você estiver usando um formato de vários estágios, tente seguir estas regras:
Agrupe perguntas semelhantes – mantenha detalhes pessoais juntos, detalhes financeiros juntos, etc.
Faça perguntas mais fáceis antes das difíceis – isso facilitará a entrada do usuário no formulário, aumentando a probabilidade de ele concluí-lo
Use indicadores de progresso – mostre ao usuário o quanto ele concluiu e quanto tempo ainda falta
Não tenha muitos passos – normalmente 8 estágios é o limite superior
Permita que o usuário navegue para frente e para trás entre as etapas (com economia de dados)
Use lógica condicional para pular etapas se um usuário não precisar respondê-las
Dicas de execução
Depois que você tiver sua estrutura pronta, é hora de executar e entregar o formulário. Haverá mais opções de design nesta fase do que em qualquer outra, então é melhor usar certos princípios testados e aprovados para garantir que você não faça nada muito extravagante que possa causar abandono não intencional do usuário.
Há muito mais sobre isso em nosso Grande Guia para Otimização de Formulários (e em nossos blogs especializados sobre tópicos individuais), mas resumimos alguns dos principais pontos de design abaixo.
(i) Use layouts de coluna única
Esse conselho já é tão antigo que ele deixou a barba crescer e começou a pedir suas próprias bebidas no bar, mas vale a pena repeti-lo.
A pesquisa mostra que formatos de coluna única significam preenchimentos de formulário mais rápidos do que formatos de várias colunas (eles também são melhor renderizados em dispositivos móveis).
Fonte: Instituto CXL
(ii) Tamanho dos campos de texto de acordo com a entrada
O comprimento de uma caixa de texto dá um forte aviso visual ao usuário sobre quanta informação ele deve inserir. Se houver uma incompatibilidade entre as expectativas e o tamanho da caixa, isso pode causar confusão e atrito.
(iii) Identificar campos opcionais
Um usuário precisa saber se cada campo é obrigatório ou não, então você precisa informá-lo. Não confie em um asterisco (que pode ser mal interpretado). Geralmente, é melhor apenas destacar quais campos são opcionais com uma cópia de texto simples.
(iv) Defina o tipo de campo HTML correto
Mencionamos isso antes, mas é tão importante que pensamos em deixar esta folha de dicas para garantir que você acerte o tipo de entrada.
Rótulo no canto superior direito da pergunta
Mantenha a simplicidade. Adicione o rótulo da pergunta no canto superior esquerdo da entrada. Uma pesquisa da Universidade de Basel descobriu que isso reduz o tempo necessário para analisar e concluir perguntas de formulário.
Um exemplo de rotulagem simples bem feita
(vi) Torne suas mensagens de erro simples e úteis
Mensagens de erro e microcópias associadas são tão importantes para a experiência do formulário que escrevemos um artigo dedicado às boas práticas de mensagens de erro, mas os principais pontos a serem lembrados são:
Indique claramente qual é o erro e onde ele está (e certifique-se de que ele esteja visível usando validação em linha ou imediatamente após o envio).
Seja útil – diga ao usuário como consertar o problema.
Não culpe o usuário – utilize linguagem passiva em vez de acusatória
Pratique a prevenção de erros – certifique-se de que as instruções sejam claras e você terá menos erros sendo disparados em primeiro lugar.
Não confie em marcadores de posição
Os placeholders têm perigos ocultos de UX. Embora possam parecer legais no começo (como neste exemplo abaixo), uma vez que o usuário clica nessas caixas, o placeholder desaparecerá, o que significa que ele pode esquecer o que deveria digitar ou pode inserir informações erradas no campo.
(viii) Não use todas as letras MAIÚSCULAS para rótulos
Não grite. Estudos mostram que os espectadores levam mais tempo para processar todas as letras maiúsculas do que as minúsculas (apropriadamente capitalizadas, é claro!).
