每次我谈到广泛的层次结构在我们的UX会议课程中信息架构,出现了两个问题:

  1. 在全局导航中有7-9个以上的顶级分类可以吗?(提示:它是好的,你只需要适当地计划。)
  2. 如果我们使用大量的顶级类别,它们就不适合在水平导航栏中显示。他们应该去哪里?

许多团队会尝试在桌面网站的水平导航栏中嵌入一个宽泛的导航层次结构。为了使类别列表能够适应有限的水平空间,他们会过度使用小字体大小,人群相互接近的项目,或不自然地产生短的分类标签.最糟糕的是,将IA修改为只有足够多的主要类别能够容纳可用空间。当我们将广阔的信息空间限制在少数类别中时,我们最终将得到过于通用的顶级条目,这将使用户难以找到他们需要的内容。此外,用户将不得不进行更多的工作(点击和扫描各种低级类别),以找到相关的类别。

B2B网站导航,在一个单一的服务顶级类别下呈现大量的子类别
埃森哲将广阔的信息空间隐藏在一个单服务类别,以人为地限制顶级类别的数量。具体咨询领域的可寻性降低了万博官网manbetx下载交互成本增加了(因为人们必须打开各种顶级类别,扫描它们,并决定它们是错误的)。

然而,有另一种类型的主导航UI,在桌面,可以容纳尽可能多的顶级项目需要-垂直,左侧导航

左侧垂直导航的餐厅网站
乔木餐厅的网站轻松容纳13个全球导航类别使用垂直导航模式。这个导航UI允许使用特定的、具有较高信息气味的主要类别,并为用户节省了在看到特定选项之前首先选择通用顶级类别的交互成本。

垂直导航的好处

这种导航UI的大部分优点来自于它能够容纳许多顶级类别。

  1. 特定类别增加了可查找性,降低了交互成本。

使用垂直导航消除了限制类别数量的视觉设计限制,允许团队创建一个自然适合信息空间的IA,并暴露特定的、高的信息的气味不需要用户深入到层次结构的第二层

  1. 垂直导航提供了增长空间。

对于导航在未来可能增长的网站来说,垂直导航是一个很好的选择——在B2B、企业、政府、高等教育和医疗保健等领域,大型组织的产品或内容可能会不断发展。为垂直导航添加额外的类别并不需要重新设计导航UI;唯一的主要决定是新项目应该如何融入现有的类别结构。

  1. 垂直导航支持比水平导航更有效的扫描。

我们从眼球追踪研究中知道,在网站上注意力是向左倾斜的:用户80%的时间都在看屏幕的左半部分.屏幕左侧的区域是很有价值的,将导航放置在那里很可能会被用户注意到和扫描。

此外,心理语言学研究表明,视觉搜索列表中更为高效如果列表比如果是垂直水平——人们能够找到感兴趣的一个项目用更少的眼注视,因为更多的信息可以来自一个固定。(请记住,眼睛不仅能够从它注视的确切位置感知信息,还能够从它周围相对较小的区域感知信息。因此,即使我们阅读了句子中的每个单词,我们也只需要专注于其中的几个单词。)

左侧垂直导航的网站导航是居中对齐的
Sunglass Hut以前的设计使用了左侧垂直导航,但每个导航元素的文本都以中心对齐,造成了锯齿状的边缘,破坏了垂直项目列表的视觉扫描优势。
一个带有水平条的网站导航,标志位于导航的中间
Solstice太阳镜将导航选项放置在水平导航条上,使浏览整个列表稍微更费力。这种设计的有效性也受到了影响center-placing商标

注意,一个常见的误解是水平导航设计支持f形阅读模式。然而,当用户阅读一段非结构化文本时,会遇到f形模式,这绝对不适用于导航、标题或其他页面chrome。

  1. 用户熟悉垂直导航.尽管垂直导航在当代网站上不太常见,但在桌面应用程序(本地应用程序和web应用程序)中经常遇到。
Slack和Gmail导航面板的双截屏
Slack和Gmail是使用左侧垂直导航的广泛使用的web应用程序的例子。

此外,许多网站使用垂直当地的导航(例如,显示当前页面的“兄弟”页面,它们是网站层次结构中同一类别的一部分)。

左侧导航的网站,在父类别的页面
罗技公司使用左侧垂直导航,将本地导航选项设置为特定产品区域内的各个页面,这是网络上非常常见的方法。
  1. 垂直导航可以很自然地转化为移动导航。将水平菜单条转换为页面设计可能需要一些调整,因为菜单栏通常转换为垂直导航(通常显示在汉堡包菜单下)。相比之下,为桌面和移动设备使用垂直导航可以让团队以相对最小的适应性应用相同的视觉设计选择。类别的边框、类型、间距、顺序和二级类别的UI可以跨设备共享。
一个网站的桌面和移动版本的导航是相同的,因为它是垂直导航模式
Heywoodgolf的垂直导航很容易从台式机转换到移动站点,几乎不需要进行必要的设计更改,以使设计外观、工作和感觉适合该平台。

话虽这么说,不要试图隐藏你的桌面导航在一个垂直的(汉堡包或其他)菜单下.可见导航是移动和桌面的黄金标准。而一些手机网站可能会被迫隐藏大部分或全部的导航栏汉堡菜单由于屏幕空间有限,存在着巨大的问题可发现性使用可见导航的好处。当导航栏被隐藏时,人们很容易忘记检查它。此外,相对于页面的其他部分,桌面的汉堡包菜单占用的空间很小,因此它被忽略的可能性甚至比移动设备更大。

垂直导航需要更多空间

与水平导航相比,使用垂直导航的主要缺点是它占用更多的空间,因此,可用于内容的空间更少。垂直导航通常会导致页面的底部content-to-chrome比水平导航。

比较新旧版本的网站。旧版本有垂直导航(占用更多空间),新版本有水平导航(占用更少空间)
Nua自行车新旧设计。(左)Nua自行车以前的设计使用了垂直的左侧导航,内容与铬合金的比例约为5:1。(右)重新设计的网站移动到水平导航条,在相同的屏幕尺寸下,内容与chrome的比例为12:1。虽然新设计在可见导航中暴露的顶级类别要少得多,但它占用的内容空间也少得多。

在小的窗口尺寸(就像在更小的显示器或平板电脑上遇到的那样)中,这种权衡可能很难适应。如果你使用的是响应式设计,你可能需要决定不同断点的右导航UI应该是什么(例如,窗口大小),垂直导航的显示大小将导致一个像样的内容与chrome的比例。然而,请记住,当你接近大窗口尺寸的范围时,垂直导航将很可能不再影响内容与chrome的比例(通常情况下,当显示真的很大时,视口区域将被左右空白填充)。

一个在很大的显示器上有左侧导航的网站,左边和右边都有多余的空间
IBM的沃森工作室:在一个非常大的显示器上,垂直导航对内容-铬比率的影响可以忽略不计,因为站点会在左右两边增加空白(或者在本例中是空白的深色背景空间)。

一个很长的垂直菜单可能在页面折叠的下方有一些项目。我们从很多研究中知道,用户更关注页面上方的信息而不是下方的信息。如果他们在页面上方看到的内容对他们当前的目标毫无用处,他们甚至可能根本不会滚动页面。(请记住,用户才是非常快的离开网页他们认为无用的。)另一方面,垂直导航是一种非常成熟的设计模式,大多数用户在看不到完整的菜单时都知道要滚动——假设在页面上方可见的信息让他们相信这个网站可能是有用的。

可用的垂直导航指南

  1. 在左侧放置垂直导航,并使用一个明显的设计。

正如前面提到的,视觉注意力倾向于屏幕的左侧。再加上我们经常看到的事实right-rail失明(用户避免看页面的右侧栏,如果它看起来可能包含广告)意味着页面右侧的导航不太可能被注意到。(与通常的左对右原则一样,这个建议适用于从左到右阅读的语言。如果你的语言从右向左阅读,则相反的建议适用。)

此外,确保导航在视觉上是突出的。不同的文本或背景颜色和边框可以使它从其他页面元素中脱颖而出。

垂直导航,高对比度的深色背景,浅色的页面内容区域。
奥迪的设计系统使用了高对比度和深色背景,以确保左侧导航是明显的,链接是可读的。
  1. 不要垂直或水平复制菜单。

最近一个奇怪的趋势是使用两个冗余的ui作为全局导航:一个水平菜单栏和一个具有相同类别的汉堡包菜单。就好像设计团队不确定应该使用哪一种UI,所以两者都包含在内。这种重复(就像大多数UI元素的重复)是不必要的,潜在的混乱

网站与汉堡包菜单和重复水平导航
BDO Advisory使用了两个冗余的全局导航ui:一个水平条和屏幕右侧的汉堡包菜单。这两个菜单包含完全相同的项目,但汉堡包菜单也包括来自网站的项目 实用的导航 (地点,事件,新闻,等等)。这种重复是不必要的,而且令人困惑。
  1. 不要把导航栏隐藏在图标后面。

由于垂直导航比水平导航占用更多的空间,设计师经常试图最小化其相应的区域。这当然是一个可以理解的目标,但实现它的某些方法最终会产生更多的问题。一个新兴的趋势是使用图标代替文本标签进行分类。虽然每个导航项都可以使用文本标签,但用户只能在单击、轻击或悬停在导航栏上时才能看到它们。

我们多年来一直建议增加标签的图标.文本不仅减少了歧义,而且增加目标尺寸.然而,我们仍然看到一些网站认为用户能够立即理解它们的导航类别图标。我常说,在航海中,一个字抵得上一千张图片。

隐藏导航文本标签意味着用户很可能直接忽略导航(就像汉堡包菜单经常发生的那样)。的用户与它交互必须承担额外的交互成本,如悬停或点击查看文本标签或附加认知负荷试图解读这些图标的含义。

最小化导航到一系列图标的策略(默认为显示文本标签(隐藏它是可选的)对于每天使用的应用程序来说可能是一个现实的妥协,用户可能很好学习类别代表什么。然而,在一个只有个别用户偶尔使用的网站上,这是不推荐的策略。

NOAA的桌面站点默认显示了全球导航类别的图标,用户需要点击图标才能看到类别的文本标签。这种设计也增加了使用导航的交互成本,因为用户必须点击两次才能移动到该页面:一次是打开菜单,第二次是跟随链接。
  1. 在长菜单中,把不太重要的放在底部。

由于页面折叠引起的可用性问题(上面已经讨论过),一个非常长的垂直菜单可能会有不滚动就不可见的项目。不幸的是,由于不同的用户有不同大小的显示器,您无法知道页面折叠将击中您的菜单对任何个别用户。对于较长的菜单,要对项目进行优先排序,这样那些不需要滚动就可能看不见的功能就不那么重要了。

总结

垂直导航可能是桌面的一个合理选择,特别是对于内容范围广泛、增长迅速或只是想为用户提供特定类别的站点。垂直导航也很容易适应移动设备。为了保持垂直导航的帮助,不要把它隐藏在汉堡包菜单下,使用左对齐的、关键字前置的标签(而不仅仅是图标)来分类,并权衡它的好处是否值得从内容区拿走空间。