如果您使用纸质地图探索了一个陌生的城市,您可能熟悉这两个导航策略,我一直使用:要达到特定的吸引力(如博物馆),我试图弄清楚整体部分of the city it’s in and find the easiest path there. On the other hand, if I don’t have a specific place in mind, I’ll often take a look at what’s nearby, and go exploring a bit; perhaps find an intriguing coffee shop or park nearby.

显示伦敦大部分地图的地图
伦敦地图的全球视野,显示大规模的地理特征和社区,寻找附近的咖啡店是无用的,但有利于决定如何从大英博物馆到白金汉宫。
伦敦邻里Brixton的一个放大地图,显示了当地地理特色和商店
伦敦邻里Brixton的当地视图显示了各种各样的功能。在这里,很容易找到附近的吃饭,但找不到前往白金汉宫的路。

寻求特定地标和探索社区需要不同的城市细节。当我试图到达城市的完全不同的部分时,我正在寻找城市的整体地理和主要领域之间的路径。如果我正在探索一个邻居,我对附近的选项感兴趣。

对于网站的用户而言,存在相同的方向和WATFINDING的行为,以及在城市导航榜样中,帮助用户的各种提示取决于他们寻求信息需求。大多数网站都突出了全球导航(类似于城市社区的缩小地图)。具有大量页面的某些站点还具有本地导航,以帮助用户定位和探索当前类别中的内容。

定义:本地导航是一种导航类型,即对用户的当前位置上下文 - 显示当前类别中的兄弟网页,如果适用,如果适用,儿童或侄女和当前页面的侄子。

大多数网站的IA结构是分层,熟悉的方法可视化层次结构是一棵树。无论用户当前都在结构中,网站的全局导航都显示了树的顶层。全球导航是稳定的 - 用户可以期望在整个网站中保持相同,并且他们可以使用它来跳转主要类别。另一方面,本地导航显示有关用户当前正在查看的节点的信息,还包括树的同一分支上的其他节点。因此,本地导航将因类别而异,并将显示与当前页面相关的内容提供(或者至少在网站信息架构中的)。但是,本地导航不会因用户或会话而异。

除了当前页面之外,外部导航和局部导航的3层层次结构的树图还呼出。
网站IA的树图:全球导航是层次结构的顶级(产品,行业,服务,支持),无论用户在网站上,它都保持不变。本地导航是对用户当前位置的上下文 - 它显示了当前页面和兄弟页面;在这种情况下人力资源和人是当前页面供应链管理,CRM和客户体验,网络管理是本地导航中包含的所有兄弟姐妹页面。

本地导航同时提供一些目的:

  • 它表示当前页面的类别,因此,工作方向元素,类似于地图上的“您在这里”指示器。
  • 它显示了与同一信息 - 体系结构(IA)类别中的其他页面(或信息)的链接,因此,用作路径文件元素,告诉用户他们可以从当前位置到达的位置。
  • 它有助于访问IA(例如,第二层或第三层子类别)的深部部分,否则需要更高互动成本访问。
具有全局和本地导航的网站,如同水平栏显示在另一个下方
SAP使用全局和本地导航。两个导航栏的放置(全球导航在本地导航上方)表明它们的相对范围。

本地导航:适用于探索性浏览行为

本地导航不适合每个网站或应用程序,因为它占据了公平的房地产。具有相对较小的信息空间的产品(即,整体几页)不太可能从可见的本地导航中获得。在频谱的另一端,网站深信息架构经常结束当地导航UI,屏幕上占用太多空间,可能会受益于较轻的导航拐杖(例如上下文链接相关内容)。

当用户从事探索性浏览,而不是已知项目搜索时,可见的本地导航通常有益。在这种情况下,用户可以在类别中访问几页 - 要么是因为他们不知道确切地它们需要哪种类别,即使他们有其邻居的感觉,或者因为他们需要组合或比较来自多个类别的信息。例如,寻找大学网站的潜在学生可能会花一些时间详细探索一个程序,然后跳转到另一个程序。或者,有人购买汽车或设备可能弹簧单高跷经常规格,图库和概述页面之间。

汽车网站与本地导航为每辆车模型,允许快速访问该车型的不同页面
Nissan网站为每个汽车模式特色了本地导航,使用户能够在详细功能之间快速跳跃,画廊配件, 和眼镜页面。对于像汽车这样的大型相应的购买,用户可能会在部分页面之间来回来回。

要弄清楚您在网站的一个或所有部分上需要本地导航UI,请查找指示您的用户的用户数据(基于定性或分析的):

  • 倾向于在单个会话中浏览多个类别的子页
  • 倾向于比较或组合在多页上显示的信息(例如,产品信息)
  • 倾向于在内部页面上开始他们的网站访问(而不是在主页上),并需要在整个会议期间留下来

在您设计本地导航UI时,请询问它是否完成以下目标:

  • 一世它非常可发现和可识别?用户会注意到它,他们是否能够将其与全球导航区分开来?
  • 它是否支持内容之间的典型途径?当地导航是否有助于访问单个会话中所需的内容,因为用户正在进行a最佳任务还是
  • 它是否会产生最小的互动成本?用户是否可以访问本地导航?

在剩下的文章中,我们将专注于桌面的本地导航;在我们地址的单独文章中移动设备上的当地次标

放置本地导航

在桌面上,本地导航通常被放置在两个位置之一:水平,在页面顶部的全局导航下方,或在页面左侧,创建(与全局导航)一起倒置 -l形状。像在桌面上放置全球导航的位置,选择定位当地导航的位置取决于您的整体设计和IA的宽度的特性。如果您的网站具有狭窄的顶级顶级,则具有许多Tier-2类别(通常在使用不平衡IA结构的大型电子商务站点上发现,许多产品类别都卷起产品在顶级的项目),然后将本地导航水平放置几乎没有意义。

水平局部导航的一个好处是其紧凑性 - 通常,它不会侵入主要内容区域到垂直设计的程度相同。那么说,水平和垂直局部导航斗争都以适应深层IA结构。垂直方向需要在每个后续层上更深入地缩进,慢慢地侵入非常有价值的主要内容空间,而水平方向不显示多个本地层或堆叠它们。

一个具有左侧垂直本地导航的网站,具有非常深入的信息架构,强迫大量缩进
波特兰大学有一个非常深刻的信息架构,导致页面左侧的大量缩进本地导航。第六层(环境工程未成年人)陷入与第五层几乎相同的缩进水平(土木工程),由于缺乏空间。(请注意,本网站导航的前两层在本地导航中不可见:学术界>学院>学院>唐纳德·桑利工程学院>学历>土木工程>环境工程未成年人是可见页面的位置。另外,注意,在这种情况下,导航路径因其导航途径与可见面包屑不同 PolyHierarchy.

虽然不经常看到,水平本地导航可以被设计为包括第三层导航而不无理地侵入内容区域。但它实际上可以只支持2-3层,然后在主要内容空间上侵入太多。对于更深入的页面,考虑使用面包屑而不是多层或截断的本地导航。虽然面包屑没有兄弟网页的可见性,但它们的布局相当紧凑(通常是一行)。这个深度权衡决策必须对每个站点进行不同,具体取决于IA的整体深度和往往在同一会话中浏览的具体内容区域。目标总是考虑用户应该能够移动的具体页面,并允许用户尽可能轻松地在它们之间行进。

两个站点图像的线框,显示在站点层次结构的第三层中显示本地导航之间的迁移,并在向前移动到第四层时隐藏该子脉。
谨慎在页面顶部的导航中有三个级别的IA层次结构。在深度(右)导航到四层(右)时,网站将与堆叠的本地导航一起使用并切换到BreadCrumbs。

局部导航应该是可见的,但比全球导航不那么突出

始终可见的本地导航的大益处是访问它不会携带任何互动成本(例如,它不需要悬停或点击全局导航),因此,相关页面更多可发现。您希望本地导航令人瞩目;否则,有一个很好的机会,用户不会寻求它(事实上,他们可能没有任何期望它存在)。

但是,有一些细微差别如何局部导航应该是明显的。特别是,本地导航不应比全球导航更突出,因为如果发生这种情况,用户可能会错误地误认为是全局局部导航。视觉层次结构应该反映信息层次结构。

例如,Generac的先前网站设计具有高度突出的本地导航 -高对比度文本和一个突出的白色背景叠加着大英雄形象在页面顶部。另一方面,全球导航在白色背景上的低对比度灰色文本得多。在我们的测试中,用户完全错过了全球导航,认为该网站的选择仅限于本地导航中可见的类别。

一个网站设计,Locla导航比全球导航更突出
Fired For Generac的网站设计具有比全球导航更突出的本地导航。这种设计导致用户根本不会注意到全局导航,依赖于本地导航。
一个大学网站,局部导航是可见的,但在视觉层次结构中明确地下属到全球导航
社交研究的新学校在左侧的局部局部导航很容易引起局部导航并没有过度推翻全球导航。通过使用与全局导航的背景相比,使用比本地导航的背景略高于背景(在浅灰色背景上显示),通过使用略微更高的对比度来创建该导航UI的这种成功的视觉层次结构。但是,大英雄形象推动页面的核心内容远,不建议。
罗德岛设计的网站特色 每个学位程序的本地导航,使用户能够在概述,教师,课程列表和其他页面之间轻松跳转。这种设计是一种明智的利用持久的本地导航,因为前瞻性学生们经常在会议期间深入潜入特定学位计划的细节。

概括

本地导航是一个上下文变化的导航UI,用于向用户展示其当前位置,以及兄弟和子页面。确保旨在利用典型的浏览路径,是可见的,但不比主导航更加关注,并且需要最小的交互成本。