7 segredos para projetar grandes formulários
Quase todo design de site inclui algum tipo de formulário. Desde a simples coleta de endereços de e-mail para inscrição em um boletim informativo ou notificação para formulários de cobrança de pagamento integral, é imperativo que você crie um formulário fácil de usar e entender.
Os padrões de design de formulários estão evoluindo também. Embora muitos formulários usem várias colunas e solicitem muitas informações, a maioria das práticas recomendadas sugere manter os formulários o mais simples possível. E há muito para o design também. Uma boa forma é digitalizável, não requer muita digitação e inclui rotulagem e formatação inteligentes para ajudar os usuários a preencher formulários corretamente na primeira vez.
Aqui estão alguns segredos para garantir que você esteja criando um formulário que os usuários realmente preencham.
1. Facilite a digitalização e leitura
Você sabe que os usuários verificam sites para coletar informações e determinar quais ações eles tomarão ou se o conteúdo e o design os interessam ou não. O mesmo acontece com as formas. O usuário deve saber quais informações são necessárias rapidamente e fornecer uma explicação clara do que é o formulário e como enviá-lo.
Um formulário altamente scannable inclui o seguinte:
- Contraste: o texto precisa ser curto e fácil de ler. Evite muita cor e mantenha-se fiel às tradicionais combinações de luz em texto claro.
- Agrupamento e espaço: Agrupe informações semelhantes em formulários mais longos. Ao coletar informações de pagamento, por exemplo, agrupe informações do cliente, informações de pagamento e informações de envio. Três blocos mais curtos são mais fáceis de digerir do que um longo. Use o espaçamento inteligente para que as etiquetas sejam conectadas ao campo que elas explicam, em vez de espaçamento uniforme entre o texto e os elementos de campo.
- Acabamento claro / call to action : Faça o botão grande e fácil de ver. A microcópia dentro do botão deve informar aos usuários o que acontecerá, como "enviar", "pagar agora" ou "avançar para a próxima etapa". Lembre-se de fechar o ciclo de feedback e informar aos usuários quando um formulário é enviado corretamente.
2. Considere etiquetas flutuantes
Tem havido muito debate sobre se deve ou não usar texto de sugestão dentro de campos de formulário. O principal problema é que muitas vezes esse texto não desaparece com um clique e os usuários precisam excluí-lo ativamente para começar a digitar. Isso é estranho.
Além disso, o Nielsen Norman Group encontrado os campos em branco podem chamar a atenção e ajudar os usuários a inserir informações mais claramente.
Se você sentir necessidade de usar dicas, considere uma solução interativa - rótulos flutuantes. Inclua suas informações de rótulo nos campos do formulário para que ele pareça com o texto do espaço reservado, mas permita que o texto seja animado e mude para a posição superior esquerda quando o usuário passar por cima ou clicar no campo. O rótulo ou dica nunca desaparece e não atrapalha o usuário tentando preencher o formulário. (Além disso, a pequena animação é uma surpresa divertida para os usuários.)
3. Use máscaras de campo
As máscaras de campo podem fornecer algumas das mesmas pistas e dicas de forma, mas sem atrapalhar a usabilidade. Uma máscara de campo só aparece quando um usuário ativa um campo e fornece uma pista adicional de verificação sobre quais informações são necessárias. A máscara pode ajudar ainda mais o usuário ao formatar automaticamente as informações em um esforço para evitar erros que eliminarão o formulário no envio.
Um bom exemplo de uma máscara de campo em ação é com números de telefone. Considere as várias opções de formato:
- (000) 000-0000
- 000-000-0000
- 0000000000
Como um usuário sabe qual deles irá funcionar? O campo de formulário irá especificar e ajustar o formato como um usuário digita, então ele não precisa pensar sobre isso e só precisa digitar números. (Isso também evita o incômodo de ter que alternar entre os teclados em um dispositivo móvel.)
4. Faça Formulários Amigáveis ao Teclado
Você não tem como saber em qual tipo de dispositivo o usuário encontrará seu formulário, mas deve ser igualmente fácil de preencher de qualquer maneira. Considere todos os diferentes tipos de teclados que podem enviar informações para o formulário e ajustar os campos para detectar e usar a opção apropriada.
Nos desktops, os usuários devem poder inserir um formulário e preencher cada campo sem precisar clicar em um mouse. Avance automaticamente de um campo para outro ao concluir ou use as guias ou insira para se mover. W3.org tem um conjunto sólido de recomendações de teclado para você seguir.
Em dispositivos móveis, combine o tipo de teclado com os dados necessários. Se a entrada for para letras, exiba o teclado alfa; para números, exiba a opção numérica. Do Google: “Os usuários de aplicativos apreciam aplicativos que fornecem um teclado apropriado para entrada de texto. Certifique-se de que isso seja implementado de forma consistente em todo o aplicativo, em vez de apenas para determinadas tarefas, mas não para outras. ”
5. Opte pelo Formato Vertical
Formulários verticais são mais fáceis para usuários do que vários formatos de coluna. A regra de melhores práticas é garantir que todos os campos possam caber na tela sem rolar no formato de cima para baixo.
A única exceção é para formulários super curtos, em que o usuário só precisa digitar um endereço de e-mail ou nome e endereço de e-mail. Duas colunas lado a lado seguidas por um botão de call to action podem funcionar bem nessa situação, desde que a caixa de e-mail seja longa o suficiente para que os usuários vejam todas as letras do endereço.
Lembre-se de ordenar os elementos logicamente de forma vertical também. Se você estiver coletando nome, sobrenome, endereço de e-mail e cor de cabelo, faça isso da seguinte maneira.
6. Limite de digitação
Use tantas soluções de preenchimento quanto possível com formulários. Nada é mais agradável do que adicionar um endereço e, depois dos primeiros toques, a API do Google entra em ação e sugere opções de endereço.
Isso faz três coisas:
- Isso fica mais fácil para os usuários, principalmente no celular.
- Isso ajuda a limitar o número de campos necessários.
- Isso pode ajudar a eliminar alguns erros do usuário, como erros de digitação.
Considere a mesma coisa com endereços de e-mail, de modo que os usuários recebam domínios de e-mail populares após o símbolo @. Quando um usuário digita [email protected] …. o campo sugere automaticamente [email protected] .
7. Mantenha-o curto e doce
Você será tentado a pedir aos usuários muitas informações em formulários. Resista ao impulso!
Apenas peça informações vitais em formulários. Há uma maior probabilidade de os usuários preencherem formulários que exigem menos comprometimento. Se precisar de mais informações posteriormente, você poderá enviá-las por email da sua lista, solicitando detalhes adicionais. (Como alguém que já optou por participar, é mais provável que o usuário interaja com você por mais tempo.)
Evite campos opcionais. Não peça informações redundantes. Não use vários campos onde você poderia usar um (números de telefone, por exemplo).
Conclusão
Dê aos usuários algo em troca do preenchimento de um formulário. Torne divertido ou interessante. Obrigado o usuário.
Criar um formulário fácil de ler e fácil de usar aumentará suas chances de coletar dados e transformar um visitante do site em um usuário recorrente.