信息架构(IA)设计浅析

[产品设计] [用户体验]

封面用研整编

信息架构通常是由产品经理、设计师、开发人员以及内容策划师共同承担的工作,但不论是谁承担这个工作,信息架构都自成体系,值得探索研究。在这篇文章中,我们将会初步讨论什么是真正的信息架构,以及对于用户体验过程来说,它为什么是有价值的。

如今,信息比以往任何时候都丰富。我们拥有更多与信息交互的方式,这种丰富性和普及性让我们的生活在很多方面都变得更好,但它也带来了新的挑战:我们有时很难找到需要的信息并在第一时间理解它。信息架构是一种设计原则,它关注的是让信息可查找和可理解,因此,它非常适合解决这些挑战。

一. 什么是信息架构

信息架构是帮助人们在现实世界以及网络上了解自己的环境,找到他们要找的东西的学科。换句话说,信息架构是对于一个网站,应用程序或其他项目的结构上的创造,它可以让我们明白我们所处何处以及我们想要的信息在哪里。信息架构也因此延伸出网站地图,架构层级,分类,导航和元数据的创造过程。

任何产品都有信息架构,或繁杂或简单。一种是比较简单的信息架构,例如大多ToC产品,微信、QQ音乐、腾讯视频等;一种是比较复杂的信息架构,例如大多ToB产品,运维类产品、客户关系管理系统、业务支撑系统等。我把第一种称为“轻架构”产品,第二种称为“重架构”产品。

轻架构产品,需要提供给用户一个简单明了的信息架构,让用户使用方便、体验流畅。轻架构产品不能让用户迷路,不能带来太多的学习成本,面对海量普通用户要做到可用且效率高。轻架构产品可以通过做减法来聚焦;重架构产品,需要提供功能完备、结构严谨的信息架构,让用户能通过操作流程以使用各个功能。这样的架构会带来一定的学习成本,有些重架构产品甚至需要对使用人员进行培训。重架构产品的用户群体一般比较聚焦。重架构产品很难通过做减法来聚焦,而是需要对海量功能进行合理整合、灵活布局来聚焦核心用户场景。所以对重架构产品,信息框架更难,且更重要。

当内容策划师开始拆分内容并把它分类的时候,她实际上就是在进行信息架构。当一个设计师勾勒出一个顶级菜单,用以帮助用户理解他们在网站上的位置时,他实际上也是在进行信息架构。

信息架构组件包含以下四个部分:

1. 组织系统(OrganizationSystems)—— 如何组织信息

2. 标签系统(Labeling Systems)—— 如何标识信息

3. 导航系统(NavigationSystems)—— 如何浏览信息

4. 搜索系统(Search Systems)—— 如何搜索信息

1. 组织系统 

有些人认为组织系统就是对信息的分类,其实这种说法是不准确的。以前我们用E-R关系图来表达数据之间的关系模型,并以此设计数据库表结构,然而在UI展现上却显得随意,因为我们往往只是考虑清楚了网站系统应该有哪些内容,这些内容大致的做出分类后,然后把这些内容塞到用户界面中,至于每个内容之间的逻辑和浏览者的感受就显得不那么重要了。

而正真的组织系统包括了组织方案和组织结构。组织方案分为精确组织方案和模糊组织方案。精确组织方案包括按照字母顺序,按年表,按地理位置来组织;模糊组织方案包括按主题、按任务、按用户、按隐喻、混用方式,其中混用方式是使用的最为频繁的一种方式。组织结构又分为层级结构、矩形结构、自然结构、线性结构。

① 层级结构(Hierarchy structure)

这种结构是最常用的结构,几乎所有的产品的主结构都是层级结构。层级结构只存在父子级关系,一个父级分出几个子级,子级再分出它的子级,直到将所有信息都包括进来。层级样式是带有一个索引页和一系列子页面的标准网站结构。如果你在设计一个响应式网站,你可能会受限于此,然而它所带来的额外样式可以帮助你为适应移动设备而调整体验。

适用项:整理需要跟桌面端网站保持一致结构的复杂站点。注意项:多面的导航结构应用于小屏幕上可能会给用户引起的麻烦。

层级结构

② 矩形结构

将信息从多个维度进行分类,这种组织结构能够帮助不同的目标用户找到各自需要的内容。比如在淘宝上,你搜索特定的内容,获得结果列表之后能够根据时间、价格等不同的属性进行排列筛选。矩阵结构允许用户在节点与节点之间沿着两个或更多的“维度”移动。由于每一个用户的需求都可以和矩阵中的一个“轴”联系在一起,因此矩阵结构通常能帮助那些“带着不同需求而来”的用户,使他们能在相同内容中寻找各自想要的东西

举个例子来说,如果你的某些用户确实很想通过颜色来浏览产品,而其他人偏偏希望能通过产品的尺寸来浏览,那么矩阵结构就可以同时容纳这两种不同的用户。然而,如果你期望用户把这个当成主要的导航工具,那么超过三个维度的矩阵可能就会出现问题。在四个或更多维度的空间下,人脑基本上不可能很好地可视化这些移动。”

矩形结构

③ 自然结构(organic structures)

现实生活中,很多信息是杂乱无章毫无规律的,它们之间找不到严格意义上的逻辑关系,这就是自然结构。整个互联网就是一个自然结构,你平时用电脑浏览信息,从这个链接跳到另一个链接,从这个网站去到别的网站,这个浏览结构就是自然结构。自然结构对于探索一系列关系不明确或一直在演变的主题是很合适的。但是自然结构没有给用户提供一个清晰的指示,从而让用户能感觉他们在结构中的哪个部分。

如果你想要鼓励自由探险的感觉,比如某些娱乐或教育网站,那自然结构可能会是个好的选择;但是,如果你的用户下次还需要依靠同样的路径,去找到同样的内容,那么这种结构就可能会把用户的经历变成一次挑战。”这样的模式在现在的ToC产品越来越多(特别是游戏娱乐产品)。

自然结构很适合轻架构产品的浏览式形式。第一,重架构产品,ToB产品,如果用户需要靠浏览靠猜来使用产品特性完成任务,那肯定结果不好;第二,ToC产品一般就有两种形态,如果不是任务式,那很有可能就是用户在无聊,需要进入浏览式。当然,完全自然结构的设计方式很少。大部分ToC产品应该是任务式和浏览式并行的。所以自然结构,应该是绑定其他信息结构来思考。

例如腾讯视频。自然结构肯定是应该考虑绑定层级结构来思考。用户进入视频产品,可能的一种使用方式是,用户心里已经有一个明确的思路,找2014年美国电影看,所以用户进入种类选择,选择电影,选择美国电影,选择2014年,然后进行浏览。这个可以算是先层级结构思考、后自然结构思考。如果用户是在家里喝茶,想看看视频,但是没有任何目的,打开了视频产品,那他们就是进行浏览式操作,这个时候自然架构就产生价值。用户在首页进行无逻辑浏览,从首页某个电视剧点入,看看详情,不感兴趣,从该电视剧的推荐点击到下一个电视剧,然后不感兴趣,然后从这个电视剧的主演想到他正在演出的一个电视真人秀,又跑去综艺里浏览。

自然结构

在信息架构设计中,自然结构会是一个重要思考点,因为我们要时刻记得,用户不是理性的,他们很多时候的操作和想法会呈现随机状态。但是自然结构不是唯一的,必须有层级结构、线性结构、矩阵结构等其他信息框架来配合和约束,才能让这个产品的整体信息架构完整、可用、有效。

④ 线性结构(sequential structures)

有一种结构,没有分叉信息,一个标签连着另一个标签,这就是线性结构。我们用互联网产品完成某一个任务时,多数都是线性结构。例如:你去淘宝购物,先搜索商品——浏览商品——选择商品——下单付款——等待收货——确定收货——评价订单,完成一个任务就相当于走过了一个线性结构。线性结构采用渐进式导航引导用户查看到更详细的内容。当用户操作不方便时,这是一种快速简单的导航方法。通过点击“前进”或“后退”,用户可以强烈感知自己所处何处。

适用项:应用或网站的主题奇特或者主题之间密切相关。它们同样适用于内置其他父样式的子样式,诸如标准的层级样式式和辐射样式。注意项:用户无法在不同内容中快速切换,因此需要考虑这种样式是否方便查找,而不能让它成为查找内容的绊脚石。

线性结构

信息架构的一个极端是复杂信息架构(层级、自然、矩阵等),另一个极端就是线性结构。如何用连贯的语言方式讲述一个故事,但是不能进行跳转和穿插,要一条线把思路讲清楚,不是一件简单的事情。交互设计需要锻炼两个极端的信息架构描述方式。一个是复杂信息架构,充满了层级、跳转、补充、交叉;一种是极简的线性架构,一根主线讲清楚一个故事,甚至是复杂的故事。

具体到某个互联网产品上,产品的主结构基本上是层级结构,而自然结构最不常见,矩形结构和线性结构多用于产品局部的功能和内容的组织。理解了组织系统,就相当于在大局上把握了产品的信息架构,这样设计出来的产品就不会给人凌乱和散的感觉。

2. 标签系统

我们确定了产品组织结构后,具体这些结构里的节点该如何命名?如何按照用户容易接受的方式去命名?这就是接下来标签系统要解决的问题。大家常见的标签包括文字标签和图标标签,其中以文字标签最为普遍,文字标签又经常表现为以下几种形式:情境式链接;标题;导航系统选项;索引词。

设计标签系统的一些原则:

① 尽可能缩小范围:如果网站的内容、用户和情景都保持简单和集中,标签命名就会简单得多。如果网站必须包含很多内容,要避免使用处理整个网站内容的标签,使用模块化设计,将内容分成模块并简化后放入各个子网站,用更加简单的标签集合处理一些特殊区域。

② 设计统一的标签系统:在思考如何设计时,要明确设计统一的标签系统,而不是分开设计散落在每个页面上的标签。包括:风格、版面、语法、粒度、用户类别区分等。

经过几十年互联网的发展,很多标签已经被用户广泛接受,遵循这些已经占据用户心智的标签是一个重要原则。例如:首页、搜索、站点地图、联系方式、关于我们等;多和目标用户沟通,看看目标用户对标签的理解是不是符合他们的心理模型,例如简书会实时保存作者所写的文章,它所使用的标签是保存中、已保存、保存这些,如果换成归档中、已归档、归档呢?这样作者就会觉得迷惑。

3. 导航系统

从最早的面包屑,罗盘,地图,到现在的路标,GPS等,人类一直在创新并致力于解决导航的问题。一般网站的导航系统分为:全站导航、区域导航、情景式导航。

① 全局导航:全站导航在一般会常驻在界面当中,像web网站的顶部、APP端的标签栏,就属于全站app导航。无论用户在网站的那个层级,都可以直接进入到重要的区域和功能页面。在设计上以密集和频繁的访问用户为设计中心。

② 区域导航:作为全局导航的辅助,通常被用在子网站构造中,以满足各个区域导航间的无关联性。当下也有很多网站将区域导航整合到全局导航中,比如amazon的Switch Center。

③ 情景式导航:有些关系不适合放在全站和局部导航结构分类中,就需要建立指向特定网页、文件或对象的情景式导航链接。它属于联想式学习范畴,又分为内联式情景式(内容中带有超文本链接的单词或短语)和外部情景式导航(可点击元素)。情景式导航能让用户实现产品内容直接的跳转,从而完成用户目标。

还有一些辅助性导航系统,比如站点地图、网站索引、指南和配置器。在上述的基础上,还可以通过提供个性化和定制化的能力展现高级导航能力。比如,可视化搜索,用户行为数据的挖掘分析,社会化导航,标签云等。

Apple官网全站导航
微信APP的全站导航
一个产品往往只有一个全局导航,但是会有多个局部导航来补充。锤子手机官网在全局导航下的局部导航。

4. 搜索系统

(本期第二篇文章重点介绍)

产品需不需要搜索功能;入口放在哪;搜索界面该如何布局;搜索结果页该如何设计;搜索结果该如何排序;要不要提供结果页的筛选条件;需不需要提供搜索范围等,这些都是设计搜索系统时设计师该思考的问题。

通常的搜索系统构造如下:1. 用户搜索需求 》2. 搜索界面(搜索语言、检索式构造器)》3. 搜索引擎 》4. 内容(元数据、受控词表)》5. 结果(排序和聚类算法、界面设计)


二. 信息架构的来源

信息架构这个概念大约始于20世纪70年代,远远早于网络,移动应用程序的兴起以及用户体验设计的普及。它起源于众多领域和方法,UX从业者至今仍在参照这些领域和方法,包括图书馆学认知心理学,和建筑学。

Timothy Greig构建的图书馆信息流

图书馆学

图书馆学有很多不同的定义,其中一个相对清晰的定义来自于华盛顿大学( University of Washington)。他们将图书馆学定义为“知识型组织体系”的构建。图书馆学是研究如何进行分类,编目,并找到资源的学科。它被广泛地用于传统图书馆,博物馆,科学实验室和医院中。

其他两个对信息架构有价值的领域是编目学和档案学。编目是创建元数据,并且把它分配给内容以便未来再次找到它的过程。档案学是创建并且用内容填充档案的过程,这可能需要不断地编辑或移除工作来保持档案的完整性。这两种学科的工作可以直接移植到用户体验的工作中来,因为我们的目标是创建一个具有适当的、可用的元数据的信息架构,这些元数据包含可用的内容,而这些内容又来自于维护良好的档案。

认知心理学

认知心理学研究心智是如何运作的,以及心理过程是如何发生的,所以这里再次提到它也并不奇怪,因为它同时影响交互设计,也影响着我们架构信息的方式。然而,信息架构借鉴了认知心理学中一些不同的内容,这些对我们如何组织信息很有帮助。下面是一些认知心理学中对于信息架构师极具价值的内容:

认知负荷:指一个人在给定的时间内可以处理的信息量。请你记住,了解认知负荷可以防止信息架构师一次性带给用户过多的信息,这样就不会造成用户信息过载。

心智模型:指用户在与一个网站或应用程序进行交互之前,他们的心智中已经形成的假设。当信息出现的位置和用户的心智模型中的假设位置一致时,信息就更容易被发现。

决策:或许听起来不像心理学的内容,但实际上它是。决策是一个认知过程,它使我们作出选择,如选择一个选项。信息架构师通过在关键时刻提供某些信息,从而帮助我们做出决策。

建筑学

现代信息架构的创始人是Richard Saul Wurman,他并不是一个网页设计师,而是一名平面设计师和建筑师,有趣的是,信息架构的概念正是从建筑学中衍生出来的。Wurman认为信息应以和建筑物同样的方式来构造:要有一个坚实的基础。连线杂志上有一篇关于Wurman的文章,作者Gary Wolf认为Wurman的工作给了我们很好的启发:“信息的呈现方式可以比信息本身更为重要。”

信息架构非常重要,就像建筑学有很多形式一样,信息架构也可以采取很多有吸引力的形式,并且是基于精确的、有策划的结构和坚实的想法基础之上的。


三. 如何进行信息架构设计?

1. 策略

信息架构策略是一种高层的概念框架,让你构建和组织网站或企业内部网络。信息架构策略的内容包括:信息架构管理、技术整合、强调自上而下还是自下而上,组织系统和标签系统(自上而下),文件类型识别(自下而上),元数据字段定义,导航系统设计等。好的设计师会在研究前就开始构造网站的信息架构和组织网站的可行策略。在研究阶段中,通过用户访谈,内容分析和标杆分析,利用数据来调整策略。

开发策略

采用TACT方法:思考(think),表述(articulate),沟通(communicate),测试(test)。思考:把研究资料转变为创造性的观念;表述:图标、蓝图、场景、隐喻、情节、框架图;沟通:演示、互动、头脑风暴;测试:封闭式卡片分类、原型。

工作成果

包括隐喻探索、场景、案例研究、概念图、蓝图和框架图等。策略报告:包括执行摘要、网站用户&使命/愿景、从用户面谈和内容分析所得(组织和内容、导航、标签、特色等)、架构策略&方法(内容模型、定制化/个性化策略、导航元素)、内容管理等章节内容。项目计划:信息架构设计的产生计划。

2. 设计

架构蓝图

高级架构蓝图的目的是解构组织体系,一般是从主页开始,包括页面内的组件,网页编组,网页间的关系等。

高级架构蓝图的例子

在细化蓝图时,一般复杂的信息架构蓝图都无法在一页图中表现出来,因此会由多张信息图构成,这样最好引入唯一编号,为多个图之间的页面和组件标记关系。如下所示:

线框图

线框图包括:高保真线框,和低保真线框。低保真线框主要以页面的导航、布局、区域等设计为主。高保真的线框的优点更为明显:1、内容和颜色的充实,让网页更有生命力;2、模拟了实际的页面大小,更靠近最终的展现样式,容易获得更直接的反馈意见。

低保真线框并没有太多的细节,无法从线框中看到任何信息内容的元素

在做线框时可以参考一些准则:1、一致性。体现线框的专业度;2、组件化,将重复出现在多个页面的内容组件化;3、留白,在线框的四周和顶端留下空白处;4、线框图的可用性,能引导开发;5、多人共享开发时,确保文件能整合起来。

内容映射

把内容拆开或结合成内容块,一个内容块一般是页面上处理的最小内容部分。建立内容映射表后,把每一块内容和在网站上的页面区域做逐一映射。

某网站内容映射表

内容模型

在建立了内容清单的基础上,可以着手建立内容模型。良好的内容模型,能够展现内容之间的关系、以及导航关系。

附:实践工具

自动分类软件,自动为文件配置元数据,根据分类规则,自动将文件分到某些类别下。比如,Interwoven’s Metatagger, Autonomy IDOL Server,  Vivisimo’s Clustering Engine。

搜索引擎,提供全文索引和搜索能力的软件。例如,Sorl,Lucene, Google,Endeca,Autonomy。

词表管理工具,受控词表和序词表的开发和管理工具。例如,MultiTes,Thesaurus Master, Term Tree。

门户或企业知识平台,企业门户整合的方案。例如,MS的Sharepoint,IBM的WebshperePortal,Oracle的Portal等。

内容管理软件,管理从内容协作、编辑、发布的工作流程。例如,MS的CMS,Drupal,WordPress等。

网站分析和跟踪软件,分析网站的使用量,统计性能,为用户行为分析和特性提供数据信息。例如,Google Analytics,WebTrends

绘图软件,用来绘制图标,框图及蓝图的工具。例如,Visio,Mockups,OmniGraffle(限于Apple平台)等。

原型工具,开发原型的工具,可以用来建立交互式框架和可进行点击的原型。例如,Dreamweaver,Axure等。

用户研究,支持用户研究的软件。例如,MindCanvas,Marae,Mcromedia Captivate,Ethnio,xSort。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容