it-swarm-pt.com

Qual é a melhor maneira de destacar um campo obrigatório em um formulário da Web antes do envio?

Isso parece subjetivo, e é; um cliente meu gostaria que eu destacasse os campos obrigatórios nos formulários da Web em seu aplicativo com um asterisco vermelho e estou procurando uma alternativa, já que asteriscos vermelhos geralmente significam que há um erro para mim.

Como faço para informar ao usuário quais campos são obrigatórios? (Um por resposta, por favor.)

PDATE: Isso indica quais campos são obrigatórios antes de ocorrer a validação/postagem.

46
Ryan Shripat

Como 95% de todos os campos são obrigatórios no techinsurance.com, minha decisão foi simplesmente usar negrito para indicar que um campo é obrigatório e escrever a Palavra (opcional) ao lado dos campos opcionais para reduzir a desordem.

por exemplo.

Primeiro nome

Sobrenome

Número de telefone comercial

Número de celular (opcional)

E talvez tão importantes sejam as próprias mensagens de erro. Eu os tornei o mais óbvio possível ...

campo obrigatório ...

alt text

com erro ...

alt text

Essas decisões foram tomadas após anos de ter um site com os asteriscos vermelhos semi-tradicionais para indicar um campo obrigatório. Esses asteriscos funcionavam a maior parte do tempo. O problema foi quando ocorreu um erro de validação. Algumas de nossas páginas podem ser muito longas e os erros de validação em vermelho não se destacariam na página o suficiente quando ela já estava cheia de asteriscos vermelhos. Eu sei disso porque, ocasionalmente, as pessoas ficavam frustradas o suficiente para nos ligar sobre isso. Mas todas as indicações mostram que o novo design (acima) corrigiu o problema.

57
Steve Wortham

Eu sinto que a melhor maneira de fazer isso é realmente soletrar a palavra "obrigatório" após o campo de entrada. Esse sentimento também se reflete no design de formulários da Web de Luke Wroblewski: http://www.lukew.com/ff/entry.asp?725

Enquanto o link de exemplo fala sobre campos opcionais em vez de campos obrigatórios, acredito que o principal permaneça o mesmo - os usuários preferem que ele seja escrito por eles, em vez de incluir indicadores visuais.

Além disso, algo para observar pode estar indicando os campos que são opções em vez dos campos obrigatórios. Para mim, qualquer que seja a exceção, é a que deve ser observada. Por exemplo, se você tiver 10 campos e 8 deles forem obrigatórios, em vez de escrever "Necessário" para 8 campos, escreva "Opcional" para as 2 exceções. Mas se apenas 2 forem necessários, escreva "Obrigatório" por esses 2, pois eles são a exceção.

9
RussellUresti

Essa pergunta pode ser mais problemática do que você imagina.

Por exemplo, alguns pôsteres sugeriram o uso de asterisco para indicar "obrigatório", o problema é que alguns sites realmente usam o inverso e colocam um asterisco ao lado dos campos opcionais. Os usuários não sabem explicitamente se um asterisco é um campo "obrigatório" ou opcional, olhando de relance e precisam investigar melhor, interrompendo o fluxo, frustrando-os com o processo do formulário e, em alguns casos, pode levar ao abandono do formulário. juntos.

A resposta de RussellUresti, reiterando a pesquisa de Luke Wroblewski em "Web Form Design" para simplesmente escrever "obrigatório" próximo aos campos obrigatórios, também foi (em meus 10 anos de experiência) a abordagem que produziu o maior rendimento nos formulários e levou à menor confusão.

Relacionado e outra coisa a considerar, se um campo de formulário for opcional, você pode usar a lógica para obter a resposta sem perguntar ao usuário?

Por exemplo, se você precisar saber se o usuário é Masculino ou Feminino, em alguns casos, é possível inferir uma resposta pelo título escolhido por seu nome (senhorita, sra. Etc implica mulher) e remove a pergunta do usuário.

Outro ponto a considerar é como campos de endereço, se você pode solicitar o código postal e fazer uma pesquisa de código postal, mostrando apenas os campos de endereço se o usuário optar por inserir manualmente o endereço ou se a pesquisa de código postal falhar, você poderá evitar muitos dados opcionais isso pode fazer com que o formulário pareça mais longo do que realmente é e fazer com que o usuário saia.

Na minha experiência, muitas vezes, se um campo é opcional, há um grande argumento para remover o campo completamente. Obviamente, isso não é prático o tempo todo, mas alguns casos podem ser e ajudarão a reduzir a confusão visual, seja qual for a abordagem que você decida adotar.

4
Vincent Pickering

Outra solução é dividir o formulário em duas seções, reunindo todos os campos obrigatórios e rotulando a seção inteira como "Necessário".

3
Chase Seibert

A melhor maneira que eu encontrei é colocar um asterisco dentro e alinhado à direita.

Example of UX

3
Nijikokun

Este é certamente o lugar errado para postar isso, mas não negligencie uma definição estendida de "requisito" - isto é, quando o requisito de um elemento é condicional ao uso (seleção, preenchimento etc.) de outro elemento.

Exemplo, o campo A é opcional. No entanto, se o campo A for realmente preenchido pelo usuário final, o campo B será obrigatório.

Como anotamos ou agrupamos os campos dos elementos para indicar isso? Devemos?

PS. Lembre-se de que apenas a cor é um canal não confiável para transmitir informações. Alguns de nós não conseguem distinguir facilmente entre vermelho e verde, e o vermelho pode transmitir coisas diferentes para pessoas de culturas diferentes.

3
CSSian

Asteriscos vermelhos são frequentemente usados ​​conforme necessário, para que seu cliente não esteja realmente errado. Se você escolher outra cor, como laranja ou algo que se encaixe no design do site, tudo bem.

2
James Buckley

Sou parcial à filosofia simples do asterisco.

Em uma observação relacionada tangencialmente, aqui está um post que escrevi há algum tempo com um exemplo de criação de marcadores de erro personalizados para campos que eram obrigatórios e não preenchidos. É bastante específico da tecnologia (Rails, Formtastic, jQuery), mas o conceito é facilmente adaptável.

http://thestrake.com/post/459205965/show-n-tell-friday-custom-form-error-markers

1
blackant

Em primeiro lugar, como presumo que você é o especialista em UX, seu cliente não deve lhe dizer como resolver problemas de UX, eles devem chegar até você com o problema a ser resolvido, não a solução.

Pensando nisso da perspectiva do usuário, não podemos assumir que o usuário saiba o que significa um asterisco. Em caso de dúvida, escreva o mais claramente possível usando a linguagem escrita. Eu tenho visto o asterisco usado cada vez menos na Web e geralmente é seguido por uma explicação na parte inferior de uma página quando usado. Uma explicação mais simples é usar apenas 'Necessário'. Os leitores de tela também entenderão isso e tornarão seu site mais acessível.

Você também pensou em aplicar os princípios de divulgação progressiva nesse cenário? Os campos que não são obrigatórios devem estar na tela - eles podem ser ocultados ou mostrados ao usuário posteriormente? Dessa forma, há menos sobrecarga de informações e todos os campos necessários são apresentados, eliminando, portanto, a necessidade de um 'obrigatório'. Mais algumas informações sobre a psicologia por trás dessa explicação: https://www.nngroup.com/articles/progressive-disclosure/

0
lg365

Vi padrões de usabilidade que ditam o contrário - que todos os campos são obrigatórios, a menos que estejam marcados com o texto (optional). Se os campos obrigatórios não forem preenchidos após a tentativa de envio, eles deverão ser marcados com um texto explicando o que está errado.

0
awe

Como a maioria dos tópicos de usabilidade, isso realmente depende - principalmente de quantos campos estão incluídos no seu formulário e da frequência dos campos obrigatórios no seu formulário

Normalmente, prefiro um asterisco vermelho simples adjacente a cada campo obrigatório e, em seguida, uma nota de rodapé "* - campo obrigatório".

Além disso, eu gostaria de destacar a borda do campo em vermelho se o campo permanecer vazio ou inválido após um evento onBlur(). O mesmo destaque se o usuário tentar enviar o formulário sem preencher todos os campos obrigatórios. O destaque da borda desaparece em um evento javascript onFocus().

0
wnathanlee