专业知识分享其他

信息架构的一些说明|Information Architecture

2021-09-1512 MIN READ原载于微信公众号 ↗

(此处为视频,请在原文中观看)

(课程节选-信息架构)

在设计产品时,我们的最终目标应该是提供最好的用户体验。但随着产品变得复杂,要实现这个目标就会变得困难。有时,产品团队最终会设计出一个令人困惑的产品——那些用分类混乱的信息、内容和功能让用户感到困惑的产品。信息架构是解决这个问题的解决方案。信息架构(IA) 是一门学科,帮助 组织 产品的 各个 部分 内容 ,使 产品 整体更容易 被 理解。 对于任何想要设计以用户为中心的产品的人来说,理解良好的信息架构的基本原则都是必不可少的。在本文中,我们将更详细地定义信息架构,谈谈它的价值,并分享如何更好地为你的产品构建一个好的信息架构。

01

什么是信息架构?它的作用是什么?

信息体系结构在用户体验中的作用图片改编自Jesse James Garett的用户体验元素虽然通常是在建筑行业考量建筑结构/架构,但它同样也适用于数字产品,数字产品也应该有坚实的基础,就像建造坚固的建筑一样。信息架构设计是通过组织和标记内容以支持产品的可用性和可访问性的艺术和科学。换句话说:就是建立一个坚实的基础。大多数产品设计师都知道,为用户提供他们认为有价值的内容至关重要。但同样重要的是,要让用户轻松地找到这些内容。当人们找不到他们想要的东西时,他们通常会放弃某种产品(网站尤其如此)。当用户与产品的交互时感觉毫不费力,那就是好设计的结果。虽然信息架构对终端用户并不真实可见,但它是设计的主干。因此,信息架构会直接影响用户体验。当内容的组织方式与用户期望的方式不一致时,用户会面临许多挑战。另外,好的信息架构可以帮助用户以最少的努力找到问题的解决方案。

02

信息架构和导航系统是一样的吗?

一些用户体验专业人士用“信息架构”一词来表示网站或应用程序中的菜单。 虽然“信息架构”和“导航”是相关的,但它们并不相同。导航是一个界面元素的组合,人们通过这些界面浏览产品,了解某些内容在哪里,他们下一步可以做什么。与信息架构类似,导航依赖于良好的可用性。但是,当产品团队创建导航系统时,其目标是找到一个最适合信息架构的模式。如果没有一个可靠的信息架构作为基础,几乎不可能设计出好的导航系统。这就是为什么 导航设计是信息 架构 设计的结果,以及为什么在设计导航之前应该定义好信息架构。好的导航功能从一个清晰的信息架构开始。

03

信息架构的设计模式

现在有许多不同的IA设计模式,让人们能够有效地组织网站内容。了解这些IA模型能帮助你为网站的信息架构选择最合适的起点,这将减少未来优化网站时的麻烦。接下来,让我们来探讨五种最常见的网站IA模式。单页 面

第一个模式是单页面模型。单页面网站最适合用于浏览关注点集中和信息量较少的项目。这可以是用于介绍单个的产品网站,例如可以是一个iPhone应用程序的网站,又或者是一个简单的个人联系信息网站.扁平 结构

这种信息结构将所有页面置于同一层级,即每一页都一样重要。这种结构在只有几页的小册子风格的网站中很常见。但对于有更多页面的大型网站来说,就不太适用了,这会使导航流程和内容的易查找性变得笨拙。索引页

带有子页的主页可能是最常见的网站信息架构模式。它由一个主页组成(我们通常称之为“主页”或“首页”),它是所有其他子页面的跳转点。这些子页面位于相同的层级。严格的页面层级结构

一些网站在其信息设计中使用了严格的页面层次结构。在这些网站上,会有一个链接子页面的索引页。每个子页(父页)都有自己的子页(子页)。在这种结构中,子页面只能从其父页面跳转。共存的层次结构模式

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

04

如何设计信息架构?

图像来自:Al Abut在设计网站的信息架构时,有许多需要记住的事情。最重要的是,在选择如何最好地呈现信息和组织网站上的内容时, 你 需要将用户体验 放在首位。不要根据自己的喜好进行设计你不是你的用户。作为一名设计师,你必须记住,网站的访问者不会有和你一样的偏好。想想网站的用户到底是谁,以及他们想要从网站上得到什么。研究用户需求研究用户需求和他们想要什么是构建有效的信息架构的最重要的步骤之一。研究用户需求的方法有很多,你可以在上线前通过用户访谈、A/B测试和其他可用性测试方法(beta测试阶段)获得反馈,看看用户是否能轻松地浏览你的网站。一旦你知道了用户的实际需求,而不仅仅是你对他们的需求的感知,你就能够调整你的信息架构,更好地满足这些需求。有一个 明确 的目标每个网站都应该有一个明确的目的,无论是为了销售产品、告知人们某个话题还是提供娱乐等等。如果没有明确的目的,几乎不可能构建出有效的信息架构。根据行业的不同,网站的目的也会有很大的差异。举例来说,为房地产行业设计的网站和为线上服装店设计的网站是大不相同的,因为它们有不同的目标。网站上信息的组织方式应该与网站的目的直接相关。如果某个网站的最终目的是让访问者购物,那么网站内容的设计应该能够引导访问者朝着这个目标前进。如果某个网站是为了给访问者提供信息,那么其信息架构应该要能够引导访问者浏览内容。在一个网站中,你可能会有一些子目标,这就需要你有针对不同目标的内容子页。这是很好的,只要你了解每部分内容如何与网站的目标保持一致。建立用户画像

图像来自:Nicolas Nova建立用户画像,假设你的网站用户的故事,是确定如何更好地构建网站内容的另一个好办法。在非常基本的形式中,建立用户画像是为了了解不同类型的网站访问者,然后创建“真实”的人。然后,在整个设计过程中,使用你所描述的“人”作为你设计和测试网站信息架构的基础。记住 网站的目标在构建内容时,记住网站的目标是很重要的。为这些目标选择正确的信息架构模式,并且要记住目标,反思自己为什么要这样设计网站的信息架构。保持一致 性一致性是典型的信息架构的核心,每个页面上的信息结构也是如此。选择一种模式并一直使用它。如果你偏离了这个模式,确保你有一个很有说服力的理由让你这么做。不一致的情况很容易让访问者感到困惑。

05

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

构建信息架构有许多不同的方法。让我们来看一些最多人使用的。卡片分类 法

图像来自:Manchester City Library卡片分类是一种低成本且简单的方法,使用它可以帮助你根据用户的想法来最好地分类和组织信息。卡片分类法的原理是将每个内容集合或页面写在卡片上,然后让用户根据他们所认为的内容分类方式将卡片分组。这里有几种类型的卡片分类方法。基本方法是从随机排列的卡片开始,用户按照他们认为的应该的分类方式对卡片进行分类。在逆向卡片分类法中,卡片预先被分类成组,然后让用户按照他们认为的合适的方式重新分类卡片。

在开放式卡片分类法中,用户可以给他们分类的组别命名,而封闭式卡片分类法中,卡片组别本身带有类别名称,用户只需将卡片放入他们认为对的组别中。线框图 和原型线框图能做的不仅仅是给我们一个网站设计布局的大纲,它还能告诉我们如何组织内容。利用线框图和原型,我们可以很好地了解内容是如何关联的,我们的信息架构是如何实现我们的目标的。当你在绘制线框图,特别是你在进行原型设计时,你应该使用与最终效果相似的内容,提高保真度。站点 地图和大纲

站点地图是一种快速和简单的方法,可以直观地表示不同页面和内容之间的关系。这是“模拟”信息排列的必要步骤。这些内容大纲显示了站点上的所有页面是如何分组的,它们出现的顺序,以及父页面和子页面之间的关系。这通常是一个简单的文档,你可以在一两轮卡片分类后撰写它。

06

信息架构案例

不同的网站需要不同类型的信息架构。哪种信息架构的效果最好取决于内容的更新频率、内容的多少以及访问者使用网站的方式。这里分享一些例子,给大家展示不同类型的网站是如何构建内容的。新闻网站CNN.com是最大的在线新闻网站之一。它们每个月有超过2000万来自各行各业的网站访问者。不同的访问者在访问该网站时会有不同的目标,他们感兴趣的新闻也各有不同。

CNN.com在其主页顶部很好地突出了最热门和最新的新闻。考虑到大多数访问网站的人可能都想看到最新的突发新闻来了解当天的事件,把这些新闻突出显示在页面上是很有用的。但是很多访问者也会想与某些话题相关的新闻(如美国新闻、技术、政治)。为了满足这种需求,CNN有多个内容板块,按主题分类,这样人们就可以很容易找到最热门主题的新的和相关的新闻。页面顶部也有许多入口,如体育、技术、健康和政治。

CNN.com成功地将大量内容安排进了一个相对较小的空间。该网站易于使用,信息架构直观且合乎逻辑。单一产品网站Coda的网站是优雅的产品网站,很明显,他们对页面的信息架构投入了很多心思。

Coda网站的访问者可能在寻找一个好用的网页设计应用程序,并且可能知道他们想要的功能。Coda不需要培训访问者什么是网页设计或ide如何运作,他们假设主要用户是熟悉这种软件及其工作原理的网页设计师。在这个页面使用选项卡式UI显示内容很有效,因为这个网站的页面并不是特别长。它还为访问者保留了购买按钮(以及“获取帮助”链接,这可能是为那些已经购买了软件或那些想要更详细信息的人准备的)。电子商务网站L.L.Bean是一个大型电子商务网站,它有大量的产品库存,面向主流和多样化的受众。

L.L.Bean按购物者类型和产品类别进行了分类,并有一些重叠。例如,主导航上有“鞋类”这一类别,但鞋类也作为子导航项包含在男子的、女子的、儿童的选项下。这表明他们对于目标客户会如何购物有一定的了解。

除了陈列他们的产品之外,L.L.Bean还以一种合乎逻辑的方式组织他们的辅助页面。

他们的站点地图显示了网站上的信息组织做的很好,所以一定要去看看。博客网站Freelance Folder是一个面向自由职业者的博客网站。!ImageFreelance Folder上的博客类别使用了导航标签设计模式(例如创造力、灵感等等)。网站的其他区域也有一个主导航栏(如论坛、工作公告栏、自由职业者指南等)。它的导航和结构都很简单,这提高了网站的可用性。将相似的内容分类在一起是博客网站的信息架构的一个标志。信息量大、用户驱动的网站维基百科是世界上最大的网站之一。截至2010年9月,该网站上有超过340万篇文章,单是英文文章就可以印刷1,439卷,每卷160万字。

很大程度上说,这个网站的信息组织方式可以让用户易于查找内容。它的信息架构的困难在于它是有机的,因此,很难为这样一个开放且可塑的系统设置类别。任何拥有这么多信息的网站都需要依靠搜索,这样用户才能找到他们想要的内容。除了搜索,维基百科文章的互联性使得用户可以很轻松地从一篇文章链接到另一篇相关文章。这使得维基百科的信息架构成为最好的在线网站架构之一,他们了解访问者的网站使用行为,并让用户更容易地做他们想做的事情。


ABOUT US


参考文章:

查看链接 ↗

查看链接 ↗

作者:

Nick Babich

William Crai

译者:太上老菌

为尊重版权和译者

转载请联系我们

本文原载于微信公众号,正文与配图已转存至本站以便长期访问。 查看原文 ↗

有想具体聊聊的问题?把你的情况说一说。

联系咨询