作者：KATIE SHERWIN  写于：2014年5月11号

关键词：可读性  应用程序设计 网页可用性

概要：表单中的占位符文字是的用户难以记住输入框中的信息应该填什么，只能通过反复检查操作来发现错误。这就给用户视觉和认知上造成了额外的负担。

通过文案描述或提示语可以帮助用户明确每个表单输入框应当填什么内容，并且能够促进表单输入完成和提高转化率。其实有很多方法可以提供这样的提示。一种常用的方法就是在表单输入框内填入默认说明文案。然而经过多次用户可用性测试发现，输入框内的占位符提示文案不但不能帮助用户反而降低了可用性。

标签 与 占位符

标签能够告诉用户需要在表框中输入什么样的信息，通常是在输入框外。而占位符文本，则是在表框内，是一种附加的提示、描述、甚至是填写在输入框内的示例语句，当用户在输入区键入时，这些提示则会消失。

图片来源：翻译原文

占位符替代标签

有些表单设计将输入框内的占位符文字替代了标签，以求页面空间更整洁，虽然这种方法的初衷是好的，但是我们的调研发现这种方法有很多负面影响。

最糟糕的是：在此例中，占位符直接替代了标签

以下列举了不应当用占位符文本来替代输入框标签的七大理由：

1、会消失的占位符文本会带给用户短时记忆负担

当用户填写比较长的表格时，如果用户忘记了提示，就不得不删掉他原本输入了部分的内容，或者点击它处来查看占位符提示。在理想状态下，我们希望用户能够专注于填写每一个表格。而事实上，用户通常是多任务状态。他们可能开了不同的标签页，或者他们可能突然收到一封邮件或事接到一个电话。对于复杂的任务，他们有可能会停下来去检查个文件或者订单号。通过对移动端可用性的调研，我们发现手机用户在设备使用过程中也很容易被打扰分心。因此，当用户回到刚才中断掉的地方，我们需要帮助用户尽快连接起来。

对于只有一两个输入框的简单、常见的，比如搜索框或者登录表单，这种短时记忆负担就比复杂类的表单少得多。这是因为简单熟悉的表格，用户通常都能猜到应当输入什么。尽管这样，没有标签的简单登录框，用户还是可能疑惑，因为他们可能不知道该输入邮箱号还是用户名。

2、没有标签，用户在提交表单时都不能检查填写内容

缺少标签用户就不能一眼浏览表单是否填写错误。同样地，及时被输入了错误的信息浏览器也默认完成表单输入。如果没有标签，或者特殊提示看不见了，用户只能一个一个地删除输入框内的内容能查看占位符提示，以确认自己的输入是否符合提示描述。然而事实上，很多人都不会费劲去仔细检查，很多人都无法发现可能出错。

3、当信息填写报错时，用户无法定位是哪个表格填写有问题

如果所有的表格都填写完了，而没有可见的标签标示于表格之外，那么用户不得不一个一个地检查自己填写内容是否符合表格的描述性占位符。

4、由于当光标一旦插入到表格中占位符文字就会消失，这非常不利于用户操作输入键盘。

当用户使用“TAB”键时，会从上一个输入框跳到下一个输入框，这时用户可能还没来得及看下一个输入区的占位符提示内容。

5、输入框内的内容通常较难注意到

根据眼球追踪的调查研究表明用户的视线通常会被空白区域所吸引。至少，用户会花更多的时间去才能关注到非空白区（这就已经够烦人的了）。更惨的是，他们直接把这样的输入区域忽视掉（如果这样那真是粗大事儿了～ps：译者说）

6、用户可能会以为占位符文字是默认填入的数据

当输入框内已经有内容的时候，人们会通常会认为这不太像需要输入的区域。有的用户甚至直接认定占位符文字就是默认值，无需输入，直接略过。

7、有时候用户需要手动删除占位符文字

有时，当用户已经操作点入输入区内，占位符文字还是不消失。如果这个区域的占位符文字保留并且客输入，用户还不得不手动选中或者删除它。这就会给用户带来不必要的麻烦，增加输入框的操作成本。

尽管有时，当光标移入输入框，占位符文字会变暗。而这样的交互形式比较少见，用户也不是很熟悉，有人还是会认为必须手动删除这些文字。这就带来了一些错误的常识以及多次的点击，才能让用户明白其实可以直接在暗淡文字旁直接输入即可。

除了标签之外再使用占位符文字

将占位符文字与标签结合起来使用是一个不错的策略。输入框外的标签让一些必要提示信息一直可见，而框内的占位符文字则用来提示一些补充信息。然而，尽管使用了标签提示，将一些重要的提示和说明置于输入框内还是会造成如上所说的问题7，即使这个问题并不是特别严重。如果一些输入框需要一些必要的额外补充说明才能让用户填写正确，那最好在表单外放上标签文字保持始终可见。

好一点的是：在此，占位符只是作为除标签之外的一种补充提示

占位符文字及其可用性

最后一个要说的问题就是占位符文字通常有损可达性（网页亲和力的一种）。当然，可达性软件与现在等浏览器性能已经都提升了，但是它们都还有很长的路要走。以下就是会影响可达性的三大问题：

1、占位符文字的默认浅灰色是一种与背景对比度较低的色值。对用户来说是一种视觉损害，对比度低使得用户阅读困难。由于不是所有浏览器都能通过css自定义占位符文字，这使得这个问题更难找到缓解方法。

2、有认知或运动能力损伤的用户更难理解。众所周知，占位符会给所有用户都带来这些问题：会消失的占位符文字增加记忆负担；保持较暗淡色值的占位文字让人疑惑它到底能不能点击，若点击后它不消失会带来更多的交互输入操作去删除。这些困难对于有认知和运动能力损伤的用户来说更是难上加难。

3、不是所有屏幕朗读工具都可以朗读占位文字。如果有的屏幕朗读工具不能朗读占位文字，那盲人和视力损伤的用户会无法了解这些提示。

总结：

相比之下，这样的设计冒着给用户设置障碍的风险，与其浪费时间去想解决方案，最直接有效的解决方案就是，用清晰可见的标签在输入区外的空白区域显示提示文字。

最好：标签和提示文字都在输入区域之外，并保持始终用户可见

提示和说明文字应该是固定在输入区之外。表单是很多转化目标的重要组成部分，因此，应该花心思在如何确保你的用户能够尽快准确地完成填写。

自适应占位符

自2015年的一些设计和技术更新：最近我们已经越来越质疑之前对占位符的修改方法,因为有新的方法可以减轻传统占位符的一些缺点。这种模式已经存在了几年,但是最终让自己进入主流网站,如Walmart.com和WarbyParker.com。

在此模式中,标签放置在表单字段作为占位符,直到用户输入焦点移动到字段激活了这个输入区。在这时，占位符标签移动到输入框顶部的领域。这样一来,自适应占位符(也称为浮动标签)总是可见的,并且也在输入框中,或者在用户输入的文本之上。

优秀：用户选中开始输入时，自适应占位符会移到输入区域顶部    光标focus的时候，横线上占位文字会变色值且缩小上移

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

在移动设备上，这样非常节省空间，不需要额外占用表单的垂直上方空间；

当用户在输入时依然可作为一个可见的标签提供记忆援助，这就解决了上文提到的1～4的缺陷之处；

然而，上文提到问题＃5与＃6：表单内的文字容易被忽视，以及用户可能会误以为那是表格内默认填入的内容。

最终，适应性占位符作为一种占位符是比标签提供了更好的用户体验。但是如果你有足够的屏幕空间,将标签和提示置于表格以外的领域仍然是最好方法。

原文链接：https://www.nngroup.com/articles/form-design-placeholders/?from=singlemessage&isappinstalled=1