信息体系结构101:技术和最佳实践

WebFX总统。Bill在互联网营销行业拥有超过25年的经验,专长于搜索引擎优化、用户体验、信息架构、营销自动化等。William在Shippensburg和MIT的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研究和开发项目提供了基础。

信息体系结构101:技术和最佳实践

信息架构(IA)是网站设计中一个经常被忽视的领域。作为设计师,我们常常听之任之CMS我们使用指令来决定网站内容的组织方式。只要网站能完美地适应大多数cms所设计的狭隘内容格式,这就没问题。

但是很多时候,一个网站的内容会打破大多数cms的界限。

如果没有对信息架构的工作原理有一个清晰的理解,我们最终可能会创建出比需要的更混乱的网站,或者在最坏的情况下,使我们的内容几乎无法访问。

考虑到良好的信息架构的基础并不比良好的网页设计的基础更难学,这是一个遗憾。

通过良好的信息架构,我们可以为客户提供良好的体验,并确保他们在离开时得到他们所期望的从他们的预算.本指南涵盖了组织网站内容的信息架构的基本原理。我们将研究流行的IA设计模式、最佳实践、设计技术和实例。

信息架构设计模式

有许多不同的IA设计模式1有效组织网站内容。

理解这些IA模型将帮助您为一个网站的信息结构选择最合适的起点,这将最终导致更少的头痛优化你的网站

让我们来谈谈五种最常见的网站IA模式。

单页

单页信息架构(IA)模式

第一个模式是单页面模型。单页网站最适合于关注点非常窄且信息量有限的项目。这些可以用于单个产品站点,例如一个iPhone应用程序的网站,或者简单的个人联系信息网站

平面结构

平面结构信息体系结构(IA)模式

这个信息结构将所有页面放在同一个级别上。每一页都和其他页一样重要。这在只有少数页面的小册子式网站上很常见。

对于拥有大量页面的大型网站来说,导航流和内容的可查找性变得难以处理。

索引页

索引页索引页

一个带有子页面的主页可能是最常见的网站IA模式。它包含一个主页(我们通常称之为“主页”或“首页”),它是所有其他页面的起点。子页面在层次结构中具有同等的重要性。

严格的等级制度模式

严格的层次结构严格的层次结构模式

一些网站在信息设计中使用了严格的页面层次结构。在这些网站上,会有一个索引页面链接到子页面。每个子页面(父页面)都有自己的子页面(子页面)。

在这个模式中,子页面只从父页面链接。

层次结构模式共存

共存层次结构共存层次结构模式

作为严格层次结构的替代方案,还可以选择共存层次结构。仍然存在父页面和子页面,但在这种情况下,子页面可以从多个父页面/更高级别的页面访问。如果你的网站上有很多重叠的信息,这种方法很有效。

信息架构设计的最佳实践

信息架构设计的最佳实践图像中艾尔邻接

在设计站点的信息体系结构时,有许多事情需要记住。最重要的是,在选择如何最好地呈现和组织站点内容时,您需要将用户体验放在首位。

不要根据自己的喜好来设计

你不是你的用户。作为一名设计师,你必须记住网站访问者不会有和你相同的偏好。想想“网站用户”到底是谁,他们想从网站得到什么。

研究用户需求

研究用户需要什么是创建有效信息架构的最重要步骤之一。

有很多方法可以研究用户需求。你可以得到通过面试的反馈或实验A / B测试和其他可用性测试方法在发布前(beta测试阶段),看看用户是否能够有效地浏览你的网站。

一旦你知道你的用户真正需要什么——而不仅仅是你的感知他们需要什么-您将能够调整您的信息架构,以最好地满足这些需求。

有一个明确的目标

每个网站都应该有一个明确的目的,无论是销售产品,告诉人们一个主题,提供娱乐等等。如果没有明确的目标,几乎不可能创建任何有效的IA。其目的因行业而异。

网站设计为房地产经纪人例如,他们的目标与在线服装店大不相同,因为他们有不同的目标。

网站上信息的组织方式应该与网站的目的直接相关。

如果一个网站的最终目标是让访问者购买某些东西,那么网站的内容应该以引导访问者朝着这个目标前进的方式设置。

在一个旨在提供信息的网站上,内务监督应该以一种一页建立在上一页基础上的方式引导人们浏览内容。您可能在站点中有子目标,这要求您拥有具有不同目标的内容子集。

这很好,只要你理解每一段内容与网站目标的关系。

使用角色

使用角色图像中尼古拉斯新星

创建人物角色,假设你的各种网站用户的叙述,是另一个伟大的方法,找出如何最好地组织网站的内容。在其非常基本的形式中,发展人物角色就是简单地找出访问您网站的不同类型的访问者,然后创建符合这些类别的“真实”人。然后在整个设计过程中,使用你所描述的人作为你设计和测试网站IA的基础。

要了解更多关于人物角色的知识,请阅读web可信的指导角色

记住网站目标

在组织内容时,牢记网站的目标是很重要的。为这些目标选择正确的IA模式。用目标来证明为什么信息结构应该是你设计的方式。

是一致的

一致性是典型信息架构的核心。如果你的九页信息中有八页是在一个章节中列出的,为什么你不把第九页也包括进去呢?用户期望的一致性。

同样的道理也适用于每个页面的信息结构。

选择一个模式并坚持下去。如果你偏离了这个模式,确保你有一个很好的理由这样做;并使在类似情况下偏差一致。不一致往往会让访问者感到困惑。

信息架构设计的方法与技术

有几种不同的方法通常用于信息体系结构设计。让我们来看看一些最流行的方法和技术。

卡片分类

卡片分类从图片曼彻斯特城市图书馆

卡片分类是一种低成本、简单的方法,可以根据用户输入找出最佳的分组和组织内容的方法。卡片分类的工作原理是将每个内容集或页面写在索引卡片上,然后让用户根据他们认为的内容分类方式将它们分类。有几种类型卡片分类方法

基本方法一开始,卡片的顺序是随机的,用户按照他们认为应该进行分组的方式对它们进行分类。

反向卡片分类在美国,这些卡片会被预先分类,然后用户会被要求根据自己的需要重新排列它们。卡片分类

打开卡片分类允许用户命名他们为卡片创建的组,同时封闭的卡片分类将有参与者放入卡片的组名。

线框图和原型

基本的线框图能做的不仅仅是给我们一个轮廓设计布局的一个网站。它还告诉我们内容将如何安排,至少在基本水平上。

将内容放入线框图和原型中可以让我们很好地了解内容与其他内容之间的关系,以及我们的信息架构实现目标的情况。

当你画线框的时候,特别是当你在做原型的时候,你应该做的内容至少与网站最终的内容相似。

网站地图及大纲

站点地图和概述信息架构技术

站点地图是直观地表示不同页面和内容如何相互关联的快速而简单的方法。“模拟”内容将如何安排是必要的步骤。这些内容概述显示了站点上所有页面是如何分组的,它们出现的顺序,以及父页面和子页面之间的关系。

这通常是一个简单的准备文件,可能是在一轮或两轮卡片排序后创建的。

对于必须放在网站中的现有网站或内容,内容清单通常是这个阶段的前奏。

信息架构设计风格

信息体系结构有两种基本样式:自顶向下和自底向上。许多设计师必须意识到的是,从两个角度来看待一个网站是很有用的,这样才能设计出最有效的IA。

不要仅仅从自顶向下或自底向上的方法来查看项目,而是要从两端来查看是否在项目的组织方式上存在任何差距。

自顶向下的架构

自顶向下的架构开始于对网站战略和目标的广泛概述和理解,并首先创建一个基本的结构。从那里开始,内容关系随着网站架构的深化而细化,但这都是从网站的总体高级目的来看的。

自底向上的架构

自底向上的体系结构模型首先查看内容之间的详细关系。有了这种架构,你可以从用户角色以及这些用户将如何通过网站开始。在此基础上,您需要找出如何将所有内容联系在一起,而不是首先查看它们之间的关系。

信息架构的例子

不同的网站需要不同类型的信息架构。最有效的方法取决于内容更新的频率、有多少内容以及访问者使用网站的方式。这里有一些例子,向你展示不同类型网站的内容是如何构成的。

新闻网站

CNN.com是最大的在线新闻网站之一。他们每月接待超过2000万游客2;来自各行各业的游客。不同的访问者在访问网站时会有不同的目标,对他们想要阅读的新闻也会有不同的兴趣。

新闻网站信息架构(IA)举例

CNN.com做了一个很好的工作,在他们的主页顶部突出最大的和最新的故事。

考虑到大多数访问该网站的人可能想要看到最近的突发新闻,以便了解当天发生的事件,所以将这些新闻放在主要屏幕上是有意义的。但是很多访问网站的人也希望看到与某个特定话题相关的新闻(例如美国

新闻、科技、政治)。

为了适应这一点,CNN在页面下方有多个内容块,按主题组织。它让你很容易找到热门话题的相关新闻。页面顶部还有许多板块的链接,包括体育、科技、健康和政治。

信息架构(IA)举例CNN.com设法将大量内容组织在一个相对较小的空间里。该站点易于使用,信息架构直观且符合逻辑。

单一的产品网站

的网站Coda是一个比较优雅的单产品网站,很明显他们在页面信息的结构上花了很多心思。单一的产品网站

访问Coda网站的人可能在寻找一个好的网页设计应用程序,并且可能已经知道他们想要的功能。Coda不需要告诉访问者什么是网页设计或者ide是如何工作的;他们假设主要角色是一个熟悉这类软件及其工作原理的网页设计师。

使用标签式幻灯片UI来显示内容在这个页面上很有意义,因为站点的副本不是特别长。

它还将购买选项保持在访问者的前面和中心位置(以及“获取帮助”链接,这可能是针对那些已经购买了软件或想要更具体信息的人)。

电子商务网站

l。是一个巨大的电子商务网站,有大量的产品库存,目标是主流和多样化的受众。

电子商务网站

L.L. Bean按购物者类型和产品类别进行分类,在合理的地方有一些重叠。

例如,鞋类类别在主导航中有自己的位置,但它也包括在男性、女性和儿童,作为子导航项目。这样做表明了对不同目标客户可能会如何购物的理解。它使用层次结构和优先级来将内容组织成有意义的子集。

电子商务网站

除了产品的组织,L.L.

Bean还以逻辑方式组织其辅助页面。电子商务网站

他们的站点地图展示了网站上的信息组织得有多好,所以一定要看看。

博客

自由文件夹是一个针对自由职业者的博客。博客

该网站使用导航标签设计模式在博客的主要类别的网站(如生产力,灵感,如何,等等)。

还有一个主要的导航栏,用于网站的不同区域(如论坛,工作板,自由职业指南等)。导航和结构保持简单,这提高了网站的可用性。

将相似的内容分组在一起是博客IA设计的一个特点。

含量高,用户驱动的网站

维基百科是世界上网页数量最多的网站之一。截至2010年9月,网站上有超过340万篇文章3..单是英语文章,就会产生1439卷,每卷160万字。

那是七个完整的图书馆书架。含量高,用户驱动的网站

考虑到维基百科的用户生成性质,这个网站能够拥有任何类似良好信息架构的东西都是一个伟大的壮举。但是,在大多数情况下,网站的组织方式使它很容易找到内容。

维基百科的IA的困难在于它是有机的,因此,很难为这样一个开放和有延展性的系统设置类别。

任何有这么多信息的网站都需要依靠搜索,这样用户才能找到他们正在寻找的内容。

除了搜索之外,维基百科文章的相互联系使得从一篇文章移动到几乎任何其他相关的文章都很容易。这本身就使维基百科的信息架构成为最好的在线架构之一;他们了解访问者如何使用网站,让他们更容易地做他们需要做的事情。

关于信息体系结构的附加资源

这里有一些关于IA的额外资源,值得一读。请在评论中分享和讨论其他资源、技巧和技术。

参考文献

  1. 信息架构模型:网站导航模式指南。webdesignfromscratch.com。
  2. Cnn.com的网站配置文件。compete.com。
  3. 维基百科的数据.wikimedia.org。

相关内容

WebFX职业

加入我们的使命,为全球企业提供行业领先的数字营销服务——同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!