帮助用户导航应该是几乎每个网站和应用程序的优先级。毕竟,即使是最酷的功能或最吸引人的内容,如果人们找不到,也会毫无用处。即使你有搜索功能,你通常不应该依赖搜索作为导航的唯一方法。大多数设计师都认识到这一点,并在其设计中包括某种形式的导航菜单。

定义导航菜单是内容类别或功能的列表,通常以一组链接或图标的形式呈现,这些链接或图标组合在一起,其视觉样式与设计的其他部分截然不同。

导航菜单包括但不限于导航栏和汉堡菜单

菜单如此重要的是,您几乎在您遇到的每个网站或软件中找到它们,但并非所有菜单都是平等的。我们经常观察用户与令人困惑的菜单斗争,难以操纵,或者只是难以找到。

为了避免常见的错误,请遵循以下导航菜单指南:

使它可见

  1. 不要在大屏幕上使用微小的菜单(或菜单图标)菜单不应该隐藏当你有足够的空间来显示它们。
  2. 把菜单放在熟悉的地方。用户希望在其他网站或应用中找到他们以前见过的UI元素(例如,左栏,屏幕顶部)。把你的菜单放在人们希望找到它们的地方,让这些期望对你有利。
  3. 使菜单链接看起来是交互式。用户甚至可能无法意识到它是一个菜单,如果选项看起来不看(或令人烦恼)。如果您包含太多的图形,或者遵守原则,菜单可能似乎只是装饰图片或标题平面设计
  4. 确保您的菜单有足够的视觉体重。在许多情况下,放置在熟悉的位置的菜单不需要大量周围的白色空间或颜色饱和度,以便是明显的。但如果设计杂乱,缺乏视觉强调的菜单可以很容易地丢失在争夺观众注意力的图形,促销和头条线上。
  5. 使用与背景颜色对比的链接文本颜色。令人惊讶的是,很多设计师都忽视了这一点对比度指南;不用眯着眼睛看菜单,在数字空间中导航就已经足够让人迷失方向了。

甚至熟悉这些指南的设计人员仍然可以最终创建用户忽视的菜单,因为它很难客观地评价自己的工作-特别是对于主观标准,如某物是否可见。如果你知道它在哪里(因为你把它放在那里),那么你当然可以看到它!这就是为什么它如此重要测试你的菜单与用户。

传达当前位置

  1. 告诉用户当前可见屏幕位于菜单选项中的“何处”。”我在哪里?是用户成功导航时需要回答的基本问题之一。用户依赖于菜单(和其他导航元素,例如面包屑)回答这个关键的问题。未指示当前位置可能是我们在网站菜单上看到的最常见错误。具有讽刺意味的是,这些菜单最需要定位用户,因为游客经常不要从主页进入

协调用户任务的菜单

  1. 使用可理解的链接标签。弄清楚用户正在寻找和使用熟悉和相关的类别标签。菜单用自己编的词和内部行话让自己变得可爱的地方。坚持使用能够清楚描述你的内容和功能的术语。
  2. 使链接标签易于扫描。你可以减少用户阅读菜单所需的时间对齐垂直菜单并通过前装的关键术语
  3. 对于大型网站,使用菜单让用户预览较低级别的内容。如果典型的用户旅程需要深入几个层次,Mega-menus.(或传统下拉菜单)可以让用户跳过一两个关卡,从而节省时间。
  4. 为局部导航菜单提供密切相关的内容。如果人们经常想要在单个部分中完成相关的产品或完成多个任务,请使附近的页面与本地导航菜单可见,而不是强迫人们“弹簧单高跷'上下你的层次结构。
  5. 杠杆视觉传播。帮助用户理解菜单选项的图像、图形或颜色可以帮助理解。但确保图像支持用户任务(或者至少不要让任务变得更困难)。

让它易于操作

  1. 使菜单链接足够大,便于点击或点击。太小或太近的链接是移动用户的巨大挫折来源,并且还使大屏幕设计不必要地难以使用。
  2. 确保下落不太小或太大。悬停激活的下落,太短地迅速成为挫折的运动,因为他们往往会消失当你试图将鼠标移到它们上面点击链接时。另一方面,太长的垂直下拉菜单会让访问靠近列表底部的链接变得困难,因为它们可能会在屏幕边缘以下被截断,需要滚动。最后,太宽的悬停下拉框很容易被误认为是新页面,让用户困惑为什么页面在他们没有点击任何东西的情况下似乎已经改变了。
  3. 考虑“粘性”长页的菜单。已经到达一个长页底部的用户可能面临很多繁琐的滚动,然后才能回到顶部的菜单。即使在滚动后,仍然可以解决这种问题,也可以在较小的屏幕上解决这个问题而在视口之上看到的菜单。
  4. 优化以容易地物理访问常用命令。对于下拉菜单,这意味着将最常见的项目放在启动下拉菜单的链接目标附近(这样用户的鼠标或手指就不用移动那么远了。最近,一些手机应用程序甚至开始恢复派菜单,将所有菜单选项排列成圆形(或半圆形),放在附近。

具有创新和有趣的菜单交互方法的“哇”用户

实际上…不。

尝试用很酷的效果给你的用户留下深刻印象创建菜单时是您的优先事项之一。其他设计人员可能会被新颖的菜单设计印象深刻,但用户往往对被熟悉的菜单吸引并轻松访问的巨大内容留下更深刻的印象。

当然有时新型菜单可以改善用户体验。(Mega-Menus是这种现象的一个很好的例子。)或者,有时新技术是如此不同,即一些这些指导方针不适用 - 例如,视觉权重指导与语音识别系统无关。但这些情况很少,距离这些情况很少,如果他们坚持这些原则,大多数接口都会更容易使用。

(了解更多关于我们的更多关于菜单全日制导航设计课程。)