Muito se ouve falar tanto em User Experience (UX), que muitas vezes é difícil aceitar que ainda hoje preencher um simples formulário online possa ser um processo não amistoso. Não é todo mundo que tem a mesma mentalidade e cuidado na hora de pensar a experiência online das outras pessoas.
Estudos mostram que quando formulários seguem princípios básicos de usabilidade, o tempo de preenchimento reduz drasticamente e as chances dos usuários terminarem e submeterem os dados sem a ocorrência de erros são quase duas vezes maiores (78% em formulários que seguem guidelines de usabilidade vs. 42% em formulários que as negligenciam).
Veja abaixo 10 boas práticas em formulários publicados no mesmo estudo:
O matemático Blaise Pascal diz que “Ficou mais longo do que deveria porque não tive tempo de deixar mais curto”. A frase também se aplica a escrita — e a formulários online. Eliminar campos desnecessários requer tempo, mas, as vantagens para os usuários faz esse tempo extra valer a pena. Considere coletar alguns daqueles dados mais tarde, ou de uma outra forma. Nem tudo precisa ser pedido de uma vez só.
Uma solução com um cadastro único, faria com que informações previamente cadastradas, como dados pessoais do usuário, não fossem pedidas novamente.
Use rótulos para descrever os campos imediatamente próximos. Evite espaçamento ambíguo, onde os rótulos estão à mesma distância de vários campos de formulário diferentes. Se seu formulário pede informações de tópicos diferentes, divida-o em seções e agrupe os campos de forma que faça mais sentido para o usuário — ao invés de tratar todos os campos como uma coisa só.
Usar um layout de múltiplas colunas pode distrair o usuário ao invés de deixá-lo focado em uma tarefa só. Empilhe os campos sempre que possível. A exceção para essa regra são campos extremamente curtos (como CEP, ou Estado), que podem ser colocados lado a lado.
Toda vez que apresentar campos, faça na sequência lógica. Quando for pedir os dados de um cartão de crédito, por exemplo, peça primeiro o número do cartão, depois a data de validade, depois o código de segurança — já que é também nessa ordem que o usuário vai ler esses dados quando estiver com o cartão de crédito em mãos. Para campos com múltiplos valores, considere deixar os valores mais frequentemente usados no topo da lista.
Esse é óbvio, mas muitos desenvolvedores ainda esquecem: quando for usar textos claros, tenha certeza que a cor escolhida tem um mínimo de contraste com o fundo da página para evitar problemas de legibilidade e, consequentemente, de acessibilidade.
Evite dropdowns quando for apresentar somente 2 ou 3 opções (que poderiam ser melhor visualizadas com radio buttons). Os campos de texto devem ser do tamanho aproximado da informação que você espera que os usuários incluam ali.
Primeiro, elimine ao máximo os campos opcionais — se eles são opcionais, por que você está pedindo? Tente limitar o número de campos opcionais a apenas 1 ou 2, e identifique claramente para os usuários que eles são opcionais. Antes deles preencherem o campo, obviamente.
Se você espera que o usuário crie um password, não espere que ele adivinhe os requisitos do seu sistema para a criação do mesmo. O mesmo serve para sintaxe, pontuação, espaços em branco para telefones ou cartões de crédito. O ideal é que o formulário aceite qualquer tipo de formatação e o usuário não tenha nem que se preocupar com isso.
O risco do usuário clicar acidentalmente no botão limpar e perder tudo que já preencheu é grande em virtude deste tipo de problema de colocar um botão desses no formulário — e considere a hierarquia visual dele em relação ao botão de “Enviar”. Pense bastante. Pense mais. Em que ano estamos?
Erros devem ser indicados através de vários affordances visuais diferentes — não somente mudança de cor. Use ícones, fontes em negrito, bordas, setas. Ser sutil não é uma boa ideia quando erros acontecem e o usuário já está frustrado com o seu produto. Preferencialmente próximo ao local de ocorrência e não no topo de um formulário que irá apenas surgir após um envio.
