E2.04.1placeholder-as-label failure设计研究

占位符在输入开始后消失,无法充当标签

别名: 占位符当标签 · placeholder label · 输入后标签消失

概念解释

占位符(placeholder)是槽空着时显示在槽内的临时文字,一旦开始输入就从视野里撤走。用它顶替字段名称,就是占位符充当标签失败(placeholder-as-label failure):填到一半或回来改值时,名称已经不在了,人不知道这一格还是不是「邮箱」、隔壁是不是「手机」。它失败的原因是消失,不是颜色浅,也不是它写了格式还是例子。

机制

标签的工作是在整段填写过程中保持字段身份。占位符的生命周期与身份需求相反:空则显、有字则隐。光标进入、第一个字符落下、或浏览器自动填充写入之后,身份线索被清掉。人要核对该格含义,只能删光内容让占位符回来,或去猜。自动填充尤其狠——整页一下子被填满,所有占位符同时消失,剩下的是一排没有名称的值,邮箱和用户名看起来都像字符串。工作记忆装不下整张表的字段名,回看时只能依赖仍留在槽外的名称。占位符从一开始就把名称放进了会蒸发的位置。

怎么研究

比较「只有占位符」「槽外标签加占位符」「只有槽外标签」三种表单,让人填到一半被打断,再回来改其中几项。因变量:改值时能否正确指出字段含义、删光重看的次数、错填邻格。Nielsen Norman Group 对占位符作标签的批评,核心证据就是输入后名称不可用,而不是对比度一项。眼动可看回访时眼睛是否在槽外找已经不存在的名称。自动填充条件要单独做:打开密码管理器一键填入后,问每一格是什么。

边界

搜索框、聊天框这类单一、用途稳定的槽,消失的占位符往往只是「搜什么」的弱提示,槽外已有按钮或页标题承担身份,失败不致命。浮动标签在输入后把名称移到槽外,部分对冲了消失,但那是另一套控件,不是占位符突然变成了标签。浏览器把占位符暴露给读屏器的方式不一致:有的当名称读、有的当补充、有的忽略,不能靠占位符充当无障碍名称。密码格被遮蔽后,连值都看不清,再失去名称,核对几乎不可能。

怎么落地

  • 让每个字段在槽外保留常驻名称;占位符只可用来举一个非必需的例子,或干脆留空。
  • 不要把「邮箱」「密码」「姓名」只写在 placeholder 里。
  • 对会触发自动填充的表,在填满状态下截图:每一格旁边仍应能读到它是什么。
  • 验证:让人填到一半离开,一分钟后只改其中两格。若要先删光内容才能想起格子含义,名称就还在占位符里。

延伸

  • 同组E2.04.2 占位符对比度通常低于可读阈 · E2.04.3 占位符不适合承载格式要求
  • 相邻E2.03 标签位置 · E2.05 浮动标签
  • 站内检索placeholder-as-label failure · placeholder · persistent label

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E2.04.1