最近和一些产品经理朋友进行了一些交流,主要的主题是信息架构。交流过程中,我发现有些产品经理认为,设计信息架构是在选择原型展示的信息。在靠「想」在设计信息,没有成体系化的方法。有些产品经理,甚至在画原型过程中,还在调整页面的信息。很多时候都是以脑图来描述信息架构。
从大家的交流结果来看,大家都知道信息架构的重要性。但是,在设计信息架构时,大家反倒比较随意,没有什么定式的方法。所以,在本文中,我主要分享一下我对信息架构的理解,以及我如何科学的设计信息架构。
我一直认为产品经理的工作从来不是漫无边际的自我「空想」,产品工作是通过实践经验,不断进化突破的方法体系。因此,本文的分享还有一个目的,就是希望通过分享,将信息架构的方法进行沉淀和优化,形成我自己的信息架构系统性方法。
一、什么是信息架构
信息架构是信息通过设计、组织和架构,被展现为各类产品中的内容的过程。对于互联网产品,也是实现信息可视化的过程。将原始的数据建模信息,转化为产品界面展示的各类内容元素。信息架构的最终成果,不仅仅描述出信息结构和呈现形式,而要在产品中形成一种信息呈现规则和秩序。
信息架构的受众,是产品的用户。对于用户,信息架构的目的是快速准确的获取内容。反过来,从信息架构的设计者来分析,信息架构的目的是把某些信息准确快速的传递给用户。这也是信息架构的对立点,往往用户期望获取的信息,并不一定是我们既定希望传递的信息。
一条信息,可能是数据库中的一条记录,为什么不直接在页面直接展示?还需要经过精心的架构?因为通过信息架构这一过程,实现提升信息传递的效率;需要将信息处理成更易于理解的内容;解决信息的过载或者爆炸等等问题。归根究底就是为确保信息传递的快速和准确,需要通过精心的设计。
二、预备知识
在正式介绍我的信息架构方法之前,还需要补充一些,我们应该需要掌握的预备知识。这些知识涵盖信息架构的角色、场景、信息浏览方式、信息呈现的范式以及信息传递理论等。基于这些知识,我们才能避免设计「空想」性质的信息架构。
1. 为用户设计
任何信息架构都是面向用户的,满足用户快速准确获取信息的需求。用户需要什么信息,我们希望为用户提供什么信息,是我们首先需要清楚的。
2. 为场景而设计
任何信息架构的核心场景,都是用户查找和阅读信息。在核心场景下又细分出一系列的细分场景,比如查找可以是搜索、筛选等。之外,也要清楚信息架构时,所面对的现实场景。比如,环境、平台、规范等等。
3. 信息浏览的方式
在进行信息架构式,我们也应该了解用户在不同环节下获取信息的方式。按客观规律,我们周边用户从任何大部分平面介质中获取信息,都是从左到右,从上到下。这是经过时间历练,一个特定范围内用户默契形成的习惯。当然,平台或者介质不同,信息浏览的方式也不同。
4. 被广泛接受的信息呈现方式
我们要了解,在我们设计信息架构的环境中,有哪些已经形成规范的信息呈现方式。比如,在Web互联网产品平台中,表格、控件、导航、树形结构、标签等。当然,也要学习这些规范适合使用在什么场景下,适合哪种类型的信息。比如,在Web端呈现相同格式的多条数据时,可以使用列表展示。同时,会搭配筛选、搜索、分页等。通过这些呈现方式,信息能更容易被理解
大多数场景下,不要轻易的颠覆已经在用户群体中,形成习惯的信息呈现方式。
5. 信息的传递
信息在传递给用户的时候中会逐级递减,几何递减。在信息架构中,体现为距离信息视觉中心的距离和信息的层级。所以,信息传递的路径越短越好。
三、核心方法
我的信息架构的方法的核心分为三大部分。
首先实现对信息进行筛选和预处理,得到对用户有价值,且易于用户理解的元信息。
再则,以单一的元信息为点,构建信息面,最后以信息面构建信息空间。
最后,为各种信息选定信息的呈现方式。整个方法的核心是,模拟自然空间,肉眼见到的自然信息的构建形式。将各类平台的平面的点信息和面信息的呈现形式,抽象成三维的自然信息结构。
信息筛选主要是,根据用户的需求和场景,从我们的原始数据中选择出需要呈现给用户的信息。信息预处理,主要对信息进行分组和转义。使信息转化为可直观理解的内容。
每一个点就是元数据,元数据间也存在亲疏关系。在同一个面中,亲近的元数据,应该汇集在一起,可以形成一列、一行或者一块。相似的一组元数据,应该呈现规则的排布。每一个面就是一个信息层级。以最重要的信息作为一个面,然后向深处一次拓展信息面。最终这些面,形成一个三维的信息空间。
设计信息的呈现时,从元信息出发,到信息的分组,再到信息面,最终要形成信息空间下的视觉呈现规范。
三维的信息空间加上整理出的信息呈现形式,就是我们设计出的信息架构。
四、方法实践
刚讨论的方法,因为想要将该方法不仅仅应用到互联网产品的信息架构中。所以,可能比较抽象,不太好理解。所以,我们可以将上文的三部分理论的实践过程,归纳总结为更简单的设计、组织、架构,三大实践步骤。设计就是选取信息点的过程,组织是构建信息面的过程,架构是构建信息空间的过程。
1. 设计
首先,信息架构的原始数据,是在信息建模后的,具有一定表征意义的数据。信息架构与信息建模有很多相似之处。只是,信息建模是以数据来抽象表示某些事物,而信息架构则是设计这些数据的呈现结构和形式。
在设计信息的过程,筛选信息,构建元信息,可以通过构建叙述词表和受控词表。通过叙述词表可以对信息进行分组,构建信息的亲疏关系。受控词表可以改善信息内容,提升信息的触达效率。受控词表是一份等价术语清单,叙词表的重要目标是同义词管理,把许多同义词或异形术语对应到某个优选术语或概念上。
具体的叙述词表和受控词表的建立形式,比较复杂,需要单独学习。当然,构建叙述词表和受控词表,只是一种筛选信息,构建元信息的方法。我们也可以使用一些其它方法。
在构建元信息时,还要对信息进行转义。转义主要是将某些用户很难理解的数据,转换用户容易理解的文字、图形等信息。比如,存储在数据库中的某些类型信息,就需要转义为文字描述。
2. 组织
在组织信息时,根据序数词表和受控词表,将元信息呈现在不同的面中,在每个面中,确定信息的呈现位置。在设计信息位置时,要根据平台对应的信息浏览方式。以Web网页为例,在页面信息很少时,正中间的信息最重要。信息元素较多时,左上角信息更重要,向左和下递减。
在组织信息时,对于汇聚在面上,不同的信息,要形成规则和秩序。规则和秩序可以适配到,其它具备同类信息的面。比如,订单记录的信息面和订单详情信息面,可以适配到各类记录类型的信息。
在设计信息面时,还要考虑根据场景和平台,拓展出来的元信息。比如,在订单信息面,需要关联订单状态筛选的信息组。
单个信息面的元数据太多,会降低用户的信息获取效率。所以,在组织信息面时,需要合理控制信息面的元信息数量,降低信息面的元信息类型。
完成信息的组织后,形成的是多个信息面。
3. 架构
完成信息面的设计之后,需要设计所有信息面间的关联关系,形成信息空间。在架构时,首先要确定关联的面。也以订单相关的信息为例,可以分析出三个相关的面,订单列表信息、订单详情信息、订单编辑信息。这个三个信息就构成了一个小空间,列表信息是第一层,订单详情信息和订单编辑信息都是第二层。
在架构信息面时,参考常规的范例和经验。常用的信息面架构形式,主要有线性层级,有权重的树形,Map层级、图的形式。
线性层级是多个信息面依次相连。比如订单列表信息面进入详情信息面,详情信息面又能进入支付信息面。
权重的树形结构时,信息面像树形一样连接,但父信息面不同,信息面的权重也不同。比如订单详情信息面中,又存在支付信息面、商品详情信息面等。
Map层级,类似Key-Value的形式。一般用作,通过元数据快速查找其关联的信息面。例如,通过订单号,直达订单详情。
图的结构,相对较为复杂,类似数据结构中图的结构。用图来架构信息面,核心是实现信息面间的任意链接。使用图的结构时,要重点注意信息浏览的回溯。
在设计信息架构时,其实也能发现,任何用户浏览信息,都是线性的。在我们的几种范式结构中,浏览信息也是按线性在进行。因此,在架构时,我们要尽量降低信息面的层级和信息深度。
设计好信息呈现方式后,我们可以将其整理出来。比如,每月工资收入的数据,以折线图的形式呈现。
产品经理设计的web产品的信息架构后,只需要简单的工作就能画出对应原型。
五、信息结构输出
本文开头,并不太建议以脑图来展示信息结构的设计,这是什么原因?主要因为脑图适合发散性的信息。特别是对于互联网产品,信息面间是交叉关联关系。如果用脑图,需要任意连接多个不同节点的数据,这会使整个脑图看起非常凌乱。而且脑图不能体现,元信息在信息面上的分布。更不能体现多组同类信息的设计。
那以什么方法输出信息结构的文档更好那?我实践下来,比较习惯使用EXCEL。
比如下方EXCEL,以订单页面为例。元信息以表格的格子,表示在表格中。同组信息,以相同的边框颜色来区分,进行分门别类。而不同的Sheet就表示不同的信息面。信息面的关联关系,以表格超链接(图中蓝色加下划线的文字)来体现,点击还可以跳转。
使用EXCEL做信息架构文档,可以解决脑图所存在的一些缺陷。同时,又具备可以直观体现信息分布,模拟用户信息浏览路径的有优点。得益于Excel的强大功能,在输出信息架构时,能实现很多有价值的效果。
当然,用Excel展现信息架构的设计,也有两个缺陷。一是不能一览信息架构全貌,再则不能直观体现信息路径深度。不过,浏览信息架构全貌的场景应该很少。毕竟直接浏览整个产品的信息,这些信息要素还是过于繁杂了。至于信息路径深度,如果够熟悉Excel的话,可以通过宏编程来解决。
六、一些思考
优秀的信息架构,都具有拓展性、一致性和易读性。但在信息架构的过程中,我们经常需要在三者间权衡和妥协。
信息架构在很多场景和行业中都是相通的。我的方法也经常用到产品详情页、产品宣传册等产品材料的设计中。
未来的信息架构应该具备启发性。它能根据用户的信息获取习惯、当前产品的信息要点等条件,自动设计、组织和架构信息,并适配对应的内容。甚至于能学习用户案例,改进信息架构。自动补全和智能推荐,就是当前的启发性信息架构的典型例子。伴随着AI技术的发展,启发性的信息架构技术并不遥远。
在这里,笔者希望各位同行都明确一个观点:在这个动不动就用AI说事的时代,可量化的工作总有一天被人工智能代替,沦为“线框仔”的交互设计师,终将被行业淘汰。
所以拿到需求之后,针对需求搭建思维框架,远远胜于上手画原型图。原型图只是思维的展现方式,只要能将思维明确地表现出来,甚至可以用手绘代替。在日常工作中,思考和原型图的精力分配大致是7:3,而杰出的设计师,这个比例甚至可以达到8:2。
如果我们将产品设计中各个环节按照权重大小进行排列的话,那么从大到小可以排列为:信息架构设计、功能结构设计、交互设计、视觉设计。所以这一章需要解决的恰恰是如何设计信息架构,而不是上手线框图。
一、用户体验五要素
在开始了解信息架构前,先来回顾一个大名鼎鼎的模型吧——用户体验五要素。
笔者更喜欢将其称为产品设计五要素,这是因为它不仅让我们对产品有了初步的整体认识,在后续工作中还能对细节进行分解。在交互设计师的眼中,也许最先看到、优先着力的是局部设计,比如结构层和框架层。
当你既能把握好整体布局,又能优化局部体验时,设计作品可以将点、线、面连成一体由零到整再化整为零,那么你才是一位可以从用户体验的角度掌控产品的优秀交互设计师。
二、信息来源
既然是信息架构设计,巧妇难为无米之炊,那么米(信息)是从哪里来呢?
1.战略层-产品信息的方向
笔者戏称这一层称为“老板层”,因为通常这一层的决策者是老板,而非产品经理,于是会出现以下趣味场景:(以笔者所在的互联网金融行业为例)老板突发奇想、大手一挥决定公司未来要卖基金,产品经理有了新的工作内容——做基金产品。这时候,产品经理开始琢磨了,老板想要的到底是个啥?我需要得到老板准确的需求呀!所以一个合格的产品经理,要从老板嘴里套出两个基本要素:
用户能从这个产品获得什么?
公司能从这个产品获得什么?
这里需要插一句,当时的背景是这样的:公司的理财产品缺少债权,大量用户无法将手中的钱进行投资、也无法获得收益,因此产品的用户流失率很高。
如果公司新上线的基金产品运作得当的话,用户不但可以减小资金站岗风险,还能获取适当收益。同时,对于公司而言,产品线扩展,丰富业务领域,可拉拢用户投资获得利润,还增加了公司在行业的影响力,差异化的服务使公司在行业竞争中更具优势。
明确了这两个问题,也就完成了战略层的最基本任务。所有产品的出发点都须基于这两点:即用户痛点和解决方案,二者的契合度高低决定产品是否成功。
2.范围层-产品信息的产生
有了产品方向,接下来就会涉及到这个产品会完成什么功能,提供什么信息,所以我们将范围层比作两个筐:一个功能筐,另一个是信息筐。二者之间互相交叉,并没有明显的界线。
(1)功能筐
笔者将功能筐分为两部分,常规功能,如注册和登录等,和体验友好型功能,比如筛选、排序。需要强调的一点,产品经理的需求文档可能不会关注到体验友好型功能,很多情况下是交互设计师通过竞品分析、用户调研、甚至是场景脑补出来的。
(2)信息筐
信息筐则来自于三部分:
首先,从功能来的信息,比如登录会涉及手机号和密码等信息。
其次,本身存在的信息,例如帮助信息。
以及体验友好型信息,同样是来自于交互设计师的设计。
拿笔者做的基金产品举例,功能筐包括下载、注册等功能。信息筐包含基金名称、基金代码、净值,涨跌幅等一系列繁多且无序的信息,如下图。此时就需要设计一种结构让信息元更易查看、且更高效有序。
既然是信息架构信息架构设计主要研究“信息的呈现”,即用户认知信息。不同的信息组合和选择,对应不同的理解成本。如何让展现给用户的信息更加合理且有意义,就是信息架构的意义。同时信息架构的设计还会向下呼应战略层的策略:
满足用户需求。让用户可以在一定的“信息规划”下更易找到想要的“东西”。
满足产品目标。通过“信息架构设计”教育、说服、通知用户使用产品,以到达盈利的目标。
3.信息架构设计流程
有了米之后,那煮饭的完整流程是什么呢?拥有完整信息元后,主要分为信息处理和信息检索两个部分。具体步骤是决定信息元之间的关系分类(组织系统),制定合理的类别标签(标签系统)。
通过逻辑顺序组合成有意义的路径(导航系统),最后给核心信息设计快捷查找的方式(搜索系统)。
三、组织系统(Organization Systems)
组织系统是信息架构的核心,寻找信息元之间的关联,并进行分类。分类涉及到分类依据、分类方式、分类结果。
1.分类依据
组织体系(Organization Schemes)即分类的依据,分为精确性组织体系(Exact Organization Schemes)和模糊性组织体系(Ambiguous Organization Schemes)。具体的分类依据有很多,比如地理位置、时间是精确性组织体系,主题、用户群、任务是模糊性组织体系。
在基金项目中是操作和按照主题分类的,细化为登录注册、基金主题、个人信息主题、安全主题等等。
2.分类方式
分类的方式又叫组织方式,共分为三种。
(1)自下而上(Top-Down)
通常应用于ToC类的产品。在实际的设计中,可以采用卡片分类法(Card Sorting),即将所有的信息元用一张张卡片写下来,让“目标用户”参与到信息分类中并且给出分类的依据,以此作为产品设计师梳理信息架构时的参考。
基金项目的主组织方式就是采用的自下而上,如下图,将所有的信息元按照组织体系分类后,会形成很多父类节点,父类节点间也存在着某种关联,进而形成新的父类节点。依此类推,最终会汇集到顶级节点,即战略层的决策。
(2)自上而下(Bottom-Up)
通常应用于ToB的产品。最先从最广泛的、可能满足决策目标的内容与功能开始进行分类,然后在按逻辑细分出次级分类,这样的“主要分类”和“次级分类”就构成了“一个个空槽”,再设想各种内容和功能按顺序一一填入。
自上而下组织后的层级多是从战略层出发,与战略目标紧密相连,与目标用户看着并不那么关联紧密,所以很多To B产品都需要向用户宣导。而自下而上恰恰相反,先有基于用户需求的内容和功能,再逐层往上分类组织,所以To C产品通常学习成本更低。
(3)超文本(Hypertext)
超文本是一种非线性的方式,通常不作为一种主组织方式,只作为弥补自下而上和自上而下两种方式不足的一种辅助方式,用来建立非同类或非同级信息元之间的关联,为组织结构的多样性创造可能,并提供更高的灵活性。
基金项目中对于绑卡、实名等操作都采用了超文本的组织方式,比如添加超文本方式后的组织系统。
添加超文本方式后的组织系统
3.分类结果
采用一种或多种分类方式,会输出对应的分类结果,包括以下几种类型:
(1)层级结构(Hierarchical Structure)
这种结构是最常用的结构,几乎所有产品的主结构都是层级结构。层级结构可以视作是一种父子级关系,一个父级可以有几个子级,子级还有它的子级,直至包含了所有信息。而构成层级结构的方式也就是从上而下和从下而上为主。
基金项目的主结构很显然就是层级结构。
(2)自然结构(Organic Structures)
得益于超文本方式,很多信息元可以从多个路径获得,所以自然结构没有太强烈的分类概念。
其通常被应用于探索行为,比如访问视频A和C后,系统都同样推荐了视频B,那么对于视频B,就会有至少两种探索路径:一种来自视频A,一种来自视频C。
很显然,自然结构不适合作为主组织结构。如果任何信息元都以探索的方式获得,那么对于任务型用户来说,查询的成本会大大增加,相应的用户体验也会很差,所以自然结构多作为辅助结构出现。
从组织系统看,基金项目还有部分采用自然结构,比如实名的路径就有两种。
(3)矩形结构(Matrix Structures)
矩形结构同样来自于超文本方式,它的信息元的来源路径有多种。但是与自然结构不同的是,矩形结构更具规律,每一条来源路径有固定的操作,而非自然结构那样不可控。
有个经典的例子,如果某些用户想通过颜色来找到某个产品,而另一些用户希望通过尺寸搜寻,若使用矩阵结构就可以同时兼容这两种不同的用户需求。
(4)线性结构(Sequential Structures)
线性结构非常好理解,平时我们看的h5页面基本上都是线性结构,用户不能进行跳转,只能一步一步按顺序找到所要的信息元。
基金项目中,评测部分采用的就是线性结构,用户需要一步一步完成评测,无法跳转。
四、标签系统(Labeling Systems)
确立了组织系统,父类节点又该如何命名?怎样按照用户容易接受的方式命名?这就是接下来标签系统要解决的问题。
互联网经过几十年发展,很多标签已经形成固定模板,比如“首页”、“搜索”、“登录”、“注册”、“关于我们”等等,这些都成为了用户心理模型的一部分,按照惯例命名是标签系统的首要原则。
除此之外,为了确保标签能够更具表达力,在设计标签的时候,需要注意以下几点:
1.尽量使用用户语言
非用户语言通常会出现在一些专业性很强的产品上。笔者所做的基金类产品中有很多专业术语,对于非专业人士来说很难理解,所以在设计标签系统的时候,尽量使用用户易理解的表述。
当遇到无法替代的专业词汇时,比如认购和申购,那就需要做好注释,不能让用户因为标签的问题而茫然。
2.保持一致性
标签的一致性代表着可预测性。对于同样的标签,用户会产生相同的认知,用户学习成本大大降低的同时,也能快速理解其背后对应的操作或信息。
五、导航系统(Navigation Systems)
在信息架构的概念里,导航就像大海里的灯塔,可以照亮来时的路,也可以指引前往的方向,所以导航系统是指从顶端节点到某个信息的路径。
需要注意的是结构层的导航系统和框架层的导航设计不完全相同:结构层导航系统还局限在组织结构的层面;而框架层导航设计是可视化设计,即界面设计,主要表现为标签和页面的跳转。结构层导航系统可以视为框架层导航设计的跳转路径;但在框架层的导航设计时,仍然会根据实际页面情况反向优化结构层导航系统。
结合框架层的导航设计,可以将导航系统分为两部分:
1.嵌入式导航系统
包括全站、区域和情景式导航:
全站导航:即无论用户走到哪里都可以看到的导航标签,也是最高级父类节是查看所有信息的路径起点。
区域导航:是用户在某次级父类节点下浏览的子类导航,其影响的只是该次级父类节点一下的信查看路径。
情景式导航:即超文本的链接,是嵌入在信息元的导航。
在基金项目中,设计师运用了这几种导航,使得整个产品的灵活性更高。每一个顶层的父类都可以作为全站导航的一个标签,分别跳转进入父类的子类信息。在个人信息的部分,需要设计一个区域导航,将总资产、已买基金、交易明细和个人信息设置分别作为导航标签放置在个人信息中。
2.辅助性导航系统
包括网站地图、索引、指南:
网站地图:通常包含最高级父类节点和顶端的几层次级父类节点,提供更宽广的感知视角。
网站索引:索引就像用户直接在信息筐里检索,跳过组织结构的概念,全部是平铺的信息元,用户通过信息元的关键词检索信息。
网站指南:通常是为新用户介绍信息和功能的工具,包括演示、教程等等,总之都是为用户提供一种浏览的路径。
六、搜索系统(Search Systems)
笔者始终认为,假设导航系统足够强大,用户通过导航指示的路径可以找到任何需要的信息,那么搜索将毫无意义,然而现实中这种情况是极理想化的。所以与导航系统一样,搜索系统也是寻找信息的一种方式。
对于搜索系统,需要强调两点:
1.是否真的需要搜索系统?
可以基于两点去判断是否需要设置搜索系统:
当信息的分类非常多、或某几类信息的信息员过多时,可以考虑设计搜索系统,帮助用户快速找到相应的信息。
如果组织结构比较深的时候,为了减少用户的操作负担,也可以设置搜索系统,以便用户快速找到信息。
2.搜索的内容是什么?
搜索的内容应该是核心信息,是产品主要想表达的信息,也是用户经常查看的信息。
在基金项目中,由于涉及到数百只基金,所以将基金名称和基金代码作为搜索内容,用户可以直接通过搜索系统直达基金信息。
在了解信息架构的四大组件后,我们发现可以将其分为两部分:
一部分是信息本身的处理,即将信息本身按照某种方式组织结构,然后给各节点命名;
另一部分是对信息的检索,用户通过导航或搜索可以找到信息元。
显然最核心的部分是组织结构,其优劣会影响标签是否易理解,以及导航路径是否简短高效,以及检索的效率。因此在设计信息架构的时候,要将关注度更多放在组织系统。
同时在设计组织系统的时候,要考虑实际使用场景,不同场景下用户的需求不同,对应的解决方案自然也有所区别,比如一个浏览型的用户,使用自然结构很合理,但如果是任务型用户,就要尝试层级结构。除此之外,在设计信息架构的时候还需要遵循以下几点原则:
与“产品目标”和“用户需求”相对应;
具有一定的延展性,添加信息元尽量不破坏原有的组织结构;
保证分类依据的一致性、相关性和独立性,避免信息元分类模糊;
有效平衡信息架构的“广度”和“深度”,避免宽而浅和窄而深的组织结构;
使用“用户语言”,同时避免“语义歧义或不解”。
七、产出信息架构图
在设计信息架构的同时,我们会发现有些组件会和用户直接交互,比如搜索系统,而一些组件则躲在幕后,例如组织系统,用户可能无法感知其存在。所以对于那些无法感知的部分,我们需要将通过可视化的方式表现出来,给框架层的界面设计做铺垫。
在设计组织结构时,我们已经有了一个层级结构图,而信息架构图就是以此作为基础。从顶级节点到每一个信息元的路径即为导航路径,最上层的父级节点可以作为导航标签的参考,同时在图中标出可应用于搜索的信息元,如图6.6。
此时最基本的信息结构图就完成了,在接下来框架层设计时,页面实际情况可能会反向影响结构层,所以信息架构图会有一定程度的迭代优化,最终可以产出基于页面的信息架构图。
网友评论