O uso de formulários online está crescendo a cada dia e o grande desafio é fazer com que os usuários tenham interesse em preenchê-los.
Desde um formulário de login com apenas 2 campos até um formulário de cadastro com 10, é preciso pensar em como esses formulários online será estruturado, quais serão os textos utilizados em cada campo, a disposição dos elementos e as mensagens de sucesso e erro.
Nesse artigo vou compartilhar com você conceitos e dicas para ajudar na construção de formulários online que se encaixem bem dentro da experiência do usuário e o faça querer preencher o formulário considerando os conceitos de usabilidade e UX Writing.
Como formulários online são compostos
Formulários online são compostos por:
- Controles
- Campos de entrada de texto
- Botões
- Textos de transição
- Mensagens de erro
- Mensagens de confirmação
Nem sempre serão utilizados todos esses elementos, mas ao menos 4 deles são utilizados em todos os formulários online: campos de entrada de texto, botões, textos de transição e mensagens de confirmação.
Independente da finalidade do formulário é fundamental que ele seja intuitivo e que dê clareza ao usuário quanto às informações que devem ser colocadas nele.
Veja a seguir mais detalhes sobre cada elemento que compõe os formulários online e como utilizá-lo da melhor forma possível para que o usuário tenha o desejo de preencher o formulário.
Controles
Os controles têm como finalidade informar aos usuários sobre a extensão e o estado de possíveis customizações.
Principais elementos de controle: checkbox, radiobox, switch e controle deslizante.
Por ser um elemento de marcação e não de preenchimento com texto, é necessário informar com clareza ao usuário o nome do controle e seu estado.
O nome do controle deve ser definido de modo a facilitar o reconhecimento por parte do usuário.
O estado do controle deve informar exatamente o está ligado à marcação ou não.
Se estiver utilizando switches para ativar ou desativar configurações, é importante mostrar estado como ligado/desligado e ativo/inativo.
Junto com a definição do estado é preciso definir claramente o nome do elemento, que pode ser Ativar Notificações, Receber avisos por Email.
Caso utilize caixas de seleção (checkbox/radiobox), elas indicam afirmação quando estão marcadas e negação quando estão desmarcadas.
Nesse caso você deve utilizar um nome que tenha um significado claro tanto na afirmativa quanto na negativa para que faça sentido ao usuário e seja compreensível.
Um bom exemplo disso é o famoso “Manter Conectado” utilizado em formulários de login.
O menos comum, mas que não pode ser deixado de lado é o controle deslizante. Ele vai identificar faixas de valores, então é importante que o ponto inicial e o final da faixa selecionada estejam devidamente identificados para o usuário.
Quanto mais reconhecíveis e compreensíveis forem os controles para o usuário, melhor será a usabilidade e proporcionará uma experiência agradável de preenchimento.
![formularios online exemplos de controles](https://www.designcomcafe.com.br/wp-content/uploads/2020/08/formularios-online-exemplos-de-controles.png)
Campos de entrada de texto
Os campos de entrada de texto têm como finalidade ajudar os usuários a fornecerem informações precisas.
Principais campos de entrada de texto: input, select.
Os campos de entrada de texto devem estar sempre acompanhados de rótulos e dicas para facilitar o orientar o usuário quanto ao preenchimento correto.
Para a definição dos textos do rótulo e da dica de cada campo, temos 4 boas opções:
- Nome da informação a ser fornecida
- Exemplo da informação a ser fornecida
- Instrução imperativa sobre o fornecimento a informação
- Orientação sobre como o usuário pode ser bem-sucedido
Usar essas opções de forma consistente ajudará o usuário a confiar que está preenchendo o formulário com a informação correta.
Quanto mais claras forem essas informações, maiores as chances do usuário seguir com o preenchimento do formulário.
Pode ser que o layout onde o formulário será implementado não fique bom se fizer o uso de rótulos para os campos. Então é importante que a dica seja ainda mais clara para orientar o usuário no preenchimento.
Campos de entrada de texto sem rótulos não favorecem a usabilidade e podem tornar o formulário mais difícil de ser compreendido pelo usuário.
Se você tem um formulário de alteração de senha, é provável que ele seja composto por 3 campos de entrada de texto e um botão.
O primeiro campo de entrada de texto tem como rótulo “Senha Atual” e dispensa dica.
O segundo campo é “Nova Senha” e tem como dica “No mínimo 8 caracteres contendo letras e número”.
O terceiro campo é “Confirmar Nova Senha” e tem como dica “Mesma senha digitada no campo anterior”.
Os rótulos são claros e as dicas precisar, o que facilita a vida do usuário e melhora a usabilidade.
![formularios online exemplos de entrada de texto](https://www.designcomcafe.com.br/wp-content/uploads/2020/08/formularios-online-exemplos-de-entrada-de-texto.png)
Botões
Os botões têm como finalidade permitir ao usuário avançar na tarefa ou executar uma ação.
Eles são o texto mais importante do formulário na experiência do usuário, pois ele é que vai direcionar o usuário para a ação, permitindo que ele expresse o seu objetivo.
Botões devem ser facilmente reconhecidos, específicos e exibirem uma ou duas palavras no máximo.
Em alguns casos é possível substituir o texto dos botões por ícones que representem a sua função, mas para isso o ícone precisa transmitir de forma clara a função do botão e a ação que ele irá realizar.
Por exemplo, se você precisa da ação “Voltar para a etapa anterior” em um formulário que tem o preenchimento feito em etapas, pode usar o ícone de voltar ao invés de texto. Para um botão utilizado para salvar dados você pode utilizar a imagem de um disquete (embora disquetes não sejam mais utilizados).
Quanto mais clara a mensagem do botão, melhor, e fica melhor ainda se utilizar um vocabulário que o usuário utilizaria em um diálogo.
Um botão com o texto “Armazenar informações” tem menos clareza que um botão “Salvar Dados”.
O uso de poucas palavras (uma ou duas) nos botões vai permitir ao usuário verificar de forma mais rápida quais são as opções de ação disponíveis.
![formularios online exemplos de botoes](https://www.designcomcafe.com.br/wp-content/uploads/2020/08/formularios-online-exemplos-de-botoes.png)
Textos de transição
Os textos de transição têm como finalidade confirmar que uma ação está em andamento.
Torrey Podmajesrky define muito bem essa questão dos textos de transição:
“Assim como uma pessoa em um balcão de atendimento diria: ‘Um momento enquanto vou buscar’, uma experiência digital também pode usar texto de transição para indicar que recebeu uma solicitação e que será necessário aguardar um instante.”
Os textos de transição não necessitam de nenhuma ação do usuário, ele apenas manterá o usuário informado do que está ocorrendo no processamento das informações.
Por exemplo: carregando dados, enviando informações, processando informações
Geralmente os textos de transição fazem uso de ícones para identificar visualmente o status da operação. Enquanto está carregando exibe uma animação de loading, se processado com sucesso exibe o já conhecido check que parece uma letra V, e se deu algum erro pode exibir o ícone de atenção (placa triangular com sinal de exclamação) ou ícone de erro (circulo vermelho com a letra X dentro).
![formularios online exemplos de textos de transicao](https://www.designcomcafe.com.br/wp-content/uploads/2020/08/formularios-online-exemplos-de-textos-de-transicao.png)
Mensagens de erro
A finalidade das mensagem de erro é ajudar os usuários a chegar onde querem, e, se necessário, indicar que há um problema para alcançarem seu objetivo.
Elas são o ponto mais importante de qualquer experiência para manter a voz da marca e demonstrar empatia pela pessoa que está preenchendo o formulário.
O usuário não gosta de receber uma mensagem dizendo que ele falhou, então na hora de definir a mensagem de erro, tome cuidado para não colocar a culpa no usuário.
Procure colocar as mensagens de erro de forma clara e explicando o que o usuário deve fazer para corrigir o erro e prosseguir.
Uma sugestão é começar a mensagem de erro indicando como resolver o problema e em seguida dar a definição do problema.
![formularios online exemplos mensagens de erro](https://www.designcomcafe.com.br/wp-content/uploads/2020/08/formularios-online-exemplos-mensagens-de-erro.png)
Mensagens de confirmação
As mensagens de confirmação têm como finalidade garantir aos usuários que o progresso ou os resultados esperados em relação ao preenchimento do formulário estão concluídos.
Elas podem aparecer de forma passiva na experiência do usuário, enquanto ele segue a navegação ou então como parte do processo de navegação.
De forma passiva seria uma mensagem na tela onde o usuário clicou no botão para concluir o processo, sem o carregamento de uma nova página.
Ou então levando o usuário para uma nova página com a mensagem de confirmação.
Essa última opção é muito comum no fluxo utilizado para páginas de capturas de leads em campanhas de marketing, pois na página onde é exibida a mensagem de confirmação, também existem outras informações e conteúdos.
Em relação ao texto das mensagens de confirmação, o padrão básico é: usar o pretérito do verbo ou sintagma verbal que descreva de forma adequada a ação.
Por exemplo, se o texto de transição exibido ao clicar no botão “Salvar” para o formulário de troca de senha era “Salvando nova senha”, a mensagem de confirmação deve ser “Senha salva com sucesso” ou apenas “Senha Salva”.
Se o único foco do usuário for a mensagem de confirmação, o texto dela pode ser uma única palavra, como por exemplo “Salvo”.
São as mensagens de confirmação que finalizam a experiência de preenchimento de formulários online na jornada do usuário.
![formularios online exemplos mensagens de confirmacao](https://www.designcomcafe.com.br/wp-content/uploads/2020/08/formularios-online-exemplos-mensagens-de-confirmacao.png)
Espero que esse artigo possa ajudar você a construir formulários capazes de despertar nos usuários o desejo de preenchê-los.
Se tiver alguma dúvida, deixe nos comentários, será um prazer respondê-la!