5 boas razões e 10 dicas de UX e UI para você construir formulários melhores
Precisamos declarar guerra aos formulários chatos e complexos
Esse artigo mostra como formulários podem ajudar empresas a terem mais produtividade, conversões, negócios fechados e faturamento, além de sintetizar dicas sobre otimização e boas práticas de UI para forms.
Um formulário me deu tanto trabalho na última semana que resolvi declarar guerra aos formulários chatos e complexos, físicos ou digitais, e escrever esse artigo para ajudar pessoas a projetarem forms melhores.
Entenda rapidamente minha birra com formulários
Você gosta de preencher formulários à mão? Nem eu!
Nada pior que chegar em algum estabelecimento e pedirem para preencher uma ficha cadastral: dezenas de campos, papel e caneta.
Pior ainda é quando o formulário:
- é online, mas precisa ser impresso e entregue pessoalmente,
- faz várias perguntas que você não sabe responder,
- faz perguntas desnecessárias.
Na última semana um formulário tomou o meu tempo e ainda tomará o tempo de dezenas de milhares de outras pessoas que o preencherão. Além disso dará um trabalhão para outras pessoas que precisarão digitar tudo de novo para inserir em algum sistema— já que foi impresso e escaneado.
Era tão difícil assim buscar uma solução mais simples? Com vocês, a motivação desse artigo:
Formulários trabalhosos não são um privilégio do mundo físico. Eles também existem de diversas formas no mundo digital
Melhor que preencher formulários em papel é pagar boletos em formato imagem — não permite copiar e colar o número. E muitas vezes ele chega no seu e-mail impossibilitando escanear o código.
Aí começa a saga de trocar janelinha. E quantos zeros tem aqui: 237911110360000000000…?
Conheça 5 razões para você domar os formulários
Resultados de Negócio, Conversão, Produtividade, Vendas e Relacionamento.
Na web, formulários são uma forma de captar escolhas e dados de usuário.
Existem vários tipos deles:
- formulários para cadastro,
- assinatura de serviços,
- feedback de usuários,
- compras,
- primeiro contato entre usuario e empresa,
- pesquisa de informações e por aí vai…
Ele é responsável por tantas interações importantes e nem sempre damos a atenção adequada a eles. Já parou para pensar quantas decisões precisamos tomar ao projetar um simples campo de texto?
Entenda primeiro que existem dois tipos de formulários
- aqueles chatos de preencher, grandes, complexos, que você não entende as perguntas — é, ainda não superei.
- aqueles que você nem percebe que eles existem.
Seu objetivo é se aproximar o máximo possível do segundo tipo: os formulários (quase) invisíveis.
Quer dois exemplos que você pode não ter percebido que eram formulários?
Você fez login usando uma conta do Google, Facebook ou similar?
Você preencheu sem ver o seu Nome, Sexo, Idade, Foto e várias outras coisas.Você mandou uma mensagem no Whatsapp?
O zap poderia ter perguntado seu nome, número de telefone e foto também, mas ele foi legal e só te pediu o texto da mensagem.
Quer um exemplo que você certamente percebeu que estava preenchendo?
Os formulários que você usa no seu trabalho!
Razão #1: Resultados de negócio
Conhece o famoso caso de estudo da Amazon que, ao simplificar um formulário, aumentou seu faturamento anual em R$1B (um bilhão de reais)?
Eu conto essa história nesse vídeo. Depois de ver faça esse questionamento mental: otimizar um formulário é realmente importante?
Razão #2: Conversão
Formulários mais simples geram mais respostas. Consegue imaginar qual dos formulários abaixo pode ter maior taxa de preenchimento?
Razão #3: Produtividade
Conta simples. Se uma equipe de 10 pessoas está destacada para preencher formulários e você otimizar o tempo de preenchimento em 20% (4min ao invés de 5min), precisará de apenas 8 pessoas para realizar o mesmo trabalho.
Razão #4: Usuário esclarecido fecha mais negócios
Imagine que você vai comprar uma passagem aérea. Digamos que você topa ir ou voltar com um dia de diferença se for mais barato.
Qual dos dois formulários abaixo te guiam melhor na tarefa de escolher a data mais barata?
- O primeiro: clicando em cada dia até achar o preço desejado.
- O segundo: tabela com os menores valores ida e volta em datas próximas.
Lembre-se que você compra quando encontra o melhor preço. A empresa que fizer isso melhor, leva seu dinheiro.
Esse é um exemplo de formulário que dá as informações que o usuário precisa no momento certo para ajudá-lo a realizar uma tarefa — a escolha da viagem.
Razão #5: Bons formulários podem fortalecer relacionamentos
Com a onda de chatbots, formulários estão tomando uma nova cara e podem aumentar significativamente a qualidade do seu relacionamento com seus usuários. Já viu esse formulário de cadastro do https://oiwarren.com/?
E agora que você já sabe que precisa se preocupar com os formulários, seguem as 10 dicas de UI Design
1) Solicite apenas informações que você vai usar
Essa é a dica de ouro e a mais importante desse artigo. Já parou para pensar que você pode estar coletando dados que não servem para nada?
Se preencher um formulário não é agradável, a coisa piora quando o form pede a data de expedição de um documento, por exemplo. Alguém realmente usa essa informação ou só pedem por in-comodidade?
Essa dica pode parecer simples, mas gera enormes oportunidades:
Avalie se você realmente vai usar todas as informações que está pedindo no formulário. Se você não for usar ou souber outra forma automática de obter a mesma informação, não pertube seu querido usuário.
Tive a oportunidade de aplicar essa dica há alguns anos no sistema de peticionamento (pedido) de processos do Supremo Tribunal Federal.
Conseguimos reduzir em 91% o tempo de preenchimento apenas observando como as informações preenchidas eram consumidas pelas unidades internas.
Resumo dos aprendizados das pesquisas que a equipe realizou:
- algumas informações preenchidas não eram utilizadas,
- a grande maioria dos dados eram preenchidos incorretamente, gerando necessidade de revisão e correção de quase tudo que era recebido.
Aí ficou fácil. Resumimos as várias etapas em 3 passos que eram essenciais.
Quer saber como era antes? Pode ir pulando as partes do vídeo… você não terá paciência de ver tudo…
Ainda há muito a melhorar, mas foi um grande passo.
Será que você também não tem essa mesma oportunidade passando agora mesmo na sua frente?
As próximas dicas foram adaptadas de algumas fontes principais
São artigos em inglês que não vão te decepcionar. Pode abrir e ler. Se você não lê inglês, compilei os melhores momentos logo abaixo em português.
2) Você precisa tratar o formulário como uma conversa.
Formulários são chatos por natureza, e se você seguir uma lógica conversacional pode torná-lo um pouco mais agradável. O https://oiwarren.com/ levou isso bem a sério. Viu como o resultado foi legal? Não? Se você pulou o vídeo no início do artigo veja aqui:
3) Ordene o formulário de forma lógica e sequencial
4) Pergunte apenas quando for necessário e evite digitação
5) Faça o teclado do celular facilitar o preenchimento dos campos
Você sabia que apenas mudando o input type dos campos do formulário pode melhorar significativamente a experiência de uso em dispositivos móveis?
Texto, e-mail, telefone, número, senha, data, para cada dado, um teclado diferente.
- input type=”text” mostra o teclado alfabético normal
- input type=”email” mostra o teclado com os botões ‘@’ e ‘.com’
- input type=”tel” mostra o teclado número 0–9
- input type=”number” mostra o teclado com números e símbolos
- input type=”password” oculta os caracteres ao digitar
- input type=”date” mostra o seletor de datas do celular
- input type=”datetime” mostra o seletor de data e hora
- input type=”month” mostra o seletor de mês e ano
6) Os campos devem ter apenas o tamanho necessário
7) Use rótulos acima dos campos, e não do lado
8) Ajude com a formatação adequada
9) Utilize corretamente os elementos de assistência a erros
10) Mais uma coletânea de boas práticas de formatação do artigo "Design Better Forms".
Não vou explicar cada uma. Só de clicar nas imagens acredito que você vai entender. Se não entender, dê uma espiadinha nesse artigo:
Recapitulando
Esse artigo tem o objetivo de sensibilizar sobre:
- como um formulário impacta a vida de simples usuários como você e eu,
- como os formulários impactam as empresas (produtividade, conversão, vendas e faturamento),
- como há materiais legais sobre forms na internet que podem te ajudar.
Dicas de UX, UI, Frontend, Negócios e Softskills
Se você ainda não conhece o canal UX Unicórnio, dá uma passadinha lá e se inscreve para receber as próximas dicas :D
Instagram: http://www.inkstagram.com/uxunicornio
Youtube:
