it-swarm-pt.tech

Validação de campo obrigatório

Como a validação de campo necessária deve ser tratada visualmente?

Nota: assume que o asterisco está vermelho

*Name:[_______________]

ou

Name:*[_______________]

ou

Name: [_______________]*

ou

Name: [____red bg____  ]

ou

Name(<- font color red): [_______________]

ou

Você me diz um jeito melhor!

16
rick schott

Nunca há uma resposta certa ou errada com esse tipo de pergunta e muito depende da personalidade dos usuários (engenheiros versus usuários avançados versus tia Alice que nunca usaram um computador) e do contexto.

Uma regra geral é usar

label [input   ] [validation       ] 

Usando a área de validação para um asterisco vermelho para indicar um campo obrigatório ou uma mensagem de erro após a validação do formulário (ou ambos).

O site Simply Accessible possui uma boa e concisa redação nos campos obrigatórios aqui: http://simplyaccessible.com/article/required-form-fields

11
Bil Simser

Depende muito de vários fatores.

  1. Como regra geral: deve haver um indicação de texto (asterisco) e uma indicação visual, como, por ter apenas uma segunda olhada no formulário, você deve entender quais campos são obrigatórios. Por exemplo, você pode adicionar um asterisco ao lado do rótulo (melhor se o formato for ligeiramente diferente do próprio rótulo) e adicionar uma borda mais intensa aos campos obrigatórios.
  2. Como segunda regra geral, tente muito se você pode simplificar um formulário: muitas vezes existem maneiras de minimizar formulários e evitar todos os campos opcionais. Por exemplo, formulários de registro minimalistas podem solicitar apenas o e-mail e deixar todo o resto para acompanhamento e widgets como "Seu perfil está 90% completo".
  3. Seja consistente em todo o site, isso é realmente importante, porque não força o usuário a aprender todas as vezes.
  4. Observe que, se o asterisco estiver alinhado juntos na mesma coluna, é um pouco melhor (mas levemente, geralmente é evitado tornar o formulário mais agradável, os formulários Nice executam melhor que os piores).
  5. Se a maioria dos elementos do formulário for obrigatória, provavelmente será melhor marcar os opcional.

Pegadinhas:

  1. Não confie apenas nas cores (problemático se você não consegue ler bem as cores).
  2. Não confie apenas no asterisco (você força o usuário a pensar no que é obrigatório e no que não).
  3. Não quebre o formulário: embora pareça fora do escopo desta pergunta, geralmente um formulário polido e alinhado verticalmente com rótulos claros ajuda muito no entendimento de campos obrigatórios: como uma única digitalização vertical é mais fácil, também é mais fácil detectar campos obrigatórios.
6
Folletto

Eu pensei que você poderia estar interessado nas pesquisas mais recentes do Baymards: http://baymard.com/blog/required-optional-form-fields

O resumo é o seguinte:

  • Ao comparar os 100 principais processos de pagamento nos EUA, apenas 9% dos sites marcaram explicitamente os dois tipos de campos
  • Ao denotar explicitamente os campos opcionais e obrigatórios, o usuário não é forçado a inferir nada e pode permanecer focado apenas no campo que está preenchendo e, consequentemente, é capaz de progredir sem problemas em todo o campo do formulário por campo, sem nenhum retorno. digitalização de campos anteriores.
  • O erro mais comum - cometido por 63% dos 100 principais caixas de comércio eletrônico - é indicar apenas um dos tipos
  • Ao testar caixas móveis, 75% dos participantes do teste apresentaram problemas graves de usabilidade de formulários em sites que não conseguiram marcar claramente os campos obrigatórios e opcionais.

E a recomendação deles:

enter image description here

2
DLM

Manter o asterisco pode ser útil, e não simplesmente um indicador baseado em cores (+1 para acessibilidade). Jogue também um atributo de título no asterisco, por exemplo, <span title = "Campo obrigatório"> * </span>

Provavelmente, isso é necessário para modelá-lo adequadamente

Não acho que a posição do asterisco seja crítica - apenas seja consistente!

0
cbosco

Eu acho que já fiz tudo isso em um ponto ou outro. O que eu caí mais recentemente é algo que exige mais trabalho, mas acho que é melhor para o usuário. Basicamente, você fornece uma pequena caixa popover vermelha com uma seta atarracada apontando em direção ao campo em questão, informando que é um campo obrigatório. Exibi-lo acima do campo em uma cor brilhante, acho que consegue entender bem o assunto sem alterar o fluxo do restante do documento com conteúdo inserido ou texto em negrito.

Fica mais complicado se você tiver vários erros e, nesse ponto, exibir vários popovers é muito desorganizado, então você decide exibir apenas o primeiro erro ou apenas um erro de cada vez e, quando um dos conflitos for resolvido, o próximo erro será resolvido. .

0
user306