无限,有限

七月 10th, 2006 33 Comments »

-界面展现的信息无限,用户的接受能力有限

web界面表述的信息可以无限的多、也需要无限的多。
对于一个1024×768分辨率的显示器来说,网页浏览器窗口提供的显示区域大约是1000px×620px。但是,一个web界面的大小却是1000px×无限,因为可以滚屏。理论上说,一个网页上可以显示无限多的信息。

Web界面中,待表现的内容非常多,以douban.com的一个页面为例:
uploads/200607/10_002719_douban.gif
http://www.douban.com/subject/1029553/
需要显示的内容包括:“此书的基本信息、在哪儿买…、此书的简介、豆瓣成员给这本书添加的标签、喜欢这本书的人也喜欢、豆列推荐、此书的论坛、豆瓣成员的书评、搜索功能、你读过这本书?、我来评价/评价汇总、谁正在读这本书?、谁读过这本书、此书被哪些小组收藏”。共14类不同的内容。

这样一个页面中就需要展示这么多的内容,如果完整的展示这些内容,那么,界面真的需要无限长了。(还好douban不是这样做的)

用户却不可以在一个界面中接受过多的信息。
虽然,网页和书本一样是一个传达信息的平面媒介,但是,用户却不会象考试前看教材那样一字不漏的细心阅读一个网页。
uploads/200607/10_002827_chatshow.gif
http://chatshow.qq.com/
在QQ音乐场景的用户测试中,很多用户打开页面之后,先点击了一个图片,发现左面一个很大区域有了变化,紧接着就看到这个区域下面有一个表述很完整的链接:“挑选场景音乐”。“挑选什么音乐?好吧…”于是用户离开了这个页面。整个过程不超过20秒钟。当然,这样的操作是由于设计上的缺陷造成的,这里不想多说了。让我们从另外一个角度来看,显然,20秒钟的时间里,用户根本不可能完全理解页面上的内容,以及内容之间逻辑关系。设计者的精心安排用户完全没有注意到。离开这个页面对用户来讲不是什么损失。

用户的注意力是十分有限的。而作为设计师,我们显然希望传达一些重要的信息,并且引导用户的行为。实际上,这也是用户需要的。那么,要想正确传达主要信息,正确引导用户行为,需要设计者珍惜用户有限的注意力。网页不应该显示过多的不重要的信息。然而,

web界面经常会出现信息量过大的设计错误。
实例一:QQshow结算界面
uploads/200607/10_002913_qqshow.gif
http://qqshow.qq.com/ 需要先登录)
在这里设计者希望告诉用户:“所选的商品可以放入礼品盒,如果一起购买推荐的商品可以得到优惠,可以选择其他的支付方式,要如何购买,可以使用购物券,申请开通红钻有很多优惠……”

想要说明的太多了。实际上这里最应该向用户表述的就是“您刚才选择的QQ秀是这些,确定吗?”而这两句话却被其他的那些信息淹没了。

实例二:产品首页上的登录框
uploads/200607/10_003031_loginin.gif
http://qzone.qq.com/
各个产品的首页左上角几乎都有登录框。登录框在告诉用户“来登录吧!”而这个页面上又展现了很多推荐的内容,比如:“我看世界杯 我上英雄榜”。这在告诉用户:“看,这个内容多有意思,进来看看吧!”类似的还有很多其他的推荐。那么用户到底应该先干什么呢?

一个顾客去商店买衣服,售货员首先会先向顾客推荐服装。用户有了比较明确的目标后,需要宽衣解带的试穿时,售货员才会告知顾客试衣间的位置。去试衣间只是整个买衣服过程中的一个步骤,必要的时候才有价值。如果顾客是要给自己买一双手套……而如果按照这些产品首页的设计方式开服装店的话,那么,即便仅仅是一位路过的顾客,售货员也要冲上去告诉他(她):“往前走,右手边是试衣间!”

实例三:QQ音乐场景的导航
uploads/200607/10_003116_chatshownav.gif
这个页面里提供了导航栏,还提供了路点(也被称作层级式导航)。两者表述的信息相同,用户喜欢哪种就可以用哪种。但是用户应该用哪种呢?这种与哪种有什么不同呢?
(现在访问这个页面,您会发现,层级式的导航已经被去掉了。http://chatshow.qq.com 赞一下吧。)

实例四:QQ秀的商品列表
uploads/200607/10_003225_qqshowlist.gif
http://qqshow.qq.com/
“试穿、加入希望盒、购买、赠送、向他人所要”所有可能的操作都显示在列表也中,希望能尽可能的满足用户的需求,方便用户。但是,面对满屏幕的文字和图片,用户应该怎么操作呢?“我是新手,我现在该干什么了?其他人都是怎么做的?”

信息量过大的错误设计源于对”操作简单”不恰当的理解。
误解一:只要减少界面,就能提高用户的效率
uploads/200607/10_003031_loginin.gif
产品首页的登录就是这种思路的体现。

误解二:在一个界面中提供更多的功能可以给用户带来更多的便利
uploads/200607/10_003225_qqshowlist.gif
商品列表中展示全部的功能就来自于这种思路。

我们已经看到过多的表述信息存在的问题了,那么怎么精简信息量呢?
精简单个界面信息量的方法:
方法一:分布表述
uploads/200607/10_002913_qqshow.gif
在qqshow支付页面中,只在用户帐户余额不足的时候才在出现另外一个附加页面引导用户选择充值方式。在正常的情况下只显示一个链接,给用户提供一个选择其他支付方式的入口就够了。

一个页面上主要说一个事儿肯定要比一个页面上说两个事儿更容易说清楚。

方法二:在适当的时候表述,而不是随时展示
uploads/200607/10_003455_dangdang.gif
后面一张是当当网的搜索结果页,前面一张是某一本书的详细信息页。

“放入暂存架、点击看大图”这些功能是在详细信息页才显示的,在列表页并没有。列表页的功能在于告诉用户“我们为您找到了这个,这个,还有这个。您对哪个感兴趣,就点击进去看吧。”列表页中展示的商品的相关信息只是为了描述“这个”是什么。

方法三:应用新技术,弱化不重要的信息
uploads/200607/10_003559_live.gif
一个来自live.com的设计:鼠标经过或点击more时,打开一个浮动的层,显示该文章的简介,并显示更多的相关操作。这些操作并没有直接显示在界面上,虽然那样做可以减少一次点击。

“live.com有这么大的界面空间,直接显示出新闻的摘要也没什么不可以的”,或许这样说也不见得没道理。但是,在“Google桌面”中使用了类似的设计显示新闻内容就显得很必要了。

方法四:通过图形界面设计,强化重要的信息
uploads/200607/10_003654_amazondetail.gif
Amazon.com的商品详细信息页。这个页面上有超过2800个英文单词。虽然信息量非常之大,但是却表达的很清楚。即使不很会英文也知道要如何操作。

严格的说,这种方法并不是精简信息量的方法,但是,确实可以更好的突出重点信息,正确引导用户。

总结:
以上几种方法,显然不是精简页面信息量的全部,也不是众多方法的系统概括,只是抛几块砖罢了。

最后,类比雷锋同志的名言:用户的接受力是有限的,页面的信息量是无限的,我们要把无限量的信息设计到有限的web界面中去。
(人的生命是有限的,为人民服务是无限的,我要把有限的生命投入到无限的为人民服务中去……
―――雷锋)

――――――――――――――――――――――――――――――――――
本文是2006.06.27在腾讯用户研究与体验设计中心成立会上的发言稿。
再次祝贺设计中心的成立,并预祝中心能在未来的工作中取得更辉煌的成绩!

有33 条对“无限,有限”的评论

  1. rgb 说:

    可以想象tencent的设计师看了得有多郁闷,呵呵

  2. 坏人 说:

    老臭。。。
    我提几点反对的意见。

    1,用户层次。
    QQ的用户层次和豆瓣以及LIVE。Amazon的用户是不同的。
    QQ秀的低龄用户的使用习惯。
    (PS:也许是个人的片面,记得以前我有N多QB 的时候也是在这个页面上一整就是很多时间,还盼着有更多的衣服和更长的页面,不用老是下一页,下一页。)
    (也观察过身边的小MM们,换Q衣服,也是一换就是N长时间)

    2,国内的普遍网络习惯。
    看看现在的主导门户网站,以及一些信息网站,在很大程度上培养了国内的一般用户的操作习惯。

    我觉得臭鱼其实本篇文章的主要 [star] 核心矛盾在于“海量信息的展示与关键性信息突出 [idea] ,目的性信息的展示 [music] ”方面。

    不知道我有没有理解错 [sweat] 。。。。请多多指教。

  3. open 说:

    有几点说一下自己的意见:
    1、“用户不可能在一个界面中接受过多信息”,这个想法跟我原来的想法太相似了,但是却经常被一句“中国网站特色”、“中国人的浏览习惯”否决掉。我一直很痛恨这样的说法,一直在寻找支持自己观点的证据、请问臭鱼有找到类似的数据来支撑我们的观点吗?凭什么中国人就喜欢长页面。
    2、“在一个界面中提供更多的功能导致用户不懂使用”,我觉得是这个qq秀页面的设计问题,并不是UE出现问题,试想如果用一些背景颜色或者过渡分割虚线,估计可以解决每个qq秀之间的分割问题。
    (PS:坏人也来这里“撒野”了?^_^ [lol] )

  4. DORA 说:

    其实对用户来说,能简单操作又省时实用的就是最好的.
    呵呵,过多的点击和一步到位的未必能让用户很理解.

  5. 臭鱼 说:

    To 坏人:QQ的用户群是与live.com什么的有所不同,但是,我觉得,年轻的高中生在使用互联网的时候也不会反感使用重点突出、引导明确的网页。

    一个月薪过万的部门经理上网买书的时候,需要一个引导清晰的页面。同样,一个职业高中的学生上网买书的时候也需要。

    To open:关于QQ秀的问题,我主要是觉得,每个商品都显示了那么多的信息,让用户无法找到哪个才是当前最应该点击的。也许每个商品后面只需要一个比较明显的“购买”功能;也许只需要给商品名称上加上下划线,其他功能都去掉,引导用户去点商品名称去预览。

    又有新朋友来了 [smile] 欢迎欢迎!

  6. 天牢囚犯 说:

    好文章。

  7. iqst 说:

    演讲稿嘛,讲太深奥也不适合,更喜欢你前面的文章,都是经典

  8. 白鸦 说:

    兄弟,前方路途任重而道远呀…

  9. 蜘蛛霞 说:

    分析的很好啊..呵呵!但是我觉得…了解网站用户的年龄层,以及他们的上风特点,也是非常重要的一点吧…说实话,QQ的秀城,偶就没看明白过…见笑了… [sweat]
    楼上的兄弟说的对:任重道远吧… [yes]

  10. Chris 说:

    上个礼拜我们公司来了个做网络推广、竞价什么的人,给我们boss说怎么提高搜索排名、提高流量……云云~~
    说到一半,拉出来一个不知道哪里来的网页(当然是很有中国特色的那种),说:“中国人,就喜欢热闹,喜欢信息量大的网站——谁不知道中国人喜欢看热闹?” [no] [sweat]
    Boss点头……我无语……离席……

  11. jaryxie 说:

    针对特定的产品进行用户研究,通过用户研究得出一些关键点和数据,从而为信息架构和交互设计提供依据

    ,信息的呈现应该按照用户行为来设计,臭鱼大哥发现了一些问题,从而提供一些精简界面信息量的方法:

    其实就是在用户行为进程中的场景切换中合理的呈现信息,让信息与用户行为需求步步保持一致,从而协助

    用户简单便捷的完成目标任务,这是一个好的用户体验的开端.
    不过我个人认为,作为论证(误解二:在一个界面中提供更多的功能可以给用户带来更多的便利)的例子,QQ

    秀的页面并不存在这样的问题,以用户为中心的交互设计不是孤立的行为,而是系统的围绕特定产品的用户

    心理,文化,情绪,行为研究。提供更多的功能在某种环境中是有裨益的,关键是,呈现的信息要与用户

    的主行为形成阶梯状的延续,而不是平行的过程。突出重要信息,并不代表抛弃与主体信息相关的其他的

    信息,就象只有一个操作键的产品,实质上并不是好用的。 [smile]

  12. 冬虫草 说:

    我觉得还是一个权衡的问题
    比如误解二,如果按照臭鱼的解决办法,把其他功能都放到另一个页面展示,那势必带来增加用户操作的问题,如果用户想把这个东西赠送或者放到收藏里,他就必须多点多弹出一个页面进行操作,我就不喜欢多次弹出窗口的风格,我的一点想法,我是新手,欢迎大家指点和讨论。 [lol]

  13. 梦游客 说:

    我来回答一下,中国人喜欢满满的、闪的、花花绿绿的页面,就好比前些年我们喜欢吃大鱼大肉,缺嘴缺太多了,刚有了改善的机会,当然不能错过,所以,份量足也是当时判断一家饭馆好坏的重要标准。如今崛起了一些顶级的酒店,讲究的是品位,菜都只一点点,要淡要雅,很象现在的一些2.0网站

  14. 梦游客 说:

    我来回答一下,中国人喜欢满满的、闪的、花花绿绿的页面,就好比前些年我们喜欢吃大鱼大肉,缺嘴缺太多了,刚有了改善的机会,当然不能错过,所以,份量足也是当时判断一家饭馆好坏的重要标准。如今崛起了一些顶级的酒店,讲究的是品位,菜都只一点点,要淡要雅,很象现在的一些2.0网站

  15. 梦游客 说:

    可别怪我多发了一次哈,第一次发时,说我没有权限操作,我以为不是自由发言,然后就去找了一圈“注册”,结果没有,就再回来试,且改为“悄悄话”发表,结果就成了那个样子,然后再试直接发表,结果行了 [lol]

    臭鱼先生,你还讲交互,自己这里都不太好哦,刚来都不知道可否自由发言,也没个提示说明之类

  16. 梦游客 说:

    班门弄斧一下,就接着说这个问题

    BLOG能否自由留言,这是需要提前说明的,比如,在“发表”二字后边注明“可自由发言”,而之所以要标出来,是基于用户的一个普遍的认识:论坛也好、BLOG也好,非要注册一下,名正言顺了,才能留言。

    所以,交互设计的根本是要参照普遍的大多数人的认识

  17. 臭鱼 说:

    梦游客:
    对不起。
    这里是可以自由发言的,你第一次没有成功,其实不是“没有权限”,可能仅仅是服务器接收、数据库或者其他什么技术问题,返回的提示页面统一的写成了“没有权限”。这里我之前没有注意过,也没有修改过。结果让你误以为是非得先留悄悄话什么的了。

    正常情况下,就是写评论,然后按“发表”就可以了。这里也不需要注册什么的。

    再次致歉。

  18. 4wenzi 说:

    写的很不错,长不少见识了。 [yes]

  19. kingokiko 说:

    大家都在讲QQ秀,我也来插一句 [lol]
    就像到一个商场里买衣服,用户的第一目标是找到自己喜欢的show。那么在一个页面就尽量安排更多的show,仅支持简单的选择而不包括其他操作。用户有了初步筛选后再对其进一步的操作。包括“试穿、加入希望盒、购买、赠送、他人付账”所有可能的操作。这时更有针对性了,用户需要得到相关信息。
    PS:如果“希望盒”就是选择的功能那就只保留此功能。

  20. 游泳的鱼 说:

    发现所有的页面都把一些相关链接放到左边上部。我看完了这边要点相关必须滚屏到上面。好累啊。
    为什么不把那个文章列表和导航就放到我现在这个位置的右手边呢?点起来不是很趁手么。

  21. Julia 说:

    这是怎么回事?跟了这么多鸟语帖?
    言归正传,说说我的个人想法ba。
    如果遇到一个已经开始运转起来的页面,要想改进,就只能摸着用户的习惯来了。也许这其中存在着一些不好的使用方式,但老用户可能已经习惯了这些方式,即使现在用着不方便也不希望再有改动了,心中总是抱着担心的态度,害怕变动了以后又得重新适应,觉得更麻烦。
    所以这个时候,那些从别的页面里总结的经验可能根本就不符合这里的要求了,也就是说,一些交互设计的原则也只是形同虚设,还是需要具体问题具体来对待了。

  22. green 说:

    好文章 [smile]

  23. dancingka 说:

    qqshow页面的作用就是
    我现在要更衣了 我要从一些衣服中找一件我喜欢的衣服购买并穿上
    这应该是核心的东西
    但是qqshow很让我头疼 所以 我一直再没换过qqshow
    重点突出的清爽页面 我觉得 没有人会不喜欢

  24. 癫狂蚊子 说:

    我一直也都是认为页面应该简明而高效,但QQ商业性太强了,强的有点过份了,

  25. Evan 说:

    QQ秀我很少用,给我感觉就是步骤比较麻烦;
    不知臭鱼有没有看过Google的Google AdSense,在新建广告样式的时候,它们提供单页和多页的方式,可以自由选择,个人比较喜欢单页,它对每步操作都能在最下面即时生成最新的代码,我觉得这个方式很不错,简单明了的告诉我们“只要拷贝这些代码就行了。”,不喜欢还可以拉上去立即修改,很方便。

    个人意见

  26. iRain 说:

    上面有朋友对“中国人,就喜欢热闹,喜欢信息量大的网站”这句话不齿,说明你没有真正了解你的用户群定位。
    难道你到现在还认为hao123的成功是个“奇迹”?
    “要了解群众,就要到群众中去”,中国特色也并不就是一个抱怨的借口,难道你身边或你常驻的圈子的人都是“精英”就认为中国不是个农业国,80%的人还不是农民?
    你不会购买QQ的那些虚拟商品,但不表示别人不会,难道QQ的盈利都是假的?
    大部分(强调)中国的心理的确是很小农心态的,花费了同样的钱,能看到更约多的信息就越不亏,这就是一种小农心态,大部分(再次强调)中国网民都会认为同页内信息越多越好。

  27. 幻沙 说:

    大部分(再次强调)中国网民都会认为同页内信息越多越好
    个人不是很同意,其实用户也希望接受重点信息,但是现在国内很多设计者在设计页面的时候都希望把所有东西表现出来,才造成页面很丰富.

    页面层次感才是关键吧

  28. 寒号鸟 说:

    深有体会:越是网络知识匮乏的人,越是对页面信息量大的网站找不着北.

    臭鱼,刚留言的时候提示:"我没有进行此操作的权限"

  29. badst 说:

    错误:你没有进行此操作的权限.

    后退,没了。5555555555 [confused] [cry]

  30. startree 说:

    题外话,关于中国人喜欢花花绿绿网站的论调,其实还有一点理论依据的(我的master的论文当时做了这个):
    网站的偏好,与文化是有一定关系的,亚洲文化普遍属于高语境文化(一个荷兰社会学家统计结果),因此会偏好图像表达一些。
    可是话说回来,同是处于喜欢热闹的韩国文化背景下的网站却即不冷清也很好用,这个到值得深究一下。

    臭鱼的文章写得很好,深入浅出的,学习中:) [wink]

  31. greengnn 说:

    说到用户层次,我提一嘴,我身边也都算是一些“知识分子”(NB大学大学生),可是他们的上网习惯,有时候让我发笑,甚至很多人对交互的操作都掌握的不熟练。
    但是什么是好用的什么是不好用的,绝对能辨别出来,所以因为用户的层次为借口放宽交互的要求是不合理的!

  32. corel 说:

    列表页的功能在于告诉用户“我们为您找到了这个,这个,还有这个。您对哪个感兴趣,就点击进去看吧。”
    这句话很精辟,我们都知道列表的作用,但是在实际设计过程中,却往往不自觉的加入“这些、那些”附属的功能。
    一个很常见的错误——在列表页就让用户收藏。
    从用户流程上来说,某些功能只有当用户真正了解到所关注内容时才会被需求。比如一本好书,用户是在看到最终页并产生兴趣后才有收藏的可能。
    除非,我们的列表页就厉害到让用户产生极大的收藏欲望了。
    实际上,几乎所有无线音乐网站,都在列表页提供了“试听”、“下载”、“定制”,等等功能。按照上文对列表页的描述,这些功能在当前用户流程都是不被需求的。
    ——那为什么所有音乐网站还要这么做呢?求臭鱼解答。
    另从你的这篇文章联想到的:列表页上应该放什么

  33. 水柔心 说:

    我太崇拜您了~~激动~

发表评论

您的大名: