易用性的三条原则

第一次走到新的办公室门口,习惯的去推那扇巨大玻璃门,同时脚步并没有放慢下来。

结果。。。

“哐”的一声巨响,我差点整个身子就撞了上去,鼻子已经贴到了玻璃上。原来,这扇门是只能拉,而不能推的。

这是每个人都会遇到的事情:只能拉的门去推,只能推的门去拉,或者直接一头撞进那种左右滑动的移门上去。。。这个时候常会自责“真不小心”。其实,傻的不是我们,而是门的设计师。门的把手,遥控器,以及任何我们周围的东西,都是用户界面。让人会犯错误的设计,是易用性出了问题。易用性差的门,就像给我们设计的圈套,等着我们掉进去。

易用性

易用性是一门学问。Donald A. NormanJakob Nielson是这方面的大牛。关于门的例子,就是在Donald一本很有趣的书,名叫The Design of Everyday Things的第五页描述的。易用性,对于网站以及软件的设计越来越重要,常常是区分好坏网站或软件的决定性因素。我想通过本文,把我所了解到的易用性最基本的一些想法介绍给大家。

什么是易用性

  • 易见 Easy to discover 藏得很深的功能就不容易被发现,无法使用。
  • 易学 Easy to learn 学起来容易。
  • 易用 Easy to use 熟练使用的时候可以更快的操作。

这三条本身其实是冲突的,需要平衡。微软的Windows界面是这样设计的:菜单是统一的发现功能的入口,通过把拷贝和粘贴放在编辑菜单下是用户容易学习使用,而不像DOS一样,只有通过说明书或者书籍才能发现(discover)和学会(learn)。不过,如果每次拷贝操作都要通过指向“编辑”,然后选择菜单中的“拷贝”虽然易学,但是不易用,所以就设计了Ctrl+C和Ctrl+V的快捷方式,供学会的人更容易的使用。

相反的,在专业领域,可以为了易用而放弃易学,银行柜台终端只用小键盘而不用鼠标操作就是个例子。

有用和易用

我们常常混淆有用性和易用性。

  • 有用,这由产品的规划师负责保证。反面例子:比如一台机器很容易使用但并不解决实际问题。很多产品的失败,首先是有用性,也就是市场的失败,而非易用性的失败。
  • 易用,这由易用性工程师负责。比如一台机器有功能但用户不知道如何使用。

分清了一件事物的这两个方面,在分析的时候会避免将所有的问题都归结于易用性问题。

易用性原理

  • 易见 Visibility
  • 映射 Mapping
  • 反馈 Feedback

让我一条一条的慢慢解释。

易见 Visibility

单单凭观察,用户就应知道

  • 设备的状态
  • 该设备供选择可以采取的行动

关于门的例子,就是易见出了问题。通过观察它,让我没有办法判断我可以做哪些操作,推还是拉?有很多门上贴着“推”或“拉”,其实当一项设计需要用标签的时候,就说明设计本身已经失败了。

与消防相关的设计通常要求比任何物品有更高的易用性要求,以保证任何人可以在突发事件发生时几秒内可以准确地使用它。看一下这扇门:这是我原来办公楼的紧急出口的门。

shanghai-door-metro.jpg
王建硕摄于美罗大厦

即使那个“推”字不写,估计也不会有人尝试去拉它。而那个开的小窗,是为了逃生的人判断这个设备的状态:外面究竟是浓烟还是安全的撤退通路。

映射 Mapping

知识主要分布在两个地方。

  1. 每个人的脑子里。这些知识对高效的使用一样东西非常有用。
  2. 环境中。这些知识当第一次遇到时非常有用

shanghai-water.machine.jpg
© 王建硕

关于上面的这个饮水机的两个水龙头,大多数人不加思考就知道红的是热水,蓝的是冷水。这就是产品的设计和我们脑子里已经形成的火是红的,水是蓝的映射。这简单的映射,让大家对一个产品的接受度大大增加。

微软的DOS,就第一次采取了DIR(目录)作为目录的结构,而不用ls这样Unix的命令行,而且第一次使用了形象的C:盘,D:盘,而不是一股脑的mount到一个以/为根的庞大的文件系统中去。到了Windows时代,把目录干脆变成了文件夹的样子,文件变成了一张张写着字的纸。而Windows 95更加开创性的第一次引入了桌面的概念,反而把我的电脑变成桌面的一部分。这种种变化,都是把产品映射到了大家熟识的生活中的概念。

我曾经用过红颜色代表冷水,蓝颜色代表热水的饮水机,就算有再多的标签告诉我那个是热水,我还是会搞错。顺便说一句,blog对于上网时间不长的人来说,倒是用日记的概念成功的隐藏了个人主页中对文件名,index.htm,超链接等等,这一点点门槛的降低,让成倍的人有可能加入进来。

因为每人脑子里的知识都不相同,易用性也是针对与不同人的,设计者无法知道该产品是否对别人同样易用。不信,如果你用惯了Windows,去用用苹果的Mac试试。首先就受不了那只有一个键的鼠标。而对于一个Mac用户,Windows也是需要不懈的努力和适应才可以用得来的。对于3岁的小孩子,因为脑子里没有太多已有的知识,所以整个世界都这么的不好用,筷子,门,以及衣服,和电脑,手机对于他一样的难用。

反馈 Feedback

反馈对于产品的易用性至关重要。通过不断的迅速的反馈,让用户知道自己的操作的结果。比如,Windows的应用中的那个“沙漏”的鼠标,就是让用户知道需要等待,而不是开始挥舞拳头来砸键盘。产品中“正在。。。,请稍后”就远好于死机一样的一动不动。

关于反馈,多数的投影仪做的非常不好。看一个典型的场景:一个人拿起投影仪遥控器,按开的按钮。等了三秒钟,他开始不耐烦,因为投影仪虽然已经开动,但是需要非常慢的时间预热,看似没有反应。我们会以为没有作用,再按一下。这回更耐心一点了,但是投影仪已经被关掉了。十五秒钟以后,接着按那个开关键。如此反复,直到愤怒的离开。。。

没有反馈,会让初次使用的用户非常的苦恼。比如Windows的登录框,输密码时,因为反馈被星号屏蔽了,多少次按了大写键以后没法输入密码就是一个易用问题。好在从Windows XP以后,用一个“大写键打开”的提示框作为反馈,好多了。

易用性和功能

产品设计是个取舍的问题。易用性和功能就存在冲突。更多的功能,可能使用户无所适从。

我讨厌那种好像4×6阵列似的遥控器,还有复印机的面板。很多时候,我被复印机的功能搞得发疯。其实,我理想中的好的复印机就是在面板上只有一个大大的可爱的绿色圆按钮,按一下,复印一张,再按一下,再复印一张。。。

下面这个复印机功能非常少,只能复印,你喜欢吗?

screen-copy.PNG

这一个复印机功能非常多,该有的都有,你喜欢吗?

screen-many.PNG

如果设计师发现如果他面对的复印机群体80%的操作只涉及复印一张纸,而其他时候还有别的要求,大概会设计成这个样子:

screen-copy.more.PNG

物理世界的“高级选项”可能是一个小盖子,让面板上尽量简洁,也可能是不同的颜色和形状来区分。

一些原则

常常记住以下的原则可能会对我们有帮助。

  • 用户的注意力是有限的资源。
  • 添加的任何一项功能都将有可能是用户找到另外一项功能的绊脚石。
  • 如果必须添加一些功能,试图替换掉另外一项类似的功能。
  • 经常需要为了一些功能的易用性牺牲另外一些功能。

易用性的评价

知道易用性好坏,最好的办法是让用户来做易用性试验。大公司的做法是有隔音的单面透光玻璃,一边是用户和电脑,另外一边是大量的摄像机,记录仪,更有甚者使用心跳,汗腺等生理监控一起来感觉用户的愤怒。而我建议的方式很简单,找到合适的实验对象,给他一个任务,比如写一篇blog,然后站在他身后,看他操作,同时切记放弃自己帮忙的冲动,只当自己不存在。然后记录两个指标:

  • 成功完成任务的人占所有测试者的比例。这个比例越高越好。
  • 完成任务的平均时间。这个时间越短越好。

通过对这两个值的监控,就可以知道自己设计的每一个版本的易用性是越来越好了,还是越来越差了。

注一:本文的理论来源,出自一下书籍:Design of Everyday Thing, Usability Engineering, Useit.com。表示感谢!
注二:一些观点在《软件的易用性设计》中讲过。这是我在三年前写的一门课程,也是我最喜欢讲的一门,在苏州,南京,武汉,成都和上海的软件园和开发者大会上讲过。
注三:关于中国的互联网现状究竟相当于美国的哪一年?,引起一些关注和争论,比如keso(I, II), xiaobo (I), Vazi (I), 莫烦 (I), 冰刀 (I), xucx等等。他们的观点,我是非常同意的。中国的互联网需要高端应用,也需要低端;有快速跟进的群体,也有还没有入门的;需要领航者,也需要低下头做基层的应用;这头大象,是够大的,大到没有人可以看全,大到没有一篇文章可以说得明白。或许每个人在发表自己的见解的时候加一个注释说,“这只是我看到,或者现在这个时间段关注的部分”。只有更多人,更多的文章,探讨这个话题,才可以帮助我们有更正确的判断。

《易用性的三条原则》上的57个想法

  1. 发现王建硕的文章很有意思,这几天这个博界都在讨论易用性,不过这篇文章是比较深入的一篇,范围也比较广
    以前看过一篇文章,当你看到一个很钟情的女人,你的下一步计划是什么?于是第一个人马上开始行动,他知道雄心万丈,趟在床上是没有用处的。而另一个人则不是这样,他先思考一下,都看看别人别人是怎么做的,然后再研究了一下此女的爱好,以及各种情况下可以采用的策略。最终第二种的人很容易就获得她的认同。
    王建硕看起来也属于这种类型,嘿嘿

  2. 宇蠢, 一边发布,一边改,一边评论就进来了。好了,应该还会有这样的小错误(我是发现不了了),还望发现或指正。

  3. 这段时间对这很有感受,很多时候网页上明明有的说时,用户就是没看到,google的界面的易用性就很好。
    国外这是专门的学科,国内刚意识到。

  4. 写的真好。我现学现用一下,此文用了很多照片来帮助我们理解,做到了易见则易懂。此文用粗体和粗点把重点和要点表现出来,附合读者对重点和要点的常规思路,这就是映射。当我开始犹豫要不要把我的真实email写上去时,建硕告诉我, (嘘!我不会告诉别人的),这就是一个很细节很体贴的反馈。

  5. 真的很不错,老哥举的例子很生动。我觉得还有一点,就是整个系统的统一性。拿那个门作比喻,整个楼的门最好都是一个方向,推或是拉。这样我们在适应客户,客户也在适应我们。

  6. 还有个例子来说明易用性和安全是冲突的。听说(未确认)中国的消防安全法规定,在消防梯的到达一楼的时候,必须设计一个拉而不是推的门,来阻止惊慌失措的人群从10楼冲下来,并毫无知觉的冲到地下室里去。我看了不下20幢大楼的安全梯设计,几乎都是这样的 – 通过增加用户的学习和适应时间,防止用户做错误的操作。

  7. 这篇文章终于改好了,,吧?
    想起了偶的iPod Shuffle,可能不是最易用的,但也算得上是真正绿圈圈里的东西了,嘿嘿。

  8. 这本书The Design of Everyday Things看上去真得很亲切啊!因为这是我大学里面的教材(我是学工业工程的)呢。当时还是我最喜欢的一门课, 里面教得很多东西都是平时我们忽视的。我最喜欢的例子就是奔驰车的座椅自动调节按钮,因为做成了椅子的形状,所以再直观不过了。既然座椅的调节按钮可以做成那样,为什么不把方向盘做成车子的形状呢?至少这样倒车的时候,就不用琢磨了,呵呵。不知道现在这本书有没有中文译本了。

  9. 用户教育,是一个培训的过程。这个过程如果能够让用户根据自己现有的知识和理解力能够操作、认知和使用,OK了,这个东西满足三要求。

    对于,第一次呢?厂商的第一次,新事物的第一次,谁来给出这样一个培训?培训说,你应该这个样子或者那个样子。不可能。

    用户教育和厂商教育是统一的。二者相辅相成。

    有些时候,我们需要选取一种符合一种常识性习惯的做法。对于新的、第一次的,是要付出代价和成本的:用户和厂商,时间的成本是最宝贵的成本。

  10. 来提一个小的易用性建议“欢迎用这个代码链接本贴子:”里面的文本框可以学习一下google广告的textarea,鼠标进去就全选。因为这种文本框不是为了用户可以修改而设计的,是为了用户可以方便粘贴而设计的。

  11. 再说两句。就说评论下面的按钮。其实只要一个“发表”就可以了。
    就算你不删除其他按钮,也应该把发表按钮放在左边。在Windows中(不知其他操作系统是不是一样)我们都习惯“确定”在左边。
    我有一个朋友编了一个论坛,但却把“清空”放在左边,“发表”放在右边。不管我失误地点多少次还是改不过来。

  12. “预览”按钮去掉了。多谢!很多好的设计都是做减法。前一段的iPod Shuffle,连选歌这个最基本的功能都去掉了,倒是简单得不能再简单了。

  13. 文章写的很好,易用性的确是很多网站需要改善的地方。但你这个发表评论的“忘了我吧!”是啥意思?

  14. 剑涛,这倒是个好问题。这就是说,我脑子里的东西和读者脑子里的东西部一致,我知道这是为了把Cookie里面记录下来的信息给清掉,但是读者可能根本就没有把它和Cookie以及“大名”“邮件”等里面的信息联系起来。这是我的错。易用性常是以一个设计开始,不断的做减法。。。 我已经把“忘了我吧!”这个按钮去掉了,留一个屏幕拷贝作纪念。

    http://www.flickr.com/photos/jianshuo/19097735/

  15. 去年有个在英国读“电子商务硕士”的同学向我介绍过这方面的书 … 好象是他们必修的课程,(看看我们的电子商务专业都在教些什么吧… ) 话说回来,国内很多网站应该不是没有意识到这个问题,正如“易用性和功能所存在冲突”… 它跟“成本”的冲突更致命!!!

  16. 好东西,学习ing。

    PS:不知道是去微软的经历锻炼了老王这样好的思维条理性,还是因为老王这样好的思维条理性而有机会进微软。

  17. 其实易用性并不难理解,但是真正要实现确实很有讲究。
    王兄说得好,不过我觉得易用性中功能及界面文字也是一个非常重要的因素。
    还有就是,关于上面的这个饮水机的两个水龙头,红是热水,蓝是冷水。确实这种映射应该是一种普遍现象,但是不能排除个别现象,万一某个人脑子里没有这种映射或是一时出现昏头,就有可能出现冷水泡茶。
    所以应用性中其实还有一个很重要的隐含条件就是准确性。

  18. ……,而是门的设计师。门的把手,遥控器,以及任何我们周围的东西,都是用户界面。让人会犯错误的设计,是易用性出了问题。易用性差的门,就像给我们设计的圈套,等着我们掉进去。

  19. 明天有几天?

    明天到底有几天?
    我不知道。我只是感觉明天来的一定比想象要快。
    郑智化或许知道,他说:
    告诉我明天有几天
    告诉我永远有多远
    告诉我真理在哪里
    闭上眼
    看不看得见

  20. 读你写的东西,总是感觉很舒服! 通过很多例子来讲明一个道理,很容易就能理解了!

    谢谢!

  21. 禁不住口水又流出来了。。。美味!美食!美不胜收。。。
    看文章看到无话可说,无问可提。。。证明了自己是多么浅薄。。。当人们知道知识很重要的时候是小小的进步,当人们知道自己很浅薄的时候才是大大的进步,当有人告诉你知识的时候那他可以称作老师,当有人不激怒你并告诉你你很浅薄的时候那他就是导师。。。从这个角度讲王先生或可以称为我的导师了吧。
    。。。
    先擦下口水。。。

  22. http://www.zysg.net/ 的荣泽东说:

    自诩研究易用性超过6年了,却没有这么详细的分析和论述,
    没读过书是不行啊

    最近最关注的就是王先生的网站了,好多东西可以用来学习。谢谢。

  23. 分析的很具体。不过要真正能够抓住用户的习惯不是容易的事情。有时候也许你觉得某个设计是为了用户专门设计的,等真正给用户使用了,才发现他们根本不领情。

  24. 我昨天用手机给sohu的vip邮箱续费,用户界面反馈
    “您好,为了能够顺利完成续费操作:
    请用手机编写短信 MO8 发送到9666,此短信不收取任何费用
    发送短信成功后,即可完成续费。感谢您使用搜狐VIP邮箱!
    如果您有疑问,可以拨打客服中心电话:010-58511234,也可以发邮件至:webmaster@contact.sohu.com

    我发了两次都没有成功,在和客服通了两次电话才搞明白,我把MO(欧)8当成M0(零)8了发到9666了。我不知道是否会有其他人和我犯同样的错误,设计师是否真正考虑过用户的感觉,把字母和数字混合在一起,把O(欧)和0(零)放在一起发给一个数字9666,这算是易用吗?

    真不敢想象竟出自堂堂国内三大门户之一的sohu

    看来真要好好的学学jianshuo的这篇文章了

  25. http://www.oo8h.com/ 的网站是我的,提供的主要是一些收集来的东西,有歌曲的什么的。但是大多数访问者都是看了就走。没有多看看的情况。不知道是不是导航设置有问题,还是收集的内容过于散,没有主题和关联性?

  26. HI, 建硕. 我可以跟你联系关于中国网络易用性设计的一些信息吗? 还有中国在这方面教学的情况. 我所在的小组是做这方面研究和设计的在美国. 你有时间可以给我回信到xmyxmy@yahoo.com 谢谢!!

  27. 易用性写得非常有水平。通过转载的链接发现了这里。于是就细细读了一下前后的文章。除了喜欢务实而深刻的内容外,还发现王建硕是我的同乡,兴许还是同一级的。自然对作者产生了更大的兴趣。老王在新一代网络应用和商业化,以及公益事业的探索和努力让我看到了中国商业未来的希望。祝客齐集的发展顺利。

  28. 1. 不介意的话,我在“什么是易用性” 加一条“Easy to recall: 易于记忆”
    2. 关于“复印”的例子,大家可以在逛大超市的时候看看一些700-800左右微波炉的面板,再和300-400的微波炉比较一下,会有很有趣的发现。

  29. 刚才看到你的blog系统在留言的“发表”按钮旁边有个注释“请只按一次”,是不是经常有人发不小心发重复留言呀
    这估计就是一个“缺乏反馈”的设计的一个典型例子,用户按了“发表”键,结果常常因为网速不快,页面没有一点反应,没有任何反馈,于是以为自己没按下去,然后再按一次。。。

  30. 就易用性作了很好的分析,容易理解。非常同意作减法的功能看法,越来越多的功能只会是产品看起来花俏不已,华而不实。

  31. 请教您一个问题, 易用性和有用性的英文表述如何区别呢?在著名的TAM(Technology Application Model)里有两个概念,一个是ease of use, 一个是usefulness.前者可以译为易用,后者可以是有用。但是文章里所述的易用性包含了三个意思,ease of use只是其中一个方面。另外,usability 这个词怎么理解好呢,一般译为可用性。它也包含很多意思,learnability, efficiency,errors, and satisfaction.我原来研究过smartphone,我是想表达它的功能强大的,作为它的个体属性,不能和 TAM中的ease of use + usefulness 重复,我选择了usability,很失败的选择,写了很垃圾的文章。。。但是现在再回想的话还是不知道选哪个属性,用哪个词好。functionality??我的专业是MIS,主要研究技术的商业应用。或许您的回答会给我新的启示,又或者您有什么好的研究方向的建议。研读您的日志中,受益匪浅,相见恨晚O(∩_∩)O~

发表回复

您的电子邮箱地址不会被公开。