标签存档：信息架构

这两天都在谈论这个问题，关于垂直门户中的产品和资讯

·产品和资讯在这里的定义
这里指的是产品是相对于资讯来说的提供给用户的其他服务。好比现在的太平洋电脑网，它可以给用户提供各种数码产品的最新动态、评测、行情，在这里我把这些定义为资讯。除此之外，还提供给用户数码产品的产品库和报价库，方便用户查找产品的参数和报价，这种在篇文章中我定义为产品。

·产品和资讯问题的产生
资讯和产品之间的问题是由资讯类网站的发展所造成，那就是资讯类网站不再只做资讯服务，也开始根据用户和业务的需求，来设计一些产品，好比邮箱、博客、产品库等。这样以为资讯进行架构的垂直类门户就会与后诞生的产品产生矛盾。如果产品和现有的资讯的关联度不大，比如博客。那矛盾就很小。但如果产品和资讯有比较大的关联，比如产品库，那问题就出现了。

·问题的表现
现有的以资讯为架构的网站组织形式难以适应产品的发展
拿太平电脑网来举例，像这样的垂直类门户的导航往往是很庞大的，而且以资讯为基础的。我们看到电脑网首页的导航的主体是各种产品的资讯：

后来才出现的产品往往会被庞大的导航系统淹没。比如用户想查某款手机的报价，来到太平洋电脑网首页，往往更容易被 引导进入手机频道，而不是“今日报价”。为了解决这个问题，我们就在手机的资讯页中也加入了产品报价的部分功能。

但随着网站的发展，产品的增加，资讯页承载的任务将会越来越多。它不光要完成自己原有的使命，提供资讯。还要提供各种产品的功能。但用户却并不买账，看资讯的用户会被报价功能打扰。查报价的用户会发现这里的报价功能并不完整。

·对于问题的思考
站在用户的角度来分析，浏览资讯的和查看报价的用户的需求肯定是不同的。查看报价的用户目的性更强，他们往往是带着问题来到我们的报价库，希望能够快速的解决问题的，如参看制定产品的型号、价格，了解这款产品的评测等。而浏览资讯的目的性就要弱一些，可能他们关心的是行业内发生了什么事，有什么新的产品上市等等信息。当然这两类需求也不是完全对立的，在一定情况下也会向对方移动。但梳理清楚这两种需求，为这两种需求分别提供一种解决方案，无疑 可以帮助用户更好的满足他们的需求。

最后提供我们的老朋友 zol 最近首页改版的效果图：

1.符合用户的浏览习惯

版块之间的排序应当符合用户的习惯。用户浏览网页通常是从上到下，从左到右，所以排布各个版块的时候应该根据用户的视线流走向将网站最重要的和最想让用户看到部分放在视觉流的上游，简单的来说就是最重要的最先被看见。

如果网站提供社区服务和搜索服务的话，用户登录和搜索通常也应该在第一屏出现。如果网站并不是以资讯为主，而是以功能性为主，比如提供邮件服务或者B2C性质的网站，那“帮助页面”的入口也应该被安排在靠近页面的顶部。

2.版块的排布在视觉上尽量符合纵向分割

在板块排布的时候在视觉上尽量在符合纵向分割，能在纵向上对齐。避免在纵向上出现犬牙交错的布局，见下图。当然，横向和纵向都能对齐那就更好了。但对于大部分门户网站来说比较难。

3.以用户的角度出发，将版块划分成几个独立并且连续的区域。

从用户的角度出发，将版块按用户需求划分成几个区域。每类版块都占据一块独立并且连续的区域。不同分类的版块的信息不能混合分布在同一个区域。这样做，可以方便用户了解整个网站的主要内容和结构；减少用户在浏览网站时的干扰信息。

以门户类网站为例，可以将整个页面划分成以下板块：头部，导航，搜索，分类新闻区，工具区，互动与社区，辅助信息区，商业信息区（或者说是广告区），页脚。这几个部分。在这个方面腾讯首页做得还是蛮好的。见下图。

]

页面分为三栏。左栏分两个区域：一个是腾讯的产品区域，另一个分类新闻区域。中栏也分两个区域：一个区域包括了推荐内容、专题内容和博客，另一个是分类娱乐和休闲资讯区域。右栏可以看做广告和辅助信息区域。这样的做的好处是用户很容易就掌握腾讯网首页的结构，寻找他们自己感兴趣的信息而，将可能干扰他们的信息噪音减到最少。关心各种新闻的用户，在左栏里就可以找到他们自己感兴趣的信息。关心休闲和娱乐的用户可以在中栏找到他们想要的。这样用户就不用在整个页面中寻找自己需要的信息，而且也最大程度减少广告或者其它干扰信息对用户的影响。而与之对比的网易在右栏这块区域的版块排布就不那么清晰了，广告和内容交替出现，给网友的浏览带来一定的障碍

4.在同一区域里内容相关的版块相邻，或者按照用户习惯来排序。

在同一区域（同类版块）中不同内容的版块也需要排序。这里遵循的原则是内容相关的版块相邻。或者符合用户习惯的来安排版块间的先后顺序。还是用QQ首页作为例子。QQ首页中许多内容都是通过标签切换的，但相邻标签的内容大部分都是相关或者符合用户浏览习惯的。如下图。

5.根据用户的需求来组织版块，避免版块划分粒度太粗或者太细。

在组织版块时，应该从用户的需求出发，来分类各个版块。而不是因为分类而分类。这样做通常会将版块划分的太粗或者太细。这里就这两种情况各举一个例子。

版块的粒度划分得太粗

视觉中国可以按照“资讯”“竞赛”“展览”对它的信息进行划分。这样的划分对于用户来说粒度就太粗了。访问视觉中国的网站有平面设计师，网页设计师，工业设计师等等。仅仅将信息分类成“资讯”“竞赛”“展览”显然让用户承担了更多的信息压力。这时用户可能会抱怨：“我想看动画设计方面的信息，为什么有这么多平面设计的信息？”所以按照不同的设计门类来划分信息类别，比如：”平面设计”,“动画设计”等等，更加方便用户查找信息。

版块的粒度划分得太细

在做太平洋汽车网的一个频道“国际新车”的页面改版时。我发现原来的页面就出现了因为分类而分类的的问题。在对发布新车的消息的划分中，有三类：第一类“新车巨献”内容是官方已经正式推出新车的消息；第二类是“新车谍报”内容是官方未正式推出该新车，但民间已经有这些车的一些信息（这些信息通常是被证实）；第三类是“新车预测”内容为一些车型的预测和传闻（这些信息未被证实）。首先这样的分类太过细致和复杂，用户对于理解这三块发布新车资讯内容的区别会有困难（当然，这里三个板块的标题都不太好理解，也是重要的原因）。其次这样的信息组织结构并不符合用户对这类信息的需求。其实用户只想知道自己感兴趣的车的信息。而信息本身的可信度完全可以由用户自己来判断。所以这里只需要将新车发布信息分为“已经正式发布车型的消息”和“未发布车型的消息”就可以了。这个频道的另一个问题是对信息属性的划分太细。页面第二屏的“国外新车”版块是用图片与文字链的形式介绍最新的国外新车的资讯。而在页面最底端“新车图辑”版块是以图片的形式来展示新车。我觉得这里有些重复了。可以将两个板块和并在一起，让用户自己去判断是选址文字信息还是图片信息。

许多资讯类的网站都有信息量庞大的导航。网站的全站导航就占据了第一屏的1/4。而各个栏目又需要大量的导航。按照逻辑关系给这些导航排序。全站的导航理应出现在最前面，接下来是各个栏目的导航。可不经过处理直接这样安排的话，当用户点击到各个栏目页的时候，第一屏1/2的位置都被导航占据了：首先是全站导航，然后是栏目导航（见下图）

当网站的导航信息量到达一定程度时，将所有的内容都罗列出来显然是不妥当。这时我们通常会减少导航的信息量，常见的做法是当用户进入到栏目页时，我们将全站导航做“薄”。这里的“薄”有两个层面的意思，第一个层面指信息量的“薄”：只提供最主要或者最重要的导航项，而不是所有的导航。第二个是视觉上的“薄”：缩写导航的名称（当然保证用户仍然明白缩写后的名称点击后是打开哪个页面）减少视觉上的修饰，精简导航的形式。必要时我们还会将栏目页的导航也做“薄”，减少导航的项目和视觉修饰(见下图)。

参加了上海关于“怎样设计web‘帮助’更有效”的书友会，收获颇多，平时很少注意的帮助的确值得我们思考。

设计“帮助”的一些想法

1.  “帮助页面“只是狭义的”帮助“，广义的“帮助”应该无处不在，它协助用户了解和使用网站
 用户在使用web服务的时候遇到问题，就可能会想到“帮助页面”。其实“帮助页面”只是狭义的“帮助”，用户在人机交互过程中的任何一个提示，一个说明都属于“帮助”的范畴。

2  用户更喜欢在实践中学习，而不是通过“帮助页面”
用户总是忙碌的，他们所有的操作都是为了完成他们的目标，用户并不关心用什么方式和为什么用这样的方式来完成他们的目标。所以他们对待系统的“帮助页面”总是冷漠的。用户更喜欢在实践中学习，在过程中学习，这对于用户来说是最省时省力的。

3. “帮助”的设计应该从整个信息架构建设开始
“帮助”被人们认为是整个系统建设的一个补充，它的设计往往被独立出来，甚至是在整个系统建设完成后才开始。就像传统的“帮助页面”，他的出现是为了“治疗”用户在使用web服务时的出现的“病症”。可治疗往往没有预防效果好，在治疗的同时也会带来一些不良反应：由于“帮助页面”是独立于用户操作的页面。当用户在操作遇到疑问时，他们不得不暂停手上的操作，然后进入“帮助页面”寻找答案。这样寻求帮助的方式不仅使得用户需要经常在至少两个页面之间切换来解决自己的问题而且还让他们的行为偏离了原有的行为轨迹。这无疑增加了用户行动的成本和出错的机会。
帮助的设计应该不仅仅局限于“帮助页面”，而应该从整个信息架构建设开始。把帮助显性的或隐性（触发式的或者是可选择性的）的嵌入到整个交互过程中。在用户操作过程中通过提示，说明，自我解释等方式帮助用户完成各种操作。减少用户为了寻求帮助过而偏离现有的目标的机会。当然，判断“过程中帮助”该在何时何地嵌入对于我们来说是个很大的挑战。但也是值得我们去思考和解决的。
虽然说“过程中帮助”的终极目标是让用户放弃传统意义的“帮助页面”。但“过程中帮助”仍然不可能完全解决所有用户的所有问题，并且这种帮助对于用户对于人机交互的熟悉程度也相对较高（如部分“过程中的帮助”是通过鼠标触发的），所以传统意义的“帮助页面”还是有它存在的价值的。

4. “帮助页面”的设计目的是让用户尽快离开这个页面
与设计其它的页面不同，我们设计“帮助页面”是希望用户能尽快从这个页面离开，回到之前的目标导向。大部分用户，都是在与人机交互过程中出现疑问才会去“帮助页面”的。这时的用户是带着一个还未完成的任务和一些疑问进入帮助页面的。在这样的情况下如果用户在帮助页面停留时间越长（可以认为是无法快速的找到他们需要的帮助内容或者是是被帮助页面中其它一些信息所吸引），那用户放弃这个未完成的任务的可能性就会很大。所以让用户如何能快速找到他们需要的帮助内容是设计帮助页面最重要的目标。

5.  根据你的用户和你的系统来选择你采用“帮助”的方式
大部分网站提供给给用户的帮助形式都是多样的。用户可以通过帮助目录来解决自己的问题，也可以通过帮助搜索来寻找自己的答案。采用哪几种有效的帮助方式才能够让用户快速的找到他们需要的帮助内容？不同的帮助形式有不同的特点（可以参看下面提到的帮助的分类），只有帮助的形式适合用户，适合这个系统时，这样的帮助才是有效的。
举个例子，用户在你的系统中犯错的成本比较高时，那操作过程中的提示就变得比较重要。如果大部分用户都是使用电脑或者网络的新手的话，那帮助搜索或者过程中的帮助（这种方式的帮助可能会增加更多的交互机会）可能就不是你的首选，而更容易上手的图文帮助可能更适合作为你提供给用户帮助的第一课。再比如说用户会与你的网站有商业行为的话，即时性越强的帮助形式效果越好（比如电话，即使通讯软件）。

6.“帮助”的结构应该是清晰、内容应该简洁，尽量避免用户在使用“帮助”的过程中产生新的疑惑
帮助的主要任务是解决用户遇到的问题，一旦用户在寻求帮助中又产生了新的疑惑，他很有可能选择放弃。举个例子，如果你的帮助写得像硕士论文那样，充满了艰涩难懂的专业术语，从表到里仔仔细细剖析一遍你的系统。这样的帮助会吓跑你用户。用户只想知道怎样完成他们的操作，他们并不关心为什么要这样操作或者这样操作有什么好处。所以帮助应该结构清晰，内容简介，能够让用户不费很大力气就完成帮助的全过程。如果无法避免会产生新的疑惑，那最好在容易出现疑惑的地方给出解决这个疑惑的方式。好比说在你帮助描述中无法回避一个专业术语，那就提供这个专业术语的解释或相关帮助。

7.“帮助”的维护和创建同样重要
帮助的维护往往会被人忽视。随着时间的推移，网站功能的完善和用户的成长，当初创建的“帮助”必定满足不了现在网站和和用户的需求。所以设计有效的帮助反馈，即时更新“帮助”是 “帮助”生命的延续。

常见的一些帮助形式
1.  帮助目录（按照一定方式将帮助分类）
2.  常见问题（也可以说成“热点问题”）
3.  论坛支持
4.  搜索（通过输入关键字来查找所需的帮助信息）
5.  客户互助（类似百度知道）
6.  名词解释、定义（对专业术语的诠释）
7.  提供下载线下帮助
8.  即时在线客服（通过IM或者基于web的IM的帮助，提供帮助的可以是专门的客服人员或者是机器人）
9.  客服电话
10. 邮件帮助
11. 博客支持
12. 视频演示
13. 交互式的帮助
14. 交互过程中的帮助（可以是显性的也可以是隐性的）
（ps：后文有这些帮助形式在主流网站的实例）

帮助的分类

按照得到帮助的速度来分
1.  即时性帮
助
这类帮助在用户遇到问题时，可以很快的给出帮助的反馈（并不考虑这个帮助是否真的被解决）。如，用户遇到问题后，进入帮助页面，在FAQ中寻求解决办法；直接拨打24小时客服电话，用IM向在线客服寻求帮助。当用户的帮助需求很紧急时，即时帮助就显得很重要了。
2.  非即时性帮助
这类帮助需要一段时间才能得到帮助的内容。如通过发邮件，提交表单提出帮助诉求。这类帮助往往作为“主要帮助”的补充：当用户在系统提供的帮助中找不到答案的时候可以通过这种方式来寻求帮助。适合高级用户提出复杂的帮助需求，不适合帮助需求很紧急的用户。

按照提供帮助的位置来分
1.  进入系统的帮助页面寻求帮助
用户需要通过进入帮助页面或者通过搜索引擎来主动获取帮助。目前主流的帮助都是建立专门的帮助页面。这样的帮助存在一个问题，当用户在人机交互过程中遇到挫折，便放弃交互时，再好的帮助页面也失去价值。
2.  在交互过程给出相关的帮助
在人机交互过程中系统会提供显性得或者隐性的（如，通过鼠标触发）提示，说明或者进行自我解释来帮助用户完成操作。设计这类帮助的终极目标是让用户忘记所谓的帮助页面，在人机交互过程中对帮助用户学习和纠正用户错误。设计这类帮助的往往是从整个网站的信息构架开始的。这类帮助的设计需要花费更多人力，物力和财力。但这也是体现出信息架构和交互设计的重要性。

按照提供帮助的对象来分
1.  提供帮助的是机器
如传统的帮助页面，视频演示。这类帮助具有局限性，它只能满足大部分用户的需求，但对于有特殊需求的用户就无能为力了。
2.  提供帮助的是专业的客服人员
如客服电话、论坛、借助即时通讯软件的帮助。比起机器提供的帮助，这类帮助更加灵活，基本上能解决所有的问题。除此之外，像客服电话这样的传统服务方式，更适合不熟悉与机器打交道的人使用。
3  提供帮助的是用户本身
如淘宝互助这样的平台就是通过用户本身的沟通来取得帮助。这类帮助更加开放，更容易了解客户真正想知道的，更有利于建立帮助知识库。

按帮助所采用的形式来分
1.  文字说明
最普通的帮助形式。文字帮助往往是单独，枯燥的。用户往往无法完整阅读大篇幅的文字说明。但如果需要解释专业术语或者名词时，文字形式的帮助无可替代。
2.  图文说明
主流的帮助形式，提供比文本说明更加直观和清晰的帮助形式。可以解决大部分用户的帮助需求，但遇到比较复杂和繁琐的交互过程时，图文帮助并不是最有效的。
3.  视频演示
通过演示人员完整的人机交互演示，让用户更直观的学习整个交互过程。这种帮助形式适合较复杂和繁琐的交互过程。当然这类形式的帮助会对网络带宽有一些要求，所以最好能提供用户在线观看和下载两种选择。除此之外视频演示还有结构不清晰，很难快速定位整个交互过程的其中一个过程。
4.  互动式帮助
通过模拟真实的交互环境，提供引导和说明帮助用户完成整个交互过程。对于较复杂的交互过程，互动式的帮助是目前最好的解决办法。它贴合用户更愿意在“实践”（虽然是模拟的，但基本重现实际交互环境）中学习的意愿。它也能解决视频演示中结构不清晰，难以定位整个过程中的其中一环节的问题。
5.  搜索
通过输入关键字查找帮助的内容。这类帮助形式可以以最快的速度帮助用户找到他们需要的内容。但它对用户的要求也比较高，需要用户能够找到概括他们遇到问题的关键字。所以建立搜索帮助最关键的问题是建立的“帮助知识库”能够涵盖大部分用户所需帮助的关键字。

主流网站的帮助（ps：在选择了解网站的产品中我尽量选择包含复杂交互或者可能出现特殊帮助需求的产品。由于个人能力有限，可能会有疏漏和错误，以下信息收集的时间为：2008年3月16-23日）

Google
Google的产品和服务有自己单独的帮助页面。同时也有自己的帮助中心—“Google帮助”。这里我了解了它产品中的 [地图]，[日历], [论坛] [AdWords]。
1.搜索  [地图]，[日历], [论坛] [AdWords]。
2.帮助目录 [地图]，[日历], [论坛] [AdWords]。
3.5大常见问题 [搜索] [地图]，[日历], [论坛] [AdWords]
4.查找术语(专门针对用户可能遇到的术语的帮助) [AdWords]
5.论坛支持 [日历], [论坛] [AdWords]
6.即时在线的客户服务支持(没找到入口，所以没用过)  [AdWords]
7.博客支持 [Adsense]

百度
百度的产品和服务有自己单独的帮助页面。同时也有自己的帮助中心—“百度帮助中心”。这里我了解了它产品中的 [地图]，[百度指数], [论坛] [百度知道]。
1.帮助目录（感觉有点在像在看说明书） [地图] [百度指数] [论坛][百度知道]
2常见问题 [地图] [百度指数] [论坛][百度知道]
3.百度吧 [地图] [百度指数] [论坛][百度知道]
4.百度帮助电子书下载  [地图] [百度指数] [论坛][百度知道]

QQ
QQ产品和服务有自己单独的帮助页面。同时也有自己的帮助中心—“帮助中心”。这里我了解了它产品中的[QQ]，[拍拍], [财付通] （除了“帮助中心”的帮助，拍拍和财付通还有自己独立的，更加细致的帮助，包括交互的形式的帮助）。
1.搜索  [QQ] [拍拍] [财付通]
2.帮助目录  [QQ] [拍拍] [财付通]
3.热点问题  [QQ] [拍拍] [财付通]
4.会员热线（我不是会员，所以没用过这个）[QQ] [拍拍] [财付通]
5.客服电话（需要向运营商支付市话或长话费用）[QQ] [拍拍] [财付通]
6.咨询中心（通过一系列表单提交问题，用电子邮件或者电话接收帮助信息）[QQ] [拍拍] [财付通]
7.论坛支持 [QQ] [拍拍] [财付通]
8.流程演示（这里提供了图文帮助和交互式的帮助两种形式） [拍拍] [财付通]
（ps：[拍拍] [财付通]我并没有经历过买卖的过程，所以不知道有没有过程中的帮助）

网易
网易的产品和服务都有自己单独的帮助页面。同时也有个帮助中心—“易问易答”。通过帮助中心可以去到网易各个产品和服务的帮助页面。这里我了解了它产品中的[163邮箱]，[博客] 和[有道]（“有道”是自己独立的帮助）
1.帮助目录  [163邮箱] [博客] [有道]
2.FAQ  [163邮箱] [博客] [有道]
3在线回答（机器人“小易”