泛议网络表单可用性规范

跟你所知的相反,布满漂亮的按钮、颜色和字体,再加上一大把jQuery插件的表单并不一定好用。真的,这么做只能(零散地)体现表单可用性的1/3。

本文中,我们将为你提供简单实用的指南。这些精心制作的指南,囊括了可用性测试、实地测试、网站跟踪,眼球跟踪、网络分析,甚至还有用户对客服人员的抱怨等诸多方面。

表单可用性缘何重要?

ISO 9241标准中对网站可用性的定义是:特定用户在特定环境下,能够快速、有效且满意地完成特定的目标。用户使用网站都是有目标的。 如果设计得好,网站不但会达到用户的目标,还会将其与自身公司的目标联系起来。介乎用户目标和公司目标之间的往往就是表单,因为,尽管人机交互发展迅速,表单仍然是用户与网站交互的主要方式。实际上,表单经常被认作是完成目标的最后也是最重要的一站。

让我们通过讨论表单的三个主要作用来阐述下最后这一点。就像Luke Wroblewski在他的《web表单设计:点石成金的艺术》一书中说的一样,每个表单的存在必有如下三个原因之一:商务、社区或效率。下面的表单把这三个原因转化成了其背后的用户目标和公司目标:

泛议网络表单可用性规范

表单的作用,基于Luke Wroblewski的《web表单设计:点石成金的艺术》。

如此可见,表单和可用性有如下两方面的关系:

1. 表单可以使网站好用或不好用,因为它们挡在用户达成目标的路上。

2. 为了帮助用户达成目标,表单必须要好用

本文将重点讲述第二点,因为表单好用了,网站的整体可用性自然会提升,也就是上面的第一点。

表单的六个组成部分

对于设计师和用户来说,表单让人爱恨交加。随着时间的流逝,对于表单的表现形式和操作方式,用户已有了自己的期望。基本上,他们期望表单包含如下六个部分:

1.标签。告诉用户相应的输入域里应该填什么。

2.输入域。供用户提供反馈。包括文本输入框、密码输入框、多选框、单选框和滑块等。

3.操作。包括链接和按钮,用户点击后,会执行一项操作,比如提交表单。

4.帮助。为填写表单提供帮助。

5.信息。用户输入内容的反馈信息。可能是肯定的(比如提示表单提交成功),也可能是否定的(“该用户名已被注册”)。

6.验证。确保用户提交的数据符合参数规则。

泛议网络表单可用性规范

泛议网络表单可用性规范

Skype的注册表单包含了以上六个部分。

通过三方面来解决表单的可用性问题

尽管在布局、功能和目的上各有不同,所有的表单都有三个主要的方向,就像在Caroline Jarrett与Gerry Gaffney合著的《Web表单设计:创建高可用性的网页表单》中写的一样:

1.关系。表单在用户与公司之间建立关系。

2.对话。表单在用户与公司之间建立对话。

3.界面。通过其展现方式,表单建立了关系和对话。

一个好用的表单,需要解决这三个方面的问题。让我们依次来看,要让一个表单真正好用需要遵循哪些指导方针,这样你也能轻易上手。

第一方面:关系

17世纪的英国诗人、讽刺作家、律师和牧师约翰•多恩曾说过:没人是一座孤岛。确实,人类在关系中成长,不管它是恋爱关系、友好关系、职业关系还是商务关系。表单是建立或增强用户与公司关系的一种方式。如果做得不好,它就会终结此关系。

既然如此,以下规则就显而易见了:

关系要基于信任,因此在表单中建立信任至关重要。可以通过logo、图像、配色、字体和措辞来表达诚意。当用户知道表单所属公司是以诚相待时,他们就会放松警惕。

每一种关系都有目标,浪漫关系的目标是爱和幸福,商业关系的目标是财务增长。自问一下,你的表单目标何在?

表单名字要能表达其意图。表单名要告知用户表单是什么,他们为什么要填写。

一段关系中,了解对方很重要。要了解你的用户并且深入思考,表单上的问题在形式上是否合理,在位置上是否合适。经过这样思考的表单,流程自然很顺畅。

● 了解用户,对于选择合适的语言和剔除冗余的文字同样有帮助。这样打造的界面,才能在用户需求与你的需求之间找到平衡。

不要问表单范围以外的问题。一段关系里,问话不合时宜的人会不被信任。网上亦然。跟相关股东们商量下究竟需要哪些信息吧。

性能或界面的突变会让用户无所适从。同样的,各表单之间或者一个表单的几个步骤之间,绝对不能有突变。

泛议网络表单可用性规范

了解你的用户。让注册用户易登录,让新用户易注册。在Debenhams网站上,这两种表单几乎没有区别。

泛议网络表单可用性规范

 

另一方面,亚马逊的表单把注册用户和新用户合二为一了。

第二方面:对话

表单即对话。对话代表两方的相互交流,此例中的双方即用户与公司。实际上,用户填写表单就是为了与公司交流。

例如,社交网站中,用户通过填写注册表单来告诉公司他们愿意加入。在接受用户申请时(不管是自动还是手动的),公司会(以标签的形式)问用户一系列问题,如姓氏、名字、电邮地址等。一旦用户接受条款(或拒绝),公司就会反馈结果,完成对话全过程。

来看看从这方面得出的一些实用指南:

● 前面已经提到,表单是对话,而不是问话。强势的用语会让用户难以接受,因此,(如果他们不就此离开的话)他们会给出一个你想要的答案,而不是他们的真实感受。

标签的排序要有逻辑性,要能反映对话的流程。例如,先问别人一大堆的问题,然后再问姓名,不觉得这很奇怪吗?相关度越高的问题越应该要放到后面问。

归类同种信息,比如个人介绍可归为一类。好的对话是由一组问题接一组问题组成的。

泛议网络表单可用性规范

雅虎的注册表单通过紫色标题和细线把相关信息进行了有效的归类。

泛议网络表单可用性规范

Constant Contact的类别太多了,这样会让用户困惑的。

● 跟真实对话一样,每个标签每次只应突出一个主题,这样才能帮助用户在相应的输入域中作出应答。

● 对话中会有自然的停顿,表单中则表现为应该在哪里留白,如何归类标签,以及是否分页。

● 任何对话,人们都会因背景噪音而分心。因此,去除诸如banner和不必要的导航之类的杂乱信息,避免让用户分心。

泛议网络表单可用性规范

Dropbox的注册表单堪称模范。留白适宜,页面简洁。

第三方面:界面

界面或者UI对于web表单的可用性极为重要,为此列出如下指南。简便起见,我们将其按照前面说的六个部分进行了归类。

1.标签

● 单词或句子。如果标签容易理解,比如询问姓名或电话号码,一到两个单词就足矣。但是词语或句子更能准确表述。

泛议网络表单可用性规范

亚马逊的注册表单用的全是句子,尽管有些地方单个词语就能搞定。

● 句子形式或标题形式。是像“Name and Surname” 还是像 “Name and surname”?句子形式从语法角度比标题更容易(也就更快)理解。还有一点要明确:一定不要用大写,不然表单会看起来不专业且难以阅读。

泛议网络表单可用性规范

要快速浏览Barnes & Noble的注册表单得有多难啊?

● 标签后面加冒号。一些桌面程序和诸如Windows之类的操作系统建议在表单标签后面加冒号。一些web表单的设计师也信奉此准则,主要是因为老的屏幕阅读器(供盲人使用的一种工具)是依据冒号来鉴别标签。而新的屏幕阅读器则依据标示(尤其是标签tag)。也就是说,冒号的存在,既不会增强也不会减弱表单的可用性,只要形式统一就行了。

● 标签的对齐上对齐、左对齐还是右对齐。 跟一般的建议相反,输入域上方并不总是放置标签的最佳位置。如果想让用户尽快填完表单,这样做是最最好的。但有时为了让用户阅读标签,你会故意想让他们慢 下来。还有,把长表单用一页显示,让用户滚动页面,要比分成几页,每页只有一屏的效果好。每一种的对齐方式都有其利弊。

泛议网络表单可用性规范

从Matteo Penzo的《表单标签的放置》获取的数据。

泛议网络表单可用性规范

表单绝对不能分多列显示。看看Makeup Geek这个表单的右列,很容易被忽略掉(更别说底部的“必填项”声明了)。

2.输入域

● 输入域类型。要根据需要选择合适的输入域类型。每种输入域都有一些用户习以为常的特性。例如,如果只能选中一个,就用单选按钮,如果可以多选则用复选框。

● 定制输入域。不要发明新的输入域类型。在早期的flash网站上这很常见,现在似乎又有回归的迹象:我看到了一些超烂的使用jQuery的输入域。简单最实用。尽量让输入域看起来跟HTML中展现的一个样。

泛议网络表单可用性规范

改变输入域的界面会让用户困惑。

● 限制输入域的格式。如果不得不限制用户输入数据的格式,那么一定要用一种不触怒用户的方法。例如,与其用文本框+“MM/DD/YYYY”标签来表示日期,不如用三个下拉框或者更合适的日历控件来代替。

● 必填和选填。要让用户清楚地知道哪些输入域不能留空。一般都用*号表示必填。其他符号也可以用,只要能看到其文字说明就好(即使是*号要有说明)。

3.操作

● 主要操作和次要操作。 主要操作就是执行最后功能的链接和按钮,例如“保存”和“提交”。次要操作,诸如“后退”和“取消”,可以让用户撤消已经输入的数据。如果被误点了,次要 操作一般会产生不愉快的结果,所以尽量只用主要操作。如果必须要有次要操作,那么也要让它们看起来没主要操作那么显眼。

泛议网络表单可用性规范

不明确区分主次操作会很容易出事。上面的操作按钮,是在圣路易斯社区大学长长的报名单的最后面,想想看误按了“重设表单(reset form)”的后果吧。

● 命名规则。避免使用“注册”之类的常规词语,这样会让用户觉得整个表单都没意思。用“加入LinkedIn”之类的描述性单词或短语会更好一些。

收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部