创造一个可理解的世界

5月 7th, 2009

网站的结构应该是可以理解的
一个网站就是一个小小的世界，这个世界应该是可以理解的。

我们都试图去理解自己所身处的世界，是吗？

为什么要去理解？因为我们希望在这个世界中更好的生活。这是积极的，如果不，那大概就得想着怎么自杀了。试图去弄明白，这是人们有意无意间都在做的，也许有时候你没意识到，但是你确实是在不断的去了解，学习。

“为什么后面的几张菜单比前面的矮些呢？”在味千拉面餐桌上有一个小盒子，可以用作插新菜宣传单。靠近她的那么卡片比较高，远离她，她一眼看不到的那面的纸片比较矮。她转过盒子，“哦，短的是餐巾纸。”


这是IKEA的导航图，你会关注上面的哪些信息？“您当前的位置”也就是图中的橙色原点是一定会看的，是吗？通过这个橙色的点，虚拟的地图和顾客真实的位置产生了联系，顾客清楚了自己当前在这个环境中所在的位置，进而知道自己下一步该如何走了。

在一个step by step的网站流程中，用户需要知道现在是第几步了，后面还有几步。甚至是，之前已经完成几步了。这也是在了解状态。
载入页面或者动画时的loading也是类似的。

在一个网站中，状态可以分为两类：
1. 对于step by step流程，流程中的第N步；
2. 在正常的页面中，当前页面在整个导航中的位置。
这两类与现实生活中的时间与空间有些类比关系。

是这样吗？
“用户不在乎你网站的结构是什么样的，只是在看页面上的信息，按照信息的提示去点击。”是的，经常有这样的观点。

我们来假设一下，在一个现实的购物中心里，你和朋友要吃午饭了，会看到一家饭馆想也不想就进去吃吗？你要买一件衣服，会看见一件不错的，直接就买下来吗？

类似上面的问题，有些时候答案是肯定的，会直接就进去吃，会直接就买下来。但那通常并不是你最满意的处理方法。是你不想带着朋友再花半个小时寻找、对比其他饭馆了。是你不愿花费更多精力去选择更合适的衣服了。也就是说，如果可以，你不会那样做。

用户因为邮件中的一个宣传单，因为朋友的介绍，因为看到某篇枪稿的推荐，或者其他什么原因，来到了一个网站中，这个时候，他对这里的环境是陌生的，第一反应是按照最可靠的（他看的到的，看的懂的）信息去操作。这是一个不良状态，暂时的状态。当他下一次再来的时候，他会对当前的环境了解的更清楚，尽量搞清现在是在网站的什么位置，什么状态。

这个说法对吗？我们来用一个更实际的例子对比一下，当你第一次进入一个陌生的环境中，比如去一家公司上班入职的第一天，如果有人给你个表格要你填写，你会断然拒绝吗？应该不会吧。当你在这家公司工作了1，2年后，再有人要你填一个表格的时候，你就会先做判断，“这个人是做什么的？”“他为什么要我填这个表格？”“填这个表格是我该做的事情吗？”这些判定是需要的，是有价值的，能做这些判断来自与你对这个公司组织框架的了解，能清楚这个公司的组织框架取决于这个公司的组织框架是可以学习的。如果框架原本就是混乱的……

好的设计应该是可以理解的，不信你试试…
设计出色的web产品都是可以理解的，yahoo是个好例子，如果你还不太了解yahoo，可以做一个简单的实验：打开yahoo.com，随意浏览十分钟，然后在纸上简单的画一画整个yahoo网站的组织构架。
能画出来吗？大概就是下面这样的：

简单吧~ yahoo将所有的信息组织成一个最简单的框架，易学，易理解，易记忆。

Amzon也是个好例子，我们可以重复一下上面的方式，浏览几分钟，然后画画简单的结构图：

很简单？没啥技术含量？那你再试试开心网，先浏览上十分钟，然后试着画画，你能画出来什么来？反正我是画不出啥来。

 

(本文于09年4月5日首发于内部期刊—交互设计月报第十一期)

有49 条对“创造一个可理解的世界”的评论

  1. 刘亚平 说：
    5月 7th, 2009 at 11:43 下午

    文章写得不错，恩，深入浅出的东西，不讲高深的名词和理论，我很喜欢。。。

    1， 用户不在乎你网站的结构是什么样的，只是在看页面上的信息，按照信息的提示去点击。这个可能也还是有道理的，不过更适用于网站某个很单一和独立的功能，比方说我就是要去amazon 买个ipod，或者我就是要去CNN上找一篇新闻，这时候也就不需要了解整个结构了。不过你后面举的那个实例也说明了，理解结构这个问题，更适用于老用户，而不是那种一锤子买卖的用户。

    2，amazon 和 yahoo 这样结构性很强的网站和开心网比较，这个不太公平，就算sns中体验最好的facebook让你去画这样的图，你也画不出来了，因为他根本不是用这种形式来组织网站的。amazon的对象是有层级关系的，例如ipod属于mp3，mp3属于数码设备，而sns的特点决定了他是以每一个个体为中心组织的一个结构，整个网站由无数个个体构成，个体的单位就是“人”，人跟人之间是没有层级关系的，而对于每个用户，他能看到的，也就是他需要理解的结构，就只是“好友”“apps”“profile”这样一些页面而已。

  2. chouyu 说：
    5月 7th, 2009 at 11:55 下午

    如果一个清晰的结构是对用户有帮助的，那这些sns为什么不能做的结构清晰？sns就应该结构混乱吗？这是他们成功的秘诀吗？

  3. 刘亚平 说：
    5月 8th, 2009 at 12:39 上午

    恩，对于单个用户来说，facebook简单得一共只有那么几个页面，所以不需要“结构”那么复杂的东西，或者说，facebook 本身有个清晰的结构，如下：

    facebook — 页面：我的news feed
    — 页面：我的资料
    — 页面：我的朋友
    — 页面：我的插件

    简单到这个程度了，呵呵，我想，画不出来的原因是因为他不太像是一个结构？

    开心网是不是结构混乱，我还没认真研究过，但是作为facebook的复制品，应该情况差不多吧

  4. winter 说：
    5月 8th, 2009 at 1:17 下午

    恩…我觉得还应该把分两个维度：横向的和纵向的。
    横向的是浏览的维度。
    纵向的是任务流程的维度。
    还没细想，但是分析网站结构这件事的确应该做。

  5. iamsujie 说：
    5月 8th, 2009 at 4:49 下午

    sns还是比较娱乐化的，会不会就像有些游戏关卡一样，把你突然扔进去，吸引你的价值就是没头没脑探索的过程，这样对产品来说，增加了停留时间、增加了PV，会不会目的就是这样的，至少某种程度上，所以对结构清晰的诉求也就没那么高了。。。

  6. 木木落 说：
    5月 8th, 2009 at 8:43 下午

    还真没那么深入地想过，肤浅了…

  7. 木木落 说：
    5月 8th, 2009 at 8:45 下午

    刚刚去认真看了下yahoo,不知道是不是自己的水平有限,觉得也不是那么有条理,词条跟google的差不多,但是下面的版面内容有点杂

  8. Ray 说：
    5月 10th, 2009 at 12:28 上午

    SNS的架构画不出来主要是APP的数量太多，去掉APP就没多少东西了。Facebook我一直都用不习惯，可能自己已经习惯了面包屑。

  9. xw 说：
    5月 20th, 2009 at 6:26 下午

    传统的门户型网站和web2.0这种高交互的网站，本身的导航系统就有很大区别，所以的设计的时候肯定不能一视同仁。
    但是肯定是可以做的比现在更好这是不容置疑的。

  10. 熊汶 说：
    5月 22nd, 2009 at 3:27 下午

    我个人觉得关于网站的架构问题，对于普通的浏览者来说并不会特别去关心网站是什么架构的，它只要快速的找到自己所需要的信息就可以了，就好比你做的那个比喻，不是你回答的如何而是那家餐厅是不是你所符合你的饮食习惯，这才是关键的，不喜欢吃川菜的肯定是不会进川菜馆的是么？那么在网站也是一样，网站也是一个产品，可以把他理解成一个餐馆，首先这个餐馆是干什么的，比如yahoo和Amazon他们其实没有太多的可比性，首先进入这两个网站的用户群就不同，当然目的也是不一样，就跟cooper在他书中指出的那样，以用户目的导向为设计标准的，去YAHOO的人们他们的目的是什么，去AMAZON的人们目的又是什么呢？我想一个逛超市的人和去人才市场找工作地人是绝对不一样的，逛超市的人只要知道我从哪里进去，从哪里可以出来就足够，它的设计线路是顺序的，为了使客户看到更多的商品，而去人才市场找工作地人只要知道自己要去那个展区就可以了，她如何也和超市一样设计那就浪费用户时间了，它是分层的，这就是目的不同，我觉得你要做类比不应该把门户类网站和电子商务型网站做类比的，目的不同，对于结构的理解也绝对不会是一致的，开心网或许也是如此，我没有玩过，不做评论。

  11. 流沙 说：
    6月 4th, 2009 at 8:44 上午

    不做任何对比，开放的分析下：
    用户只是上网、做事、然后离开。只有当用户受困于我们设计的网站时，他才会去研究网站蹩脚的架构，因为只有这样他才能够做完该做的事情。但是很多时候用户并不愿意花太多的时间浪费在我们的网站架构研究上。原因很简单：“因为有更多、更好的同类网站在向用户招手！”
    因此我们需要投入大量成本和资源来设计出好的信息架构，让用户很轻松就能完成要做的事情。

  12. Feerbook 说：
    6月 4th, 2009 at 10:04 下午

    Feerbook是一个发现和分享来自己互联网内容的平台通过，从最小的个人博客到主流新闻媒体，一切你认为有价值的信息都可以提交分享到此平台上来和广大网友分享！

  13. ミ戀ン 誮訫 说：
    6月 5th, 2009 at 12:49 下午

    Feerbook是一个发现和分享来自己互联网内容的平台通过，从最小的个人博客到主流新闻媒体，一切你认为有价值的信息都可以提交分享到此平台上来和广大网友分享！不做任何对比，开放的分析下：
    用户只是上网、做事、然后离开。只有当用户受困于我们设计的网站时，他才会去研究网站蹩脚的架构，因为只有这样他才能够做完该做的事情。但是很多时候用户并不愿意花太多的时间浪费在我们的网站架构研究上。原因很简单：“因为有更多、更好的同类网站在向用户招手！”
    因此我们需要投入大量成本和资源来设计出好的信息架构，让用户很轻松就能完成要做的事情。

  14. 铁观音 说：
    6月 5th, 2009 at 4:39 下午

    我们多数人喜欢摸着石头过河！虽然慢一点，但心里觉得踏实！

  15. 肖迎香 说：
    6月 6th, 2009 at 4:27 下午

    我不懂这是什么意思

  16. 肖迎香 说：
    6月 6th, 2009 at 4:29 下午

    你的qq是多少呀 能告诉我吗

  17. 张晓龙 说：
    6月 7th, 2009 at 9:24 下午

    让我们用美好的未来去对待明天的太阳，照亮祖国的大地山河。

  18. 珍惜 说：
    6月 8th, 2009 at 7:21 上午

    没有看懂这是什么意思，因好奇所以喜欢摸着石头过河

  19. 星星 说：
    6月 8th, 2009 at 5:50 下午

    生命是一条奔腾不息的河，我们都是那个过河的人。

  20. 小公主 说：
    6月 8th, 2009 at 8:02 下午

    我也要有一个电子邮件。

  21. 匿名 说：
    6月 12th, 2009 at 11:24 下午

    长见识了。

  22. 亚 说：
    6月 20th, 2009 at 2:19 下午

    好象是满腹经论

  23. 老鼠の尾巴 说：
    6月 20th, 2009 at 8:16 下午

    我觉得网站的结构应该做成一个网状会比较像网站…

  24. 西贝小鱼儿 说：
    6月 23rd, 2009 at 10:30 上午

    呵呵，思想大于行为。。

  25. 帆 说：
    6月 24th, 2009 at 9:48 上午

    还不错，有创意

  26. 浅风 说：
    6月 24th, 2009 at 4:11 下午

    就是说逻辑很重要~不管是网站设计还是真实世界，要让人支持，首先要让人理解。但是人们常常会凭着直觉去选择，不习惯进行深层次的探索，所以说幕后人很辛苦，要好好做，却未必会得到支持。
    站长加油~

  27. 虾米 说：
    6月 25th, 2009 at 8:41 上午

    创建一个可理解的社会，诚然这是我们的梦想，也是我们的目的，似乎你所说的‘可理解社会’并不可理解。

  28. 静逸 说：
    6月 25th, 2009 at 10:20 上午

    有道理
    和解（和谐）社会一直是大家所期望的
    共同创造靠大家咯
    ——嘻嘻

  29. 静逸 说：
    6月 25th, 2009 at 10:23 上午

    就向前面老兄说的：摸着石头过河~塌实撒

  30. 雪瑶 说：
    7月 2nd, 2009 at 10:54 上午

    挺实在

  31. 庆 说：
    7月 2nd, 2009 at 10:13 下午

    祝你昨天生日快乐，我总是2号才想起你是昨天大寿

  32. K 说：
    7月 4th, 2009 at 4:52 下午

    不错啊

  33. 陈仕英 说：
    7月 7th, 2009 at 3:26 上午

    有意思，做了连接

  34. 匿名 说：
    7月 7th, 2009 at 8:15 上午

    有道理。

  35. song ge 说：
    7月 9th, 2009 at 12:38 下午

    有道理

  36. 冰 说：
    7月 10th, 2009 at 12:16 上午

    前辈写的真好，支持下

  37. 冰雪 说：
    7月 15th, 2009 at 1:05 下午

    写得很好！

  38. Luke 说：
    7月 22nd, 2009 at 6:28 上午

    “用户不在乎你网站的结构是什么样的，只是在看页面上的信息，按照信息的提示去点击。”

    ——————————
    对于大部分普通用户来说，本来就是这样的吧
    谁会有意识的去关心一个网站的结构，

  39. 过客 说：
    7月 27th, 2009 at 11:25 上午

    学习了，感谢作者。

  40. kim 说：
    8月 7th, 2009 at 9:45 上午

    你的页面很简单，很清爽， 为什么没有网站地图哪

  41. 包尔 说：
    8月 28th, 2009 at 12:24 下午

    吼吼，在当下摸石头过河，摸着摸着……有可能摸着河蟹，也有可能摸着蚂蝗

  42. 蝌蚪 说：
    9月 22nd, 2009 at 11:35 上午

    我觉得网站的关键是“站”，而不是“网”。

    “站”是一个机构、一个组织、一个服务体系。比如：公交车站、火车站、服务站、补给站之类。

    而网，只是一个工具。。。

    好像跑题了。。。呵呵。。。

  43. 学习者 说：
    10月 19th, 2009 at 5:22 下午

    经常看你的博客学习到不少东西，欢迎给我的小站提下意见，谢谢 化妆吧http://www.huazhuang8.com

  44. vinci 说：
    11月 11th, 2009 at 2:27 下午

    我觉得确实开心网做的很乱.因为我不能很快找到我想要的东西.用户体验的好坏就是一个界面结构合理性的最好的解答.所以任何界面都有可比性.苹果的spotlight就是很好的设计.也是最直接的.就向和人说话一样.虽然spotlight仍有改进之处,但这个概念是很接近人性化的.

  45. Eros 说：
    3月 2nd, 2010 at 2:41 下午

    开心网和Amazon、雅虎不是同一类型的网站（当然Amazon、雅虎的信息设计的确很好）。开心网不是侧重于信息的网站，它是一个社区，产品是他们的核心；而Amazon、雅虎侧重的是信息，展示的信息和分类是他们的核心。所以我觉得，他们不能拿来做对比…

  46. 江郎 说：
    3月 5th, 2010 at 11:53 上午

    典型的网站结构是树状结构，事实上，所有结构都可以归纳为树状结构。为什么这么说呢？sns网站的用户节点形成的是网状结构，但是在架构网站的时候依然可以把这些节点的信息进行树状结构输出。树状结构是自然结构。

  47. 田点 说：
    5月 6th, 2010 at 5:41 下午

    了解一个网站的整体框架并不是用户要掌握的,就好比我开车时需要刹车,我并不需要知道刹车片是如何起的作用,促使车子停了下来,我只要知道刹车就在脚底.同样的我来到了这个网站,想要购买**东西,只要知道这家商城是集日用百货,书籍资料….等一列商品平台就行了,或许我分不清我要的东西到底属于哪一类,但是我可以去问(站内搜索),只要能方便快捷的达到我的目的,其余的我可以忽略他的存在,挥挥手下次再访!

  48. 交互设计, 移动设备 | Hello Tea 说：
    7月 10th, 2010 at 7:38 下午

    [...] 2)提供好的概念模型，即可以让用户很快的在脑子中反映出一个完整清晰的系统各个功能的组织方式及相互之前的关联。相关阅读《创造一个可理解的世界》- 臭鱼。 [...]

  49. 《移动设备交互设计》读书笔记[1] « weber 说：
    7月 12th, 2010 at 2:59 下午

    [...] 2)提供好的概念模型，即可以让用户很快的在脑子中反映出一个完整清晰的系统各个功能的组织方式及相互之前的关联。相关阅读《创造一个可理解的世界》- 臭鱼。 [...]

发表评论

您的大名：