你是否曾经走进一个新房间,感觉完全像在家里一样?设计很有意义,家具很有品位地相互补充,颜色和照明一起工作——一切感觉都很到位。在房间里,这就是所谓的风水。在网站上,这被称为信息架构(IA)。

我们自然希望在一个空间里感到舒适,无论是面对面还是在网上。组织可以促进网站的目的和指导,甚至可以让你的产品和服务有机会获得客户的关注。

我们将看看IA和UX如何在一个巧妙组合的网站中协同工作,以及如何制作自己的IA。

什么是信息架构?

IA是一种为了客户体验的利益而有效组织内容的方法。IA是图书馆的杜威十进制系统或古埃及卷轴书目组织的现代版本。几个世纪以来,人类都有一种通过使用组织来寻找答案的诀窍,即从一件事物中识别出另一件事物,然后将它们组合在一起。

在数字时代,IA有助于在您在线存在的许多页面的内容、设计和数据之间创建秩序。它的使用适用于移动应用程序、博客、电子书甚至实体店——任何客户必须浏览并从中收集信息的东西。

内部审计的意义是什么?

IA的目标是确保客户花费更少的时间来寻找他们对你的产品或服务做出购买决定所需的信息。在B2B决策过程中,用户流向销售的流程很少是快速的。完成一笔交易可能需要6到12个月的时间。因此,通过有组织的内部审计来减少浪费的时间,可以提高你在竞争对手中脱颖而出的能力。

为什么IA很重要?

虽然组织你的网站内容以使其易于访问是必要的,但IA很重要,因为它让你的客户知道你理解他们。大IA可能完全不引人注意;只有当用户体验(UX)中断时,客户才会开始注意到缺陷。

无论你是拥有一个庞大的产品列表,创建一个思想领导力博客,运营一个新闻媒体还是一个SaaS市场,适当的IA都可以吸引客户的注意力,回答他们的问题,并更直接地引导他们进行销售。

我们都在寻找新客户,但维护现有客户并建立忠诚度同样重要,甚至更重要。当你的客户不必到处寻找答案和产品细节时,你可以更有效地突出你的品牌价值,培养客户忠诚度和信任。

让我们更深入地了解一下IA和UX设计是如何协同工作的。

IA vs UX vs UI vs网站导航

现在你一定想知道IA和UX在本质上是不同的,是同义词还是一个整体的两个部分。如果你是个赌徒,第三种选择会让你赚大钱。

用户体验设计师会考虑客户登陆你网站的任何页面时的整个过程——颜色、组织、导航、链接、CTA等。它的工作原理除了顾客的心理吸引力颜色,形状和注意力,以确保页面以它应该的方式流向销售漏斗的下一个阶段。

IA将UX的所有部分连接起来,在用户需要创建IT服务票据以获得支持之前解决用户可能遇到的瓶颈和问题。

想象一下:一个建筑建筑师为商店的每个部分创建了蓝图,从结构的物理尺寸到管道和电气功能。IA对网站内的内容层次结构、导航和交互也有同样的作用。

构成良好IA的必要行动包括:

  1. 用户研究。
  2. 业务目标和预算。
  3. 网站或应用程序的内容。

IA创建网站的视觉和流程,UX将这些需求转化为视觉行动。

理解用户意图和导航

实现有效的IA的第一步包括深入研究用户及其目标。用户的意图将决定他们如何浏览你的网站。

对于IA设计,用户意图着眼于用户如何登陆一个页面,以及他们可能从那里前往哪里。这种直观的预测是基于客户使用的关键字,他们可能有的问题,以及他们如何寻找答案。

信息架构科学vs.网站导航

在我们进入组织和如何制定自己的IA设计之前,重要的是要区分IA和网站导航。网站导航是网站上其他页面的有组织的列表。通常,它是网页顶部的菜单栏或客户移动设备上的汉堡包下拉菜单,允许他们访问网站的其他内部页面。

信息架构Brafton web navi

简而言之,网站导航只是好的信息架构的冰山一角。

信息架构师使用电子表格和图表来理解内容和层次结构,然后网站导航将基于这些信息的站点地图和原型组合在一起。

信息体系结构的原则

如果你是IA设计的新手,一长串内容、页面和应用程序的电子表格很容易让你觉得是一项不可能完成的任务。在一个层次结构中,内容可以存在多个位置,所以有某种指导来做出正确的决定是至关重要的。

这就是信息架构的8个原则发挥作用的地方。这些原则有助于组织IA组织、分类和整体开发的决策过程。

这8条IA原则是由丹·布朗在2010年提出的,因为专家们对IA是什么和做什么几乎没有一致性。

这些原则是由3个基本的理解指导的:

  1. 架构师的重点是内容的结构,然后是用户意图。这意味着在创建线框之前,应该优先考虑内容的流程图。
  2. 架构师基本了解用户如何将一个主题与另一个主题联系起来,以及每个内容的功能。
  3. 架构师已经完成了所有内容、其功能以及IA将如何支持内容目标的清单。

考虑到这些要点,以下是Dan Brown的IA原则:

1.对象的原则

这一原则要求架构师将网站内容视为菜谱。每一份内容都是独特的,可识别的,但与此同时,有些内容可以互换,或者完全去掉,而不影响食谱的完整性。

这就是说,网站内容应该被视为一个有生命的、有呼吸的东西。某条内容在今天是至关重要的,但在明天可能就无关紧要了。“对象实际上是模板,”Brown说,“因此,方法和属性为考虑特定对象的所有实例提供了一个框架。”

设计师有责任为其结构创建模板。

2.选择原则

我不知道你怎么想,但当我饿的时候,每一家餐厅和每一道菜听起来都很棒——我不可能选择。

同样,浏览一个有太多选择的网站也会耗尽你的认知负荷。选择原则有助于减轻用户肩上的负担,同时仍然为他们提供基于他们所关注的主题的选择。

企业通常有一长串的服务和产品,他们希望每个用户都知道。然而,当看到一长串信息时,用户很容易不知所措,感到焦虑,并完全跳过页面。

相反,慢慢开始。

给用户一个基本选项列表,让他们从与更一般的主题相关的选项中进行选择。在这里,Corpower Yoga为学生提供了根据图片、名称和小描述来选择课程类型的机会,一次只有3个选项可供选择。

信息架构的核心力量

3.披露原则

基于选择原则,公开可以确保用户不会被信息淹没。想象一下,有一页左右的文字,没有图片,也没有插页;这看起来像信息过载,感觉像噪音。

这个原则可以让你把相同的内容放在你网站的不同地方——利用网站是由层组成的概念。例如,你不会在主页上看到一所大学的全部课程目录(甚至学位目录),因为它们永远不会吸引到合适的学生。

例如,看看波士顿大学(BU)的主页:

信息架构BU主页

它的主页在顶部的横幅中包含了“学术”选项。你可以点击这个链接,也可以打开左侧的汉堡下拉菜单“完整菜单”,为横幅中的每个选项提供更多的子类别。

点击“学术”标签后,你会找到更多的信息和然后他们的大学名单。

信息架构BU学术标签

这个题外话允许用户用一点点信息做出决定。

4.范例原则

如果图片比语言更响亮,那就少说!这一原则促使设计师考虑使用图片来减少页面上的文字。

在上面的两个例子中——Corepower Yoga和BU——图片是这些页面的主要焦点。在这些选项中,用来描述波士顿大学不同学院的图片比来自Corepower Yoga的图片更能解释它们的目的。

为什么?波士顿大学的图片更专门针对这所大学,而Corepower Yoga使用了两张相似的举重照片。如果Corepower的图片更具体,他们可能就不需要下面的简短描述了。

5.前门原则

在一所大房子里,你可能不会指望你认识的每个人——客人、朋友、家人和陌生人——总是从前门进屋。Brown建议你假设大约50%的用户将通过主页以外的其他页面进入你的网站——可以这么说,一个侧门。

侧门必须传达它想要传达的信息,例如博客或YouTube视频,但它还应该提供其他元素,使页面动态,如相关主题和导航系统。

此外,一个侧门消除了前面门厅的压力,告诉用户关于你的网站的一切。相反,前门应该只包括告诉客户你的业务是什么和你提供的服务所需的基本信息。

6.多重分类原则

每个客户都以自己的方式标识商品和术语。为了适应这种情况,您可以将同一页面包含在不同的类别中,这样用户就有多种方式来查找内容。但是要注意,不要在他们面前提供太多的选择,以避免混淆和认知过载。

7.聚焦导航原则

继续避免信息过载的概念,导航应该尽可能保持精简,同时仍然提供用户需要的信息。在设计团队中,重要的是要命名不同的导航类型,以表明它们的用途,而不是它们在页面上的位置。这样,团队中的每个人都知道自己的职能和职责。

8.成长的原则

我们知道,互联网上的内容页数每天都在增长——即使是在你自己的网站上。这一原则确保团队为新内容做好准备,因为它与其他现有类别保持一致。这种新的内容类别不会破坏用户体验设计,因为之前的原则——重点导航原则。

好的IA在每次进行网页设计时都要考虑这些原则。

内容层次结构最佳实践(示例)

将内容层次结构和组织系统组合在一起可能仍然是IA更具挑战性的方面之一。然而,处理IA的最佳方法是从各个部分考虑层次结构,而不是从自顶向下的角度。比如说,你不会自上而下地造一辆车。相反,你会先把零件组装起来。

内容库存

在你可以订购所有的内容之前,你可能应该知道所有的内容都在那里。这个步骤叫做内容库存列出未来设计项目的组件。

库存清单涉及某些元素的内容,包括:

  • 元元素,如关键字,标签和描述。
  • 内容的标题。
  • 作者和/或提供者。
  • URL。
  • 副本。
  • 音频。
  • 视频。
  • 图像。
  • 文档文件。

下面是Adobe的一个内容清单示例。您不仅会注意到页面标题和URL等类别,还会注意到页面级别和内容类型。在构建IA时,不要忘记为额外的分类留出空间。

信息体系结构示例表

这个列表及其类别帮助设计师识别内容的组件,以规划结构。在电子表格中对组件进行分类和移动每个列表项要比修改设计项目容易得多。

分类法和元数据

一旦你列出了你的类别和列表,你就可以开始考虑每个类别中的每条内容是由什么组成的。在这一步中,您将尝试对项目进行分类,以便它们适合于一个组。

元数据将确保用户可以通过对主题的简单搜索找到您的分类法。这可以帮助那些不需要浏览每件商品的客户立即找到他们需要的东西。请记住,页面上的内容类型越多,分类法就越复杂。

用户意图和偏好

从这里开始,您已经了解了您拥有多少内容以及它们如何相互关联。下一步是决定每个页面和类别在层次结构中的位置。

内容结构主要有3种类型:

顺序:已经为客户开发了一条路径,这对于零售网站和应用程序来说是典型的。HelloFresh提示用户立即选择套餐,然后是偏好和套餐大小。这个用户旅程最终会引导到购买页面。

信息体系结构顺序内容结构

等级:用户被迫对每个页面的重要性做出假设。在这里,用户可以通过主页上三个最突出的链接进入《塞尔达传说》。

信息体系结构层次内容结构任天堂

矩阵:用户可以选择新闻、观点博客或医疗保健网站的典型内容,自行浏览网站的任何地方。亚马逊会给你建议,但最终,整个网站是由顶部的搜索栏和下方的导航栏构建的。

信息体系结构矩阵内容结构

虽然这些例子已经构建出来,包括视觉效果,但这些是你可以根据用户意图为你的网站想象的结构类型。这一步最重要的方面是理解什么对你的用户来说应该是最突出的——在他们登陆你的页面之前,什么问题是他们搜索的首要问题。

内容图

组织好内容并决定其在层次结构中的位置之后,是时候对内容进行线框化了。线框图为用户体验设计师提供了一个蓝图中内容如何布局和相互关联的可视化表示。这是一种很好的方式来为你的观众在一个有组织的总体布局中规划过渡和交互。

信息体系结构示例

在这里,您可以看到,没有理由添加颜色,因为它只是用于视觉支持,因此信息架构师可以保持这部分相当简单。这个例子是一个应用程序的蓝图,并清楚地为每个形状布局了一个图例,一个关于页面意味着什么以及每个页面如何连接的小描述。

你怎么知道你做对了?

在设计网站的IA时,有很多事情要记住。然而,最重要的一点是以用户体验为导向。您的首选项与页面应该如何结构关系不大,而与用户期望如何与之交互有关。

你可以在网站上线前进行A/B测试,通过访谈收集反馈,或者组织其他可用性测试方法,看看用户浏览网站的情况。有效的IA有助于建立客户忠诚度,因为它使用户能够获得他们想要的信息或产品。

伟大的IA在整个网站提供优秀的可用性,以增强用户流量;它能让客户满意,降低跳出率,提高网站的受欢迎程度。

有许多设计软件工具可以帮助您启动IA。

站点映射工具的例子可以包括绝妙的映射器Lucidchart.这些将帮助你为你的网站结构制定蓝图,并演示每个页面是如何相互连接的。这将帮助你组织你的想法,并可视化所有页面之间的关系。

有了这些工具和想法,用户可以以直观和可用的方式更好地浏览您的网站。

劳伦是布拉夫顿的一名内容作家。她来自美国各地,目前住在夏威夷大岛。她喜欢水彩画,瀑布狩猎,并成为她的三只猫和一只狗的宠物妈妈。