易用为王:改进产品设计的10个策略(txt+pdf+epub+mobi电子书下载)


发布时间:2020-07-05 14:19:12

点击下载

作者:(美)Eric Reiss

出版社:人民邮电出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

易用为王:改进产品设计的10个策略

易用为王:改进产品设计的10个策略试读:

版权声明

All Rights Reserved.This translation published under license.Authorized translation from the English language edition, entitled Usable Usability: Simple Steps for Making Stuff Better, ISBN 978-1-118-18547-6, by Eric Reiss, Published by John Wiley & Sons.No part of this book may be reproduced in any form without the written permission of the original copyrights holder.

Simplified Chinese translation edition published by POSTS & TELECOM PRESS Copyright © 2013.

本书简体中文版由John Wiley & Sons, Inc.授权人民邮电出版社独家出版。

本书封底贴有John Wiley & Sons, Inc.激光防伪标签,无标签者不得销售。

版权所有,侵权必究。

献词

献给我的父母——路易丝和埃里克·瑞斯,

他们教会我如何用个人的力量改变世界!

对本书的赞誉

“在本书中,智慧的瑞斯对可用性的基本原则进行了新的探索,并针对如何提升可用性给出了实用性的建议。我的书架上肯定会有这本书!”——Susan M.Weinschenk博士,著有《设计师要懂心理学》“读了本书之后,你会奇怪这么多存在可用性缺陷的产品是如何进入市场的,并决心不要犯同样的错误。在本书中,埃里克·瑞斯提供了大量的实用技巧及实例,激励那些初出茅庐的设计师和经验丰富的从业者努力让事物变得更简单易用。”——Martin Belam,英国《卫报》新闻媒体集团的首席用户体验和信息架构师“实用、易读,附有大量的经验实例,本书会让你的产品或网站变得更易用!”——Gerry McGovern,著有Killer Web Content and The Stranger’s Long Neck“对可用性的认知不能仅仅限于设计领域,它也有着重大的哲学意义。由于现代生活中的太多事情都由左脑构建,人们几乎忘了大多数决定是由不健谈的右脑做出的,正是右脑通过我们的体验来产生大量的愉悦和愤怒的感觉。埃里克的这本书是对这个重大争论问题的极大补充。”——Rory Sutherland,英国奥美广告公司副董事长,著有The Wiki Man“可用性观点清新实用,绝对值得一读。”——Harry Max,Rackspace体验设计部副总裁“请向埃里克·瑞斯征求易用性的建议,你会听他述说麻醉的海龟、糟糕的航空服务,还有真空袋的故事。这本书的每一页都彰显着埃里克的睿智,为创建精彩的可用性提供了实用性指导。”——Dan Willis,Sapient创意副总监(访问http:\\www.uxcrank.com了解更多)“如果你真的想创建良好的用户体验,那么就非得读读这本书不可!作者对可用性的独到见解通过诙谐有趣的实例展现得淋漓尽致,充分体现了他少有人及的商业视角。”——Richard Dalton,先锋集团体验策略和测量部高级经理“如今,好的可用性并不是‘可有可无的’——它是一个商业准则!在这本非常有用和好用的书中,埃里克·瑞斯准确地解释了改善产品和服务的方法和基本要求。你要赶在竞争对手之前阅读它! ”——Michael Seifert,Sitecore公司CEO“在本书中,埃里克·瑞斯撰写了新的经典。经验丰富的用户体验从业者、初出茅庐的设计师和有兴趣创造难忘体验的人,都会发现本书内容富有洞察力、引人入胜并鼓舞人心。把它放在你的书架/电子书阅读器上吧! ”——Matthew Fetchko,数字化策略师“可用性的问题不再是少数专家关注的内容,它成为所有参与产品或服务设计的人都需要意识到的领域。关于如何让事物有用并且吸引人,你会在本书中发现许多颇有见地的好主意。”——Atsushi Hasegawa博士,Concent公司总裁兼信息架构师“正如作者所言,‘简单地说,如果一个产品有用,你才会使用它’。埃里克的书是有用的。让我惊奇的是,书中描述了大量日常生活中的场景,以及我们努力克服的一些问题,我们浪费了宝贵的时间,都是因为这些产品没有经过适当的可用性测试就发布了。书中精心选择的插图和实例一定通过了可用性测试,再加上埃里克出色的幽默感,我保证你会拥有愉快的阅读体验。”——Kiran Mehra-Kerpelman,联合国信息中心主任“这真是一本好书!埃里克·瑞斯在本书中汇集了他多年来在世界各地对于可用性的敏锐观察。在这个完美的著作中,他提供了减少不确定性和让用户易于理解的指导原则。他为那些负责产品设计(包括从餐具到界面的所有东西)决策的人提供了一个简单、平实和有用的综合手册。我再强调一遍,这真是一本好书!”——Jay Rutherford,包豪斯大学可视化传播教授

致谢

很多人参与了本书的创作。包括成千上万无名的艺术家、作家、教育家、政治家、军人和牧师,他们影响了我对可用性的看法。我遇到的很多设计专家也触发了我的思考过程,但我不记得源头了。谢谢你们,我有时会忘记你们的名字,但我始终记得你们的想法。

即便如此,仍然有四个人对我的影响尤其巨大:Claus Møller,20 世纪80 年代时,他把我介绍到斯堪的纳维亚服务管理部门;Ray Considine,他告诉我服务和转换率是密不可分的;Philip Crosby,全面质量管理大师,展示了为什么“零缺陷”应该是每个人的目标;Mogens Sørensen 是我广告业务中多年的导师,他告诉我形式和功能如何结合起来创造出真正奇妙的事物。

在这本书的创作过程中,身处世界各地的FatDUX同事给予了我莫大的支持。在丹麦的Maiken Kjærulff 花了很多天进行图片优化和文本模板调整,以及审阅我的初稿。非常感谢大家!

我的老友和诤友Lynn Boyden,提供了精湛的编辑帮助和技术编辑。我听取了她的大部分建议;如果你看到了自己不喜欢的东西,那都是我的责任。而Lynn无疑会说:“我早就告诉你了。”

我很感激Marcel Douwe Dekker、Matthew Fetchko、Mark Hurst、Kishore- kumar62、Peter J.Meyers、 Anders Schrøder、美国搜素营销专业组织、John Smithson,以及维基百科项目提供照片、截屏和其他图片。

整个威立团队很优秀。耐心的策划编辑Mary James,与我的好友和法人代表David M.Saltiel 密切合作,一直负责本书,从提出想法到签订合同。项目编辑Maureen Speers,对一些粗糙的段落进行了润色。文字编辑Charlotte Kughen,确保了文本流畅和拼写正确。高级制作编辑Deb Banninger 和制作编辑Katie Wisor,把这一切变成了一本真正的书!我非常、非常感激。

最后,我要给我的妻子Dorthe一个大大的拥吻,感谢她忍受所有这些废话。当然,我保证,总有一天我不会再拍摄这么多门把手和盐瓶的照片。——埃里克·瑞斯2012年6月于丹麦哥本哈根

引言

“可用性”一词让我抓狂,“用户友好”则更甚。类似的表达,如“棒极了”,往往被滥用到没有什么意义可言。在www.amazon.com上搜索可用性(usability),可以得到4000多条搜索结果,几乎是“网页设计”(webdesign)搜索结果的两倍。也许正因为这样,经验不足的网页设计人员常常以产品可用性的统计数字为挡箭牌,来为自己的工作成果辩解,而不是努力做得更好。

当然,尽管可用性的相关研究经常被滥用与误用,但业内许多人早已知道,“可用性”的确是企业成功的秘诀——无论线上还是线下。因此,我想谈谈关于可用性的一些想法、经验和实例,分享给那些想运用常识做出更好东西的普通人,他们不愿只是依靠策略来完成工作。

首先,我要对“可用性”这一核心概念进行定义。

什么是“可用性”

我对可用性定义如下,以供大家参考:可用性指的是个体通过“利用”任何研究、改进或设计的对象来完成某个任务或实现更大目标的能力,这些对象甚至包括一些不涉及门把手或网页之类的具体物品的服务。

可用性就是这么简单,它是如何发挥作用的呢?

如果一辆汽车不能启动,那它最基本的功能可用性就很差。如果一辆汽车可以启动,但是不安全、不可靠或者仅仅是令人不舒服,那么它仍然存在可用性问题,尽管问题较为间接。但重点是以上的例子中,汽车的可用性和我们的情景需求相关联。这就意味着我们对体验的满意度会影响到对产品可用性的评价。如果我们正在享受悠闲的长途公路之旅,最重要的可用性指标就是舒适。如果下雨了,邻居主动提出载我们一程,这个时候,方便则比舒适更重要。即使是一辆不能行驶的汽车,也能遮风避雨,成为游乐场所,或者用作研究对象(想想无家可归的人,在游乐场所退役的消防车上攀爬玩耍的小孩,以及汽车博物馆)。

在开发线上系统时,我们可能会考虑加载时间、导航视图、页面布局,甚至按钮的大小等,这些都属于可用性的范畴。

如果接受这个基本定义,那么你就会明白,可用性不仅仅适用于网页设计、移动应用、自动柜员机和其他屏幕界面应用。我认为可用性的问题无处不在——小到在厨房使用开罐器,大到在某个遥远国度使用护照。我没找到更合适的专业术语,暂且把所有这些东西都称为“东西”吧。在我看来,可用性并不仅限于我们经常听到的类似“链接应该是蓝色的”这样迂腐的建议。所以,在后面的章节中,我会介绍更多相关内容。无论是具体的产品还是服务,其可用性都取决于具体的情景。图中的汽车目前是孩子们玩耍的场所,但是当你开着它去灭火时,它的可用性就不再体现在好玩上,而要从别的方面考量了。(图片经shoutaboutcarolina.com授权)

可用性适用于哪些方面

可用性包括两个要素:一个是易用性,另一个是简洁清晰。易用性是指产品的物理属性,即可以实现使用者的具体需求;简洁清晰是指使用者赋予产品的心理属性,即可以实现使用者的心理预期。所以,我把本书分成两个主要部分,并分别在每个部分列举了你应该关注的5个关键问题,这两个部分会有大量的交叉内容。

首先要说明的是可用性这一主题涉及方方面面。所以,你要灵活地运用你所知道的任何规则,包括我的建议。本书中,我介绍的仅仅是在我的工作中行之有效的方法。你要大胆革新,让这些信息更符合你自己、你的公司和客户的需要。

我曾在马德里的西班牙IE商学院任教三年,担任可用性及设计这门课程的教授,这门课被纳入数字营销专业的硕士培养计划。就我所知,该计划的大多数课程都与创业及商业相关,而我是唯一与设计打交道的教授。我在本书中介绍的观点大部分都在课堂上讲授过。令人吃惊的是,一个学期后,我的很多学生都可以做出与一些可用性评估专业人士相媲美的可用性研究。我想,既然该方法论适用于没有设计背景的商学院学生,那么经过相关指导,大多数人也应该能够做出重要的可用性改进。

可用性为什么如此重要

简单说来,如果一个产品可以用,那你就会使用它;如果一个产品不能用,那你就不会用它(尽管我们确实容忍了iTunes、Facebook和微软的一些糟糕设计)。通常人们买东西是为了使用它,因此,可用性一下子成了在线交易系统必不可少的特性,尤其在提供某个产品的用户免费试用时。但可用性并不局限于产品的可用,它包含两方面——另一个方面就是用户的心理感受。

比如,你家附近有两家比萨店,这两家店的比萨都很好吃,价格也不相上下。但是订餐时,一家店态度冷淡,而另一家店却会热情地叫你的名字,跟你打招呼,让你感到很受欢迎。

那么你会买哪家的比萨呢?

这不仅是一个服务设计的问题,同时也是一个可用性的问题,毕竟可用性与用户满意度直接相关。

当然,你会提出质疑:“前面你提到,可用性解决的是与某物交互时所产生的生理和心理两方面的感受,那么究竟提供可用性的产品是什么呢?”尽管你的观点有一些片面,但你的疑问很合理。考虑一下,作为顾客,你更喜欢服务比较好的比萨店,那么,比萨店的服务质量即为可用性的相关因素。可用性不仅指像比萨、包装盒等实体产品的质量,也包括服务的质量。

产品和服务的可用性相辅相成,而且,品牌的某个要素的糟糕经历会直接影响我们对该品牌其他要素的评价。我将通过一个小故事来说明为什么我认为服务和期许也要纳入可用性的相关因素之中。

我那高档的洗碗机最近刚刚修好,幸好还在保修期内。修理人员说,因为洗碗机打碎了太多的玻璃杯,玻璃碎片弄坏了水泵,所以洗碗机洗得不太干净了。洗碗机的内部结构像一个心肺机,修理人员经过几个小时才换好了水泵、过滤器和水管。最后他委婉地建议我们不要再用洗碗机清洗破了的玻璃杯,并且我们家的情况基本上不会引起公司的重视。

什么?我不洗坏了的玻璃杯,而是把它们扔掉。是可恶的洗碗机打碎了我的杯子,而且还不能把小零碎洗干净,它倒是被这些碎片弄坏了水泵。

结果,因为这个洗碗机质量实在太差了(尽管很贵),我一年多的时间里都自己手洗玻璃杯。你说我还会从这个知名公司买其他的产品吗?当然不会。所以,从更广泛的意义上说,我笃信可用性会直接影响到企业的销售业绩。简单地说,忽略可用性就等于赔钱。

谁关注产品的可用性呢

所有人都会关注产品的可用性。也许我们不能及时发现可用性的问题,这也没关系,因为每个人迟早都会感受到。顾客喜欢你的公司,才愿意光顾;如果他们不想和你做生意,就不会走进你的商店,也不会去点击你的网站。

顾客光顾你的店铺时是抱着怎样的心态呢?他们是否已经准备好与你进行交易,还是打算货比三家?如果他们第一次光顾时,你就说服他们购买了你的产品,那么你的产品和服务会让人非常满意,吸引回头客吗?

以航空公司为例,尽管航空公司有多种多样的顾客忠诚度提升计划,但据业内人士分析,旅客的忠诚度并不是很高。大多数乘客只是希望能以最便捷、最便宜的方式基本准时地从一个地方飞到另一个地方罢了。正因此,航空公司都有航班时刻表,不是吗?

听起来有些道理,但是我们可以分析一下:

怎样才是“最便宜”?怎样又是“最便捷”?

如果基准票价比较便宜,但是预留座位、行李超重、用餐等都需要另外付费,那这还是一张“便宜”的机票吗?

要记住,消费者需要做的决定越多,产品就越麻烦,可用性也就越差。如果航空公司告诉我们,“不用担心,我们会负责所有的事情并且不需要支付任何额外的费用”,那它的可用性就更好,产品也就更简单,甚至有人愿意为这种便利付费。

有些公司则反过来,把事情复杂化。我认为,如果一个公司不能提供好的服务,那么他们的产品就必须非常便宜。这是欧洲过去十年来出现的一个趋势,尤其在一些折扣连锁超市里。这些超市的过道里摆满了尚未开封的成箱货物,商品随意摆放,商品种类五花八门,收银台前总是排着长长的队伍。

可以看出,可用性领域并不是那么黑白分明!在大多数的企业中,有关可用性的决策会直接影响到企业的利润,所以你需要深谙基本的可用性之道。如果你真正明白自己的选择及其结果,就可以做出明智的决策,从而为你的公司赚得更多的利润。

有效利用可用性

人们总是混淆可用性(usability)和有效性(usefulness)。这里有个小故事。

许多年前,我早上5点去哥本哈根机场评估一套高级的交互式音频接口系统。它是波音747客机头等舱服务系统的一部分,飞机隶属于世界上最有服务意识的一家航空公司。虽然这套系统非常好,但是似乎没有人使用。我的任务是在黎明前短暂的停机时间内找出没人使用的原因。

在那个还没有iPod的年代,飞机座椅的扶手能让你随时欣赏数千首音乐,这个主意是非常酷的。头等舱的乘客可以自定义播放列表,来度过他们从欧洲飞往远东12小时的旅程,这是整个创意的关键。

结果我发现,虽然这个系统相当好用并且非常直观,但却有一个致命的缺陷:谁会愿意花时间整理一个一次性的播放列表呢?虽然系统的接口非常好用,但是对于想在旅途中充分休息的乘客来说却未必有用。

我的建议非常简单:恢复最经典的分类——摇滚、爵士、古典、轻音乐,等等,按一个按钮就可以让机器运转。我也建议使用简单的跳过按钮,让乘客跳过不想听的音乐直接进入下一首。结果你猜怎么着?乘客开始使用这个系统并且喜欢上了它。

从中我们得到了一个教训:你可以做某件事情,并不意味着你就应该做这件事情。正因为人们总是认为“可能会有人需要它”,于是产生了太多的应用程序、网络功能、无意义的网页内容。人物角色概念的创建者、可用性领域的先驱之一阿兰·库珀(Allan Cooper)曾经说过:“当你听到‘有人可能需要它’时,你将会听到一个非常糟糕的设计方案。”

所以,我希望你们能够设计出人们会使用的应用程序,构建真正能够帮助人们更好地工作的网络功能。请设计一个只有100个页面,但内容详实的网站,而不是设计一个有500多个页面却华而不实的网站。

博戈·瓦托维克的三级可用性计划

一天晚上,我的好朋友博戈在喝啤酒的时候解释了这个可用性计划。他认为,在任何组织中,实施可用性都要经过以下三个阶段。(1)没有人谈论可用性。(2)所有人都在谈论可用性。(3)没有人谈论可用性。

第一个阶段显而易见,当然对于本书的读者来说不是,因为你在看这本书。令人震惊的是,虽然大多数公司口口声声说支持产品可用性,但好像仍然都在忽视可用性。在第二个阶段,企业会邀请一些外部专家进行一系列的讲座,整个公司都在探讨可用性会如何改变他们的世界。第三个阶段则比较复杂,因为它会有两种发展模式。最好的发展模式是:所有人都认为可用性是理所当然的,所以无人再谈论。可用性已经成为了项目开发进程和企业规划的一部分。可用性的理念已经融入到整个组织系统中,融入到了每个员工的心里。

这是好的发展模式。不怎么好的发展模式是,这些收费颇高的顾问离开之后,人们就不太关心可用性了。这似乎是比较常见的结果,也是我决定写这本书的原因之一。即使是某一个人在了解一些可用性的基本概念后,也会有一些实实在在的改变。博戈·瓦托维克的三级可用性计划非常简单,我们在啤酒杯垫的背面草拟了第一版。该计划的第三个级别比较复杂,因为这个阶段可以非常成功,也可以非常失败,这取决于你是否朝着正确的方向发展。

低预算

在10年或15年前,对网站进行正规的可用性测试意味着要编写测试方案,纳入6个测试项,然后在一个看似警察局审讯室的房间里,让用户一个个进来使用,客户和设计人员则坐在单面镜的另一侧的隔壁房间,详细观察用户的每一个执行步骤。

过去这些年来,我们已经了解了很多关于可用性的知识,虽然可用性问题仍然存在,但是我们已经不再犯10年前犯过的很多错误了。这是因为我们清晰定义了“最佳实践”,以及一些相当可靠的设计模式——在设计网站的时候可供参考。这也意味着,可用性测试已经相当商品化、低成本了,至少对于网站来说是这样的。同时,我们可以利用微型网络摄像头来观察测试对象,大大减少了对单面镜和正规测试实验室的需求。

但是,对于移动应用又如何呢?对于工业接口产品呢?如果你都不能进入可用性实验室,那又该如何测试类似污水处理装置的控制功能这种东西呢?如何测试汽车仪表盘呢?

如果你要进行真正的可用性测试,通常需要“实地”做一些特殊项目。但最关键的是:如果你认同这些原则并且从可用性的角度去思考问题,就会发现,只要动用一点常识,就可以避免许多问题。凭心而论,只有极少数工业企业真正对自己的设计执行正式的可用性测试。他们应该做,但往往不做。在本书中,我举了一些亲身经历的古怪例子。

大多数企业最大的挑战之一就是对已发布、交付或已经投入使用的产品制定可用性测试的预算,无论网站还是污水处理厂都是如此。所以,本书中的每一章都会附一个简单的清单,重点列出一些需要关注的典型问题。如果你参照清单发现自己的产品或服务有问题,那就解决它。有时候你无需做正规的测试,就可以让产品变得更好。

记住,在处理互动媒体时,你不是项目的一部分,而是过程的一部分。换言之,我们应该寻找机会进行一些小的渐进式改进。即便如此,如果公司的决策者只是把所有的事情看成一个个固定期限的项目,那么你就几乎不可能拿到可用性测试的预算。所以,好好看看那些清单吧。我认为许多工业接口产品都是出自没有考虑过可用性的工程师之手。直到现在,人们仍然在争论,在进行反应堆测试时无意间按一个按钮,是否会引发切尔诺贝利核电站爆炸。如果你在开发一些后台支持系统,请瞅准机会做一些有效的改善。

我会举非英语网站的例子

我住在丹麦的哥本哈根,因为公司比较国际化,所以我不仅会看英文的网站和应用,也会查看各种语言的网站和应用。我想跟大家分享一些非英语的网站,当然,这些网站不需要你使用Google翻译工具。想象一个在广告中宣称是希腊语的网站,在它还没有真正的文本内容时,网站的艺术总监会在网站中粘贴拉丁语内容,使得这个网站看起来更真实。我认为语言不是问题,它表明了很多非常普遍的问题。

我在混淆视听吗

在我所读过的所有关于可用性的书中,好友史蒂文·克鲁格(Steven Krug)的Don’t Make Me Think(《点石成金》)是其中最好的。我之所以提到史蒂文,是因为他的书道出了用户的心声——“不要让我思考”。这里的“我”指的是用户。但是如果你想要为公司、团队或自己做出更有价值的贡献,你就必须思考。我会分享一些观点,希望能够引发你的思考。

不过,一旦开始思考可用性的问题,你就会不能自已、难以自拔。很快,就会发现家人不再跟你一起去餐馆了,因为你会发现有16种方式可以改进餐馆的服务质量,还总是在饭后去找经理谈这些改进方式。打开网站后,你先找的是网站管理员邮箱,而不是购物车;你不再为孩子们准备柠檬水,而是去重新设计你的柠檬榨汁机。这就像鲁宾花瓶,无论从哪个角度,都只能看见面孔或只能看见花瓶。而一旦指明了这两种图形,你就能同时看到它们。1915年,丹麦心理学家埃德加·鲁宾提出了著名的光幻觉。光幻觉中包括两个截然不同的图片。一直看,就能看到它们。而一旦你能看到这两个图像,那想不看到都不可能了。可用性的工作方式也类似:一旦你知道了要关注的内容,你就不会再忽略它们了。(图片来源:John Smithson,维基百科项目)

诚然,提高可用性是一项艰难的工作,但是总得有人来做。如果你不从事这方面的工作,那就不要继续读下去了,把这本书放回到书架上,或者把它送给你最强的对手。因为我确信它会引发你的思考。

在The Pre-History of The Far Side(Andrews and McMeel,1989)这本书的引言中,怪异搞笑漫画的作者加里·拉森(Gary Larson)写道:“就是这样。我不知道这个故事到底多么有趣,但是它现在已经深入到你的脑海中,你已经着了迷。”

如果你继续读下去,你就会为之着迷。推荐书目在组织内进行有效的变革总是困难的。如果你想要寻求一些帮助和启发,让公司更好地运转,那么可以参考我发现的一些很有用的书:►The Secret Handshake: Mastering The Politics Of The Business Inner Circle, Kathleen Kelley Reardon, Ph.D., Currency Doubleday, 2000►Switch: How To Change Things When Change Is Hard, Chip and Dan Heath, Random House Business Books, 2011►Dealing with Difficult People.Results-Driven Manager Series, Harvard Business School Press, 2005检索内容►Bogo Vatovec►Alan Cooper►Usability plan(可用性计划)►Service design(服务设计)

第一部分 易用性

本书前5章讲的是可用性的物理参数,它们从根本上确保了产品会按你所想的进行运作。按钮、控件及其他响应机制,会帮助你完成工作,其中可能还包括一些甚至可以预见你的需求和习惯的功能和特性。总之,这些东西都让产品更易用。

你可能认为这是非常容易的事情,但其实不是。尽管所有人嘴上都说“用户友好”,却仍然有大量的程序和产品表现得极度不友好。在接下来的5章中,我会向大家说明有时候出自好意的设计未必会带来好的产品。

本部分内容

该部分包括以下几个易用性方面的内容:

►功能性(确保系统可以工作);

►响应性(用户了解系统正在运行,并且了解其中的哪些功能正在运行);

►符合人体工程学(用户可以轻松地查看、点击、戳弄、弯曲或者翻转);

►便捷性(所有的东西需要时都有);

►简单易用性(设计者可以帮助人们避免操作错误或损坏产品)。

我非常希望当你看到这个列表时,会对自己说“不错,有道理,但也没什么大不了的”。但为了说明我的观点,还是请你花一点时间看看你最喜欢的网站,带着这些问题随便点击几分钟。根据上述列表,你一定可以发现一些可以改进的内容。下面我们将正式介绍可用性。

第1章 功能性

轻按电灯开关,灯就亮了;转动车钥匙打火,汽车就会启动;冰箱用来制冷;烤箱用来加热;这些都是功能性活动。如果一个事物连最基本的功能都无法正常使用,那么无论它的设计多么美观都成了浮云。所以,从功能性开始进行可用性的研究是最好的选择。

请注意,这里介绍的功能性与本书“易用性”部分的其他问题有一些重叠。本章将重点介绍可用性和设计的“可用/不可用”方面的内容,不过,在后续章节中我们也会回顾本章中的一些内容。时髦的马德里餐厅供应一种美味的西班牙甜点。但是,他们怎么能让顾客用这么圆的勺子去吃这么方的碗里的食物呢?方碗边角里的东西要怎么吃呢?最后,我不得不上手指来应对这个可笑的功能性错误。在现代化机场这个技术高度复杂的环境中,用绳子连接木楔仍然是使飞机正确停泊的首选方法。这是一个极其简单有用的解决方案。

功能性的三个关键因素

想象一下水槽上的水龙头,一打开龙头,水就会流出来。你想要很方便地调节水的温度。如果需要很热或很凉的水,你都不希望等待太长时间。

概括地说,这三个功能也可以概括出用户对网站的基本需求:

►按钮和链接点中就有反应;

►网站导航是灵敏的;

►网页的处理速度是可以接受的。

大量的网站、应用和服务等,在这三个方面做得很失败,一些水龙头也一样。大千世界中的很多产品都会出现同样的问题。这个平底锅的平衡性非常差,除非一直举着手柄或者煎很多鸡蛋(有一定重量),否则根本不能煎任何东西。功能性缺陷可能以非常奇怪的方式出现。一般人购买平底锅时不会想到检查锅的平衡性,所以设计者应该替消费者进行检查。

从点击到转换:确认按钮可用

你或许会想,“失效的按钮可以修好,这是一件很容易的事”。确实如此。但是,失效按钮带来的问题远比你想象的要严重。我这里说的不仅是失效的链接,还有那些无法运作的基本机制。我给你们讲个故事吧!

我的儿媳妇想在一个珠宝店的网站上买一些耳环。我找到了这些耳环,并点击了“放入购物车”,但是我付款的时候,却发现购物车是空的。我以为是自己犯的错,因为这个问题太愚蠢了,不可能出现在专业的电子商务网站上。于是我重复了上面的步骤,却还是得到了相同的结果。出于好奇,我试着将其他商品放入购物车,到了结算页面仍然没有要结账的商品。很显然,这个网站有问题。

我给商店打电话订购这些耳环时,他们告诉我:“我们几乎不在网上销售。”有才怪呢!他们所有的交易其实都是通过线下的实体店进行的,因为顾客根本不可能通过他们网站买到东西,网上销售自然为零,这就迫使人们打电话给商店或者直接到店里购买。链接失败?服务器故障?或者是其他什么问题?如果网站分析程序显示“404-Page Not Found”错误页面访问量增大,那么你需要立即检查网站。

交谈中,我意识到这个公司根本不知道为什么网上销售额是零,因为他们根本不重视电子商务,公司里根本没有人真正关注网站的功能性。

如果人们不能进行线上交易,那企业会损失些什么呢?如果没有其他的销售渠道(比如他们只做线上交易),那这个公司的损失将是巨大的。但是反过来说,只做线上交易的企业可能更关注网站的运行情况,并且能够及时发现网站中存在的问题。而存在其他可选的销售渠道时(比如还有实体店),企业就很容易忽略线上销售渠道,正如刚才说的珠宝店那样。

如果网站拥有者的态度是“因为别人有网站,所以我们也需要一个网站”,那么你注定会遇到这种问题。当然,这类问题一般很容易修复,但是首先你必须发现这些问题。

浏览器之战,硬件之痛

很显然,要测试任何基于屏幕的交互式产品的功能性,首先要点击它。Google Analytics等各种各样的工具可以帮助网站识别无效链接之类的问题,但是你真正需要发现的应该是编程错误的导航元素,它们把用户带入错误的网页,或停留在同一个网页(这种情况经常发生)。

你也应该下载一些不同的浏览器,来测试一下是不是所有的功能在不同的平台上都能运行良好,至少要在以下浏览器中测试你的网站:

►Internet Explorer;

►Safari;

►Firefox;

►Opera。

你也可能发现,各种小型交互元素,如屏幕中的音频或视频控件和动画,很容易出现与平台不兼容的问题。例如,Flash(Adobe的动画工具)编程的小插件无法在苹果的产品上(像iPad)显示。如果你的网站中必须使用交互元素,需在以下常用的操作系统上测试其性能:

►智能手机;

►平板电脑;

►手提电脑;

►智能电视。在很多设备上,一个小小的Flash图标可以让用户控制音频的播放(上图),但是iPad却不能播放Flash,所以在iPad中没有这些控制器,因此网站也不能使用。奇怪的是,iPad会提示这些软件的下载地址(下图)。

不要为主页烦恼,要调整好表单

在设计会议中,我总是花费大量时间听人们抱怨网站主页,可主页可以说是网站中最不重要的页面。诚然,主页可以呈现出整个网站的全局,显示用户可以获取的信息范围和功能选项。但事实上,在线欢迎设计得越好,用户在该网页上花费的时间就越少。这是因为他们会快速点击链接进入想要浏览的页面,或者是通过搜索引擎直接访问网站中更深层的页面。在很多情况下,有些用户甚至都不看网站的主页。

从商业角度来说,网站的主页可能并非实现在线转换的地方——让人们购买商品、注册通讯、下载文件、提交博客评论甚至发送邮件。在线转换几乎是企业的重中之重,它并不总是与钱相关,虽然大多数会涉及。也就是说,大部分转换需要访问者填写某种在线表单。所以,如果你正准备调整网站中的一些页面,最好把精力放在网站的表单上。

无效按钮会导致某些表单问题,用户因而不能以预期的方式与你联系。然而,与无效按钮对用户操作的影响不同,大多数表单问题都难以发现,因为至少设计小组关注的那部分用户可以顺利使用表单。

创建功能性表单的四个关键因素

后面我会介绍表单设计的其他方面,在这里,我们先来了解你必须牢记的有关功能性的四件事情:

►人们要能够提供表单中所要求的信息;

►固定的输入格式会极大地增加表单错误;

►相互依赖的表单和登录也会增加出错概率;

►有歧义的使用说明会大大影响用户的使用。

很显然,还有其他一些问题,像密码的安全性,屏幕上的消息框如何措辞,界面布局是否易于理解等,都会影响表单的功能性。不过别急,我们一个一个来。

必填字段

字段(field)是表单的一部分,指网页中可以输入内容的小的矩形区域。这个术语源于数据库设计,现在被设计界广泛使用。通常,表单设计完成后,一些特定的字段会以某种方式进行标注,通常用星号(*)表示用户必须输入内容才能完成表单,这就是必填字段。这个字段有可能只是网站所有者想要搜集的额外信息,而不是交易所需的必要信息。事实上,在欧盟国家,让用户提供这种“可有可无”的信息是违法的。最近,我本打算在美国一家大型出版商的网站注册免费电子报刊,但网站要求填写信用卡的详细信息!于是我就放弃了。

如果你是一个网站的设计者,而这个网站的主要用户是美国人,当要求人们提供住址信息时,一般会把“所在州”作为必填字段。如果你也想满足加拿大用户的使用需要,就可能要使用更全面的措辞,比如“州/省”。

而我住在丹麦,一个全国人口都不及休斯顿或迈阿密的国家,没有州的概念也不足为奇。事实上,许多欧洲国家都没有州、省和区。因此,如果你把“州/省”作为必填字段,这个世界上就会有很大一部分人没法填写这个表单。

其中一种情况就是,程序员或设计者开发出了某个产品,结果它对于一部分用户来说非常完美,而让其他用户非常崩溃。因为大多数“州/省”字段都有下拉菜单,所以,如果下拉菜单中有“无”这一选项,那么欧洲人就能继续填写表单了。但是澳大利亚人怎么办?他们虽然有州,但是不在美国各州的列表中。有一种解决方案是,先询问国家,再询问其他地址信息,并让表格自行调整。如果你的编程团队认为这样不胜其烦的话,你就得好好反省自己,到底为什么要浪费时间去思考什么可用性问题。

无论如何,进行表单测试时,我们要确认用户可以不太费力地提供表单所需的所有信息。我认为,这无疑是网站中转换失败的最大原因。在进入俄罗斯联邦之前,你需要填写这个入境卡。但是,如果你不是俄罗斯人,就不会明白patronymic(父名)的意思。所以,这个表格让很多外国人感到困惑。

表单和业务规则

字段验证是为了确保计算机获取到可以理解并能够正确地归档到数据库中的数据。字段验证会进行语法检查,确认在信用卡卡号栏中输入了足够长的数字,等等。问题是用户看不到这些规则,这也就意味着错误的概率是巨大的。

举个例子,如果你希望用户输入信用卡卡号,一些用户会在每4位数之间插入空格,还有一些用户会直接输入一个16位数字组成的长字符串。如果你的验证规则是固化不变的,只接受其中一种输入方式,就会让很多人无功而返。显然,系统要获取16个数字,不包含空格。这是正当的需求,但是纠结空格是没什么意义的,很容易就能把程序编得更灵活,你也应该要求程序员这么做。

电话号码、地址、邮编、日期及其他各种数据(通常都是数字)往往会引发问题。即使某个网站的表单不要求输入州名,但也很可能不接受丹麦的4位邮编和街道名称的拼写方式。

测试这些业务规则时,不要去验证可以运行的功能,而应试着破坏系统。动员家人来帮忙,这是发现基本问题的非常有效的方式。

依赖性表单

我家附近电影院有线上购票网站,当我选好了座位并且已经进入支付过程时,网站会突然提示让我提供用户注册信息——用户名和密码。老实说,我很少看电影,所以早就忘了上次访问时提交的注册信息了。但是如果没有用户名和密码,我就必须中断当前的任务,去完成网站要求的注册任务,这似乎对网站所有者更有利。

最近,我妻子要订票带孙女去看“冰上迪士尼”表演。最后,她查到了一个订票网站,找到了好的位置,正要付款的时候,却突然要求注册个人信息。这情形很眼熟吧。更有趣的是,网站只给了她5分钟的时间进行注册,否则她选好的座位就会失效,一切又得重来。但是因为服务器反应速度慢以及其他一些技术限制,注册过程用了足足10分钟。总之,订两张票花了她大概30分钟的时间。她非常气愤,发誓再也不用这个让人抓狂的网站了,并且对实际上与订票网站不太相干的迪士尼公司也十分恼火。

当然,购物车中的连续页面这类依赖性表单,并不那么让人讨厌。只有在网站打断用户当前的操作并要求他去做其他任务时,才会引发依赖性表单的问题。当用户按照一定路径从一个交互进入另一个交互时,就会对这个网站的用户体验产生看法,所以千万不要打断用户的操作。

简而言之,如果你设置了两个不同的表单,那就要确保以合适的顺序向用户呈现。同时,看在上帝的份上,请给用户预留足够的时间来填写这些表单,免得网页超时逼迫用户重新来过。用户访问亚马逊网站时,很快就会进入到登录页面,因此结算过程简单而直接。

操作指南和功能性

一些网站让我做一些具体的事情,却在我做完这些事情之后发出抱怨,对此我总是非常惊讶。若编写操作指南(或文档)的人员与设计人员/编程人员缺乏沟通,就会经常发生这类情况。下面有两个小例子。

多年以前,我有一台很棒的录像机,德国制造商萨巴制造的。我真希望自己还保存着它,因为它是一台典型的过度设计的机器,这个机器的前面板上至少有46个按钮,其中一半用德文标注,另一半用英文标注,比如机器的总电源就用英文Off/On来表示,定时功能则用德文Auf/Zu来表示。

说到这里你会发现这个机器存在基本的识别问题,尤其是对于那些不会德语的用户。但更糟的是,这个庞大机器厚厚的说明书却经常颠三倒四。比如,说明书中说按Zu开启电源,按On进行定时,这恰恰与机器上印的按钮图例相反。不用说,要操作这个大家伙还是需要一些实验的。

由此得出的教训是:进行产品测试时,请严格遵循你手中的一切操作指南。如果操作指南不起作用或说不通,你就会遇到功能性问题,因此务必要警惕并修复此类问题。使用同一种语言也不失为一个好主意。下次访问国际网站时,你可以注意一下,同一个页面上混用了多种语言。美国邮政管理局拥有便捷的邮政编码查询系统。但为什么设计者要把邮政编码设置为必填字段?这恰恰是人们要查找的信息!

我想说的第二个例子,是我申请签证时在巴西大使馆网站的一个表格中输入日期的故事。这个表格栏旁边括号里的说明明确指出,要输入包含斜杠(/)格式的日期:dd/mm/yyyy。但是,只有后端开发人员才知道,计算机只接受ddmmyyyy这种日期格式。所以,当我提交的申请不被网站接受时,我花了很长时间才找出哪里出现了问题。虽然哥本哈根的巴西大使馆网站上的表格告诉了我日期的输入格式,但是这个网站的业务规则却要求没有斜杠的输入格式:ddmmyyyy。这不仅让人困惑,同时也令人沮丧。

老实说,很容易做到让数据库忽略斜杠、破折号、空格以及用户在该字段可能输入的其他符号。在网站中要求特定的输入格式,然后却又拒绝这个数据,必定会后患无穷。

导航:让用户去往他们想去的地方

我前面说的三个主要功能点的第二个就是导航的灵敏度,这个与第三点——处理速度密切相关。这个问题有其两面性,一方面涉及下一章要讲到的网站或设备的认知反馈,另一方面涉及紧接着就要谈到的速度和效率。

我那糟糕的新电视机

我最近买了一台便宜的液晶电视放在客卧。这个电视超薄、闪亮,画面质量非常好,但是切换频道时的反应时间比较长。每次换台,这个电视都要5至8秒后才有反应。毫无疑问,根本不可能快速找到自己喜欢的频道。而现在,除非我面前有电视频道指南,否则家人都不让我用这个电视,他们认为,如果我没有明确的观看目标就打开电视随意选台来看,我可能会突发脑溢血而亡。

但是,这却证明了我不是这个世界上唯一没有耐心的人。回到网站和转换因素的问题,越来越多的证据显示,网页对于用户请求反应越快,转换率就越高。Google和Amazon都证明了将反应时间缩短半秒会大大提升转换率。

史蒂文·苏德(Steven Souder)就这个话题写了一篇很好的文章。虽然这篇文章写于2009年,但是无疑指出了一个明确的趋势。例如:当Shopzilla将网页的响应时间从大约7秒缩短到2秒后,其访问量就增加了25%,收入增加了7%~12%,硬件成本减少了50%。一言以蔽之,响应速度是一个很重要的问题。如果你想更详细地了解这些信息,可以Google 搜索一下Velocity and the Bottom Line(《速度与盈亏》)这篇文章。

无论是什么东西,如果你觉得它用起来慢,那我敢保证其他人会觉得它更慢。所以,看看可以做些什么来改善这种情形吧。可以先从压缩照片和图片的文件大小开始,而且只要会用Photoshop之类的图像处理工具的人,都可以进行这样的操作。顺便说一下经验法则,任何东西的质量如果只是勉强可以接受,那么其尺寸都可以进一步压缩。不要把两张图片并列放在一起比对查看,不然你肯定会把文件做得过大,应选取针对网络展示进行优化过的照片或图片。

除非你本人参与编程,否则,你可以直接参与的改善措施并不多,但至少你知道应该向组织中的哪个团队投诉。要知道,一些地区的网络连接及移动网络可能非常慢,提高速度意味着要精简或淘汰一些华而不实的东西。

明确你的目标并专注于此

人们很容易忽视自己所做事情的目标。比如:做一件事情的目的是什么?为什么要启动这个项目?我们是否达到了用户的目标?(如果没有,那我们也许永远无法实现我们的商业目标。)这些问题的答案最终会反映出产品取得成功所需要的功能需求。

在项目开发中,有一个不好的趋势是增加特性,而这些特性会影响到原本要实现的功能。一个人有了好的想法,而这个想法比设计表格之类的普通工作更有趣,这时就会出现这种现象。

假设你有一些想要进行可用性测试的项目,你需要问自己两个问题:

►这个项目的目标是什么?

►要测量哪些转换率来判断我们是否达到了目标?

举例来说,家用恒温器的目标是帮助人们保持舒适的温度,CD网站的目标是销售CD以及相关产品,童子军网站的目标是宣扬道德标准和领导力。

而在转换率度量方面,恒温器的判断标准是需要进行调节的频率,CD网站则需衡量销量,童子军网站需要评价新注册用户和新组建的童子军团的数量。

无论评估什么功能,都要保证它符合你真正要达到的目标并且提高了转换率。

关于童话故事的真实故事

为什么我们要给小孩子讲童话呢?这里说的童话不是谎言,而是格林兄弟、鹅妈妈、安徒生以及其他人的故事。孩子们往往可以从这些故事中学到一些寓意,或者了解一些有趣的古老习俗,其中很多习俗本身就是非常有趣的故事。

几年前,我偶然看到Hilary Robinson和Nick Sharratt写的书,Mixed Up Fairy Tales,有些失望。书中大约有12个故事,包括《杰克和魔豆》、《穿靴子的猫》、《灰姑娘》,等等。书的纸页分割成了4个独立而又互相连接的小书,每个故事都在不同的小书里,孩子们可以把任意4个情节组合起来,形成可能不合逻辑但合语法的内容。这本童话书也许很有趣,但是里面的内容完全没有传达出原来故事中关于道德、历史以及伦理方面的教育意义。这个翻页功能妨碍了一些更有价值的目标。但愿这个问题不会出现在你的产品和服务中。

书的封底展示了一个典型的例子:“你知道阿拉丁爬上一棵豌豆茎并在上面发现了一份甜粥的故事吗?”

这个想法确实很可爱,但是却完全不能让孩子们理解这些故事。事实上,我很难将一些情节正确地组合在一起。顺便说一下,我曾经见过一家餐馆以同样方式制作的菜单,你可以自由组合自己的点餐页面,但却很难一览所有的菜品。

以上两种螺旋装订的册子恰恰是适得其反的例子。我认为,如果没有清晰的设计重点,就会受到后来所谓的“有创意的”解决方案的冲击,而偏离最初的设计目标。要注意一些可能会适得其反的创意。丹麦建筑师保罗·汉宁森(Poul Henningsen)在谈到Thonet设计的标志性的弯木椅时说道:“这个设计让这把椅子贵了5倍,重了3倍,舒适度减少了一半,只有一点是好的,建筑师可以成就一个好名声。”(照片出自《批评

功能会随着时间而改变

我们都看到过公共场合装得满满的垃圾箱。当垃圾箱满溢的时候,它们就没法用了。你不能往装满的垃圾箱中扔垃圾,那这个垃圾箱有功能问题吗?如果垃圾箱的容量太小的话,那么这个垃圾箱就有功能性问题。但这也可能是服务的问题——要提高清理垃圾箱的频率。

对产品进行可用性评价时,要记住:功能方面的问题可能不是由物理设计或技术配置导致的。

同时,我们也要记得,当一些功能可能会失效的时候要给用户发出警告。例如:如果新顾客的订单不能超过100美元,那最好在顾客开始疯狂购物之前就告诉他。再举一个例子:电子商务网站上可能有一些在市场中买不到的商品,同样,在用户购买之前告知他们会比较好。伦敦希思罗机场的垃圾箱不能用了,这是一个结构设计问题吗?也许它们只是需要清理得更勤一些,这是一个服务设计问题。

投诉是一份礼物

前些天,我在www.amazon.co.uk网站上发现了一个功能错误,该网站不能对丹麦人销售某款小小的数字时钟,提示说“该产品不在你所在的区域范围销售”。这真是很奇怪,这个产品在国际上销售,而英国和丹麦都是欧盟成员国,自然不会遭遇内部贸易壁垒。后来,我写信给亚马逊,几个小时后这个问题就更正了过来。

在企业中,要确保有人处理用户提出的反馈,而不是仅仅把这些信息堆在邮件服务器之类的地方。如果人们花时间告诉你们问题,你们至少要对此表示感谢,并努力把事情做得更好。正如我的导师、服务大师克劳斯·莫勒(Claus Moller)经常说的:“投诉是一份礼物。”

失策案例分析:无法完成的捐赠

我们家支持美国民权组织NAACP近60多年了。2011年初,轮到我来负责家里的慈善职责。还好,NAACP的主页上有一个大大的捐赠链接。网站提供了从主页跳转到捐献网页的链接。我点击进去之后试着填写这个表格,却发现并不是那么好用。我开始填写表格……首先,网站让我填写美国一个州名,我便填写了佛罗里达州,因为我的父母曾经住在那里。然后,网站认为我输入的4位丹麦邮编无效,于是我使用了原来佛罗里达的邮编。经过各种尝试之后,我输入的电话号码终于被网站接受了。事实上,我不确定美国网站把电话号码作为必填字段是否合法;在欧盟,这样的交易无疑是行不通的。他们说这不是有效邮编是什么意思?我人在丹麦,而且这里没有州的划分,他们还要我的电话号码……之后,我在网站上填写了我的信用卡信息,不可思议的是,网站接受了,但是大概一分钟后,网站通知我信用卡的账单信息(不知道从哪里获得的信息)与我填写的地址不匹配。当然不会匹配啦!这个网站又不让我输入正确的地址。我与这个网站系统的博弈就到此为止了。很显然,这个网站想要确认我的卡是不是被盗了,但是有很多卡的注册地址都与用户家庭地址不同,像商务卡、借记卡,等等。所以这个自动安全措施并不是那么有效。总之,我捐款失败。因此,若干天后收到NAACP感谢我加入的邮件时,我有些吃惊。即便如此,我的银行账户上一直没有捐款,收件箱中也只有该组织系统自动发送的邮件。到现在,我都不知道我是不是其中的一员。所以我开始进行各种尝试,试着输入一些可以继续下去的信息……也许以后,当我有了美国支票,我会找到NAACP的地址,签一张支票,放在信封里寄出去如果我还记得的话……。什么?看来NAACP不想要我的捐款。而且他们从哪里获得了我的账单信息?为何他们搞的这好像是我的错误?要注意的10项功能性问题1.你的产品要达到什么目标?你是否有清晰的想法?如果没有,那么先花半个小时的时间考虑清楚,然后进行任务测试来判断你的产品是否可以完成你预期的目标。(你可以确定几个目标和相关的任务,并逐个进行验证。)2.你的产品中有需要人们填写的表格吗?是否会让大家填写一些他们可能没有的信息,比如传真号码?3.使用产品时,如果用户被打断,他们是否可以恢复原来的任务?如果不能,你可以做出什么改动来让操作变得简单一些?4.你可以想到一些边界示例吗?如果有人不住在你的国家会怎么样?如果有人没有5位数字的邮编或7位数字的电话号码,又或邮编中既有字母又有数字会怎么样?访客是否可以填写这些表格?如果不能,你是否能解决?5.你的表格是否可以容错?后端的业务规则是否要求了过于严格的输入模式?6.如果有功能失效,你是否为用户提供了备选方案?例如,是否有专门的电子邮箱或电话号码补充线上联系表格的不足?7.在电子商务网站中,如果你把商品放入购物车,购物车中是不是真的存在这些商品?你是否可以完成后续付款流程?你的母亲也可以吗?8.你的系统随着时间变化是否功能会减少(就像装满的垃圾箱)?系统中是否有功能问题或者重新设计流程或服务的问题?9.你的系统是否可以在所有的浏览器平台工作?在不同的设备(智能手机、平板电脑、便携电脑)上是否都运转良好?要特别注意像线上表格、视频和音频控制器、仪表盘组件等关键任务系统。10.加载照片或图片是否需要很长时间?是不是可以对它们进行优化来压缩每个文件的大小?推荐书目下面这些书对基本的功能性问题进行了有效的讨论,虽然还有很多其他书籍,但这些书里的内容真不错:►Defensive Design for the Web: How to Improve ErrorMessages, Help, Forms, and Other Crisis Points. Matthew Linderman with Jason Fried (37 signals), New Riders, 2004►Forms that Work: Designing Web Forms for Usability. Caroline Jarrett, Gerry Gaffney, Morgan Kaufmann, 2009 (中文版《Web表单设计:创建高可用性的网络表单》,人民邮电出版社)►Web Forms Design: filling in the blanks. Luke Wroblewski, Rosenfeld Media, 2008 (中文版《Web表单设计:点石成金的艺术》,清华大学出版社)检索内容►Defensive design(防护性设计)►Forms design (表单设计)►Online conversion (转换率)►Service functionality(服务功能)►Velocity and the bottom line(《速度与盈方》)

第2章 响应性

观察和聆听两个正在交谈的人,你会发现其中一人在说,另一人在听。他们会在交谈过程中变换角色,并重复这种模式直至谈话结束。你也会发现听者如何发出明确的信号来回应讲话者。其中一些回应是看得到的,比如点头、皱眉、微笑、做手势;一些回应是听得到的,比如发出笑声、嘟囔声、“嗯”等声音。有时候,一些回应是可以感触到的,例如拍人的后背。所有这些情况下,可感知的反馈都是有效沟通的关键部分,对良好的可用性来说也是如此。

当然,不说谈话,可感知的反馈可能涉及我们全部的五官感觉:我们闻到现磨咖啡的清香,就知道咖啡可以喝了;父母在孩子的指头上涂抹苦涩的药水,可以防止孩子咬指甲。无论我们的产品使用什么样的响应机制,这些响应机制都必须是适宜、及时且易于理解的。例如开会的时候,可以把手机调到振动模式。

如果响应机制不合适,甚至完全缺乏响应机制,那么一定会出现可用性的问题。想象一部手机只能振动而不能响铃,是不是很可笑?你会惊奇地发现,人们在一天中会有那么多次都得不到合适的响应,简单的如咖啡师忘记告诉你咖啡已经准备好了,复杂的像你在网上购物后没有得到确认信息等。

双向沟通的奥秘

老实说,我并不确信双向沟通真的存在。是的,我知道我们在谈双向沟通,而且词典中“电话”的定义是:一种提供“即时、双向沟通”的设备。但是,仔细分析后,我觉得最有效的沟通都遵循可预见的高度线性模式:(1)行动;(2)确认;(3)新的行动。

其中“确认”是另一方注意到了一个行动的“收据”,它是沟通过程中的关键环节,就是我在本章开始提到的响应,像嘟囔、微笑、手势等用来确认听到了对方说话的方式。

人们非常依赖于这种反馈。例如讲电话的时候,如果不能适时听到电话另一端的回应,我们肯定会问:“喂,你还在听吗?”电话另一端的听者发出的声音不仅有用还能令人安心。

抱着这些观点,我们来看看响应元素是如何提升可用性的,或者不合理使用响应元素又是如何影响可用性的。

响应性的三个惯用要素

响应性可以划分为三大类。

►邀请技巧:吸引眼球的动作,表明会有好事发生的信号,等等。例如标题广告,或者通常在网页右侧显示的与上下文密切相关的“请参见……”的静态链接等。

►转换技术:立即回应用户所做的事情。例如浏览网页时,光标滚动到一个可交互元素上后,光标就由箭头变为手形。设计术语叫“状态变化”,因为它代表了一个状态或存在所发生的变化;而技术术语则把光标置于可交互元素上称为“鼠标悬停”(mouseover)。

►响应机制:就用户而言,响应机制指用户完成一个有意识的行动后,所发生的能够真正表示“收到”的事情。例如,在载入新的网页之前首先清空屏幕,或者屏幕信息告诉你文件正在下载或者下载完成等。

本节我将重点介绍转换技术和响应技术,因为邀请技巧(闪烁、旋转标志等等)更注重对用户的吸引力而非传递反馈信息。但是,这些邀请技巧也同样重要,它们不是真正的“反馈”,而是一种“刺激”。这个下载框将下载/安装流程分成6个步骤。这两个进度条显示出每个步骤的进程和整个流程的进程,从而给出了很好的反馈。如果下载框也能够显示还需要多久才能完成任务,那么我认为这个界面不只是“好”,而是“太棒了”。将文件从一个文件夹转移到另一个文件夹时,Windows 7 系统使用这种基本的进度条来显示传输的进度。使用苹果和Android操作系统的产品也提供类似的反馈机制。

第四种视图:响应式设计

曾几何时,如果一个网站采用了适度的浮动布局,让用户在不破坏页面布局的情况下调整窗口尺寸,那么连设计者自己都会感到非常满意。但最近,设计者发现,一些可以在大电脑屏幕上正常运行的页面,未必能在平板电脑、智能手机或汽车操作面板等小屏幕上正常运行,而且导航需求也可能会改变。例如,如果没有可用的鼠标或者触控板,操作智能电视会是一件很困难的事情,仅仅通过方向键来移动光标的确很不容易。

如今,市面上有那么多不同的设备,不可能设计出一个适用于所有设备的专用界面。反之,应注重进行响应式设计——根据将要显示信息的设备类型自动调整信息呈现方式。我们可以通过扩大或者缩小界面布局来适应设备的屏幕或者浏览器窗口,甚至大幅度修改界面布局或者省略一些元素。更重要的是,信息本身就在被设计,需要填写、优先处理、格式化、创建,等等,以便在各种不同的展示环境下呈现。这当然就是我们多年来一直在研究的响应内容。

响应内容的一个例子,是消除文字中对不一定在确定位置出现的元素的引用。传统的报刊文章可以提示读者参考“右图”,而响应内容的文本必须不受图片的具体位置(甚至它是否出现)的约束。简言之,创建响应内容和进行响应设计,必须通过调整尺寸和位置、缩减内容或者消除不适宜的元素,来满足具体的设备或屏幕尺寸。

进行在线产品测试时,一个重要的测试内容是调整浏览器窗口的大小来判断所有的内容是否都能正常显示。但是如今,你也必须在平板电脑和智能手机上验证产品。说来容易做来难,其中涉及的技术也不在本书的讨论范畴,但是如果页面不是“可响应的”,那么你最好把它改造成为可响应的。重要的是,不要让设计人员呈现给你一个只能粘在昂贵的黑纸板上的漂亮纸屏幕,而一定要让他说明如何在设计模板中创建响应能力。与此相关的是,从内容的角度来看,应该从为较小屏幕创建的内容项目出发,扩展内容适应大屏幕,而不是先为大屏幕创建内容,再缩减内容去适应小屏幕。前一种做法更容易创建出良好的用户体验。响应式设计意味着可以调整布局和内容来适应各种设备。这是在PC机上看到的《纽约时报》网站。这是在iPad上显示的《纽约时报》网站。在我的Android手机上,《纽约时报》应用是一个极简单的新闻阅读器。

“起来,你这蠢机器!”

不可思议的是,完全缺少反馈竟然是一个普遍存在的问题。例如,在现实世界中,你希望超市的收银员会说“谢谢,愿您有美好的一天”之类的寒暄话语,即使他疲惫不堪,对你视而不见也是令人不快的。无论这些回应是如何地老套,你依然会心存感激。那再看看你最近上网的经历吧,有多少次你点击的时候都不知道这个机器/服务器/网络空间里的奇怪机制是不是真正获得了你的信息。经常是这样的吧?其实,一句简简单单的电子祝福“愿您有美好的一天”,也会让人们很受用。

今天早些时候,我发现我的新笔记本电脑的桌面屏幕底部状态栏上显示了一个红色的“X”。我点击这个“X”后,立即被告知需要安装升级后的USB驱动程序之类的东西。于是我在接下来的“打开”和“保存”按钮上各点击了几次,却没有得到机器的任何反应。

问题是,我进行的点击操作是否解决了电脑发现的问题,还是仍然存在其他什么问题呢?我又怎么能知道呢?我本来就没有遇到什么问题,更不知道如何去修复它。

随后发生了一些事情。数小时后,电脑弹出消息问:“这个操作是否解决了你的问题?”但是,这个调查并不允许我回答:“在你烦扰我之前,一直都没有问题。”本章最后提到的“失策案例分析”也讲述了没有任何反馈时所发生的事情。

从中可以得出一个教训:如果你要别人做什么事情,只要他们按要求做了,你就要给他们一些反馈。英国航空公司网站探索出了一条走出可用性炼狱的道路,成为了世界最好用的航空网站之一。这个网站是响应式的,精确易用,可是你想换张常客卡时就不见得响应得很及时了。线下的工作没有能够像线上系统那么有效率,换个卡竟然要用28天。

FUD:害怕、不确定、怀疑

还记得我提到了Steve Krug 的书《点石成金》吗?FUD 这类东西是会让人们思考的,却是以一种消极、麻烦的方式让人们进行思考。任何能减少这三个问题的事情也可以提高产品的可用性。

►害怕是指人们担心执行一些操作会破坏系统,或者会产生意想不到的不能撤销的变化。例如,你提交信息后发生了什么,是买了东西还是仅仅确认了表单中的信息而已?

►不确定与害怕密切相关,只是你不必害怕自己的操作会产生灾难性错误。你担心的是会不会因为自己的选项含糊不清而导致错误的决定。

►怀疑是指人们拼命思考,却发现无论如何都不可能得到满意的结果。比如,用户想要完成某项任务,但任何选项都不符合这个任务的上下文。

树立反馈、确认和响应机制(不管叫做什么),它们就算不一定能解决问题,但也至少能缓解一些FUD问题。如果你用某种积极的行动减轻了FUD的影响,那就是获得了重大的可用性胜利。以电脑商店里糟糕的菜单选项为例,增加一些补充性的文字也许就可以降低FUD问题产生的影响。如果你在黄色的弹出窗口(所谓alt属性)中放一些说明性文本,这就是应用了响应机制。但是,创建更具描述性的标签或许更好,这样一来,人们不必依赖于鼠标探测来获得线索。信息架构师称之为标签的“信息量提升”,虽然这属于易理解性而非响应性范畴,但这两个问题是息息相关的,所以我现在就把它提了出来。在下一节“

切换提示

”中,我会讨论鼠标探测的相关内容。“你的消息已经发送成功。”这多好啊,既让人满意,又让人放心。这里丝毫没有FUD问题。尽管我做了大半辈子的职业作家,但仍然会时不时犯拼写错误。微软文字处理软件会在错别字和拼写错误的语句下面标上红线。如果系统认为是语法错误,则会标注绿线。这是非常有用的响应式反馈。电脑网站上常常有些含糊不清的导航,惠普的笔记本电脑选项便是个中典型,它会让人产生害怕、不确定和怀疑的情绪。如果我想找一款功能强劲又轻巧的商务电脑,应该点击哪里呢?切换提示

当光标移动到屏幕上的某个内容时,即光标悬停时,快速响应是相当重要的。通常,光标会由箭头变成伸出一个手指的小手形状,你便可以点击内容了。在大多数情况下,光标的图标变化没有任何延迟。

主要的可用性问题与其说是光标本身,不如说是网页提供的基本视觉信号。例如,近年非常流行的博客工具WordPress,除非将光标移动到标题和其他可点击的栏目上,否则这些内容与屏幕中的其他文本看起来没有什么区别。博客网站和其他网站的用户在浏览设计得不好的网页时,就不得不使用光标搜寻可以点击的内容,这些内容并没有发出任何信号来表明自身是交互性元素。我个人把这种拿鼠标点来点去寻找链接的操作叫做鼠标探测(mouseploration)。

当然,随着触摸屏平板电脑和智能手机的出现,我们已经不再可能进行鼠标探测。即使我们没有真正地触摸到屏幕,新一代的屏幕技术也可以感觉到手指的存在。换句话说,一个重要的响应元素从大多数触摸屏产品中消失了,所以你需要通过其他方式来发出可视信号。本书第二部分中有一章专门介绍可见性。

暂且记住,无论你在设计或者测试什么,都需要在使用中提供及时的切换提示。例如,如果光标不能适时地变换形状,那就说明存在问题并要尽快修复。可以考虑将链接高亮显示,修改链接的颜色,或者在鼠标悬停时出现下划线。相信我,这对用户来说非常受用!在这里,eBay明确显示了相关的顶级类别,并且在弹出菜单中凸显了我要点击的子类标签。科利·多克托罗(Cory Doctorow)的Boing Boing 是互联网上最受欢迎的一个博客网站。但是这个网站上的大多数交互性都不是直接可见的。虽然在第一段里有红色的链接,但是大多数用户都不会意识到标题和其他几处内容也是可以交互的。当鼠标停留在科利的名字上时,读者会看到一个弹出的信息框和一个黄色的alt属性文本框。

转换过渡和实物对象

开/关按钮、提供触觉阻力的实体键盘以及一碰就振动的触摸屏键盘,所有这些技术都可以提供即时的反馈,在操作实物设备时,这些即时的反馈非常有用。

从事虚拟现实工作的人,面临的一个挑战就是除了视觉和音频信号以外,没有太多其他的感官反馈。即使我们可以“拿起”某件东西,我们也感受不到。就像想要用手抓住一缕青烟一样,一切都是虚幻的。除非我们可以重新创建与“物质”紧密联系的触觉反馈,否则虚拟现实只会更虚拟而不是更现实。

考虑一下日常生活中的门把手、刻度盘、杠杆、开关、按钮、键盘、手柄等实物,想想怎样利用这些东西的反馈机制来改善你的设计,这个转换思维非常重要。我非常喜欢这个布劳恩闹钟。闹钟上面的控制器可以让我们很容易地开启或者关闭闹钟。因为控制器是来回切换的,所以很容易判断是否设了闹钟。功能性极强的设计中有很多积极的认知反馈。

网络环境中的响应机制

机器显示出自己在思考时,我们就会很放心。1983年,我看到了第一台苹果的Lisa计算机——Macintosh的前身,并喜欢上了那个小小的沙漏图标,因为它好像在说:“你好,埃里克!我收到你的消息了,并且正在处理你要我做的事情。这会花费一些时间,请你耐心等待。只要你看到这个可爱的动画图标,你就知道我正在努力完成你交给我的任务。”

将大量信息显示在小小的屏幕符号中,加上后退按钮和撤销命令,这些符号的出现在我看来是目前最酷的事情之一。

这类反馈有很多,从伸手指计数、小狗跑动,到手表转动、苹果无人不知的“旋转沙漏光标”。苹果的这个光标因为功能响应比较慢,获得了很多不太友善的绰号,像“来自地狱的旋转沙滩球”。由此我们可以看出,提供反馈通常可以缓解问题,却不能解决问题。所以,在处理长时间的操作时,最好能使用可以显示进度的图形。

除了基本的屏幕信息,比如“你的文件已经成功下载”,以及各种各样的动画插件,我们还可以用各种各样的设计模式来完成不同的任务。下面是一些比较受欢迎的方式。

►亮度调节:调亮特定的区域以表明其处于活动状态,或者调暗屏幕中的一部分直至操作完成。

►缩放:在特定流程正在执行时放大该流程,而在流程结束时缩小该流程(或者关闭窗口)。

►声音:不同的操作关联不同的旋律或声音,我们最熟悉的大概就是手机收到邮件或短信时所发出的不同提示音。

说起来目前有上千种处理响应的技术,有些好,有些坏。但是无论你决定采用哪种响应机制,只要用户可以看到、听到或感受到,并且理解了这些响应的意思,那就是良好的可用性。1983年,沙漏等待图标首次亮相,出现在最早的苹果Lisa电脑上。它是我见过的最早的一种反馈机制。这个图标后来一直以各种形式出现在苹果和微软的产品中。它发出的信号很有价值:“我正在处理你的事情,请休息一下,我会解决这个问题。”调暗屏幕的一部分,这种机制可以让我轻松地识别出需要输入交互信息的区域。调亮屏幕的一部分也可以起到类似的作用。

实物的响应机制

与屏幕产品类似,实物的响应机制也可以提供有价值的认知反馈,来表明一些事情正在发生或者已经完成。我们可以考虑一下汽车和房子的锁闭系统。

如果你的汽车没有中控锁,那就得用钥匙锁车门,然后还要拉拉车门看看是否锁上了。有了中控锁,你就可以通过钥匙上的按钮来触发车锁,车锁上的时候可能还会发出鸣笛声,这样就提供了我们所需的反馈,而车锁咔嚓的声音也让我们更加放心。

很多人在锁了房门之后会再用力拉一下,以确保门确实锁上了。这是因为大多数的门锁并不能提供很好的反馈。也许房门锁上时,也应该有鸣笛声和咔嚓的声音。

我们可以看到,在每个对话式交互中,提供感官反馈的响应机制可以让事情进展得更顺利,并消除人们的FUD心理。这个经典的计数器提供了积极的触觉反馈,每当按下按钮都会发出咔嗒声。换句话说,在计数的时候,根本就不用看这个计数器。

失策案例分析:哎呀,我订购了三辆劳斯莱斯

在网页发展的早期,人们总认为“购物篮”和“购物车”的概念是类比而非隐喻。在此声明一下,类比是指“一个东西像另一个东西”。例如说,“我的电脑像文件柜”,这里的“文件柜”就是类比。隐喻是指“一个东西是另一个东西”。例如说,“这个芯片是我电脑的内存”,这里的“内存”就是隐喻。抛开各种语义的解释,我来讲一个故事。大概是1997年的一个下午,一个同事告诉我伦敦某著名汽车经销商正在网上卖劳斯莱斯。他之所以告诉我这些信息,是因为我热衷于电子商务,且非常喜欢英国车,这个奢侈的爱好持续至今。很自然地,我马上就访问了这个网站。这个网站上充斥着捷豹、阿斯顿和劳斯莱斯的漂亮图片。让人感到有点突兀的是,网页的顶端有个“购物篮”图标。要记住,在1997年,“购物篮”的概念仍然是类比而非隐喻。无论如何,人们几乎无法不去想象或至少是会嘲笑这种情形——外观优美的豪华汽车被撤下货架,放进不伦不类的带轮子的金属车框中。我这么邪恶的人,当然就这么做了。但是这个页面并没有响应,于是,我又点击了两次。那个时候的服务器响应速度都极慢,所以我习惯了等待。如今,我们没那么有耐心,这便加剧了这个问题。等待网页响应的时候,电话响了。我就聊了一会电话,然后,在公司的餐厅喝了一杯咖啡。回到座位上后,我发现这个汽车网站已经把任务处理完毕了,并且跳转到了结算页面。而且似乎每次点击都会在购物篮中添加一辆劳斯莱斯,我总共订购了三辆劳斯莱斯,还是同一个颜色,这太让人崩溃了!因为购物篮中有三辆昂贵的汽车,加上让我伤心的结算系统(出人意料的是,三辆车的价格竟然没有超出我的信用额度),所以我就直接关了电脑回家去。我经常会想,如果我碰巧成功购买了一辆或者两辆汽车(至少在网络中),会有什么样的结果?但这就是设计出了没有响应的系统的结果。当然,我妻子会马上回应说,我们已经有一辆很好的汽车了,这暂且不表。设计中要考虑的10种响应机制1.点击按钮时,是否可以看到按钮的反应?2.保存文件时,是否可以看到文件已经被保存?3.指针悬停在一个链接或者其他可交互组件上时,是否会改变形状来表明可以点击的内容?4.你的网站是否可以在电脑屏幕上调整大小?通过平板电脑或智能手机浏览网页时会如何?网站在智能电视上是否正常运行?5.试着完成一些简单的任务,如下载文件或点击完成付款流程。在这个过程中是否希望网站对你的操作给予回应?6.所有需要很长时间处理的流程,像下载文件,是否提供了持续的反馈来显示流程的进度?7.你正在处理的实物,是不是也提供反馈呢?你知道它的状态是开还是关?是调大还是调小了?8.你所得到的反馈是否及时?是否在执行某个操作很久后才得到第一条反馈信息?9.系统的反馈机制是不是可理解的?系统中的图标和其他信号是否需要人们去猜测?你运用的是已有的最佳实践,还是自己从零开始发明的方法?你的邻居是否理解这样做的目的?你的家人理解吗?10.内容的布局和质量是否反映了显示设备的局限性?如果内容在不同的设备上是不同的,那这些内容是否已经适当地放大或缩小?一般来说,按比例放大比较好。推荐书目读者现在可能已经看出来了,我推荐的书并不都是专门针对某个章节的主题,但又都与它们所在章节的内容密切相关。它们含有重要的信息,而且都是不错的著作。►Designing Web Interfaces, Bill Scott and Theresa Neil, O’Reilly, 2009►Neuro Web Design, Susan Weinschenk, New Riders, 2009(中文版《网页设计心理学》,人民邮电出版社)►Responsive Web Design, Ethan Marcotte, A Book Apart,2011检索内容►Responsive content(响应内容)►Responsive web design(响应式Web设计)►Navigation feedback(导航反馈)

第3章 符合人体工程学

人体工程学,也称人因学,是研究如何设计出符合人们生理和心理能力的设备的科学。大多数人第一次遇到“人体工程学”这个概念,是在讨论办公环境人体工程学时,像办公椅调整、桌子高度、电脑屏幕位置,等等。但是人体工程学的原理不仅适用于电脑屏幕外围的各种东西,也适用于发生在屏幕上的各种事情。在线设计符合线下的人体工程学:我打印了电子登机牌之后,把它折起来放在了上衣口袋里。英国航空公司的电子登机牌在顶端有个条形码,方便在安检口和登机口进行扫描。而斯堪的纳维亚航空公司(SAS)的电子登机牌的顶端是一片空白,条形码则印在登机牌的右竖侧,必须展开登机牌才能扫描,而且折痕处的条码往往变得模糊不清。还有一些航空公司把条形码放在页面底部,这真是太傻了。冰箱定时器上的磁铁不够强力,让该装置没法放正。这是功能性问题还是工程学问题?我觉得两方面都有。而迫使人们倒着读,明显是工程学问题吧?磁铁就这么一个简单、明显的特性,设计人员却完全忘了要在金属表面上测试该特性。

亨利·德雷福斯:在工业设计中引入人体工程学

虽然人体工程学并不是美国工业设计师亨利·德雷福斯(HenryDreyfuss)创建的,但却是他让人体工程学走出校园进入设计界。他的半自传体著作《为人的设计》(Designing for People,Simon & Schuster, 1955)至今依然是行业经典。

德雷福斯的重要贡献是他的两个人体模型Joe和Josephine,它们代表了20世纪中期北美典型的男性和女性身材标准。虽然在过去的60年中,很多设计理念已经发生了变化,但是仍有大量物理对象是建立在德雷福斯的人体测量数据之上。

以下是12条基本的人体工程学原则:(1) 以正常的姿势工作;(2) 减少过度的压力;(3) 确保所有的东西都可以轻松获得;(4) 在合适的高度工作;(5) 减少过度的动作;(6) 尽量减小疲劳和静载荷;(7) 尽量减少压力点;(8) 提供间隙;(9) 移动、运动和伸展;(10) 保持舒适的环境;(11) 提高清晰度,让人理解;(12) 改善工作流程。

从可用性的角度来说,这些人体工程学原则之所以重要,是因为尽管它们是根据实物世界中的作用效应总结出来的,但对屏幕产品的设计也有深远的影响。例如:光标可以充当我们的电子手指,和真实的手指一样,它也有能做和不能做的动作。此外,随着触摸屏的出现,我们的手指通常就是光标,突然之间,我们发现自己得同时应付线上的和线下的人体工程学问题。

如果你在从事实物设计,那么可能已经熟悉这些原则了,所以,我不打算对工业设计进行详细的讨论。这里我要同设计互动媒体的人分享一些心得,看看人体工程学如何影响屏幕体验的评价和改进。达芬奇用一张图片说明了这个概念…………但是德雷福斯在人体工程学中引入了度量。此图为亨利·德雷福斯1955年的经典之作《为人的设计》第一版结束页的图片。左边的保温水瓶是丹麦著名建筑师艾里克·曼格努森(ErikMagnussen)的设计。他摒弃了直角锋利的边缘和前突盖,这样水瓶装在口袋里时就不会被挂到。哎,只可惜瓶盖不好拧开,而且不能立在桌子上。右边的瓶子比较便宜,但是在人体工程学方面却做得更好。当飓风来袭导致停电时,可以把手电筒放在桌子的中间,这样就可以照亮周围,但必须得放在平底上。这个手电筒帮助我们在佛罗里达州的家人度过了飓风弗朗西斯、伊万、卡特里娜、丽塔、威尔玛肆虐的日子。

按钮:为什么有时越大越好

人机交互(HCI)专业的学生会告诉你费茨定律的内容:

这个复杂的数学公式表明,快速移动到一个目标区域所需的时间,是到这个目标的距离和目标大小的函数。非常简单吧?

实际上,的确简单——大按钮比小按钮定位和点击起来更快。

在屏幕产品的人体工程学方面,这一点非常重要。它与上面列出的原则中的其中两条直接相关:“确保所有的东西都可以轻松获得”以及“提高清晰度,让人理解”。

在实际中,大一些的链接可以让用户日子好过些。可用性当前的一个问题就是嵌入超链接的既有做法。在大屏幕上,超链接通常非常易用,但是如果在小小的触摸屏设备上用大大的手指进行操作又会怎么样呢?如果你没有试过这么做,下次经过苹果商店的时候,可以进去玩一下iPad。要在平板电脑上操作传统网站,手指就不总是那么好用了;而用手指操作智能手机时,其灵敏性会更差。

如今,出现了支持浏览器的智能电视,这种电视可以获取互联网上的内容,也可以在线观看所点播的节目,这样就减少了人们对传统广播产品的依赖。

要在屏幕上移动光标,目前并没有真正的控制器标准,可以用的有像PC一样的触控板、传统的方向键和红外指针。你甚至还可以连接一些设备,如智能手机或平板电脑,把它们用作控制器。但是事实上,要点击房间对面智能电视的屏幕上的小按钮仍然十分困难。我的经验是,如果你不能在智能手机上轻松点击某个网站或应用,那么在智能电视上操作时也会存在问题。要知道,即便是很大的电视通常也只占据用户总体视野的一小部分而已,往往还不如手中的智能手机。

我在第2章讲过,在未来的交互式产品的开发中,响应式设计将发挥重要的作用,请你牢记这一点。还要记住,虽然你本人可能不喜欢或者不使用其他界面,但是其他人未必是这样。

总而言之,要在所有平台上都使用好用的大按钮。大目标比小目标更容易捕捉和使用。为军队设计导弹系统时,这就是一个很重要的理念。这个理念对于进行交互媒体设计的人来说也同样重要,大的按钮通常会更好用。®iPod Shuffle 那么小,夹到衣服上的时候几乎不可避免地要按到控制按钮。早期较长的款式考虑到了这个问题,应用了人体工程学,但是后来就被忘记了。

毫秒也重要

现在有很多的网站认为,“确保所有的东西都可以轻松获得”就表示要使用嵌套的导航菜单,让用户不用点击其他页面就可以在一个页面中访问到深层次的内容。结果,各种网站出现了很多下拉菜单,它们都会触发二级菜单,显示在自己的侧面。

坦率地说,这种技术可能有用,但是要从有用变成可用却比较困难。试着用手指或者电视遥控器操作一下这些功能,你很快就会大骂设计人员。即使用鼠标来操作,也很难捕捉到自己想要点击的单词或短语。话虽如此,其实有很多非常基本的改动可以大大提高可用性。

确保点击区域比链接中的文字区域大。真的不应该把活动区域设置得过小。

确保给用户足够的时间将光标移动到相应的位置。虽然我对技术性的具体细节不感兴趣,但是时间问题真的非常重要,所以在此分享一些当前的最佳实践。

►光标在链接上面悬停约0.5秒后,再触发扩展菜单。这样可以避免我在花卉联合会网站上遇到的“盛开的花朵”的问题(参见本章最后的“失策案例分析”)。

►动画菜单被触发后,就应该尽快显示菜单项,如果可能的话,显示所用的时间应少于0.1秒。

►当用户将光标从菜单上移开后,要等待0.5秒再关闭菜单。这样,用户就不必严格地将光标固定在菜单的活动区域中,而可以在操作时更随意地移动光标,也可以选择比较近的操作路径。

►菜单收起要像出现时一样迅速。

从功能性的角度来说,进行产品测试时,一定要在速度比较慢的设备上验证这些操作所用的时间,而不要只在你那闪电般快速的电脑上进行验证。一般说来,你也应该在拨号连接的网络上验证系统中服务器响应的总体时间,而不应仅在宽带网络中验证。因为有很多人不能使用宽带,尤其是在农村地区。如果你在一个国际化的环境中工作,一定要记得,在北美、欧洲和太平洋沿岸一些国家之外,有很多地区仍然不能使用宽带,而只能使用慢速的拨号和移动连接。通过延迟下拉菜单/弹出菜单的收起时间,用户可以将光标直接移到对角线处的菜单项上,而不会触发其他菜单项或者错过他们想要点击的菜单项。

科学研究的介入

学术界做了很多屏幕人体工程学领域的研究,有一些发现确实让人大开眼界。最近的眼动研究,即记录人们浏览网站时所关注的地方,发现人们在屏幕上阅读的方式出人意料。人们往往不是从页面的最顶端以线性的方式从上到下读完整个页面,而是喜欢快速浏览页面来寻找吸引他们注意力的词汇,然后略读文章,寻找更多的认知焦点,大多数人在这个时候才会开始仔细阅读。

我打赌,各位第一次打开这本书的时候,也是很快地草草翻阅了一下,读了一些图片旁边的说明文字,然后可能读了读同一页或者对开页的内容。我并不会读心术,这不过是一种固定的模式罢了!

“项目符号之后的第一个词”

屏幕人体工程学方面的一个重要发现就是,如何最好地创建长链接列表。可用性专家雅各布·尼尔森(Jakob Nielsen)提到过“F模式”。基本上,当人们浏览列表时,他们往往看的是项目符号之后的第一个词。有时候,这个词可以吸引人们阅读整个链接。

结果就是,当你观察一幅眼睛跟踪地图时,会发现有一种F形模式。眼睛跟踪地图通常叫做热点图,哪里被看得越多,哪里就会越红。用户浏览第一个词后会略读一些链接,然后会详细阅读一些内容。例如: 下面两个列表哪个浏览起来会更容易呢?

列表1:

►Subregional office for Central Africa

►Subregional office for East Africa

►Subregional office for West Africa

►Subregional office for North Africa

►Subregional office for Southern Africa

►Subregional office for Sahil Region

列表2:

►Central Africa - subregional office

►East Africa - subregional office

►West Africa - subregional office

►North Africa - subregional office

►Southern Africa - subregional office

►Sahil Region - subregional office这个热点图清晰地显示了人们的眼睛是如何浏览链接页面的。创建列表或标题时,要确保将最重要的词汇放在前面。(图片由Peter J.Meyers博士和美国搜索营销专业组织SEOmoz提供)

列表1是从日内瓦国际劳工组织以前的网站上摘录的。欣慰的是,这个网站在2010年进行了一次重大的重新设计。

这也就是说,在准备列表的时候(尤其是链接列表),你要确保最重要的词汇放在链接的开头而不是后面。这也适用于具备机器可读性的标题,即那些会在搜索结果列表中呈现特定网页名称的元标题。所以,要认真地看待那些没有以最重要的词汇开头的列表、菜单或者链接等,同时也要记住,你的公司名称或许不是列表中最重要的信息。这个国际劳工组织区域办事处的原始列表浏览起来非常困难。重新设计的国际劳工组织网站拥有更加清晰的设计,以及更加关注人体工程学的导航,可以让人们方便地找到办事处。

Tab键和其他快捷键

在个人计算机的早期,比尔·盖茨就构建了一个伟大的操作系统,他称之为磁盘操作系统,也就是我们所说的DOS系统,这让比尔·盖茨成为了亿万富翁,也让微软成为了软件行业中的世界领导者。

请注意,这都是早期的事情了,在被苹果的图形用户界面(GUI)吸引后,人们开始用鼠标点击屏幕上的内容。而DOS用户通过点击Tab键从一个菜单项移动到下一个菜单项,或者从一个表单域移动到下一个表单域,这已经成为了一种惯用操作了。

尽管出现了鼠标,很多用户还是愿意通过键盘进行操作。他们仍然想在预订宾馆房间的时候可以使用Tab键从一个输入框移动到下一个输入框,或者使用简单的快捷键来保存文档。下面举个例子进行说明。

我公司的会计非常不情愿地放弃了她DOS版本的记账程序,因为这个程序不能在她速度很快的新电脑上使用。她的日常工作总是这样的:用右手从数字小键盘上输入数字,并用左手选择正确的输入框。Tab键绝对可以大大地减少过多的移动。(还记得本章开头提到的人体工程学的原则吧?)同时,Tab键也可以帮助人们保持舒适的环境,降低疲劳感,并让一切都触手可及。

我们评估了几个新的记账程序,最终选择了其中唯一可以提供合适的键盘操作来替代鼠标移动的程序。可用性人体工程学于是对商业案例也产生了影响,所以如果你有类似的应用,尤其是涉及重复性任务的应用,例如输入上百个类似的条目(如收据登记),键盘操作应该是你需要特别关注的重要问题。

然而,快捷键带来的不仅仅是方便。举例来说,使用快捷键还能够减少重复使力伤害(RSI,也叫做腕管综合症)。长期使用鼠标可能危害健康,而且如果有人已经严重受伤,快捷键也能容易地打开语音识别工具,那么受伤的人就不用触摸键盘或鼠标了。

如果你想尝试在网上使用Tab跳格键和其他快捷键,可以访问任何一家航空公司或者宾馆的网站,进行一次预订操作(你不需要真的买什么,只是使用一下预定系统)。有些网站允许用户输入旅行日期,有些网站会让你通过日历选择日期。当然,比较理想的情况是两种操作都可以。美国联合航空公司的网站是一个非常好的例子,可以让用户使用Tab跳格键从一个输入框跳到下一个输入框,可是到了要输入日期的时候就不灵了。唉,没有鼠标我根本不能输入日期。但是,也不能只怪这家公司,大多数航空公司和宾馆的网站都有类似的问题。

提供间隙

提供间隙是基本的人体工程学原则,它意味着,要确保两辆购物车可以同时通过超市的过道,个高的人不会被门框撞到,按钮大得可以让人舒服地点击(哦,这个我们已经说过了)。

近来,很多网站都会使用一些动画框和动画控件来提供额外的导航选项,展示特定的信息或者提供其他功能的入口。它们往往在鼠标悬停时自动弹出,还有一些悬浮在页面边缘。问题是有时候这些悬浮框不会移开,因而掩盖了其他信息。

如果你身处一个过度狂热的设计开发团队,有时候很容易会因为要使用一些很酷的界面布局工具,而忘记人体工程学的基本原则。好了,现在你应该知道了,所以一定要注意,你的设计应该是可以提升产品可用性,而不是去破坏它。

试读结束[说明:试读内容隐藏了图片]

下载完整电子书


相关推荐

最新文章


© 2020 txtepub下载