it-swarm.cn

在提交之前在网络表单上突出显示必填字段的最佳方法是什么?

这似乎是主观的,而是事实。我的一个客户希望我用红色星号突出显示应用程序中Web表单上的必填字段,并且我正在寻找一种替代方法,因为红色星号通常意味着我有错误。

如何让用户知道哪些字段是必需的? (请每个答案一个。)

PDATE:这表示需要哪些字段之前发生验证/回发。

46
Ryan Shripat

由于techinsurance.com要求所有字段的95%,因此我的决定是简单地使用粗体表示必填字段,并在可选字段旁边写上Word(可选)以减少混乱。

例如.

名字

公司电话号码

手机号码(可选)

错误消息本身也许同样重要。我让它们越明显越好...

必填字段...

alt text

有错误...

alt text

这些决定是在拥有数个带有半传统红色星号的网站表示必填字段之后数年做出的。这些星号大多数时候都起作用。问题是何时出现验证错误。我们的某些页面可能很长,当红色验证错误已经被红色星号弄乱时,在页面上就不会显得特别醒目。我知道这一点是因为有时人们会感到沮丧,足以打电话给我们。但是所有迹象表明,新的(上面的)设计解决了该问题。

57
Steve Wortham

我认为最好的方法实际上是在输入字段后拼出“ required”一词。这种想法也反映在Luke Wroblewski的Web表单设计中: http://www.lukew.com/ff/entry.asp?725

尽管示例链接只讨论了可选字段,而不是必填字段,但我相信原理仍然是相同的-用户更喜欢为他们写出来,而不是包含视觉指示符。

此外,要查看的内容可能表明是选项字段,而不是必填字段。对我而言,应以例外为准。例如,如果您有10个字段,并且其中有8个是必填字段,则不要为8个字段写“ Required”,而为2个异常写“ Optional”。但是,如果只需要2个,则用这2个写“ Required”,因为它们是例外。

9
RussellUresti

这个问题可能比您最初想象的要麻烦得多。

例如,一些张贴者建议使用星号表示“必填”,其问题是某些网站实际上使用反向符号,并在可选字段旁边放置一个星号。用户通过浏览并不能明确知道星号是“必填”字段还是可选字段,因此必须进一步调查,破坏其流程,使他们对表单处理感到沮丧,并且在某些情况下可能导致放弃所有表单一起。

RussellUresti的答复重申了Luke Wroblewski在“ Web表单设计”中的研究,即在必填字段旁边简单地写“ required”也是一种方法(根据我的十年经验),这种方法在表单上产生了最高的吞吐量,并且使混乱最少。

相关和其他需要考虑的内容,如果表单字段是可选的,您是否可以使用逻辑自己获得答案而无需询问用户?

例如,如果您需要知道用户是男性还是女性,则可以在某些情况下根据用户为其姓名选择的标题(小姐,太太等代表女性)来推断答案,并从用户中删除问题。

要考虑的另一点是地址字段之类的内容,如果您可以询问邮政编码并进行邮政编码查找,则在用户选择手动输入地址时仅显示地址字段,或者如果邮政编码查找失败,则可以避免大量可选数据可能会使表单看起来比实际更长,并导致用户离开。

根据我的经验,很多时候如果字段是可选的,则有很大的理由完全删除该字段。显然,这并非一直都是可行的,但是在某些情况下,无论您决定采用哪种方法,它都可能会并且将有助于减少视觉混乱。

4
Vincent Pickering

另一个解决方案是将表单分为两部分,将所有必填字段放在一起,然后将整个部分标记为“必需”。

3
Chase Seibert

我发现最好的方法是在星号内并右对齐。

Example of UX

3
Nijikokun

这肯定是发布错误的地方,但是不要忽略对“ requiredness”的扩展定义-也就是说,当一个元素的要求取决于另一个元素的使用(选择,填充等)时。

例如,字段A是可选的。但是,如果最终用户确实填写了字段A,则需要字段B。

我们将如何注释或分组元素字段以表明这一点?我们应该吗?

PS。请记住,仅靠颜色是传递信息的不可靠渠道。我们中有些人无法轻易地区分红色和绿色,红色可能将不同的东西传达给不同文化的人们。

3
CSSian

红色星号经常按要求使用,因此您的客户确实没有错。如果您选择其他颜色,例如橙色或适合网站设计的颜色,那应该没问题。

2
James Buckley

我偏爱简单的星号哲学。

在与切线相关的注释上,这是我不久前写的一篇帖子,其中包含为需要但未填写的字段创建自定义错误标记的示例。它是特定于技术的(Rails,Formtastic,jQuery),但是这个概念很容易适应。

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

1
blackant

首先,因为我假设您是UX专家,所以您的客户不应告诉您如何解决UX问题,而是应该向您提出要解决的问题,而不是解决方案。

从用户的角度考虑它,我们不能假设用户知道星号的含义。如有疑问,请使用书面语言清楚说明。我一直看到星号在网络上使用的越来越少,使用时通常在页面底部附有解释。一个更简单的解释是仅使用“必需”。屏幕阅读器也会对此进行挑选,这将使您的网站更易于访问。

您是否还考虑过在这种情况下应用渐进式披露原则?不需要的字段是否应该出现在屏幕上-可以在以后将其隐藏或显示给用户吗?这样,减少了信息过载,并且显示了所有需要的字段,因此根本不需要“必需的”字段。有关此解释背后的心理学的更多信息: https://www.nngroup.com/articles/progressive-disclosure/

0
lg365

我已经看到了指示相反的可用性标准-除非标有文本(optional),否则所有字段都是必填字段。如果尝试求和后未填写必填字段,则应在其中标出说明错误之处的文字。

0
awe

像大多数可用性主题一样,它实际上取决于-主要取决于表单中包含多少个字段以及表单中必填字段的频率

我通常希望在每个必填字段旁边加上一个简单的红色星号,然后在脚注“ *-必填字段”旁边添加一个星号。

另外,如果在onBlur()事件后字段仍然为空或无效,我想用红色突出显示字段边框。如果用户尝试提交表单而不填写所有必填字段,则同样突出显示。突出显示的边框在javascript onFocus()事件上消失。

0
wnathanlee