表单中的文本占位符让用户难以记住这个地方的标题是什么，当用户检查表单或者补全错误的时候，也不知道这个输入框的标题是什么，之前输入的内容是什么。这种设计还为视力和认知障碍的用户带来额外的负担。

上下文描述或提示可以让用户更加清楚的认识到每个表单区域的内容，从而提高完成率和转化率。提供这种提示可以有很多种方法。一个常见的实现方法就是在表单里插入指示说明。但不幸的是，用户测试不断显示，表单中的占位符往往带来用户体验的损害，比它带来的帮助要多。

标签和占位符

标签告诉用户这个表单域代表什么意义，并且标签通常位于表单域之外。文本占位符，位于一个表单域里面，是一个附加的提示、描述或填写事例。这些提示信息在用户点击表单域的时候通常会消失。

占位符代替标签

有些表单使用表单域占位符来代替标签，这样做可以减少页面中杂乱的信息，或者缩短表单的长度。虽然这种方法是基于一定优化设计的目的，但我们的研究展示它有很多消极的影响。

以下是占位符不能取代表单域标签的7个主要原因。

1、消失的文字占位符让用户的短期记忆有压力。
用户在填写长表单的时候，不免会删除一些写过的内容，如果用户忘记了提示，他必须把内容全部删完才能再次看到文字占位符，回想起自己之前填写的内容是关于哪个方面的。
在一个理想的世界，用户在填写表单的时候会完全专注。但是，现实中，他们是多任务同时进行的。他们可能会打开多个浏览器标签，也有可能他们突然接到一个电话或查看邮件。对于一个复杂的任务，他们可能必须停下来去查找相应的文件或者订单号。从我们的移动可用性研究中发现，我们知道移动用户在使用设备时也经常分心和中断。所以，让用户回想起他们离开时候正在填写的内容就显得很重要。

对于一个或两个字段的简单常用表单，例如搜素框或登录表单，相比较复杂的或罕见的表单，用户的记忆压力会少一些。这是因为用户在填写简单、熟悉的表单的时候，能够猜测到他们应该输入什么。尽管如此，在一个简单的，但没有标签的登录表单，用户也可能不记得他们可以输入什么类型字符，用户名、电子邮箱，或只是用户名。

2、没有标签，用户不能在提交表单之前进行有效的检查

缺少了标签，用户很难去快速浏览整个表单去保证他们填写的内容是正确的。类似地，自动填写表单字段的浏览器也可能不能正确地填写信息。如果没有标签，或者特殊说明不再可见，用户必须逐个删除每个字段中的文本以显示占位符文本，以确认其符合说明。实际上，许多人甚至不会意识到这个错误的潜在可能，他们也将不会去做二次确认。

3、当错误的消息发生，用户不知道如何去解决这个问题

如果表单已填写，但在表单域之外没有标签或指令可见，则用户必须返回到每个字段以显示描述，从而修正错误。

4、让使用键盘进行导航的用户愤怒

那些使用键盘进行导航的用户，用Tab 键来快速从一个区域到另一个区域快速移动，他们需要在进行Tab切换的之前，要记住下一个表单域需要填写的内容。。

5、已经充斥内容的表单域相较不容易发现

眼动实验显示，用户的眼睛容易被吸引到空白的地方。至少，用户将花更多的时间找到一个非空的区域，这是一个麻烦。在最糟糕的恶情况下，他们可能会忽视这个表单域，认为它已经被填写了，而这就是一个潜在的商业灾难。

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

当表单域中已经有文字了，用户不太可能意识到他们可以在那里输入文字。某些用户假设占位符文本是默认值，并完全跳过该字段。

7、偶尔用户必须手动删除占位符文本

有些时候，文本占文符不会消失，当用户将光标移入这个区域的时候。如果文本占位符作为可编辑文本保留在字段中，则用户将需要强制手动选择并删除它。这对用户造成不必要的负担，并增加填写表单的交互成本。

标签和文本占位符一同存在

使用文本占位符钰表单标签组合是朝着正确方向迈出的一步。表单域外的标签可以随时显示必要信息，而保留表格域内的占位符文本以供补充信息。但是，即便是用了标签，将一些重要的提示或指示说明放在表单域中仍然会引起上述提到的7个问题，虽然这些问题严重程度会降低。如果某些区域需要额外的描述，对正确完成表单至关重要，最高的方法就是将这些文字放置在表单域外边，让用户能够一直看到。

占位符与可访问性的关系

最后一个要考虑的问题是，占位符文本通常不利于可访问性。当然，辅助软件和更加现代的浏览器正在改进，但他们仍然还有很长的路要走。可访问性最大的三个问题如下：

1、默认的占位符文字的颜色是浅灰色，这种颜色不能与背景色产生足够的对比。对于有视觉障碍的用户，较弱的颜色对比使得阅读文本变得困难。因为不是所有的浏览器都允许使用CSS来修改占位符文字的样式，这是一个难以解决的问题。

2、具有认知或移动障碍的用户会有更多的负担。正如我们所看到的，文本占位符对所有用户来说都是有问题的：消失的占位符增加了记忆负荷；模糊不清晰的占位符会引起用户的困扰——这些文字看起来是可以点击的，那些不能消失的占位符需要使用键盘或鼠标来进行操作删除。对于有认知或运动障碍的人，这些困难将被放大。

3、不是所有的屏幕阅读器都会朗读占位符文本。盲人或视力受损的用户可能会完全错过提示，如果他们的软件不能朗读文字占位符的内容。

结论

相比较让用户在填写表单的时候遇到困难或者浪费他们的时间来弄清楚这些表单是如何工作的时候，最优的解决办法就是让清晰的、可见的标签放在空白的表单域之外。

提示和指示说明也应该一直放在表单域之外。表单是需要转化目标的重要组成部分，因此，请确保您的用户能够准确地了解表单。

自适应占位符

最近，我们对修改后的占位符提出了更多质疑，以减轻传统占位符的一些缺点。这种样式几年前就已经出现，目前在一些主流网站上开始流行起来，比如walmart.com和warbyparker.com。

在此模式中，标签作为占位符放置在表单域中，当用户将输入焦点移动到表单域中的时候，标签会移动到表单域的顶部。所以，自适应占位符始终可见，无论是在表单域的中心还是在用户输入的文本之上。

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

• 它可以节省移动设备上的空间，不需要额外的垂直空间将标签放在场上。
• 当人们处于打字阶段时，可见标签用作记忆辅助。因此，从上面的陷阱清单中可以看出1-4点。

然而，上述的问题5和问题6仍然无法解决：其中文本的字段不太明显，用户可能会认为在该字段中输入了一个默认值。

最后，自适应占位符确实比标签提供了更好的用户体验。但如果您有足够的屏幕空间，将标签和提示放在表单域之外仍然是最好的方法。

来源：by KATIE SHERWIN on May 11, 2014
翻译：by 灿一个 on Sep, 13, 2017