这篇译文来自Andrew Coyle
占位符文本几乎可以为所有的HTML输入区域提供指示,但有时也会误导设计师和开发者。为复杂的表单提供文字提示,同时又可以省略标签来提高美观度,这些听起来很诱人。但是,使用占位符文本做这些事情会导致许多可用性问题。
本文将介绍占位符使用中的常见不妥做法,并给出替代方案。
错误示例
占位符作为标签文本
为了缩短表单的长度或者减少视觉噪音,设计师有时会使用占位符文本作为输入标签。这种办法会给用户带来记忆负担,因为用户单击或键入时,标签就会消失。必须要清楚输入才能再次显示标签。
最好在输入框的上方放置标签。空白的输入字段用于输入数据的提示。用户通过查看输入框中的提示来决定需要采取的行动。
占位符作为示例文字
提供输入框的示例文字有助于用户理解需要输入的内容。但是如果使用占位符文本来来作为示例内容会导致问题,比如说,点击瞬间示例文字会消失,已有占位符文字与输入内容相混淆等。可以将示例文字放在输入框下方作为替代。
占位符作为二级标签
使用占位符作为二级标签看起来很具吸引力,如上如所示。但是如果使用常规的标签,表单的可用性会增加。
如果按照前面的说明更换占位符,将会减少表单的可用性问题。但是如果说因为一些原因,你不得不使用占位符的话,注意以下几点:
合理的占位符使用方式
占位符需要比输入文字更浅
用户是在填写一个空的条目。一个空白的输入框是输入文字的前提条件。占位符文可能会影响用户的输入操作,这一影响特别是在占位符的颜色很明显时,因为用户可能会将其误认为是自己之前输入的条目。
占位符文本需要在不同的屏幕上有良好的可视性
如果占位符文字的颜色过浅,可能在某些屏幕上会看不清楚,导致用户需要努力眯眼去看
占位符文本应该在用户开始输入后才消失
如果仅在用户鼠标聚焦到输入框时,占位符就消失,会给用户带来记忆负担。
通常来说,不使用占位符可以提升表单可用性。
想要了解与占位符文本更多的信息,请阅读Katie Sherwin的报告。