菜单 关闭

表单域中的占位符有害

通过 凯蒂舍温
五月。11,2014;9月9日更新。10,二千零一十八

总结:表单域中的占位符文本使人们难以记住字段中的信息,检查并修复错误。它也给视觉和认知障碍的用户带来了额外的负担。


在上下文描述或提示中,可以帮助澄清每个表单字段中的内容,从而提高完成率和转换率.有很多方法可以提供提示。常见的实现是在表单字段中插入指令。不幸的是,用户测试不断显示表单域中的占位符经常损害可用性不仅仅是帮助它。

标签和占位符

标签告诉用户哪些信息属于给定的表单域,通常位于表单域之外。占位符文本,位于表单域内,是一个附加提示,描述,或特定字段所需信息的示例。当用户在字段中键入时,这些提示通常会消失。

标签和占位符

替换标签的占位符

有些表单将字段标签替换为字段内占位符文本,以减少页面上的混乱,或者缩短形状的长度。虽然这种方法是基于良好的意图,我们的研究表明它有许多负面的后果。

作为标签的占位符
最坏:在这个例子中,使用占位符文本而不是标签。

以下是不应将占位符用作字段标签替换的7个主要原因。

1。消失的占位符文本会使用户感到紧张短期记忆.

如果用户忘记了提示,人们在填写长表格时经常这样做,他必须删除他写的东西,在某些情况下,单击远离字段以再次显示占位符文本。在一个理想的世界里,用户在填写表单时将完全集中精力。但实际上,用户多任务.他们打开不同的选项卡,或者他们可能会被一封电子邮件或一个电话拉走。对于复杂的任务,他们可能不得不停下来去取回一个文件或订单号。从我们移动可用性研究,我们知道,移动用户在使用他们的设备时也经常受到干扰和干扰。所以,重要的是帮助用户找到他们离开的地方。

简单地说,具有一个或两个字段的常用表单,例如搜索框或登录表单,与复杂或很少使用的形式相比,记忆的紧张不是一个问题。这是因为简单,熟悉的形式,用户可以猜测他们应该输入什么。虽然,即使是没有标签的简单登录表单,用户可能不记得是否可以选择键入用户名或电子邮件或者只是用户名。

2。没有标签,用户在提交表单之前无法检查其工作。

由于缺少标签,客户无法浏览表单并确保其答复正确。同样地,浏览器:自动完成表单域可能会错误地填写信息。如果没有标签,或者如果特殊指示不再可见,客户必须通过逐个删除每个字段中的文本来显示占位符文本,以便验证它是否与描述匹配。但实际上,很多人甚至不会意识到潜在的错误,他们也不会努力去复查。

三。当出现错误信息时,人们不知道如何解决这个问题。

如果表格填好了,但是在表单域之外没有可见的标签或说明,然后用户必须返回到每个字段以显示描述,以便修复错误。

4。当光标放在表单域中时消失的占位符文本对用户来说很烦人。用键盘导航.

人们使用标签键从一个字段快速移动到另一个字段,他们不会停下来研究下一个领域。

5。其中包含内容的字段不太明显。

目测研究表明用户的眼睛被吸引到空字段上.至少,用户将花费更多时间查找非空字段-a讨厌的人.在最坏的情况下,他们会完全忽视这个领域——一个潜在的商业灾难。

6。用户可能会将占位符误认为是自动填充的数据。

当字段中已有文本时,人们不太可能意识到他们可以在那里打字。一些用户认为占位符文本是默认值,并且完全跳过字段.

7。有时用户必须手动删除占位符文本。

有时,当用户将输入焦点移到字段中时,占位符不会消失。如果占位符在字段中保留为可编辑文本框,用户必须手动选择和删除它。这给用户带来了不必要的负担,并增加了交互成本填写表格。

有时,当光标放在文本字段中时,占位符会变暗。不幸的是,这种交互模式很少见,用户也不熟悉:有些人仍然认为必须手动删除文本。它经常需要一些失败的尝试和大量的点击来意识到他们可以开始在暗淡的文本上打字。

除标签外的占位符文本

将占位符文本与表单标签结合使用是朝着正确方向迈出的一步。表单字段外的标签使基本信息始终可见,表单域中的占位符文本保留为补充信息。然而,即使使用标签,在表单域中放置重要提示或说明仍然可能导致上述7个问题,尽管不那么严重。如果某些字段需要一个额外的说明,本质的为了正确填写表格,最好将该文本放在字段之外,以便始终可见。

标签外,内部占位符
更好的:在这里,除了标签之外,占位符文本还用作提示。

占位符和可访问性

最后一个需要考虑的问题是,占位符文本通常是坏的可达性.当然,辅助软件和现代浏览器正在改进,但他们还有很长的路要走。可达性最大的三个问题如下:

  1. 占位符文本的默认浅灰色与大多数背景的颜色对比度较差。对于视力受损的用户,颜色对比度差使阅读文本变得困难。因为不是所有浏览器都允许使用CSS设置占位符文本的样式,这是一个难以缓解的问题。
  2. 认知或运动障碍的使用者负担更重。正如我们看到的,占位符对于所有用户都是有问题的:丢失的占位符会增加内存负载;持续可调的占位符在看起来可单击但不可单击时会导致混淆,不消失的占位符需要删除更多的键盘或鼠标交互。对于认知或运动障碍的人来说,这些困难被放大了。
  3. 并非所有屏幕阅读器都会大声阅读占位符文本.如果盲人或视力受损的用户的软件不能说出占位符内容,他们可能会完全错过提示。

浮动标签

扎根于极简主义网页设计manbetx官方网站手机版,浮动标签模式是对占位符的一种改进方法,它减轻了传统占位符的一些缺点。这种模式已经存在多年了,但它最终进入了主流网站,它甚至被谷歌的材料设计正式接受。manbetx官方网站手机版

在这种模式下,标签作为占位符放在表单域中,直到域变为活动状态,并且用户将输入焦点移到域中。在那一点上,占位符标签移到字段的顶部。因此,浮动标签(也称为自适应占位符)始终可见,在表单域的中心,或在用户输入的文本上方。

占位符标签“first name”上升到输入焦点字段的顶部
好:当用户选择浮动标签开始输入时,它会移动到表单域的顶部(warbyparker.com)。

这种方法有两个主要优点:

  • 它可以节省移动设备的空间,不需要额外的垂直空间将标签放在字段上方。
  • 当人们处于打字阶段时,可见标签起到记忆辅助的作用。因此,这解决了上述陷阱列表中的1-4点。

然而,上述问题5和6仍然是一个问题。:包含文本的字段不太明显,用户可能会认为该字段中已经输入了默认值。也,前面描述的可访问性问题可能仍然适用,因为有些浏览器和辅助技术不能正确或可靠地读取占位符文本。

最终,浮动标签确实比标签作为占位符提供更好的用户体验。但是如果你有屏幕空间,将标签和提示放在字段之外仍然是最好的方法。

结论

而不是冒着让用户在填写表单时绊倒的风险,或者浪费宝贵的时间来弄清楚他们是如何工作的,最好的解决办法是清楚,放置在空表单域之外的可见标签。

表单域外的标签和占位符文本
最佳:标签和提示放在表单字段之外,用户始终可以看到。

提示和指令也应该是持久的,并放在字段之外。形式是许多事物的重要组成部分转换目标,因此,确保您的用户能够快速、准确地访问它们是值得的。