it-swarm.cn

有什么更好的用户体验:突出显示错误或阻止错误的击键?

我有一些信息可以在文本框中输入。数据是结构化的,只有某些序列有效。例如,对于电话号码,诸如A之类的字母无效。

因此,我应该拦截键盘事件并阻止键入的字母到达文本框,还是应该绘制一些红色的波浪线(或其他视觉提示)以让用户知道该字母是不可接受的?哪个是更好的用户体验?

20
louisgab

超越用户对其计算机的控制将始终是对该用户工作流程的中断,并且通常被视为对该用户工作流程的入侵。该网站“不应”拥有对我们计算机的控制权,因此施加这种控制权至少会有点令人震惊。

就是说,您提出了一个非常重要的主题,即在用户填写完整的字段集并提交之前,让用户知道其输入无效的重要性。

我发现这种方法的介入最少,但提供最快的周转响应的方法如下。

alt text

本质上,等待他们填写第一个字段,然后在他们单击/制表一个新字段(或已无效的字段)时,检查刚刚完成的字段。如果刚刚完成的字段是有效的,请在其旁边打印一个醒目的“好”图标(绿色,选中标记,笑脸,您会明白这个想法)。如果它没有通过验证规则,则离散地打印一个“坏”图标(红色,“ X”等),并在失败的地方加上短线。

但是请记住,不要中断他们的工作流程:

  • 没有弹出窗口
  • 没有覆盖

当他们完成对字段的移动后,他们要么返回到无效字段,要么继续前进,然后再返回。无论哪种方式,他们都会看到自己可以进行编辑,但是可以自己编辑。

最后,他们将在提交之前拥有完整有效的表格,这意味着

  1. 他们只需要提交一次
  2. 当提交“失败”时,他们不会花时间发疯或沮丧
  3. 他们会更喜欢您的网站
  4. 每个人都会有蛋糕
17
Matt

在使用表单的两端,以下是我更喜欢的一些准则:

  • 绝对不应阻止用户输入。这意味着,如果我在电话号码字段中键入字母“ A”,则希望看到该字母“ A”。
  • 我从onBlur()事件开始我的文本字段验证,并且不早于此。在我显示错误消息之前,这使用户有机会修复错误键入的“ A”。允许用户在仍在输入字段中的情况下更正错误,就可以减少出现“嘿,您搞砸了,花花公子”这类消息的机会。
8
wnathanlee

如果您在键入无效字符时阻止它们,则他们可能会认为键盘出现故障。用户喜欢的东西以他们期望的方式工作。如果要防止按键时出现某些字符,至少还应同时在输入附近显示一条错误消息。这样他们知道为什么不输入。

另一个令人烦恼的事情是,当您刚填写完一个较长的表格并且站点使用服务器端验证时,您必须重新浏览该表格以查找问题所在。我主要喜欢使用客户端验证,但还是依靠服务器端。当他们正在键入或输入失去焦点时,我将显示一个错误。这样,用户可以立即知道存在问题,并确切知道问题是什么。

5
LoganGoesPlaces

我发现防止用户犯错误总是比我原先想象的难十倍。示例:某人的电话号码可能带有分机号,例如x2333。我用 jQuery input mask plugin 来做信用卡,效果很好。我会尽可能使用自动建议。

在任何复杂的系统中,您都会遇到检测内联的代价很高的情况,并且需要在事后告诉他们。对我而言,答案是逐案解决的,并确保涵盖所有Edge案例。

3
Glen Lipka

我建议将这两种方法混合使用,但仅适用于严格验证的字段,例如电话号码(SSN,邮政编码等……按定义,必须必须是数字)。

跟踪每个击键,并在用户键入无效字符时显示它...,但立即发出错误消息。也许将输入字段变成红色,并在该字段的右侧显示“请仅输入数字字符”。

禁止输入是禁止的,因为它会被用户误解。他们可能会认为自己的机器或输入设备有问题,而不是因为他们不应该在数字输入框中键入字母。

验证之后输入完成可能很烦人。特别是对于密码创建中使用的字段。某些网站要求仅包含字母数字字符的6个字符的密码。其他的则需要9个字符的密码并允许任何字符(包括!@#$%等)。输入密码后才发现之后我输入的密码是我发现的最烦人的表单类型,实际上使我无法使用几种服务。

用户输入数据时提供动态反馈有助于他们

  1. 知道哪个字段仍然存在错误
  2. 提交数据前主动纠正输入错误
  3. 随时随地学习经验

所有3个帐户的阻止输入均失败。填写文本框后,突出显示验证错误在所有这3个方面同样失败。

2
EAMann

这要视情况而定。如果可能,请使用自动建议。如果您截获用户的输入,则立即反馈至关重要。一种可能的解决方案是“提示框”,该提示框在密钥被拦截后立即弹出。您可以在Windows登录屏幕上看到它,例如,如果按$号,它将弹出。

1
Janko

与大多数事物一样,取决于上下文。我对该主题有更专业的看法。我或我的小组正在研究的大多数应用程序都是技术性的,并且仅由经过适当培训的人员使用。因此,与普通大众相比,我们可以将更多的责任和自由摆在用户手中。简而言之,我们使用的一些准则...

  • 忽略任何无效的输入。..阻止无效的击键。
  • 通过对比和颜色*指示无效字段,该状态应该几乎是不可能的。
  • 焦点始终在用户的控制之下。请勿使用户陷于陷阱或防止聚焦改变。
  • 切勿抛出模式警告/错误框。曾经.
  • 永远不要问用户问题。软件不是人的工具。是的,我敢肯定。
  • Enter/Return键始终表示:接受更改并继续。请勿通过将焦点放在“取消/退出”按钮作为Enter上的默认按钮来更改此设置。
  • 退出键始终表示:放弃并退出。
  • 尽可能提供自动完成功能。
  • 为具有最小/最大限制的数字提供快捷输入。例如如果有效值在0.12和100.387之间,则大于100.387的条目(例如999)将被视为100.387,依此类推。
  • 建立行为上非常明确的黑白规则。用户可以理解的规则。如果这变得太复杂了,请重新考虑。

几乎所有示例都是用户要求的,是的……实现有时是真正的负担/噩梦/杀手,但很少是不可能的。

警告:同样,这些示例是在具有技术用户基础的垂直系统的上下文中给出的....而不是网络通用公共形式,等等。您的里程可能会有所不同。

*红色除外。在我们的业务中,红色表示:危险,您可能被杀...或更糟。

1
Rusty