Thinking from design

Friday, February 26, 2010

3 Information Architecture

在网站设计的背景之中,information architecture描述整个概念模型和一般设计,用于规划、架构和组合网站。每一个网站都有一个information architecture,但是信息architecture技术是尤其重要的,对于那些大型和复杂的网站来说,它的主要目标是:


组织网站内容,形成信息类别和层次。(分类法-taxonomies)

向设计团对和客户传达概念性概要和整个网站组织


研究和设计核心网站巡游(navigation)概念

为如何管理html语意性标注、如何格式和处理文字内容、如何设计和执行搜索优化标准和策略等设置标准和规范。


information architecture包涵了设计和规划专业的广泛领域,在information architecture,technical design(技术设计), 用户界面、图形设计之间的交汇,是必须模糊化,因为这些实践的区域需要合作去让用户获得:cohesive(聚合的、结成一个整体的), coherent(条理清楚的,连贯的;一致协调的、相干的), consistent(前后一致的,始终如一的) experience. 整体的、清晰的、一致的体验。

among--指三者或三者以上的同类事物之间

对于一个让许多不同用户和读者共享的、复杂、多纬度信息空间,Architecture是一个准确的象征性比喻(metaphor). 这个空间的信息根本性架构必须形成,先于其他特殊领域,比如:界面和图形设计,才能够有效运行。对于用户来说,网站的用户界面和视觉设计是最直观和视觉化的,但是网站的基本组织以及其内容如果并没有合理架构,视觉效果和交互设计都不解决问题。


在大型网站项目中,information architect的角色将很可能被一个拥有组织和传达信息的个人所完成,尤其是在网络环境中。


但是,在许多项目,网站的information architecture将会成为一个综合项目,包括了设计、编辑和技术团队。无论这个information architecture的角色如何被filled,information architecture的任务形成最核心的规划,联接你对站点目标、用户、以及各个专项设计、用户界面和技术解决之间的各种讨论。

Organizing Your Information 组织你的信息

我们日常的专业和社会生活很少要求我们创造详细的architecture--我们知道什么,我们所知道的一切的信息结构如何构成。但是没有一个坚实的逻辑的组织结构,你的网站就不会正常发挥功能,如果你的基础内容不准确,不吸引人,写得不清楚。

There are five basic steps in organizing your information:
以下是五个组织信息得基础步骤:

Inventory your content: What do you have already? What do you need?

inventory---编制…的目录;开列…的清单;盘存,清查
清查你得内容:什么是你已经有的?什么是你需要的?

Establish a hierarchical outline of your content and create a controlled vocabulary so the major content, site structure, and navigation elements are always identified consistently;
建立一个信息层次轮廓,创建控制性的词汇-主内容、网站结构、导航元素都可以持续性被识别的;


Chunking: Divide your content into logical units with a consistent modular structure;
chunking 意元集组
用整体(consistent 相容的;一致的)的模块结构分离内容为逻辑性的单元

Draw diagrams that show the site structure and rough outlines of pages with a list of core navigation links; and
Analyze your system by testing the organization interactively with real users; revise as needed.

画图表,通过核心导航联接显示网站的结构和页面的大致关系。并分析你的系统,通过测试和组织相关真实的用户,根据需求修改。

Content Inventories 内容清单

A content inventory is a detailed listing of basic information about all the content that exists in a site to be redesigned or, in some cases, a site to be newly created from existing content resources. Although a content inventory is often tedious and time-consuming to create, it is an essential component of any rational scope planning for a web project.

一个内容清单是:基本信息的详细清单,关于站点中所有现成内容被再设计,或者,在某些情况下,一个站点从已存的内容资源中被全新创建。尽管内容清单常常都是冗长、单调和花时间的事情,但是对于任何站点项目来说它是一个理性规划的核心内容。


内容清单在开始一个项目规划和information architecture 阶段是最游泳的, 但是详细的内容清单将会在整个项目中长期发挥作用,无论是网站项目规划阶段,还是网站项目增建阶段。这个工作贯穿一个现成站点,并详细记录每个页面信息,但是它也很容易将在不同内容板块上的各组组员分离。组员们建设网站清单必须都可以通过浏览器看到站点的页面,并可以看到整个站点在服务器上的文件结构,去保证所有的内容板块都被列出。

现存站点的网络内容清单一般是多个工作表合成的电子数据表,包括站点每个页面的长清单,随同页面题目、url, 内容负责人等关键信息。 每个页面基本都在电子数据表上有一横栏,与竖栏形成以下基础信息:

Unique id number for project purposes 项目目标的独立代码

Page title 页面名称

Page template or type 页面模板或形式

url 页面网站地址

General type of content 信息的一般类别
Person responsible for the content 信息的负责人
Keep/revise/discard decisions 保持/修改/删除决定

Create new content?/新建内容?
Review status/ 统计一览
Hierarchies and taxonomies /层次和分类

Hierarchical organization is a virtual necessity on the web. Most sites depend on hierarchies, moving from the broadest overview of the site (the home page), down through increasingly specific submenus and content pages.

层次管理在网络上是一个实质的必须。许多网站建立在层次序列上, 从网站总览到、到多级面板和内容页面。

在information architecture,你创建信息的类别、罗列信息的重要程度--通过比较这些信息之间彼此的关联性,特殊性、普遍性。一般分类让高阶层元素成为信息层次,特殊信息类别被放在层次的低段位置。 大量信息被按照重要性排序,并通过其与主类的某个分类的关系而被组织。一旦你决定了信息大纲的性质的一个逻辑序列和关系,你就可以建立层次--从最重要的,或最普遍的概念发展到最特殊和详细的部分。

Taxonomies and controlled vocabularies

分类和controlled vocabularies 控制词表

controlled vocabulary--受控词表,又称为控制词汇表、受控词汇表或者控制词表, 是一种对知识加以组织整理,以便后续进行检索的手段。受控词表在主题词标引方案、主题词表、叙词表、分类法以及本体等语义谱成员之中都有应用。受控词表方案强制要求采用预先确定且经过权威认定的术语,而这些术语是由词表的设计者原先选定的。相比之下,自然语言词表并没有施加此类限制。


分类学是一个学科和实践的领域。在information architecture之中,分类是信息类别的层次化组织工作,运用特别、详细设计的描述性词汇设置。很多有经验的编辑和图书馆管理员会告诉你,在管理大量信息的工作中,最大的挑战就是为开发一个系统:总是可以让某些事情参照某中方式:控制性词表,按图书馆科学的说法来说


因此在information architect 中最重要的工作是设计一个一致的名称和词汇序列,用于描述主要网站的内容类别、关键性的导航联接、以及如何描述站点的互动特征。控制性词表是内容组织、用户界面、每个页面上可见的标准导航联接、和网站文件以及目录结构的根本元素。

Site Structure (网站结构)

mental models--基本上来说人意识里的所有物体和人的概念,行为过程和规则,记忆中的事实和知识,都可以归于Mental Model。心智模型英文为Mental Model,又叫心智模式。

当我们面对一个全新的、复杂的信息系统,用户会产生心智模式。他们运用这些模式去评估不同信息类别的关系,并猜测去哪里找到他们以前没有见到的内容。 一个成功的网站组织构成体系, 是很大程度决定于:你的站点信息结构能否满足用户的需求。一个逻辑的、统一地命名网站组织可以让用户很快成功推论:如何寻找到自己需要的信息。


组织和展示信息的统一方法, 可以引领用户从他们熟悉的页面进入不熟悉的页面。如果你不能够用一个结构引导用户,它不逻辑也不可推测,或者常常使用不同的,模糊的词汇描述站点特征,用户将会因为不能够浏览和理解网站的内容而沮丧,任何设计师都不希望你的用户的心智模式如图3那样

http://www.webstyleguide.com/wsg3/figures/3-information-architecture/3-1-700.jpg




Figure 3.1 — Don’t make a confusing web of links. Designers aren’t the only ones who make models of sites. Users try to imagine the site structure as well, and a successful information architecture will help the user build a firm and predictable mental model of your site.
不要做出让人迷惑的页面联接。设计师并不是唯一建造站点模式的人。用户同时也在想像站点结构,一个成功的信息架构将帮助用户建立明确并可以推断的心智模式。

The browse functionality of your site
站点的浏览功能


如果你已经按照大纲模式创建了你的站点,在站点开发团对和小型真实用户之中,通过互动地测试去分析它支持浏览的功能。有效网站设计,通常都是那些在主菜单或主页与独立内容页面之间能够保持平衡的设计。目标是建立菜单和内容页面层级关系,这种关系让用户感觉自然,不会让他们迷失,或者干扰他们对站点的使用




网站有信息阶层如果太浅,那么就需要更大的选择菜单,这个菜单能够退化成一个无关联性信息的混乱细目清单。菜单体系也可以很深,将信息埋藏与很多菜单层中,如果获得目标内容之前,用户不得不穿越整个菜单层,这个事情会让用户很沮丧。


Figure 3.2 — Examples of the “Goldilocks problem” in getting the site structure “just right.” Too shallow a structure (left) forces menus to become too long. Too deep a structure (right) and users get frustrated as they dig down through many layers of menus.

“金发带问题”(Goldilocks problem)---个人认为是:两极现象的平衡,不是太高就是太低。Goldilocks Zone这个名词源自童话故事的Goldilocks,童话中的这个女孩喜欢"既不太冷又不太热"的粥。
这个图表现了站点结构的适宜性问题。 结构太浅,会导致菜单太长;结构太深,用户会厌倦深挖菜单的过程

如果你的站点成长得很快,那么菜单和内容页面之间的平衡关系就越来越值得思考。用户反馈意见(并分析你自己的对站点的使用),能够帮助你决断菜单层是否有用,或者非常有用。复杂的文件结构需要更深的菜单层次,如果有直接页面可以进入的话,尽量不要让用户从一个菜单页面进入另一个页面。通过向用户提供具有平衡性、功能性的层次化菜单,可以帮助用户快速获得信息并影响网站的结构。

Site search as navigation 网站搜索是一中导航

如果你的站点有很多页面,你的用户将会希望拥有页面搜索选项去直接获取内容。大型的站点,一般都会拥有上千个内容页面,网页搜索是唯一而最有效的方式去定位内容,或者寻找到含有关键词的页面。由主要站点和内容构成的浏览界面对于第一次访问的用户来说有效,但是一旦用户认为你的站点能够提供他们所寻找的内容,用户将会穿越分类页面--通过搜索直接获取信息。

---没有联接性(link) browse界面可以保证用户可以找到他们的关键词和搜索词组。比如hao123这样的联接性门户界面即便罗列了很多关键词,这些词汇可能没有一个是用户所直接需要的。

---搜索是最有效的、帮助用户直接获得特定信息内容的工具,尤其是获得那些浏览量低的内容,以及那些没有出现在导航页面上的内容。


如果图书馆中有人气的书,iTune上高点击率的歌曲,大型网站上的内容利用率是一个“长尾”现象:极度少数的内容吸引了80%的注意力,而其他内容完全没有被人主意。在用户需求变得越来越多元的情况下,浏览界面已经无法满足用户的多元要求,搜索引擎是最好的方法帮助用户从“长尾”获取目标信息。


Figure 3.3 — The “long tail” of web search. Large sites are just too large to depend solely on browsing. Heavily used pages are likely to appear on browsing menus pages, but obscure pages deep within the site will only be found and read through web search technologies.

图三:网络的“长尾”。大型站点由于信息量太大而不能依靠其浏览界面。使用率最高的链接往往会出现在浏览菜单页面,但是大量一般性内容页面只能被通过网络搜索引擎工具发现。

Site structural themes 站点结构主题

基于基础结构主题的网站会形成和强化用户的心智模式--你是如何组织你的内容。这些基础性的架构控制了网站的导航性界面,还有用户心智模式的形成。三种基础结构被广泛运用于网站设计之中:序列、层次、网状

Sequences 序列

序列是最简单和最让人熟悉的信息组织方式。 书、杂志等大量印刷品都是序列性组织。 排序元素可以是时间序列、逻辑序列-普遍性到特苏醒、字母排序,这钟排序在目录、百科全书、词汇表中很常见。 直线排序对于培训和教育性站点是最适当的组织方式。比如:我们希望用户可以经历设定好的浏览过程,各个页面只有一个联接点,这个联接点被贯穿于一条线性路径。

http://www.rcc.ryerson.ca/schools/rta/flowchart/images/LINEAR.gif



Linear 线性

In this instance the user is only able to travel through the program along one set path. He or she is not able to skip a stage, or progress backwards. This type of navigation is usually charted horizontally from left to right.

在这个例子中,线性组织只容许用户在设定的路径上,按顺序获取信息,用户不能“跳过”任何一个步骤,或者倒退。

线性跳转 Jump Linear




在这个线性关系中,用户不仅可以在整个线路上快进,快倒,也可以通过主站点跳转到任何空间。这种线性结构,往往都具有水平方向,但是处于高端的“home-主键”,并不处于平行线性结构之中,而是位于纵向的高阶层,表现出信息结构中序列和阶层的机能关系。

很多复杂的网站可能按照逻辑序列组织,其序列之中的每个页面可能拥有一些联接--通向偏离的方向、附加说明、或者其他网站信息。




Figure 3.4 — Some web sites, such as the training site diagrammed above (top), are meant to be read in a linear sequence. Programming logic can offer customized content for particular audiences and allow digressions from the main sequence of pages (bottom diagram).

图例:有些网站,比如上图是培训网站图,着意于让用户在线性序列上阅读;程序逻辑能够为特殊用户提供特定信息,并容许从页面的主序列中进入偏离方向。



Hierarchies 层次

信息层次化是组织大型复杂信息的最佳方式。因为网站通常都是以首页为核心建设的, 通过首页引导用户进入次级菜单页面,层次化结构特别适合站点组织。层次化结构图看起来很象企业或产业结构,所以大量用户都可以理解这种网站结构。一个阶层化组织页可以嵌入有用的领域,基于自身内容的解析方法,因为层次化只是对于良好组织内容有实际效果。

The simplest form of hierarchical site structure is a star, or hub-and-spoke, set of pages arrayed off a central home page. The site is essentially a single-tier hierarchy. Navigation tends to be a simple list of subpages, plus a link for the home page (fig 3.5a).

最简单的层次化结构是星状,或者是辐射型(状) (hub-and-spoke).所有的页面都从中心的主页面向外排列。这样的站点是典型的单向阶层,导航将用户引导进入次级页面菜单,并总是伴随回到主页的联接。

Most web sites adopt some form of multitiered hierarchical or tree architecture. This arrangement of major categories and subcategories has a powerful advantage for complex site organization in that most people are familiar with hierarchical organizations, and can readily form mental models of the site structure (fig. 3.5b).

大量网站采用多向阶层化结构,或者树状结构。主要类别和次要类别的排列对复杂网站组织拥有强大的优点,对于大多数熟悉阶层组织的用户来说,并可以快速形成对网站结构的心智模式。




树状结构容许用户在分支上深入浏览。如果用户希望从一个分支跳向另一个分支,那么他们不得经过分支回到中心点,再进入其他分支。这种结构对于松散得阶层结构比较使用。

Figure 3.5 — Hierarchies are simple and inevitable in web design. Most content works well in hierarchical structures, and users find them easy to understand.



值得注意的是,在树状阶层的分支并不支持用户从一个分支跳跃到其他分支,只能在分支上按“序列”移动。面对这种情况,许多网站导航界面都提供搜索玄想,使得用户可以获得跳跃空间,免去逐级回归主页面绕行的负担。 所以,很多网站,在其阶层结构的界面上,总是保持提供搜索选项目和回到主页选项,从而避免阶层结构的天生缺陷。

Figure 3.6 — Local (left column) and global (tabs below the header) navigation systems provide a flexible and easy to understand navigation system.

Webs 网状结构



网状组织结构是信息使用方法中限制程度最低的。这个结构主要被用于类似的相关思想、自由意识流,容许用户随同自己的兴趣进入独立的、探索性的、特定的方式。


propagate--传播; 宣传, 普及////exploit--运用;利用;发挥

网状结构,发展出信息之间高密度的连接关系。尽管网状结构的目标是发挥网络的联接和相关性特征,但是实际上这个结构最容易导致迷惑。 讽刺性的是, 相关性组织系统常常是最不实际的结构,因为这种结构对于用户来说是最难以理解和预测的。对于小型站点来说,网状结构对于小型网站比较有效,可以被联接菜单所控制,可以帮助高级和富有经验的用户获得更多的教育、或者启示。但对于一个题目的基础理解是没有效果的。


Figure 3.7 — A simple web of associated pages.

Summary

总结

大量复杂网站采用是以上三种信息结构的复合模式。网站阶层被大量创建-通过标准的站内导航联接,但是主题性联接被嵌入在内容之中,形成网状联接,这种联接超越一般的导航和站点结构。除了那些阉割限制序列性浏览的页面,用户基本可以自由穿越网站,在信息空间的领域中自由跳转,好像浏览一本参考书, 讽刺性的是,更清晰和更明确的的站点组织是,让用户在空间之间更容易地自由跳跃,并没不会迷失。


Figure 3.8 — We structure sites as hierarchies, but users seldom use them that way. A clear information structure allows the user to move freely and confidently through your site.



The nonlinear usage patterns typical of web users do not absolve you of the need to organize your thinking and present it within a clear, consistent structure that complements your overall design goals. Figure 3.9 summarizes the three basic organization patterns against the linearity of the narrative and the complexity of the content.

网络用户非线性的信息获取方式,挑战着所有设计师,你不再能够简单按单向顺序组织信息--象编辑一本书那样,网站设计需要设计师去组织自己的思考,并以清晰的、整体的结构呈现,从而完成整个设计目标。图9总结了三种基本组织方式在叙事路线和内容复杂程度上的不同表现效果。

http://www.webstyleguide.com/wsg3/figures/3-information-architecture/3-9-700.jpg





Figure 3.9 — Choose the right site structure for your audience and content.

针对内容和用户选择合适的站点结构。