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

  1. 是否可以在全球导航中拥有超过7-9个顶级类别?(SPOILER ALERT:没关系,你只需要为它计划适当规划。)
  2. 如果我们使用大量的顶级类别,它们就不适合在水平导航栏中显示。他们应该去哪里?

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

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

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

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

垂直导航的好处

这种导航UI的大多数好处从其容纳许多顶级类别的能力。

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

使用垂直导航删除限制类别数量的可视化设计约束,允许团队创建自然适合信息空间的IA,并公开具体,高 -信息香味不需要用户深入到层次结构的第二层

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

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

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

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

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

左侧垂直导航的网站导航是居中对齐的
先前的Sunglass Hut设计使用了左侧垂直导航,但是中心对齐每个导航元素的文本,创建一个锯齿状边缘,该边缘破坏了垂直项目列表的可视扫描效果。
一个带有水平条的网站导航,标志位于导航的中间
Solstice Sunglasses在水平导航栏中放置了导航选项,使其在列表中扫描略微努力。这种设计的有效性也受到损害center-placing商标

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

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

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

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

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

垂直导航需要更多空间

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

网站新旧版本的比较。旧版本具有垂直导航(占用更多空间),而新版本具有水平导航(占用更少空间)
Nua自行车新旧设计。(左)Nua自行车的先前设计使用了垂直左侧导航,其含铬量与铬含量的比例约为5:1。(右)重新设计的网站移动到一个水平导航栏,在相同的屏幕大小上,内容与浏览器的比例为12:1。虽然新设计在可见导航中公开的顶级类别要少得多,但它确实占用了更少的内容空间。

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

一个网站,在一个非常大的显示器上有左侧导航,左右额外的空白空间
IBM的Watson Studio:在一个非常大的显示屏上,垂直导航对内容与浏览器比率的影响可以忽略不计,因为该站点在左右两侧添加了空白(或者在本例中为空白的黑色背景空间)。

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

可用垂直导航指南

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

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

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

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

最近的一个奇怪趋势是使用两个冗余UI进行全局导航:一个水平菜单栏和一个具有相同类别的汉堡包菜单。几乎感觉设计团队不确定应该使用哪个UI,所以它包括了这两个方面。这种复制(与大多数UI元素的复制一样)是不必要的,潜在的混乱

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

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

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

隐藏导航文本标签意味着用户很可能会忽略导航(汉堡包菜单经常发生这种情况)。那些与之交互,必须携带悬停或单击的额外交互成本,以查看文本标签或其他认知负荷试图解读这些图标的含义。

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

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

由于页面折叠(如上所述)造成的可用性问题,很长的垂直菜单可能会出现不滚动就看不见的项目。不幸的是,由于不同的用户有不同大小的显示器,您无法知道页面折叠将在您的菜单上为任何单个用户显示。对于较长的菜单,对项目进行优先级排序,以便在不滚动的情况下可能看不见的项目属于不太重要的功能。

总结

在桌面上,垂直导航是一个合理的选择,特别是对于内容广泛、正在快速增长或只是想为用户呈现特定类别的网站。垂直导航也很容易适应移动设备。为了保持垂直导航的帮助,不要将其隐藏在汉堡包菜单下,使用左对齐的关键字前置标签(不仅仅是图标)进行分类,并权衡其好处是否证明从内容区域占用的空间是合理的。