深度探析如何提高Web表单的可用性

标签: 深度 web 可用性 | 发表时间:2013-05-04 00:35 | 作者:Justin Mifsud
出处:http://pipes.yahoo.com/pipes/pipe.info?_id=62f110a969c03f9166a6f8dcae0e17f9

该文是对Smashing Magazine上一篇老文章《 An Extensive Guide To Web Form Usability》的译文,温故而知新,希望大家从中可以得到新的收获。

可能与你平时阅读到的资料相反,你在表单中增加华丽的按钮、漂亮的颜色和排版以及大量的jQuery插件不会增加表单的可用性。这样做,你只完成了提高表单可用性三分之一的工作。


本文将提供一些易于遵循的实用指南。这些指南已通过了可用性测试、表单测试、网站跟踪、眼球追踪、Web分析,并解决了不满用户向客户支持人员反应的各种抱怨。

Web表单可用性的重要性

ISO 9241标准对Web可用性作出了如下定义:“产品在特定使用环境下为特定用户用于特定用途时所具有的有效性(effectiveness)、效率(efficiency)和用户主观满意度(satisfaction)”。当用户使用网站时,他们会带到特定的目的。如果网站设计的好,该网站就可以满足这一目的,并与网站背后公司的目的相结合。而连接用户目的与公司目的的通常是表单,因为尽管人机交互已取得了较大进展,但表单仍是用户在Web上进行交互的主要形式。事实上,表单通常被认为是完成访问目的最后,也是最重要的一站。

表单的三个主要用途可以证明最后一点。正如Luke Wroblewski在他的著作《 Web Form Design: Filling in the Blanks》中表明的那样,每个表单因三个主要原因之一而存在:商业、社区和生产力。下表将三个原因背后的用户目的和商业目的进行了一一解析:


表单的作用,源于Luke Wroblewski所著的《 Web Form Design: Filling in the Blanks》。

因此,表单与可用性之间的关系有两个方面:

1.表单可使一个网站可用,也可使这个网站不可用。因为它直接影响着用户达成他们的目的。

2.表单必须可用,以帮助用户完成他们的目的。

该文主要专注于第二点,因为可用的表单将自然地服务于网站的整体可用性,即第一点。

Web表单的六大组件

Web表单是必须的,同时也是设计者和用户的痛点。随着时间的推移,用户对表单的外观和操作方式都有了一定的期望。他们通常期望Web表单由以下六个组件组成:

1.标签(Label)

告诉用户相应输入框中应填写的内容。

2.输入框

输入框使用户提供反馈。包括文本输入框、密码框、单选框、多选框、滚动条等。

3.操作(Action)

包括链接、按钮,当用户点击后,可完成一个动作,如提交表单。

4.帮助

帮助用户完成表单的填写。

5.信息

针对用户的输入,提供反馈信息。可能是积极的信息(如提示表单成功提交),也可能是消极的(如“你选择的用户名已被注册”)。

6.验证

该信息确保用户提交的数据符合参数规则。



Skype的注册表单包含这所有的六个组件

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

尽管表单在布局、功能和目的上各不尽相同,但都包含三方面的内容,正如Caroline Jarrett和Gerry Gaffney合著的《 Forms That Work: Designing Web Forms for Usability》一书上所写的那样:

1.关系

表单在用户和公司之间建立了关系。

2.对话

表单在用户和公司之间建立了对话。

3.表现

通过外观表现,表单建立了关系与对话。

要想表单可用,必须解决好这三方面的问题。下面将依次分析这三个方面,看表单需要遵循哪些指导方针,才能真正好用。

第一方面:关系

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

鉴于此,便产生了以下规则:

● 关系建立在信任的基础上,因此在表单中建立信任至关重要。通过logo、图像、配色、排版和措辞可达到这一目的。当用户知道表单所属公司是一个真诚的组织,他们就会踏实,安心。

● 每一种关系都有目的,浪漫关系的目的是爱和幸福,商业关系的目的是经济收益。自问一下,你表单的目标是什么?

● 基于表单的目的,为它命名。表单名将告知用户表单是关于什么的,以及他们为什么填写。

● 正如在一段关系中,了解对方是很必要的。了解你的用户,并不断思考表单上的问题是否合适,如果合适,它们是否及时。该思考可以使你的表单更加自然流畅。

● 了解用户,对你选择合适的语言,去除冗余的问题也有很大帮助。这样创建出来的页面才能平衡好你和用户之间的需求。

● 不要问表单范围以外的问题。一段关系中,如果某人问了不合适的问题,你就会对他失去信任。网上同样如此。跟相关股东们商量下哪些信息确实是必须的。

● 性能或界面的突然改变会让用户无所适从。同样,各表单之间以及一个表单的几个步骤之间,绝对不能存在突然变化。


了解你的用户。让注册用户易于登录,让新用户易于注册。在 Debenhams网站将这两种表单间的区别做到了最小。


另一方面, Amazon将登陆页面与注册页面进行了融合,大大简化了过程。

第二方面:对话

一个表单就是一次对话。一次对话代表着双方之间的相互交流,在这里,双方即为用户与公司。实际上,用户填写表单就是为了与公司交流、对话。

例如,在社交网站中,用户通过填写注册表单来告知公司他们愿意加入。在接受用户申请时(无论自动还是手动),公司会(以标签的形式)问用户一些问题,如姓氏、名字、电邮地址等。基于用户的接受(或拒绝)情况,公司会给用户以反馈结果,然后完成对话全过程。

从这个角度来看表单,可以得以下实用指南:

● 正如上面提到的,表单是对话,而不是问话。标签处强势的用语会让用户无法接受,(如果他们并没因此而离去的话)他们最有可能给你一个你想听到的答案,但并非事实。  

● 按逻辑顺序对标签进行排序,以反映对话的自然流程。例如,先问某人一大堆问题后,再问其姓名,不是很奇怪吗?相关度越高的问题越应该放到表单的后面问。

● 将同类信息进行归类,如个人资料归为一类。一组问题接一组问题组成的表单流程更像一次对话。  


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


Constant Contact将相关内容进行了归类,但类别太多,让用户感到困惑

● 跟真实对话一样,每个标签每次应该对应一个主题,以帮助用户在相应的输入框中作出回应。

● 对话中自然的停顿,反应到表单中即为留白,如何归类标签,以及是否需要将表单进行分页。

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


Dropbox的注册表单是一个很好案例。留白适宜,页面简洁。

第三方面:界面

界面(或者UI)对于Web表单的可用性极为重要,针对此有如下指南。

1.标签 

● 单词 vs. 句子。

如果目的很简单,比如询问姓名或电话号码,那么标签处用一到两个单词便足矣。但是短语或句子更能准确表述。对于消除多义性,一个短语、句子可能是比较合适的。


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

● 句子大小写vs.标题大小写。

是写成“Name and Surname” 还是“Name and surname”?句子大小写从语法角度比标题更容易(更快)理解。有一点是肯定的:一定不要全用大写,不然表单会看起来不专业且难以阅读。


快速阅读 Barnes & Noble的注册表单真不是件容易的事啊?

● 标签后面加冒号。一些桌面程序和诸如Windows之类的操作系统建议在表单标签后面加冒号。一些Web表单设计师一直坚持这一原则,主要因为老的屏幕阅读器主要依据冒号来识别标签。而新的屏幕阅读器则依据标记(尤其是“label”标签)。另外,冒号的使用只是一种偏好而已,只要风格统一,既不会增强也不会减弱表单的可用性。

● 标签的对齐方式:上对齐、左对齐或右对齐。与一般建议相反,输入框上方并不总是放置标签的最佳位置。如果你想让用户尽快填完表单,这样做是理想的。但有时你会故意让他们慢下来,以便他们认真地阅读标签。还有,将长长的表单以一列的形式显示出来,让用户通过下拉页面来观看,要比多列显示,以便所有表单信息显示在第一屏上更好。每种对齐方式各有利弊。


从Matteo Penzo所著的《 Label Placement in Forms》一书上获取的数据。


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

2.输入框

● 输入框类型。根据需要选择合适的输入框类型。每种输入框都有它自己的、用户熟悉的特性。例如,如果只允许选择一个,就用单选按钮,如果可以多选则用复选框。

● 定制输入框。不要发明新的输入框类型。这种情况在早期的Flash网站上很常见,现在似乎又有回归的迹象:我曾看到一些通过jQuery来实现的、奇怪的输入框。简单通常是最实用的。尽量让输入域看起来跟HTML中展现的一个样。


改变输入框的界面会让用户感到困惑。

● 限制输入框的格式。如果要限制用户输入数据的格式,那至少要采用一种不会激怒用户的方法。例如,代替在日期文本框后加“MM/DD/YYYY”备注,可采用三个下拉列表框,更好的办法是,用日历控件来控制。

● 必填项和选填项。要让用户清楚地知道哪些输入框是必填的。一般用*号表示必填。其他符号也可以用,只要指明它所代表的意思即可(即使是*号,也应有说明)。

3.操作

● 主要操作和次要操作。主要操作就是菜单中完成“最后”功能的链接和按钮,例如“保存”和“提交”。次要操作,如“后退”和“取消”,允许用户取消已经输入的数据。如果误点了,次要操作一般会产生不愉快的结果,所以在可能的情况下只保留主要操作。如果必须要有次要操作,那就让它们看起来没主要操作那么显眼。


主要操作与次要操作之间的区别不明显很容易导致失误。在圣路易斯社区大学长长的表单下面有这样两个操作按钮,试想一下如果误按了“重设表单(reset form)”会有什么后果。

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


虽然可口可乐将主要操作放在了更重要的位置,并突出显示,但却用了很平常的“注册(Submit)”一词,要是换成“加入我们(Register with us)”效果会更好。

4.帮助

● 表单帮助文字。你永远不应该向用户解释如何填写表单。如果它看起来不像表单或很难填写,那么只有重新设计了。帮助文字只应出现在需要的地方,比如解释为什么需要信用卡信息,或者解释出生日期的用途。这些文字很容易被忽视,所以要尽量简洁易读。第一准则就是,解释文字(总共)不要超过100字。

● 用户触发和动态帮助。与其每个输入域后都加上帮助文字,不如让其只在需要时才出现。可以在输入框旁边放个小图标,让用户在需要时自行点击。更好的方法是,当用户在输入框里输入数据时,动态显示帮助信息。这种应用越来越普遍,使用JavaScript的库,诸如jQuery,很容易实现这种效果。


Skype的注册表单既包含了用户触发帮助(蓝色的文本框是通过点击问号图标触发的),也包含了动态帮助(下面列出的建议使用的用户名)。

5.信息

● 错误信息。告知用户有错误发生,一般会阻止用户继续填写表单。可采用以下方法突出错误信息:颜色(通常是红色),熟知图形(如警告标志),突出显示(通常在表单上方或是发生错误的侧边),大字体,或者以上综合。

● 成功信息。用以告知用户其在表单上取得了较大进步。如果表单很长,成功信息可以鼓励用户继续填写。和错误信息一样,成功信息也应突出显示。但是不能阻碍用户继续填写表单。

6.验证

● 只在需要时验证。过多的验证跟完全没有的效果一样差,因为它们都会让用户受挫。验证仅限于确认关键信息(比如用户名的可用性),确保答案真实(不允许130岁以上的年龄)等。

● 智能缺省。使用智能缺省是为了让用户更快更准确填写表单。例如,根据用户的IP地址事先选定其国家。但是使用这些时要格外小心,因为用户一般不会去改变这些事先选定好的项。


Twitter的注册表单使用了动态验证(在姓名、邮箱、密码和用户名上)和智能缺省(“保持登录状态”)。

结束语,开端

结束语这个词用在这里不准确。让该文成为你新的起点,学习我在本文中讲述的,并把它们应用到你的表单中。可喜的是,关于所有的这些,仍有大量内容可讲,针对每一点,你可以发现大量的资源。正如我在文章开始说的,只调整UI,这一捷径不会让你的表单更好用。(编译/陈秋歌 责编/魏兵)

原文链接: An Extensive Guide To Web Form Usability

相关 [深度 web 可用性] 推荐:

深度探析如何提高Web表单的可用性

- - csdnNews
该文是对Smashing Magazine上一篇老文章《. An Extensive Guide To Web Form Usability》的译文,温故而知新,希望大家从中可以得到新的收获. 可能与你平时阅读到的资料相反,你在表单中增加华丽的按钮、漂亮的颜色和排版以及大量的jQuery插件不会增加表单的可用性.

浅谈web标准、可用性、可访问性

- snip.wu - MED
前言:大家不难发现,只要是招聘UED相关的岗位,如前端开发工程师、交互设计师、用户研究员甚至视觉设计师,一般都对web标准、可用性和可访问性的理解有要求. 那么到底什么是web标准、可用性、可访问性呢. 简单的说,就是HTML、CSS、JavaScript这三者分离. WEB标准不是某一个标准,而是一系列标准的集合.

Web未死

- Sinan - GeekPark 捕风捉影
App的极限已经浮现,而Web则是突破此极限,推动下一个数字时代革命的起点. 距离美国《连线》杂志发表《Web已死,互联网永生》这篇文章还不到一年的时间,业界为Web平反的声音渐起. 2010年1月,苹果发布iPad,紧随其后在6月又发布了iPhone4. 没有人质疑过苹果的iTunes+App的商业模式,App可谓如日中天.

web的演变

- 酿泉 - 前端观察
这是一个基于GAE的项目,有mgmt design、GOOD、Hyperakt和Vizzuality开发,也有Google chrome团队的参与,记录了浏览器与互联网技术的演变. 不多介绍,直接去看看吧:Evolution Of Web. 值得一提的是,这个项目的代码很不错,值得学习一下.

Web Service入门

- - 博客 - 伯乐在线
本文来自文章作者 @Jeremy黄国华 的投稿. 伯乐在线也欢迎其他朋友投稿,投稿时记得留下您的新浪微博账号哦~. 目前对Web Service没有统一的定义,定义一:Web Service是自包含的、模块化的应用程序,它可以在Web中被描述、发布、查找以及调用. 定义二:Web Service是基于网络的、分布式的模块化组件,它执行特定的任务,遵守具体的技术规范,这些规范使得Web Service能与其他兼任的组件进行操作.

Web Apps来袭

- - HTML5研究小组
如同历史上任何一次互联网基础标准的变化都会在随后几年中带来应用创新的大爆发一样,当HTML5在2011年逐渐被主流厂商所接受之后,围绕Web Apps领域的创新风暴正山雨欲来. 2012年1月12日,老牌传媒集团《金融时报》(Financial Times,以下简称FT)宣布收购为其开发移动Web App的研发公司Assanka ,这样,FT将不再以外包的形式雇佣Assanka为其打造移动Web App,而可以直接让它在内部进行开发.

Google 的 Web Desinger

- - 极客公园-GeekPark
[核心提示]Google 的免费 Web 设计工具虽然现在主要目的是为广告设计,今后会不会成为 Chrome 应用的开发工具. 听到 Google 推出了一个名为 Google Web Designer 的网页设计还有点惊讶. 虽然 Google 是 Web 技术的大力倡导者,毕竟自己严重依赖这个平台,但市面上相关的产品太多了,从专业的开发工具到小白的所见即所得软件数不胜数,还有 Adobe 这个专业玩家.

Chrome 的 Web Intents 会改变 Web 吗?

- hailin - 爱范儿 · Beats of Bits
2011年8月4日,Chrome 团队宣布将支持一个新的技术—— Web Intents. 这个技术未来可能会极大的影响网络应用和浏览器. 什么是 Web Intents. 如果您用过 Android 手机可能就会对这个技术有所了解. Android Intents 可以让两个独立的程序之前通信互相,神奇的是这两个程序中的任何一个程序可能不知道它在和谁通信.

[Web] 連結分享

- yasy - 網站製作學習誌
关于做PHP扩展开发的一些资源. 我对PHP5.4的一个改进. schema-database – 查詢結果與 PDO::FETCH_CLASS. 讓AJAX動態內容支援瀏覽器回上頁功能. LESS介紹及其與Sass的差異. 網頁設計該用哪種字級單位:px、em或rem. IE10将增强对HTML5和CSS3的支持.