菜单 关闭

表单字段中的占位符是有害的

通过 凯蒂·舍温
可能11, 2014; Updated Sep2018年10月

摘要:占位符文本在一个表单字段使人们很难记住哪些信息属于一个字段,并检查并修复错误它也会带来额外的负担为用户提供视觉和认知障碍。


语境的描述或暗示可以帮助澄清在每个表单字段,因此改善完成转换率有很多方法可以提供线索常见的实现是通过插入指令在表单字段不幸的是,用户测试不断地显示出来占位符在表单字段经常伤害了可用性多帮忙。

标签和占位符

标签告诉用户哪些信息属于一个特定的表单字段,通常放置在表单字段位于表单字段内的占位符文本是特定字段所需信息的附加提示,说明或示例这些线索通常消失当用户类型。

标签和占位符

占位符替换标签

某些表单用字段占位符文本替换字段标签以减少页面上的混乱,或缩短表单的长度虽然这种方法是基于善意,我们的研究表明,它有很多负面影响。

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

 

下面是7个主要原因不应使用占位符作为字段标签的更换。

1消失的占位符文本会影响用户短期记忆

如果用户忘记提示,填写时经常做长形式,他已经删除他写了什么,在某些情况下,点击远离现场再次揭示了占位符文本在一个理想世界中,用户在填写表单时将完全集中但在现实中,用户多任务他们有不同的打开,或者他们可能会疏远她通过电子邮件或电话对于复杂的任务,他们可能不得不停下来去检索文档或订单号从我们的移动可用性研究我们知道,手机用户也经常分心,打断了在使用他们的设备因此,重要的是要帮助用户挑选他们离开的地方。

简单的,常用的形式与一个或两个字段,如一个搜索框或登录表单,内存少的问题,而不是紧张复杂的或很少使用的形式这是因为通过简单,熟悉的形式,用户可以猜出他们应该输入什么虽然,即使是没有标签的简单登录表单,用户也可能不记得他们是否可以选择输入用户名或电子邮件要不就用户名。

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

标签的缺乏使得顾客无法浏览表单和确保他们的反应是正确的同样,浏览器自动填充表单字段可能会错误地填写信息。如果没有标签,或者特殊指令不再是可见的,客户必须揭示了占位符文本,一个接一个地删除每个字段中的文本为了验证它匹配的描述但实际上,许多人甚至都没有意识到错误的可能性,他们也不会努力进行双重检查。

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

如果表单填写,但没有标签或说明可见外的表单字段,那么用户必须回到揭示每个字段描述为了修复这个错误。

4Placeholder text that disappears when the cursor is placed in a form field is irritating for users导航用键盘

人们使用选项卡从字段,字段键迅速行动,他们不停止学习下一个字段指定之前。

五带有东西的字段不太明显。

眼动研究表明,用户的眼睛被吸引到空字段至少,用户会花更多的时间定位——一个非空字段滋扰At the worst, they will overlook the field completely—a potential business-killing disaster.

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

已经有文本的字段时,人们不太可能意识到,他们可以在那里类型一些用户认为是默认值的占位符文本跳过这一领域完全

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

有时占位符不消失当用户移动他们的输入焦点到田野如果占位符保留在字段中可编辑的文本,用户被迫手动选择并删除它这就造成了用户和增加不必要的负担交互成本填写表格。

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

占位符文本除了标签

使用占位符文本结合形式标签是在正确的方向上迈出的一步表单字段外的标签使基本信息始终可见,而表单字段内的占位符文本保留用于补充信息然而,即使在使用标签时,将重要的提示或说明在一个表单字段仍然可以导致上述7个问题虽然严重程度较低如果一些字段需要额外的描述至关重要的to completing the form correctly, it’s best to place that text outside the field so that it is always visible. 

标签外,占位符在里面
更好:此处,除标签外,占位符文本还用作提示。

占位符和可访问性

要考虑的最后一个问题是占位符文本通常是不好的无障碍当然,访问软件和现代浏览器正在改善,但他们仍有很长的路要走对易访问性三个最大的问题是如下:

  1. 占位符文本的默认浅灰色与大多数背景的颜色对比度较差。对于视力受损的用户,较差的色彩对比度使得难以阅读文本因为并不是所有的浏览器都允许使用CSS样式化的占位符文本,这是一个困难的问题,以减轻。
  2. 用户与认知或运动能力损伤负担更重 As we saw, placeholders can be problematic for all users: disappearing placeholders increase the memory load; persistent dimmable placeholders cause confusion when they look clickable but aren’t, and placeholders that do not disappear require more keyboard or mouse interaction to be deleted这些困难是放大了的人的认知或运动障碍。
  3. 并非所有的屏幕阅读器都会大声朗读占位符文本如果他们的软件不会说出占位符内容,盲人或视障用户可能会完全错过提示。

浮动标签

根植于极简主义web manbetx官方网站手机版,floating-label模式是一个占位符,修改方法,缓解了传统占位符的一些缺点This pattern has been around for years, but it has finally made way onto mainstream websites, and it has even been officially embraced by Google's Material manbetx官方网站手机版.

In this pattern, labels are placed within the form field as placeholders until the field becomes active and the user moves the input focus into the field在这一点上,占位符标签移动到顶部的领域因此,浮动标签(也称为一种自适应的占位符)总是可见,在表单字段的中心,或在用户输入的文本。

占位符标签“名字”上升到顶部的字段输入焦点
好:浮动标签移动到顶部的表单字段当用户选择开始打字(Warbyparker.com)。

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

  • 它可以节省空间在移动设备上,不需要额外的垂直空间把上面的标签。
  • 可见标签作为一个内存援助虽然人在输入阶段因此,这解决了上面的陷阱列表中的点1-4。

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

最终,浮动标签比标签提供了更好的用户体验是一个占位符But if you have the screen space, placing the label and hint outside the field is still the best way to go.  

结论

而不是冒险让用户跌倒在填写表单或浪费宝贵的时间弄清楚它们是如何工作的,最好的解决方案是有明确的、可见的标签,在空的表单字段。

表单字段外的标签和占位符文本
最好的:标签和提示被放置在表单字段并总是可见的用户。

提示和说明也应该是持久性的,并且放在该领域之外形式的一个重要组成部分转换的目标因此,确保您的用户能够快速准确地完成这些操作是值得的。