目录
写得少又有用的帮助文字

在表单填写中,尽管标签提出了问题,输入框的形态特征也为填写提供了线索,但这些信息,还不足以帮用户顺利的完成表单填写。

常见的补救方法是为用户提供帮助文字,有了这些文字的补充说明,用户可以更轻松的回答问题了。但凡事总有两面,为表单中的问题增加过多的帮助文字,也并不是一件好事情,冗余的提示往往会增添用户的填写压力。

所以,在使用帮助文字前,我们必须要搞清楚这样一个问题,那就是什么情况下,为用户提供帮助文字最为适宜?


一、使用帮助的三种情景

当我们进行表单设计时,在如下3种情景下,为用户提供帮助文字较为恰当。

第一种是表单中出现了用户不熟悉的内容,比如专有名词,特定数据类型等,我们需要对其做出解释。


第二种是表单问题中,涉及私密性数据的收集,这时需要向用户做出正当性的解释,比如需要用户提供身份证号码,银行账号等


第三种是在表单填写中,涉及特殊的操作,这是就需要为用户提供帮助引导。比如,有些产品在打标签环节,需要用户在输入每一个词语后,点击一次空格,这样才能有效生成一个标签。




二、帮助有哪些类型?

虽然我们对帮助文字的使用场景有了清晰的理解,但是如何合理的展示这些帮助文字内容,就成了我们接下来的工作重点。目前,主流的关于帮助文字的展示方式,可归纳为三个系统方向。第一种是即时帮助系统,第二种是手动帮助系统,第三种是面板帮助系统。


1. 即时帮助

顾名思义,即时帮助系统,就是在用户执行表单填写任务中,动态为用户提供帮助说明的设计方案。主流的即时帮助系统有四种表现形式。第一种是将帮助文字显示在固定区域,第二种是以说明气泡形式提供帮助说明,第三种是通过在输入框体内的举例,来为用户输入提供帮助。


1.1固定区域帮助

有的表单设计者,会在表单页中,留出一个固定的空白区域,来承载帮助文字内容。比如在页面的头部或是右侧。当用户激活问题输入框,执行输入时,空白区域就会对应问题,显示填写帮助。


这种帮助方案的优点是,用户可以在固定的区域找到帮助信息。但缺点也显而易见的,那就是帮助文字和输入框空间位置较远,二者建立联系比较困难,如果帮助文字的展示区域设定在页面头部,那么很可能会因滚屏操作,而导致区域遮挡,这样用户很容易错过帮助信息。


1.2气泡帮助

为了更好的建立输入框和帮助文字的联系,有的表单设计者采用了气泡形态的帮助说明。当用户激活输入框时,如果该输入框有相关的填写帮助,那么此时会借助气泡展示这些帮助文字。


这种设计方案,虽然能够在输入框和帮助文字间建立联系,但因气泡常驻于页面,势必会造成对其他输入框体的遮挡。


1.3框体内帮助

有的设计者在框体内标签设计中获得灵感,他们通过在输入框体内,填入描述性文案或提供举例为用户填写提供帮助。


框体内帮助文字的展示方式,可以有效避免过多的界面空间的占用,同时也不会和他输入框产生冲突。尽管这种方案初看起来很不错,但使用这种类型的帮助时,我们需要谨记以下几点

1.框体内帮助仅适用于简单输入,复杂输入帮助,我们需要慎重对待

2.使用框体内帮助时,需要保证帮助文字要与所填答案间能形成有效区分,常见的设计方法是,将帮助文字设计成浅色,或是为其增加“例如”等举例文案加以引导。


3.使用框体内帮助时输入框,不要在用户刚激活输入框后,第一时间就隐藏帮助文字,这样,用户会无法借助帮助文字进行填写思考。


即时帮助系统,不会预先显示帮助信息,所以使用这种类型帮助的表单,页面设计都非常整洁。即时系统不会提前向用户展示帮助信息,这非常适合用户可以回答,但不知道如何回答的表单任务中。



2.手动帮助

相较于即时帮助系统,手动帮助系统则是需要用户与界面帮助元素进行交互后,才可以触发帮助说明。这些帮助元素包括但不限于:图标、图片、按钮、文本链接等。在进行帮助系统设计时,我们需要特别注意,在同一个表单中,只能使用相同的帮助元素类型。


手动帮助系统,有多种设计和交互表现形式。第一种是通过文字插入的方式展示帮助内容、第二种是通过点击触发的方式,激活帮助文字。第三种是通过鼠标悬停的方式,触发相关帮助


2.1插入式帮助

早期的产品设计中,设计者非常喜欢使用插入式的帮助系统,当用户在使用这些产品时,点击界面中的帮助元素,就会触发一段帮助文字,这些文字通常会显示在输入框的附近位置.


当大段帮助文字被插入时,会明显拉长表单长度,这势必会造成界面跳跃,进入影响用户正常的填写。



2.2点击式小窗口帮助

相较于插入式帮助,点击小窗口帮助系统,能很好的规避表单页跳跃。当用户点击界面中的帮助元素时,会触发一个帮助说明的小窗口(有些设计师将其称为气泡)


这个小窗口,有时会保持常驻状态,只有当用户不需要帮助说明时,可以手动选择将其关闭。


2.3悬停式小窗口帮助

和点击小窗口类似的悬停小窗口帮助系统,不需要用户点击帮助元素,而是将鼠标悬停于帮助元素之上时,就能触发帮助文字,只要我们保持鼠标位置不动,这个帮助小窗口将一直存在。由于悬停小窗口帮助灵活、便捷,所以在目前的主流产品设计中应用广泛。


手动帮助系统,非常适合用户不熟悉或复杂问题设定的表单中。普通用户可以通过点击界面中的帮助元素,获取所有问题填写的帮助说明。而高级用户可以按需查阅帮助文字,来激活历史操作记忆。




3.面板帮助

有的产品表单填写非常复杂(基本上每个问题都需要帮助),针对某一元素或者填写方式的帮助说明,需要通过大段文字来阐述,甚至还需要插入特定图片,以及表格。通过使用气泡或者小窗口展示这些内容变得困难,早期的表单设计,遇到上述问题,常常通过打开一个全新的浏览器窗口来显示帮助文字。但因浏览器窗口拦截,使得帮助文字经常无法正常显示。

如今主流的设计方式是在表单的一侧,为用户预留一个固定的面板空间,用以展示帮助说明。这一设计方法和我们前文中讲到的即时帮助系统中的固定区域帮助相似,不同点是,固定区域帮助的帮助文字显示于表单之内,而面板帮助的帮助文字,则显示在表单页面板之外,一个命名为帮助的全新面板中呈现。


面板帮助更适合复杂问题的表单,为了保障表单填写不被过多的干扰,面板帮助可以被设计成隐藏模式。当用户有查看帮助需要时,可以通过点击触发元素,来激活帮助面板。帮助面板被激活后,面板中的帮助内容会跟随用户的填写,做出同步更新。


Design tips

1.在表单设计中,我们应该更好的设定问题,而不应过分依赖帮助文字来做补充说明

2.使用帮助文字时,应该主要用于向用户解释不熟悉的数据、隐含的操作说明,以及特定数据收集的原因

3.帮助文字原则上,应该与解释的问题在空间位置上更近,二者之间的相关性应该被清晰的传达

4.框体内帮助只适合用作简单问题的帮助,多以举例形式呈现,帮助文字用色上要与答案形成有效区分,不可以成为答案的一部分

5.即时帮助系统非常适合用户可以回答,但不知道如何回答的表单任务中。

6.图标、图片、按钮、文本链接等可以作为手动帮助的触发元素

7.同一表单设计中,只能使用一种的触发元素类型。

8.手动帮助系统,适合用户不熟悉或者复杂问题设定的表单。

9.面板帮助系统,非常适合那些每一个问题都需要帮助的表单设计页。

10.面板帮助可以被隐藏,只有当用户有需要时,可以借助帮助元素来触发帮助面板。