占位符文本的可用性研究

如果你经常做PPT,想必对占位符应该会比较熟悉,那么占位符文本又是啥?看看本文题图,知乎(或是其他平台)登录界面中的表单填写框内,那两行灰色的文字就是占位符文本。有没有注意到,不同网站或app的登陆界面上的占位符文本,不但具体文字内容不同,功能类别甚至是背后的交互逻辑都是不一样的。所以占位符文本应该是以怎样的形态存在于UI中呢?目前百度谷歌能找到的相关论文或是规范书很少,之前在我Medium上看到一篇论述此主题的文章,有些小亮点但还存在诸多谬误,所以写下这篇文章供大家参考、交流。

 

所谓占位符(Placeholder),是界面设计中常用到的一种元素,它可以包含具体的功能或是信息的组织结构。用户面对空白的电子表单等界面时,往往会产生不能理解交互方式的“认知摩擦”。占位符的主要作用就是在此类用户界面中占据一定的空间面积,既能调节或控制界面给用户的视觉传达效果,同时又可以实现对用户进行默认的提示、说明或引导等功能。

在用户填写表单的界面中,占位符常常以文本的形式呈现,作为对表单填写栏或选项的补充说明,因此被也称为占位符文本。在不同场景下,占位符文本有着不一样的设计目的与职能,暂且可以从设计目的出发,概括为两大类——

使用占位符文本常见的目的有两大类别:视觉优化、功能优化。

  • 视觉优化角度的具体功能有:

第一 “统一视觉效果”功能——基于占位符文本的表现形式为文本这一特性而实现,可以使界面上的图形元素减少,使文本元素与线框成为界面的主要形式。

第二 “缩短表单(或界面)长度”功能——因为占位符文本可以内置于表单填写框区域内,无需额外添加“标签”(label)元素,可以减少表单填写框区域外的标签文档,从而达到缩短长度的效果。

第三 “精简表单(或界面)结构”功能(与第二点类似)——常见的表单组成元素除了标签外,还有示例文本(为用户填写的数据提供格式上的范例参考)、指令文本(提示用户执行相应操作)等页面元素,但它们往往会以不同层级展现:如“弹出窗口”(Dialog)、“弹出气泡”(Toast)等。使用占位符文本可以降低对这类不同层级、结构的元素的使用频率,界面层级浅的结构访问路径短,一定程度上可以帮助用户对完整路径进行观察学习。

综合上述三点,大致可以概括为对表单界面的视觉元素进行整合,使之视觉传达效果趋于整体化、简洁化。

  • 功能优化角度有四大具体功能:
(这类功能的占位符文本是最常见的,知乎也是如此)

第一 “充当标签(或辅助标签)文本”——在表单填写框区域内的占位符文本充当标签或辅助标签,以说明用户在此处填写的数据类型、名称。

(支付宝的注册界面中,“请输入你的手机号码”这段文本就是一个对用户的指令)

第二 “充当指令文本” ——占位符文本在表单填写框区域内对用户执行的操作给出指令或引导,同时让用户对数据填写的对应区域有了较为快速明确的定位。

第三 “充当帮助文本” 指应用占位符文本在表单填写框区域内就用户填写的数据内容、格式等问题提供帮助与参考,便于让相关表单填写经验不足的用户理解对于数据填写的具体要求。同样是上图支付宝的注册界面,“校验码是6位数字”则是一个帮助文本而非指令文本。

(传统程序中常见的预置占位符文本,“example@example.com”是当前填写字段的范例)

第四 “充当示例文本” 第三点功能的具体化、特殊化案例。在用户无法掌握输入数据的格式时,一个实例文本可以直观地展现格式范例,并让用户在输入框区域内实现对照范例输入。

 

综合上述四点,占位符文本的应用旨在给用户执行数据输入的操作提供更加易用、顺畅的使用流程,简化交互关系,改善体验。因此,占位符文本的设计有必要考虑到产品本身的功能性质,作为一个工具性元素加入产品的整体体验设计。

占位符文本直接作用于表单。表单填写框区域内的占位符文本直接影响到用户填写表单所需数据的流程,这种影响并不直观,但可以体现在用户对于表单信息获取的效率并带来的页面停留时间(Time on Page)以及用户填写数据错误率的变化。缺失或难以理解的功能性占位符文本会导致用户执行填写操作的效率低下,长时间停留于表单界面,甚至会造成诸如“反复修改已填数据”、“填写过程多次中断”等结果。此类现象发生率较高但容易被开发者、设计者忽视,从而破坏整个产品的交互体验。

用户体验设计中,有很重要三点:需求是否被满足、满足需求的效率如何、需求之外的情感。表单填写是一个纯粹的功能性、工具性步骤,是服务于用户达到目标的前期准备工作。没有人(或极少数人)会以填写表单本身为乐趣,将此作为自己使用产品的需求与动力。因此设计者要尽可能地简化这个步骤,用尽可能高效、简洁的方式引导用户去执行预设好的操作(即填写表单)才是优化表单界面用户体验的方法,也就是所谓“最好的工具是用户察觉不到的工具”。

既要做足设计,又要让用户意识不到,这是个充满挑战却又有意思的事情。

占位符文本本质上毕竟只是占位符的一种,起到的根本作用是占据空间位置,直接作用是提供信息。这信息包含诸多种类,例如:位置信息(将不同功能区域进行定位)、数据类型信息(说明该区域内数据的类型)、指令信息(提示或命令用户执行相应操作)等。为了保证信息能够用户有效获取,占位符文本必须要具有足够的视觉刺激,过于浅的占位符文本颜色会导致在屏幕上难以辨认。但是由于表单填写框区域内本应该为空白,因此占位符文本的存在本身就对用户具有一定的视觉刺激与导向,所以需要对其视觉上的刺激程度做好控制。如果使占位符文本的文本颜色设定为黑色(或正文文本的相应颜色),则会与正文内容产生视觉冲突,导致用户将占位符文本错误理解为预设文本,进而影响其对与数据填写区域的理解,降低此阶段交互流程的效率。

前文也提到了,占位符文本具有多重功能,可以表达多种的数据类型,因此表单填写框区域内的占位符文本应该保证功能类型的统一,否则会导致表单界面的信息传递逻辑混乱。例如:“登录邮箱地址”数据填写框区域内的占位符文本设定为“例:xxxx@example.com ”(充当示例文本),“登录密码”数据填写框区域内的占位符文本设定为“请输入密码”(充当指令文本)。这个例子中,两处相关联的表单输入框内置两种不同类别的占位符文本,在面向用户的信息传递环节没有遵循统一的标准规范。这种情况下会导致用户对于表单指令的理解产生偏差,如难以理解“例:xxxx@example.com”此项占位符文本对用户的指令与要求。

此外占位符本身具有“可覆盖”这一特性,即:用户在表单填写框区域内进行数据填写操作时,表单默认会以用户当前填写的数据覆盖原本的占位符文本。这也造成了占位符文本给用户的指令、帮助具有时间局限性——一旦开始输入文本就消失了。因为指令信息一般较短且容易理解,所以受到“时间局限性”的影响较小,但帮助文本(包括示例文本)通常长度较长,内容类别较多,导致在用户填写表格时点击文本框后会使得帮助文本消失,因此对于帮助文本的记忆难度较大。对用户来说,浏览信息要比记忆更容易,理想的设计是用户不用查阅说明书就能清楚该产品的功能并进行正确操作。基于前文所述的“占位符文本具有‘时间局限性’”的特点,在用户输入一个较为陌生的数据类型时,往往会输入了一部分而因为对相关要求、规则的记忆模糊而导致输入操作中断甚至取消,重新回到占位符文本未被用户数据覆盖的情境,再次阅读帮助说明。诸如此类的问题还有很多,但设计师和用户往往都不会太重视,因此至今为止还没有关于占位符文本的交互设计规范存在。

我暂且归纳出的占位符文本的设计应遵循的三项基本原则:易用性、统一性和阶段性。

  • 1)易用性原则,即加强引导作用,降低使用难度。优秀的工具是用户察觉不到的工具,占位符文本的职能是降低用户使用界面的负担而非增加用户额外的关注点。因此,要求设计师在占位符文本的设计过程中了解用户的语言、文化、思维模式,以提高占位符的可理解性。实现“置界面于用户的控制之下”、“减少用户的记忆负担”、“保持界面的一致性”。
  • 2)统一性原则,也可以理解为秩序性。占位符文本的类别、定义、布局甚至是形式上的不统一,都是对界面设计背后的交互逻辑的破坏。既会混淆产品界面信息的传递,进而影响用户执行交互操作的流程;又会破坏用户使用产品时的主观体验感受。
  • 3)阶段性原则。占位符文本不是静止不变的界面设计元素,在用户进行阅读、输入等不同行为的同时,与产品的交互关系也不断随之发生着变化。因此占位符文本在人机交互的过程中也是依各阶段发生变化的。对应用户的不同行为、操作,占位符文本应该表现以不同形式,执行以不同功能,不因位置布局而定义功能,而应该因交互的不同阶段、不同目的来进行具体的功能定义。

【如果你坚持能看到这里我也是很感动了,有什么想法、问题或批评、指正欢迎提出~】

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注