bts防弹少年团演唱会

bts防弹少年团演唱会

网站信息架构:如何优化用户体验

《网站信息架构:如何优化用户体验》

您的网站上应该包含哪些内容? 你应该如何构建菜单? 第一级菜单项应该是什么? 一两个菜单? 应该怎样调用菜单链接? 这篇文章给你答案。

网站信息架构不是开玩笑,但绝大多数企业使用IMO方法构建其网站(“在我看来……”)。 虽然常识是一个有用的工具,而且很多网站都很简单(例如5页),但还有更好的方法。

如果您的网站上已有数十个页面,则应进行适当的信息架构分析。 通过提供的大量信息引导人们需要思考和研究。 直观导航不是偶然发生的。

Peep Laja和Brian Massey讨论优化您网站的主要导航。

[…]“/>

05:08

什么是信息架构?

根据维基百科 ,它是“组织和标记数据的艺术和科学,包括网站,内联网,在线社区,软件,书籍和其他信息媒介,以支持可用性。”我们可以将其简化为“ 组织网站的艺术和科学 。“(在本文中,我们仅在网站的背景下谈论它。)

信息架构大师Louis Rosenfeld和Peter Morville(你应该阅读他们的书 )将“三个信息架构圈子”定义为内容,用户和使用环境:

《网站信息架构:如何优化用户体验》

它是关于根据研究和规划组织网站的内容和流程。 信息架构师的目标是提出一种结构和设计,以平衡用户的需求和业务需求。

用户到达网站时有四个基本问题:

  1. 我在正确的地方吗?
  2. 他们有我想要的东西吗?
  3. 他们有什么更好的(如果这不是我想要的)?
  4. 现在我该怎么做?

您的主要任务之一是在您网站的每个页面上有效地回答这些问题。 为此,您必须:

  • 向访问者保证他们在正确的位置(始终清楚地说明他们在哪里)。
  • 让访问者轻松找到他们想要的东西(清晰的导航,搜索等)。
  • 确保访问者知道他们的选择(链接,如“另请参阅”或“相关产品”)。
  • 让他们采取各种行动(明确的行动%E5%91%BC%E5%90%81“>

  • 《网站信息架构:如何优化用户体验》
  • 免费的用户体验和可用性课程

    由卡尔吉利斯

    信息架构与可用性和转换密切配合。 获取有关UX和可用性的免费课程。

  • 此字段用于验证目的,应保持不变。

什么是信息架构分析的可交付成果?

目标是提出网站的架构。 可交付成果可能包括站点地图,站点流程图和线框图,以便从实际角度传达网站的工作方式。

它应该确定整体情况,组织网站上的内容以支持用户想要执行的任务。 信息架构还应该包括一些小的东西,比如决定搜索页面上的产品应该按价格而不是名字来订购。

所有这些都应该基于实际的研究和数据 – 这里的意见空间不大。 有多种方法可以使网站信息架构正确。 这是多年来为我工作的方法。

如何通过5个步骤创建信息架构

当您帮助人们实现目标时,您将实现业务目标。 只有在完全了解用户的目标,问题和愿望时,才能做到这一点。

1.在使用网站架构之前,收集有关您网站用户的数据。

进入用户的头脑是至关重要的。 在研究信息架构之前,您需要知道这些问题的答案:

  • 我们解决了什么问题?
  • 谁需要它?
  • 这个网站是为了什么?

目标和目标越早定义(并写下来!),就越容易识别和解决问题; 保持专注更容易; 最终结果越好。

与您的用户交谈。 %E9%9D%A2%E5%AF%B9%E9%9D%A2%E8%AE%BF%E8%B0%88%E5%92%8C%E7%94%B5%E8%AF%9D%E6%98%AF%E6%9C%80%E5%A5%BD%E7%9A%84%EF%BC%8C%E4%BD%86

我们的目标是要了解你的用户想要什么 ,他们为什么想要它。 您的用户之间会有不同的意图和用例。 这是可以预料的。

2.创建客户角色并撰写用户故事,为真实的人设计您的网站。

您的网站应该是为某人而不是每个人设计的。 这是%E5%AE%A2%E6%88%B7%E8%A7%92%E8%89%B2%E7%9A%84%E6%89%80%E5%9C%A8%E3%80%82″>

角色是基于事实的(源自用户研究),但是用户的虚构表示。 它们代表了访问您网站的最重要人群的目标,动机,特征和行为。

这是一个样本角色。 将照片附加到角色有助于我们想象一个真实的人,我们正在构建网站:

《网站信息架构:如何优化用户体验》
用户角色是开发信息架构的重要部分。 你不知道如何建立它,直到你知道你为谁建造它。 ( %E5%9B%BE%E7%89%87%E6%9D%A5%E6%BA%90%EF%BC%89“>

下一步是将用例与角色连接起来。 用例是决定和描述项目目的的简单方法。 用例有两个组成部分:参与者和目标。

演员是使用该网站的人。 您只想关注最突出的群体 – 用户角色。 目标是一个,一些或所有角色想要实现的目标。 每个用例必须具备:

  1. 一个具体的目标;
  2. 将执行任务以实现该目标的演员。

目标可能是阅读博客文章,查看帐户余额,预约,下载软件,参加测试等等。 用例定义目标和目的:我们试图解决的问题。 (这也是%E6%8F%90%E9%AB%98%E5%AE%A2%E6%88%B7%E7%BB%88%E8%BA%AB%E4%BB%B7%E5%80%BC%E7%9A%84%E7%AC%AC%E4%B8%80%E6%AD%A5%E3%80%82%EF%BC%89″>

当您通过考虑人物角色和他们希望实现的目标来接近网站架构时,您将更有信心和更清晰地工作。

3.开始使用元数据,方案,页面构建信息体系结构

一旦了解了用户 – 他们的意图,背后的原因以及他们希望如何实现目标 – 您就可以开始弄清楚如何以对用户有意义的方式展示您的内容。

有几种很好的方法可以做到这一点,但这里是我喜欢使用的五步过程:

1.弄清楚元数据。

元数据是有关信息的信息。 它可以帮助用户找到他们正在寻找的内容。

假设您想购买咖啡研磨机,那么您可以访问销售它们的网站。 如果您浏览并找不到,则表示元数据不正确。 如果您%E8%8E%B7%E5%BE%97%E4%BA%86%E6%AD%A3%E7%A1%AE%E7%9A%84%E5%85%83%E6%95%B0%E6%8D%AE“>

要开发有用的元数据,您必须确定人们关心的内容。 对于咖啡研磨机,人们搜索刀片尺寸? 颜色? 牌? 了解要存储在系统中的参数和变量对于优秀的搜索结果至关重要。

书的元数据可以是其标题,描述,作者,发布日期,ISBN,评论,封面图片等。计划它!

2.创建用户场景。

要设计出令人愉悦的体验,请考虑具有用户角色的场景。 场景是关于某人(您的用户角色)使用您的网站执行特定任务或目标的故事,例如预订航班或购买瑜伽裤。

场景与角色一起使用。 它们是为什么特定角色会来到您的网站背后的故事。

  • 角色希望在您的网站上完成什么?
  • 什么可以帮助他们完成手头的任务?
  • 什么可能导致摩擦?

关注用户及其任务,而不是您网站的组织和内部结构。 如果您这样做,您将深入了解该网站必须具备的内容以及应如何组织这些内容。

您可以%E5%9C%A8%E6%AD%A4%E5%A4%84%E8%AF%A6%E7%BB%86%E4%BA%86%E8%A7%A3%E6%96%B9%E6%A1%88%E6%98%A0%E5%B0%84%E3%80%82″>

4.将用户任务映射到单个网页。

在开始考虑实际设计之前,您需要准备好内容。

接下来,确定您的网页上发生了什么以及应该存在多少页面。 每个页面必须做两件事:

  1. 帮助用户完成一项特定任务;
  2. 使下一步易于访问。

在设计网站时,确保用户完成每项任务至关重要。 但是,实现这一目标通常包括一系列较小的任务。 任务之间的关系定义了经验。 您网站上的每个页面都需要帮助构建这一系列任务。

总的来说,您的网站将有三种类型的网页:

  1. 导航页面。 这些帮助用户确定在哪里找到他们想要的东西,并让他们访问它。 他们的目标是将用户“发送到其他地方”。通常它是主页或搜索结果页面。
  2. 消费页面。 这些是您经常去的“其他地方”(文章,视频,定价信息等)。
  3. 交互页面。 这些页面允许用户输入和操作数据。 想想搜索页面或注册表单。

每种类型的页面都针对不同类型的用户任务进行了优化。 了解所需的页面类型有助于您定制界面设计。

绘制站点地图或映射%E7%94%A8%E6%88%B7%E6%B5%81%E6%97%B6“>

5.以最不引人注目的方式在恰当的时刻提供正确的帮助。

有些网页易于使用。 有些人可能需要一些学习。 规划帮助文本和%E6%98%BE%E5%BE%AE%E5%86%85%E5%AE%B9“>

信息应在上下文中提供。 在用户预订内容的页面上提供与预订相关的问题的答案。 在不同页面上保留推荐和常见问题解答并非最佳 – 在需要时不提供信息。

页面常见问题确实有一个地方 – 当它们被用来回答实际问题时,而不是作为销售工具(例如Q:“我应该买它吗?”答:“当然你应该!”)。

我真的很喜欢R. Stephen Gracey所说的 :“一个好的常见问题解答就像保险给你的用户:他们何时需要它,但希望他们永远不会。”

这是Groupon在上下文中回答问题:他们的结帐页面上的页面常见问题解答:

《网站信息架构:如何优化用户体验》
在结账页面上回答常见问题解答,如果操作正确,可以帮助减少购买时的不确定性。

4.创建用户流以映射用户在您的站点中的进展。

既然您已经找到了网站上需要的页面类型,那么就可以找出最佳的用户流程。 (我在这里写过关于创建用户流的文章。

在设计流程时,您需要了解搜索信息的四种模式。 Donna Spencer就这个话题撰写了一篇精彩的文章 。 据她介绍,这四种类型是:

  1. 已知项目搜索。 通常,当人们确切地知道他们正在寻找什么以及它们被称为什么时,他们通常会使用搜索。 但是有些人更喜欢导航,所以它必须通过搜索才能让人们知道他们想去的地方。
  2. 探索性寻求。 当用户可能有需要但不确定将实现什么时,就会发生这种情况。 他们可能正在寻找再营销解决方案或新笔记本电脑。 人们会认出他们问题的答案,但不知道他们是否真的找到了正确的答案(即注意确定是否有更好的选择)。
  3. 不知道我需要知道什么。 有时人们不知道他们需要知道什么。 想要购买宝石首饰的人必须弄清楚贵重金属,护理,宝石的透明度,硬度和许多其他东西。 他们正在寻找一件事,但发现他们确实需要了解其他事情。
  4. 重新发现。 人们可能想回到他们过去发现的东西。 如果他们在上次访问期间在您的网站上看到了他们喜欢的内容,请轻松再次找到它。 (更改访问过的链接的颜色,使用永久购物车等)。

每个寻求信息的行为都依赖于特定的导航工具来取得成功。

5.创建站点地图,线框图并收集有关您网站架构的反馈

你只有一个人。 你需要新鲜的眼睛和大脑来挑战你的思维。 也许你错过了什么。 也许你误解了某事的重要性。 这就是为什么你需要和你的队友(或其他同伴)一起完成这一切。

您可以使用草图,图表,站点地图或线框来传达您的发现和建议,以便向前发展。

收集反馈,迭代并继续规划您的网站结构。

如何为您的网站创建最佳菜单结构

直观导航不是偶然发生的。 以下是UX专业人员用于确定最佳信息体系结构,工作流程,菜单结构或网站导航路径的研究和测试技术。

1.卡片分类

您的网站上有很多页面需要进行分类。 应该去哪里? 卡片分类可以让您找出人们想要找到的东西。 这是一种非常棒的(可靠的!)方法,用于查找用户期望查找内容或功能的模式。

如果主题是人们理解的东西(例如音频 – 视频设备,服装等),则效果最佳。

《网站信息架构:如何优化用户体验》
卡片分类是一种灵活的纸笔方法,可将您的网站内容分类。

以下是基本方法的工作原理:

  1. 拿一套索引卡或Post-It Notes)并在每个上面写一个术语(例如页面名称,内容)。 每张卡片代表您网站上的(类别)页面。 如果你是一个音视频电子商务网站,你可能会写下“数码单反相机”,“佳能镜头”或“DVD播放器”等内容。
  2. 测试对象(您为此目的招募的理想客户的代表)获得一组索引卡,其中已经写有条款。
  3. 您要求第一个测试主题将这些术语放入逻辑分组中,并为每个分组创建一个类别名称。
  4. 每个测试对象重复该过程。
  5. 在与所有测试参与者一起完成练习后,您可以分析他们的输出并查找模式。

这是一个很棒的视频,在3分钟内解释了这个概念:

[…]“/>

卡片分类有三种主要类型:

  1. 开卡分拣。 这是测试参与者为类别创建自己的名称的地方。 它可以让您深入了解客户的想法和精神分类。
  2. 封闭式卡片分拣。 向参与者提供一组预定的类别名称。 他们的目标是将索引卡分配给这些固定类别。
  3. Modified-Delphi方法。 这与其他人不同。 参与者一个接一个地工作,精炼一个模型。 第一个测试对象进行传统的开放式排序。 后续测试人员从先前测试人员创建的任何内容开始。 他们可以修改该组织(重命名或重组)或重新开始。 您重复此过程,直到参与者不再进行重大更改。 风险在于,由于任何人都可以重新开始,因此异常参与者可能会损害整个研究。

以下是使用Modified-Delphi方法的示例(请参阅更改的类别名称):

《网站信息架构:如何优化用户体验》
Modified-Delphi卡片分类方法可以让参与者改变他人的选择。 这个过程一直持续到达成共识。 %EF%BC%88%E5%9B%BE%E7%89%87%E6%9D%A5%E6%BA%90%EF%BC%89“>

2.树木测试(反向卡片分类)

树测试是您创建菜单结构(自己或基于其他卡片排序结果)的地方,然后让人们从菜单中查找项目。 树测试的目标是在进入实际用户界面设计之前证明您的站点结构是可行的。

它是在您网站结构的简化文本版本上完成的 – 不受导航辅助工具和视觉设计的影响。

例:

在此示例中,用户将浏览菜单结构,直到他们到达他们期望找到保护案例的位置:

《网站信息架构:如何优化用户体验》

反向卡片排序可验证您的菜单结构假设(或提供重新安排的反馈)。

3.在线(远程)卡分类

您不必亲自进行卡片分类。 在线完成更便宜,不需要物流规划,并且可以在没有地理限制的情况下完成。

尽管您可能同时进行Skype聊天,但您不能“在那里”来调节它。 必须对测试参与者进行适当的预先教育。 本文指出了在线卡片排序的一些优缺点。

这些在线卡片分类工具的局限性在于它们不能与Modified-Delphi方法一起使用。

您可以查看此流程的在线工具包括:

这些工具还可以帮助您分析结果(而不是手动完成)。

4.分析卡片排序结果

关于结果经常出现两个问题。

  1. 如果有一半人想要在Y类中找到Page X,但另一半人更喜欢Z类? 可以在两个类别下拥有相同的链接! 如果这有助于人们找到他们想要的内容,那就是要走的路。
  2. 我只是将结果用作我的网站架构吗? 不完全的。 您应该使用卡片分类结果作为组织和标签的指南 。 不要盲目地将结果用作您的实际网站结构。 您的卡片排序结果可以(并且应该)补充额外的用户研究和任务分析。

在设计导航系统时,请问自己,“访问我网站的大部分访问者想要什么?”还要提出一个后续问题:“我希望访问者能够轻松找到什么?”

你应该测试多少用户?

Tullis和Wood(2004年着名研究的作者)建议测试20-30名用户进行卡片分类。 然而, %E6%A0%B9%E6%8D%AE%E4%BB%96%E7%9A%84%E7%A0%94%E7%A9%B6%EF%BC%8C%E9%9B%85%E5%90%84%E5%B8%83%E5%B0%BC%E5%B0%94%E6%A3%AE%E5%BB%BA%E8%AE%AE%E5%8F%AA%E6%B5%8B%E8%AF%9515%E4%B8%AA%E7%94%A8%E6%88%B7%EF%BC%88%E5%A4%A7%E5%9E%8B%E9%A1%B9%E7%9B%AE%E4%B8%AD%E6%9C%8930%E4%B8%AA%E7%94%A8%E6%88%B7%E6%8F%90%E4%BE%9B%E5%A4%A7%E9%87%8F%E8%B5%84%E9%87%91%EF%BC%89%E3%80%82″>

对更多人进行测试可以提供更多洞察力,但收益递减。 在测试过去15个用户时,成本通常是不合理的。

进一步阅读: 这是一个很好的卡片分类指南

网站导航设计的指导原则

卡片分类将帮助您弄清楚如何构建菜单。 导航菜单设计怎么样?

在良好的导航设计中,链接看起来可以点击。 他们有清晰的标签,可以预测下面的内容。 不清楚的菜单链接会导致点击恐惧

看看我在那里的导航菜单。 我已经做了大量的测试来找到 完善 这些措辞足够好。 (如果其中一些不清楚,请告诉我)。

这是另一个:

《网站信息架构:如何优化用户体验》

菜单项看起来像按钮,但我认为“了解更多”和“现在订购”是非常糟糕的选择。 我将从中了解更多信息? 我订的是什么?

提供一致,可靠的全球导航。 无论您在导航菜单和页脚中使用哪个链接,都要在网站的每个页面上保持相同。 无论您在哪里进行MADE,顶级菜单都保持不变:

《网站信息架构:如何优化用户体验》

你应该把菜单放在哪里? 主菜单应该是水平还是垂直? 虽然有一个强有力的%E6%A1%88%E4%BE%8B%E5%8F%8D%E5%AF%B9%E5%B7%A6%E5%9E%82%E7%9B%B4%E8%8F%9C%E5%8D%95“>

我说你应该尽可能选择水平菜单,但如果你有大量菜单项(例如亚马逊),请选择左侧垂直菜单。 %E8%BF%99%E9%A1%B9%E7%9C%BC%E5%8A%A8%E8%BF%BD%E8%B8%AA%E7%A0%94%E7%A9%B6%E8%A1%A8%E6%98%8E%E9%A1%B6%E7%BA%A7%E8%8F%9C%E5%8D%95%E6%9B%B4%E5%AE%B9%E6%98%93%E4%BD%BF%E7%94%A8“>

如果您使用垂直菜单,请确保它们左对齐。 右对齐菜单会妨碍可扫描性

为全球和本地导航建立清晰的层次结构。 几乎所有具有多个页面的网站都具有某种全局导航:

《网站信息架构:如何优化用户体验》

然后,还有本地导航(子菜单)。 本地导航应显示在全局导航下方。 这是合乎逻辑的:全局菜单是主要类别,本地导航就像它下面的子类别。

本地导航链接应该最接近用户需要的位置。 内容是第一位的,但是一旦用户完成阅读内容,他们将查看全局导航之前到达本地导航。

同样,如果页面没有他们正在寻找的内容,则本地导航是他们首先要查看的导航。

您应该创建多少级别的导航? 尽可能多的人 – 不会让用户疯狂。 一些内容很多的网站,如富国银行,有四个级别的内容(子子菜单):

《网站信息架构:如何优化用户体验》

他们认为每个级别的导航都可以帮助用户实现目标。 大多数网站都有足够的内容,只有两个级别的导航 – 全球导航和一级本地导航。

用于创建站点信息体系结构的工具

  • Balsamiq Mockups 。 一个伟大,快速的线框工具。 几乎没有学会开始学习,我喜欢它专注于大局,而不是小设计元素。
  • Omnigraffle 。 许多UX专业人士的首选工具。 图表,流程图,快速页面布局,网站模型等(仅限Mac)。
  • Microsoft Visio 。 许多人更喜欢它用于图表和网站架构规划。
  • MindJet MindManager 。 Mindmapping工具,也适用于图表和站点地图。
  • LovelyCharts 。 一个图表应用程序,允许您创建各种图表,如流程图,站点地图,线框等。

结论

人们只购买他们能找到的东西。 研究表明,由于导航系统失败,网站正在亏损,用户无法找到他们感兴趣的产品。

我已经看到了由于导航不良导致“高达50%的销售额”丢失的说法,但我没有发现该研究证实了这一点。 然而,良好的导航至关重要。

信息架构与可用性和转换密切配合。 如果您的网站的信息架构良好但您的可用性很糟糕,那么访问者将会找到他们正在寻找的内容,但很难完成购买流程。

如果您的信息架构不好(即使您的可用性很好),大多数访问者都无法找到他们想要的内容,在进入销售渠道之前离开您的网站。

正确获取网站的信息架构可确保%E5%87%BA%E8%89%B2%E7%9A%84%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C“>

相关文章

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注