信息设计 - UCD大社区

优化网站信息架构

joegh — 2010-06-16 22:59:10

——让用户更容易地找到需要的信息1

最近突然想写个专题类的文章，关于如何让用户更方便快捷地在网站上寻找到他们需要的信息，当然不能脱离博客的主题——网站数据分析，所以这里主要介绍的是如何通过网站分析来优化网站，实现用户对信息的快速获取，首先介绍的是网站的信息架构。

关于信息架构，网站设计的同学才是专家，我在这里只是班门弄斧，根据大学里面阅读的信息架构类文献资料的一些残存的记忆，再加上这几天临时抱佛脚的简单温习，在这里表述一下我的一点拙见。

信息架构的定义

根据维基百科的定义，信息架构（Information Architecture，简称IA）是在信息环境中，影响系统组织、导览、及分类标签的组合结构。它是基于信息架构方法论，并运用计算机技术管理和组织信息的一个专门学科。信息架构并非一开始就应用于网站设计，其起源于情报科学，最初应该是用于图书馆等地方的信息组织和信息检索的。

《用户体验的要素——以用户为中心的WEB设计》这本书中对信息架构的定义基于网站设计：信息架构着重于设计组织分类和导航的结构，从而让用户可以提高效率、有效地浏览网站的内容。

具体的就不再多说的，可能各有各的理解，这里直接来看一个实例——Wordpress的信息架构模式：

当然，上面这个图只能展示一个大体的网站信息架构，中间的类目层也许不止一层，会有大类、子类、子子类……底层可以是文章也可能是页面或者一些其他的具体内容。而网站的内部关系也往往因为全局或局部导航、网站内链和内容关联等功能的存在而复杂的多，图上的箭头也会密集很多，但我们无需罗列所有内容间的关系，关键是在理清基本的结构。

信息架构的类型

还是参考《用户体验的要素——以用户为中心的WEB设计》中对信息架构的几个分类：

层次结构（Hierarchical Structure）

也叫树形结构，是最常见的网站信息架构模式，上面举例的Wordpress的信息架构就是典型的层次结构。树形结构中箭头的方向不一定是自上而下的，也可能是自下而上或者是双向的，而内容层之间也会因为一些关联链接的存在而存在同层次间的指向箭头。

矩阵结构（Matrix Structure）

矩阵结构比较注重“维”的概念，即从多维的角度来检索信息，如时间、地域、内容分类等，典型的应用就是内容管理系统（CMS）网站或者电子商务类网站，比如你浏览豆瓣的电影时可以筛选：2010年—美国—科幻，也许这个时候《钢铁侠2》就呈现在你面前了。

线性结构（Sequential Structure）

看到线性结构也许你马上会想到面包屑，它将网站中最重要的一个信息架构路线展现了出来，即使它无法为你提供你在网站上的平面坐标，但至少它显示了你现在正处于关键线路的哪个点上；当然，网站的一些关键路径一般也是按照线性结构涉及的，比如用户注册流程或电子商务网站的购买流程等。

网站分析与信息架构

根据网站业务模式的不同，可以选择适合自己网站的信息架构的模式，无论是上面的哪种信息架构模式，只要设计和运用合理，用户便能够在你的网站上以最方便的形式、最快的速度找到他们需要的信息。

但当我浏览某些网站时，有时真的会让我感觉到“找不到北”，结果就是直接关闭该页面，如果不希望让已经进入了你的网站的用户轻易地离开，网站信息架构的好坏将直接影响网站的用户体验。所以我们需要通过一些方法来检验网站的信息架构是否满足用户的信息检索的需求。

1.尝试整理出类似上面例子中的网站信息架构图

这个是最简单最直观的方法，如果你的网站信息架构足够清晰，那么画出这样的图对你来说也绝非难事；而当网站的应用比较复杂、内容比较宽泛，那么可能要整理出网站的整体信息架构就会相对困难，但我相信一个设计优秀的网站只要稍加整理，大体的信息架构图还是画得出来的；而当你绞尽脑汁就是理不清你的网站的信息架构的头绪的时候，那么说明你的网站需要优化了。

2.通过网站分析的方法验证信息架构的合理性

本文的副标题是“让用户更容易地找到需要的信息”，所以我们需要分析用户是否能够在你的网站上方便快捷地找到他们需要的信息，这里推荐一种方法——寻找网站中的迷失用户（Lost Visits）。

在一个合理的信息架构下，大多数的用户是不会在你的网站上迷路的；反之，混乱的信息架构会导致大量的用户迷失方向，就像是进入了一个巨大的迷宫。那么如何寻找这些迷失用户？我们可以先分析下这类用户的行为，最明显特征的就是：连续点击好几个页面，每个页面都只是初步浏览（因为没有找到他们需要的信息）就转到另外的页面或直接离开了。所以我们可以借助网站分析中的两个度量：

浏览页面数（Depth of Visit）：一次访问中用户总的浏览页面数；

页面平均停留时间（Avg. Time on Page）：一次浏览中用户在每个页面的平均停留时间，即该次访问总停留时间（Time on Site）/该次访问页面数（Depth of Visit）。

我们可以用户细分的方法把那些浏览页面数较多，但页面平均停留时间较短的用户浏览看作是迷失用户，具体的数值可以根据网站自身的特点进行定义，比如我定义我的博客中浏览页面数大于等于4，而页面平均停留时间小于等于15秒的Visits为迷失用户的浏览行为，我们可以借助Google Analytics中的高级群组（Advanced Segment）来区分出这类用户，关于如何使用Google Analytics的高级群组功能，可以参考蓝鲸的文章——Google Analytics功能篇—高级群组，如下图：

当然，你可能会说这种用户区分的方法不准确，这类用户不一定就是迷失用户，也有可能他们确实找到并浏览了具体内容，但因为内容不够吸引人或者其他原因而马上离开了该页面。所以这里用高级群组划分出来的这类Visits的数量不能看作是迷失用户的一个绝对数值，我们只能认为里面的大部分Visits都是迷失用户，而不排除存在某些另类。所以更合理的方法是通过计算这类Visits占网站总Visits的比例情况来分析网站的信息架构到底是否合理，我们可以在Google Analytics上面选取网站的All Visits和Lost Visits进行比例和趋势的比较，如下图：

网站中迷失用户浏览的所占比例只需通过Lost Visits/All Visits就可以计算得到，但这个时候你还是无法根据这个计算结果来评判网站的信息架构到底是好是坏，因为还缺少一个基准线（Benchmark）或者说是评判标准。在Google Analytics上面的Visitors标签下，提供了“Sites of similar size”的基准比较（Benchmarking），你可以选择与你的网站相似类型的网站作为基准线进行数据比较，这的确是个很好的参考，因为通过比较能够更加明确你的网站在同类型网站中的优势和劣势，为网站优化指明方向。GA借助其强大的数据平台可以为我们提供基准线，但也许对于上面这个例子会显得无能为力，这个时候需要我们理性地自己去选择一个合适的基准线，比如我的博客目前类目和内容都还比较少，那么我可能会定义我的网站的迷失用户比例应该控制在1%以下；但如果对于一个应用和内容比较复杂的网站，那么基准线显然会需要定得更高一点。一旦某段时间的数据越过了基准线，就需要关注一下网站的信息架构是不是在趋于混乱了，是不是该进行一下整理和优化了。

总之，一个好的信息架构能够帮助用户更容易地找到他们需要的信息，从而有效地提升网站的用户体验，所以，尝试着去优化下你的网站的信息架构。如果你有更好的方法能够有效地检验网站的信息架构的优劣，或者能够明确地分析得到网站信息架构的哪些细节上存在缺陷，希望能与我交流，我期待网站分析方法在优化网站信息架构方面的更多的应用。

表面下的隐藏信息——浅谈信息可视化

段梦楠 — 2010-02-20 11:15:43

1910年，病卧床上的魏格那（德国气象学家，以“大陆漂移学说”闻名），无意地注视着墙上的世界地图……地图表面之下的隐藏信息惊现了：“大西洋两岸的轮廓竟是如此相对应……”。

地图，将地面坐标的信息可视化而产生的图形工具，更便于人们探索其中关系，进而发掘隐藏的真理。Let’s zoom out. 其实任何事物都是一类信息：表格，图形，地图，甚至文本，无论静态或动态，都为我们提供认识世界的手段。而可视化(visualization)，将数倍放大他们的威力。让我们看看Ta是如何穿透表面，让隐藏的信息浮现的：

1854年，霍乱在伦敦Soho区严重爆发，当时对霍乱起因的主流意见仅仅是空气传播。

约翰斯诺（内科医生）将水质研究、霍乱死亡统计分布图与地图对比分析，发现污染源来自于Broad Street的公用抽水机。证实了正是伦敦政府将废物倾销进泰晤士河的决定导致了霍乱通过地面下污水传播而最终爆发。

数据可视化的目标是通过图解手段清楚和有效传达信息。功能性的数据可视化并非要是看上去乏味的，极度精密尖端的数据可视化也不一定是看上去漂亮的。关键要结合数据的特征，以便观察。

越狱男主角Michael身上的魔鬼纹身头像是用来定位在墙上打一个小洞：

因为Michael参与过监狱维修，所以知道材料的弹力系数以及一些参数。根据胡克定律求出坐标后，当然要记下来，最容易记住的就是图形，他就把坐标隐藏在了恶魔的脸上了，然后又投影到墙上。这里，信息可视化以图形形式记忆复杂计算的结果，帮助用户快速使用并达到目的，数倍提高信息的使用效率。

如今，数据可视化已发展成为研究教学与发展的热门领域，是结合了科学与信息形象化的综合领域。今天的信息世界，信息爆炸：怎样组织它们？信息超载：怎样理解它们?所有信息是相互关联的：怎样介入它们？知识淹没在信息中：怎么发现知识？怎样展现各种形式的信息来帮助人们探索信息？Let’s take a look:

5 Years Infosthetics

http://moritz.stefaner.eu/projects/5yrs-infosthetics/

“假设总共1000条数据，每屏显示50条，共需多少屏显示的完？”

在Infosthetics论坛 5周年庆生之际，设计师将总共约2000个项目放在同一个页面中按多重维度进行筛选查找。左侧每一个小块代表一个项目，并赋予几个与右侧类别属性对应的颜色。

点击右侧的类别、回复数、年份可进行多维度筛选。从近2000条数据中筛选出感兴趣的内容也就点几下的功夫。通过减少搜索，以较少的空间表现大量的数据，间接提高了用户的信息获取效率。

Where Does My Money Go？

http://www.wheredoesmymoneygo.org/prototype/

2009年圣诞节前，英国政府宣布将对地方公众公开地方开支报告，于是wheredoesmymoneygo.org孕育而生。用户可以在这里查看英国的政府过去6年内各领域的开支。政府希望通过运作这个项目，收集更多细节的信息，包括地方消费等。图表内容的类别包括教育、健康以及国防等领域。由于所有图形的尺寸都与实际金额对应，颜色都与类别对应，即使没有百分比数据统计，也能直接看出各部分开支的比例，清晰直观。

——“油和能源的开支在哪儿？”

——“点绿的，进去就看到”

California Stimulus Map

http://www.recovery.ca.gov/HTML/RecoveryImpact/map.shtml

目前美国政府已向公众公开各地区的资助情况。市民可以在这个网站上可以一目了然看到各地区的资金补救和再投资分布。资助对象包括州政府，当地政府，地方企业，本地非赢利组织等。

图中圆形的大小对应资助总金额，数字代表资助项目数，彩色扇形分别对应交通、能源等各大领域。

Charting the Beatles

http://www.mikemake.com/#72772/Charting-the-Beatles

这些形象化的数据图表是对Beatles音乐的一项研究。素材来自于许多图和文献，包括销售统计、传记、笔记、活页乐谱和未加工的音频资料。

每个成员各自由一个颜色表示，从每个单曲的色块组成上，以及红色条状代表合作程度，可以看出成员日益独立的趋势。

这张图描述的是Beatles 1963-1966年期间的灌制唱片，拍摄影片以及巡回演出的时间。好像有点像唱片，从里到外一圈一圈，很有意思。

Netflix DVD Renting

http://www.nytimes.com/interactive/2010/01/10/nyregion/20100110-netflix-map.html

这是Newyork Times上关于Netflix.com 所有DVD电影在各地区的租售热度分布图。通过顶部滑动条可以租售量纬度选择不同片子并查看业绩。区域热租度已成为除了票房或IMDb评分之外的另一大推荐指数。

Crayola’s crayon chronology

http://www.weathersealed.com/2010/01/15/color-me-a-dinosaur/

Crayola’s是个历史悠久的蜡笔品牌，从1903年的八色起到现在的120色蜡笔套装，颜色数量每28年翻一番。照这速度到2050年，就会出现330种颜色的蜡笔。将来画条逼真的彩虹肯定没问题，不过叫人帮忙拿支蜡笔恐怕非得报出色号才行。

信息可视化是门博大精深的学问，在此仅作抛砖引玉之用，与大家一同探索，通过设计发挥出数据更大的潜力。

另附上一些不错的信息可视化资讯站点，供大家参考：

http://well-formed-data.net/

http://bestiario.org/

http://flowingdata.com/

http://infosthetics.com/

http://www.informationisbeautiful.net/

http://stamen.com/

相关话题：信息设计信息可视化源地址：http://cdc.tencent.com/?p=2219

创造一个可理解的世界

chouyu — 2009-05-09 22:37:02

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关话题：信息设计源地址：http://www.chouyu.com.cn/?p=262

信息可视化与视觉设计

JunChen — 2008-07-26 22:59:07

在工作中你是否会因为不知道用哪种图表（柱状图、饼状图、散点图……）来呈现表格数据而头疼呢？

这就是信息可视化（Information Visualization），是一个很大的话题。我们一般讲的可视化，包括科学计算可视化和信息可视化。前者大量运用在医学、地理、物理等领域（空间数据），比如部分分布式计算项目的屏幕保护程序，可以归为科学计算可视化的一种（当然与科研领域相比只能算毛毛雨了）。后者则主要是信息系统、商业金融、网络等领域（非空间数据，或者多维数据）。一方面由于信息可视化本身是近些年才发展起来的，另一方面我本人实际涉及的也不是很多，本文参考了一些信息可视化的文献，附在文末，与大家共勉。

一个例子

今年股市比较热，打开任何一款炒股软件都能看到花花绿绿的曲线、图形，那么你可知道用来表示股价信息的 K 线图是谁发明的呢？传说是日本大米商人本间宗久为了记录下每日的大米价格变动而发明的一种图示，记录下价格的涨跌和走势，适时的进行大米交易来积聚财富，这种图示法准确、细致、独特，后来才被引入美国股市和期货市场。当然现在信息技术和统计学的发展，还涌现了一大批图表，比如星空图、散户线、火焰山等等。

信息可视化在这里将大量的数据进行信息提取，然后通过直观和形象的图形表现出来。（想象一下如果股票信息都是以二维表格形式呈现的话，那是多么恐怖）

认知心理学和图形设计

信息可视化的两大基础是认知心理学和图形设计，认知心理学是理论基础，图形设计是实践操作。

可视化不仅仅是视觉上的，该领域的研究人员也尝试着将听觉、嗅觉和触觉融合进去（比如针对残障人士的设计）。在《信息可视化的基本过程和与主要研究领域》一文中，作者将视觉上的可视化变量分为 7 种：位置、形状、大小、方向、色彩、纹理、灰度，有时候也会将色彩分为色相、亮度和饱和度。基本上所有的信息可视化应用都是一个或多个变量的组合。不同的视觉变量在呈现数据各有优劣（从认知角度），如下表所示：

	联系	选择	次序	数量
位置	好	差	差	差
形状	好	差	差	差
大小	差	好	好	好
方向	好	一般	差	差
颜色	好	很好	差	差
纹理	一般	好	一般	差
灰度	差	好	很好	差

* 联系：数据与数据间的关系等；选择：数据的识别等；次序：比如时间序列和空间序列；

在 Web 设计上的应用

信息可视化对于具体的 Web 应用是很有指导意义的，或者说就是信息可视化的应用。基本步骤就是从大量数据中提取元数据，然后对应可视化变量，用图形设计方法去实现。IBM 有一个相关项目叫做 ManyEyes，内置了很多常见的可视化模型，可以参考。

对于 Web 设计来说，重点是利用认知心理学的理论作引导，比如色彩的暗喻、直觉等，如果是国际化产品，尤其注意文化差异。从色彩的角度讲，各个国家或地区因为政治、宗教、环境等不同，对色彩的感受不同。

结合上面的表格，举个例子：TagCloud。TagCloud 的目的是什么呢？并非是表现出各个 Tag 之间的关系，而是让用户能够更好的进行选择、识别，所以通过大小和颜色的区分，创造了 TagCloud。所以做设计还是回到了先进行用户研究这个话题上。

其他在 Web 上的应用，比如 Google Analytics、Google Trends。借助于 Flash、Flex、SilverLight 等强大的浏览器端图像渲染，可以将大量的、复杂的数据清晰、直观、生动的展现给用户。

也可以通过信息可视化技术和方法将 Social Network 表现出来：

参考文献

* 宋绍成, 毕强, 杨达, 信息可视化的基本过程与主要研究领域, 2004
* 张聪, 张慧, 信息可视化研究, 2006
* Edward Tufte, Envisoning Information, 1990

题图来源：带色彩指示的咖啡杯。

相关话题：信息设计信息可视化源地址：http://ucdchina.com/blog/?p=277