it-swarm.cn

如果验证不完整,是否应该禁用“继续”按钮?

在表单中,我们经常会看到“继续”按钮处于非活动状态,直到所有必填字段都填写完毕:

mockup

下载bmml源 –使用 Balsamiq Mockups 创建的线框

这实际上是对用户的帮助还是阻碍?

我认为Pro可以为用户提供视觉指示,表明他们还没有完成填写表格或处理错误(因为即使进行了内联验证,如果用户从未真正与他们进行过互动,他们也不会被告知一个字段,因此此时不会显示任何错误)。

但是,这样做的主要缺点(我也已经在可用性测试中证实了这一点)是,让用户感到困惑的是,为什么他们不能单击按钮。

在验证完成之前禁用继续按钮的模式实际上会带来负面的用户体验吗?

99
JonW

捕获的信息类型和所需字段数

这实际上取决于您要查询的信息的类型和范围以及需要填写的字段数:

我已经在登录和密码创建中成功测试并使用了此模式。我认为,由于界面是如此简单,并且所需字段的数量受到限制,因此对于激活继续按钮所需的信息没有任何歧义。

(我认为)用户通常以任务为中心,因此首先着手处理任务,然后再通过采取行动来完成任何任务。

例如,考虑具有特定密码要求(我为之设计的情况)的创建密码页面的情况。在这种特殊情况下,我禁用了继续按钮,直到所有密码规则都得到满足为止,警告是用户在键入新密码并看到输入满足所有密码要求时需要获得视觉反馈。

系统应始终在合理的时间内通过适当的反馈使用户了解发生的情况。

来源: 用户界面设计的10种可用性启发法

下面是该方法的一个很好的示例,该方法还结合了游戏化逻辑,您可以测试真实的东西 这里 和其他变体:

enter image description here


错误预防

通常,我会尽量避免(在可能的情况下)错误消息,这些错误消息会使用户感到沮丧并削弱其信心。因此,与其尝试通过使继续按钮保持活动状态来显示错误消息,不如尝试在可能的情况下主动传达有关必填字段的提示和信息。

精心设计可比错误消息更好,它可以防止问题从一开始就发生。消除容易出错的条件,或者检查条件,并在用户执行操作之前向其提供确认选项。

来源: 用户界面设计的10种可用性启发法


内联验证:在上下文中提供错误消息

下面是带有禁用按钮的简单表单的另一个 最佳示例 ,字段已内联验证,禁用按钮“摇动”以指示表单不完整。另外,关于您的观点:

即使进行了内联验证,也不会通知用户他们是否从未真正与某个字段进行交互,因此此时用户不会显示任何错误。

与表单的任何交互都会转换为进度(刻度)或(内联错误消息)。唯一不起作用的情况是,用户单击“注册”而不提供任何极不可能的/不合理的行为的信息,而您不必去迎合它。

enter image description here

如果您要处理更长,更复杂的表单,则值得通过有意义的方式通过分块信息并引入- 分阶段处理 /向导(如果相关)。这将有助于优化您的设计并使其专注于错误预防。


错误消息内容

如果启用了“提交”或“继续按钮”,您可能需要考虑的其他领域是:

系统与现实世界之间的匹配

这可能是一个Edge案例,但是仍然值得一提;考虑一个启用了登录按钮的典型登录表单,并且用户在不提供任何详细信息的情况下单击登录,错误消息将如何在不破坏系统安全性的情况下向用户发送电话:我所看到的最简单的消息阅读以下内容:“无效用户名或密码“

这显然是用户所做的事情与系统反馈给他的事情之间的不匹配。因此,在这种特定情况下,我将选择禁用登录按钮,直到填写必填字段。


何时可以使用禁用的按钮?

禁用按钮的目的是抢占并防止错误消息,当出现以下情况时,它们可以以最佳方式实现此目的:

  1. 表单具有有限的字段数,用户可以一眼看出哪些字段丢失。
  2. 视觉强调必填字段并在填写每个字段时清除反馈(激活按钮需要满足的目标)
  3. 字段标签很短,很容易扫描,例如姓名,用户名,城镇/城市等,它们可以增强第一点。
  4. 所有必填字段,因为它为用户提供了激活按钮并采取行动的明确路径*。

    *在我看来,尽管我没有证据支持,但在存在可选字段时,用户可能会误解激活按钮的实际需求。


禁用按钮是否有碍?

它是显然不是。它的(帮助之手体现了一个古老的格言“预防胜于治疗”但它确实带有警告,需要权衡一些因素我已经在上面提到过,并与您的目标受众进行了测试,以确保它能够达到预期的目的。


为非机器设计的人

错误消息会因人的行为不像机器而受到惩罚。现在是时候让人们表现得像人了。当出现问题时,我们应该将其称为机器错误,而不是人为错误:机器设计错误,要求我们符合其特殊要求。现在该设计和制造符合我们要求的机器了。停止面对我们:与我们合作。

来源: 唐·诺曼:为人设计

我想我要说的是,“用户”就是和我们所有人一样的人,我们不应该低估他们的才智,而应该轻视他们:

  • 他们会阅读并理解标签,如果它们是清晰,清晰,简洁
  • 他们将检查他们需要什么如果表单结构良好并与他们想要实现的目标保持一致(以任务为中心)
74
Okavango

我不得不说这种行为会阻碍用户体验。

如果您曾经读过 Steve Krug不要让我思考 ,那么您会很快意识到这种模式正在违反标题中规定的规则。

有人可能会问,为什么要禁用它?

使用户跳过此箍没有任何好处。

基本上,我的意思是,向用户迎接一种无法采取行动的表格,并且通过发现或者更糟糕的是阅读,他们将不得不弄清楚如何正确使用呈现给他们的表格。

一种解决方法是立即引起人们对必填字段的关注,但这会使他们感到恐慌,因为他们想知道为什么即使他们甚至都没有触摸过表格,也会遇到很多红色错误。

不要阻止用户执行按“提交”按钮的预期任务,很高兴知道该表单让您以最小的影响尝试一下。一条柔和的错误消息指出“请检查以红色突出显示的表单错误”就足够了。


其他想法:

我不确定您经常在哪个网站或页面上看到此信息,但是快速浏览一下Google上找到的前10个“与我们联系”网站表格似乎会反驳您的观察。

我的两分钱(

如果我不得不猜测,那么禁用“提交”按钮已成为流行的验证插件的默认功能,而“开发人员”只是按原样保留它。

23
MonkeyZeus

我们经常看到“继续”按钮处于非活动状态

我认为这可能是错误。继续阅读!

值得一提的是,我目前正在对热门网站的注册表单进行一些古老的研究,发现相当一部分(大约5%或更少)禁用了“提交”按钮(是否为最终按钮注册继续类型按钮),直到数据被视为``有效''为止。

研究了许多表格之后,它变成明显的行为,而不是不可见的行为,当“提交”按钮被禁用时。这就是为什么我认为您可能比实际看到的次数更多的感觉

禁用按钮还有一个额外的问题,即除非表单在不影响用户注意力的情况下快速完成了验证数据的出色工作,否则它就无法使用户看到问题所在。内容。

一个可以接受此操作的站点是BBC ID

enter image description here

但是,他们会即时使明确哪些有效,哪些无效。

enter image description here

禁用按钮的注册表单的另一个值得注意的示例是MailChimp,但但是他们只禁用它,直到密码为止是可以接受的-不是整个表单-因此您可以输入密码并启用按钮-表单中没有其他有效数据。

在您考虑提交表单之前,他们清楚地将密码视为绝对正确的密码。其余数据允许在提交时进行验证。他们确实禁用提交按钮进行登录。

我认为,Mailchimp的注册表单在许多方面都非常出色。

enter image description here

GoDaddy是禁用提交按钮的网站的第三个示例。但是,这里他们直到数据全部valid才禁用按钮-字段必须是非空白的-因此每个字段中只有一个字母现场会做。

此处的禁用按钮可帮助用户发现缺少字段,而不是无效字段。

enter image description here

因此,总而言之:

如果您确实要禁用按钮,直到所有数据都有效才有效,则表格必须非常短和- 非常有效的验证即时进行。较长的表格对于什么地方出了问题还是不太清楚,并且所需的验证级别会过度分散所有领域的注意力。

这样做会使您只占很小的比例,特别是对于完全验证-无论您“经常”看到它是什么感觉:)

15
Roger Attrill

一个不应禁用该按钮

从用户的角度考虑情况。将用户分为两组

  • 那些目前不相信自己可以继续前进的人,因此他们并没有寻找继续前进的方法
  • 那些相信自己已准备好进行并正在寻找一种方法的人。

对于前一组,禁用“继续”按钮仅是在一个人的视线角看到的视觉伪像。这是有帮助的,但没有比其他任何描述表单状态的图形有用。对于这些人来说,图形更改(例如指向继续按钮的箭头或突出显示的继续按钮)与从灰色变为黑色的按钮一样有意义。

对于后一组,他们认为表格已完成。禁用的按钮可让他们知道自己错了,但不能帮助他们识别出问题所在。现在,他们必须扫描他们认为正确填写的整个表格,以查看缺少的表示不完整部分的任何符号。这错过了与用户互动的机会。这种互动可以帮助他们找到表单中未完全填写的部分。错过这种互动会使表格变成一个难题:“网络管理员知道您做错了什么,但是您必须找到它。”

鉴于还有其他方法可以处理表单已完成的图形提示(我自己喜欢突出显示的按钮),而继续按钮为用户提供了一种寻求帮助的方式,因此我认为没有理由禁用该按钮。

12
Cort Ammon

这是从表达的不同观点得出的元答案。

如果要禁用该按钮,则仍应检查单击并给出禁用该按钮的原因。这有两个优点:显示的错误更少,并且如果您由于某种原因以前未告知无法提交表单的原因,则可以明确地这样做。

5
hildred

可以单击按钮。如果用户看到一个按钮,他将要单击。仅当所有数据都以该特定格式填写时,禁用按钮才成为好体验。我宁愿在一开始就告诉用户(我使用设计的表单进行操作)所有字段都是必填字段,并且如果这些字段中的任何一个为空,则无法注册。您的表单不是一款游戏,用户必须完成所玩的级别才能解锁另一个游戏。只是一个想法 :)

4
Guru Munishwar

应该禁用“继续”按钮,直到所有必填字段都用填充至少一些文本(这假定必填字段是以某种方式指定给用户的)。这里的承受能力是系统甚至在从用户获得所需输入之前甚至无法尝试继续

填写必填字段后,应立即启用“继续”按钮,指示系统具有所需功能尝试继续。

从那里,单击“Continue”按钮将运行完全验证,并可能向用户返回验证消息。

1
landonz

表单的“继续”按钮会被禁用,直到所有的必填字段均已填写并通过验证为止。

为什么?好吧,这是常识,真的:

假设您是一家银行。而且您有一个简单的表单设置,可以将款项从一方转移到另一方。您有一个“您想从哪个帐户转帐?”字段,“收件人”字段和“发送金额”字段。

如果未填写这些字段中的任何一个,则无法进行传输。因此,所有三个字段都是必填字段。如果没有来自所有必填字段的信息,则无法进行这种传输。

现在,如果我们将所有三个字段都设为必填字段,并向用户指示,并且用户确实在所有必填字段中输入了信息,但在“发送金额”字段中却输入了错误,会发生什么情况呢?

假设用户输入了0.00。

好吧,我们无法发送$ 0.00。如果后端设置不正确,无法处理零美元等情况,会发生什么情况?当用户单击“继续”时,这不仅会导致自己丢失带宽和时间,而且还会导致用户丢失带宽和时间。在企业中,时间等于金钱,如果很多人不断犯错,或者在错误发生时没有输入详细信息,您将为自己造成过多的开销(允许使用过多的资源),而我打赌这最终会导致数据不匹配。

另外,作为用户,如果不验证表单并让我继续而不告诉我某些错误,那将非常烦人。尤其是当页面刷新并迫使我再次填写所有内容时。

1
Jase

我相信这里有中间立场。视觉上禁用的按钮不必表示单击该按钮不会像建议的那样“执行任何操作”。从逻辑上讲,在没有启用该主要操作所需的任何内容的情况下,用户将无法前进,但是没有理由单击该用户不能向用户显示警报消息,说明为什么将其禁用以及如何将其启用。

1
Bryan

在设计某些网页时,我来到此站点,以了解其他人在制定决策时必须说些什么。我得出结论,最好的答案是“取决于情况”。

我考虑过自己启用按钮的经历,这些按钮什么也没做,只能告诉我我做错了什么,有时在设计不当的网页上,请清除所有内容!当我使用长格式时,我特别感到烦恼,并且错误位于页面顶部...直到单击几次Submit按钮然后向上滚动到顶部才能看到该错误,问题。另外,在单击“提交”按钮之前,并非每个网站都明确要求什么。在糟糕的一天中,不要让我陷入一个网站,该网站在我必须输入某些内容后告诉我!

我认为网页应该绝对清楚表单上的要求,然后再单击按钮,这样,如果我在输入必填字段之前单击了“提交”按钮,我想,是的,我不敢相信我会错过这一点,我知道这是必需的!另一方面,我必须同意Jase的观点,在输入所有必填字段之前,我当然不希望在银行的网站上启用“提交”按钮!我使用银行网站的次数超过了其他任何网站,并且禁用按钮从未使我感到困惑。

那么,我的结论呢?如果您有一个包含多个字段的扩展表单,则某些字段是必填字段,某些字段是可选字段,清楚标记所有必填字段,启用“提交”按钮,并且在表单提交时包含无效或缺少必填数据时,突出显示问题字段并列出消息与错误。如果您具有所有字段都显示在同一页面上的表单...以及“提交”按钮,请禁用该按钮并明确指出用户需要执行哪些操作才能启用该按钮。还可以启用“提交”按钮;但是,任何一种方法都应该可以正常工作,并提供良好的用户体验。..这正是网页设计的美...这取决于您!最后,知道哪种方式更难编写代码,因为这也可能会帮助您以一种方式或另一种方式做出决策,无论哪种方式看起来都不错...始终应考虑降低客户成本。

哦...普通用户多久“禁用”其HTML?我认为这并不常见,普通用户(非IT人士)甚至都不知道该怎么做,因此我认为这不是设计用户友好网站时将其考虑在内的充分理由。如果用户足够聪明以禁用其HTML,那么他们应该知道必须启用它才能使网站正常运行!设计愉快! :)

1
My Two Cents

我将简短地讲这一点,因为大多数答案已经涵盖了许多有效和良好的领域。

它会增加价值吗?

我无法考虑用户将/应该查看“继续”按钮以了解他是否已完成填写表格的情况。每当用户希望单击按钮时,他相信他就已经完成了表格,并且此时必须将其引导到任何必需的动作。原则上,这应该已经以精心设计的形式清楚了,但是用户认为自己已经完成的事实证明了并非如此,因此,集中注意力,暂时眨眼或以其他方式引导用户是一个好的行动计划。

不同步的验证又如何呢?

尚未涉及的一件事是,许多表单是Web表单或其他依赖Internet的表单,并且并非所有验证都可以是即时的。举一个带有用户名的注册表单的典型示例:需要在数据库中查找用户名,如果已经使用了用户名,则该字段将要求输入其他用户名。通常,这是一个非常快速的查找,但是如果用户例如正在使用移动互联网并且刚失去连接或连接速度异常慢怎么办?使用禁用的继续按钮,用户将最终得到一个填写好的表格,没有按钮可以单击,比单击按钮并等待下一页加载要更麻烦,因为该用户使用的是互联网连接较差的表单延长一点的时间。

当然,如果正在等待验证的字段非常清楚地显示了上述内容,但可以避免上述情况,但是通常不会这样做,并且如果all个字段都被实时检查服务器端变得越来越普遍,那么这可能只会使用户感到困惑:“为什么我的全名旁边会出现一些混乱?”。因此,如果您希望执行此操作,那么我想到的唯一解决方案是在运行验证时将微调器置于禁用的提交按钮中。这样做的唯一危险是,用户可能会认为他已经错误地提交了表单,因为禁用的按钮通常与单击/按下状态相关联。

1
David Mulder

我认为在涉及本机HTML表单约束验证时禁用它是不好的。它消除了表单验证中的所有可用性,只剩下验证。

以这个简单的表单为例,当您在a字段中填写内容并按Enter时,什么也没有发生。您没有任何可见的反馈。您仅通过查看视觉UI就不知道需要什么。

<form>
  <input type="text" name="a" required>
  <input type="text" name="b" required>
  <input type="submit" disabled>
</form>

好像您将启用按钮一样

<form>
  <input type="text" name="a" required value="sometext">
  <input type="text" name="b" required>
  <input type="submit">
</form>

现在,如果您在a字段中输入了内容之后在哪里按Enter键,则会弹出一个对话框,并且输入字段也将变得集中

enter image description here


具有完美结构的表单验证,而无需禁用继续按钮

  • 您不需要任何JavaScript
  • 页面不会重新加载(从而节省带宽)
  • 您会以自己的语言获得正确的详细反馈,以解决问题(与数字交谈,加步长,最小值至最大值-您会得到类似的信息:“输入一个有效数字,两个最接近的有效数字是x,y”)
  • 错误填充的字段也会引起关注
  • 不会使用户对他们为什么无法单击感到困惑,实际上这与事实相反,您现在知道表单有什么问题
0
Endless