Validação de campo obrigatório

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.

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:

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!

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. .