it-swarm.cn

必填字段验证

应如何以视觉方式处理要求的现场验证?

注意:假设星号为红色

_*Name:[_______________]
_

要么

_Name:*[_______________]
_

要么

_Name: [_______________]*
_

要么

_Name: [____red bg____  ]_

要么

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

要么

你告诉我更好的方法!

16
rick schott

对于这类问题,永远不会有对或错的答案,并且很大程度上取决于您的用户角色(工程师,高级用户,从未使用过计算机的爱丽丝姨妈)和上下文。

一般规则是使用

label [input   ] [validation       ] 

在验证表单(或同时验证两个表单)后,使用验证区域的红色星号表示必填字段或错误消息。

简单访问网站在此处的必填表格字段上写得很好,简洁明了: http://simplyaccessible.com/article/required-form-fields

11
Bil Simser

这很大程度上取决于各种因素。

  1. 作为一般规则:应该有一个文本指示(星号)和一个视觉指示,例如仅1秒钟就可以看到表格能够了解需要哪些字段。例如,您可以在标签的侧面添加一个星号(如果格式与标签本身稍有不同,则更好),并在必填字段中添加更强烈的边框。
  2. 作为第二个一般规则,请尝试查看是否可以简化表单:通常,有一些方法可以最小化表单并避免使用所有可选字段。例如,极简注册表格可以只询问电子邮件,而将其他所有内容留给后续活动和小部件,例如“您的个人资料已完成90%”。
  3. 在所有网站中保持一致,这一点非常重要,因为它不会强迫用户每次都学习。
  4. 请注意,如果在同一列上将星号对齐在一起,效果会稍好一些(但通常会避免使窗体更好,尼斯窗体会更好)比更差的)。
  5. 如果表单中的大多数元素都是必填元素,则最好标记可选

陷阱:

  1. 不要仅仅依靠颜色(如果您不能很好地阅读颜色,那就麻烦了)。
  2. 不要仅仅依靠星号(您强迫用户考虑什么是强制性的,什么不是强制性的)。
  3. 不要四舍五入:尽管看起来似乎超出了这个问题的范围,但通常是经过抛光,垂直对齐且带有清晰标签的表单有助于理解必填字段:由于单个垂直扫描更容易,因此也更容易检测必填字段。
6
Folletto

我认为您可能对Baymards最新研究感兴趣: http://baymard.com/blog/required-optional-form-fields

摘要是:

  • 在对美国排名前100位的结帐流程进行基准测试时,只有9%的网站明确标记了这两种字段类型
  • 通过显式表示可选字段和必填字段,用户不必强制推断任何内容,而是可以专注于他们正在填写的字段,因此能够在整个表单字段中无缝地前进,而无需任何来回操作扫描以前的字段。
  • 最常见的错误-由前100名电子商务结帐中的63%所犯-仅代表其中一种类型
  • 测试移动结帐时,有75%的测试对象在无法清楚标记必填字段和可选字段的站点上遇到了严重的表单可用性问题。

和他们的建议:

enter image description here

2
DLM

保留星号可能会有用,而不仅仅是基于颜色的指示符(可访问性为+1)。同样在星号上添加title属性,例如<span title =“必填字段”> * </ span>

无论如何,要适当设置样式,这可能是必要的

我认为星号的位置并不重要-保持一致!

0
cbosco

我认为我已经在一件事或另一件事上做到了所有这些。我最近遇到的问题是需要更多的工作,但我认为对用户来说更好。基本上,您会给一个红色的弹出框,上面有一个粗短的箭头,指向相关字段,告诉他们这是必填字段。我认为以明亮的颜色将其显示在字段上方,可以很好地理解这一点,而不会更改带有插入内容或加粗文本的文档其余部分的流程。

如果您遇到多个错误,这时显示多个弹出窗口非常混乱,那么情况将变得更加复杂,因此,您决定只显示第一个错误,或者一次只显示一个错误,一旦解决了一个冲突,则显示下一个错误。

0
user306