菜单

Mega Menus适用于网站导航

通过 雅各布尼尔森安吉莉2017年3月26日

摘要:大型矩形菜单组导航选项可消除滚动并使用排版,图标和工具提示来解释用户的选择。


超级菜单(有时拼写为“megamenus”)是一种类型可扩展的菜单其中许多选项以二维下拉布局显示它们是一个优秀的manbetx官方网站手机版选择,可以容纳大量选项或一目了然地显示较低级别的网站页面。

如下面的屏幕截图所示,超级菜单具有以下特征:

  • Big, two-dimensional panels divided into groups 导航选项
  • Navigation choices structured 通过布局,排版和(有时)图标
  • Everything visible at once - 没有滚动
  • Vertical or horizontal form factors when activated from top navigation bars; when activated from left-hand navigation, they might appear as mega fly-outs (未显示)
  • 显示的菜单选项悬停,点击或点按
daveramsey.png
DaveRamsey.com巨型菜单将内容分为五个不同的组打开超级菜单的用户可以快速扫描不同的类别。
屏幕%20Shot%202017-03-06%20AT%204.51.13%20 PM.png
The Nova Scotia mega menu included images promoting local attractions and activities The visual styling did not differentiate well between the two distinct groups of categories, Browse listings  and 学习更多关于 应用不同的字体或颜色可能会使这些组区别开来。
The GameStop.com mega menu was hard to scan because the option labels were not frontloaded and were too similar to one another (e.g., the labels under XBOX 360 Pre-Owned  are hard to differentiate because they all start with the word 二手 )。
约翰%20Lewis.png
零售商JohnLewis.com使用大型菜单,标签难以扫描并相互区分。
Moleskine.com使用巨型菜单中的图像来帮助用户可视化和比较产品。

As the NovaScotia and Moleskine examples show, mega menus provide sufficient space for images and other rich content巨型菜单中的图像可以帮助用户选择正确的选项。

Mega menus also allow manbetx官方网站手机版ers to show multiple levels of the site’s information architecture — in three out of the five examples above (Dave Ramsey, Game Stop, John Lewis), the mega menus contain both first-level categories and second-level categories.

Mega Menus Beat Regular Dropdown

我们从用户测试中了解到大型菜单的工作原理以下是支持这一经验事实的一些论据:

  • 对于具有许多功能的大型网站,常规下拉菜单typically 隐藏大部分用户的选项是的,你可以滚动,但是(a)这很痛苦,(b)滚动隐藏菜单顶部的选项As a result, you can't visually compare all your choices; you have to rely on 短期记忆人们有足够的思想,搞乱短期记忆会降低他们在你网站上完成任务的能力Mega menus show everything at a glance, so users can 看而不是试图记住
  • Regular dropdowns don't support grouping 除非你使用kludges,例如用空格字符作为辅助选项的前缀来缩进它们超级菜单让您在视觉上强调项目之间的关系这再次帮助用户了解他们的选择。
  • While plain text can be wonderful, illustrations 正如Moleskine的例子所示,确实值得一试超级菜单可以在适当的时候轻松使用图片和图标而且,即使您单独坚持使用文本,您也可以使用更丰富的排版(例如,可以根据其重要性区分链接大小)。

悬停时显示的Mega菜单的时序注意事项

如果在悬停时显示巨型菜单,则一个挑战是区分两个不同的用户意图:

  1. 用户只是将鼠标移向屏幕上的目标,并且鼠标轨迹与对应于巨型菜单的链接相交。
  2. 用户实际查看导航类别并需要有关它们的更多信息。

第二种情况应该触发大型菜单,但第一种情况不应该。

为了解释这两个用户的意图,请不要为大型菜单做出响应时间too fast: the mouse should remain stationary for 0.5 seconds 在显示任何依赖悬停的内容之前,例如大型菜单或工具提示违反此指南将使用户移动鼠标时屏幕闪烁不可避免Only after 0.5 seconds of resting the pointer on a navbar item can you assume that a user actually wants to see its associated dropdown.

因此,时间应该是:

  1. 等0.5秒。
  2. 如果指针仍悬停在导航栏项目上,则在0.1秒内显示其超级菜单。
  3. 继续显示它,直到指针在导航栏项目和下拉列表之外0.5秒然后,在不到0.1秒的时间内将其取出。

第3项的一个例外:最佳实现可以感知用户何时将指针从导航栏项移动到下拉列表中的目标当指针位于这样的路径上时,下拉列表应保持可见This supplementary guideline addresses the 对角线问题当路径暂时将指针移到活动区域之外时会发生这种情况当用户正在指向其中的某些内容时,下拉列表不应消失。

对角线问题:指针路径超出了保持下拉列表活动的区域。

在上面的例子中,用户首先指向了运动休闲导航栏项目,现在想要选择小百货在这两个点之间移动指针使它越过婴儿和儿童导航栏项目许多用户移动速度太快,指针将退出活动区域不到0.5秒但是,老年人或悠闲用户可能会慢慢移动鼠标,以至于当他们仍然瞄准菜单项时,下拉列表会消失很烦人。

在Mega菜单中对选项进行分组

主要的分组指导方针是:

  • Chunk options into 相关集, such as those you discover after doing a 卡片分类研究 of users' mental model of the features.
  • Keep a medium level of 粒度不要为需要大量时间扫描的众多选项提供庞大的群体相反,不要让个别群体变得如此之小,以至于大型菜单中存在过多的群体,用户必须花时间了解这些群体。
  • Use concise, yet descriptive labels 对于每个小组Remember the standard rules for 为网络写作:增强可扫描性从最有信息的词开始and 避免虚构条款
    • To keep words short and direct; the base form of verbs ("shop") is usually better than gerunds ("shopping").
    • 区分标签JohnLewis.com的礼品 兴趣礼品 通过 场合例如,不能很好地协同工作。
  • Order 这些团体您可以使用功能之间的固有顺序(如工作流程)或根据重要性,将最重要或经常使用的组放在左上角(假设从左到右的语言,如英语)。
  • 仅显示每个选项一次复制选项让用户想知道两次出现是相同还是不同此外,冗余使整个界面更大,更麻烦。

保持Mega Menus简单

“保持简单”的标准可用性指南也适用于大型菜单Just because you can 把任何东西放进去并不意味着你应该简单性适用于交互语义,至少应用于表示层更少的选项意味着更少的扫描,更少的理解,更少的错误。

In particular, avoid GUI widgets 以及涉及比简单点击更高级交互的其他界面元素超级菜单是一个短暂的屏幕存在,不应取代对话框,这是更复杂的交互的自然家园,可以更好地支持他们Among other benefits, dialog boxes have a standard dismissal method (the 确定/取消按钮),留在屏幕上,直到他们被解雇,如果用户需要看到盒子遮挡的东西,可以四处移动。

同样 - 但更糟糕的是 - 将搜索框隐藏在一个巨型菜单中这有两个原因:

  • The 搜索框应该是连续可见的 on the page rather than displayed only when users activate the mega menu.
  • 具有GUI小部件(文本字段和命令按钮)使得大型菜单成为重量级交互区域而不是简单的导航菜单。

无障碍

由于动态屏幕元素总是有可能导致可访问性问题,因此使用屏幕阅读器和其他辅助技术对它们进行编码非常重要。

即使编码正确,超级菜单也会给使用屏幕放大镜放大屏幕微小部分的低视力用户带来问题(同样的问题会影响智能手机和平板电脑用户。)使用小屏幕或屏幕放大镜时,只有一小部分菜单可见。

当使用站点放大镜查看John Lewis的站点时,用户可能没有意识到mega菜单包含其他不适合屏幕的选项。

例如,在上面的JohnLewis.com截图中,屏幕放大镜将显示第一组但不显示礼品食品和酒精主题或这些群体的权利缺少的阴影出现在整个菜单的右边缘,是一个太微妙的信号,无法帮助大多数用户,特别是视力不佳的用户Users may assume that the visible content is all the content that is available, and, thus, the site could lose orders if it had many low-vision customers (a common situation for sites 定位旧用户)具有强大的菜单边框视觉信号是缓解此问题的一种方法。

此外,巨型菜单中的微小选项会导致触摸屏上的选择错误,而过于挑剔的显示/隐藏行为会伤害运动技能受损的人。

有两种主要方法可以改善大型菜单的可访问性:

  • 简单:不要打扰让下拉本身可访问Instead, make each top-level menu choice clickable, leading to a regular Web page where you present all dropdown options in plain, fully accessible HTML.
  • 高级:使用jQuery插件从后端编辑网站,这将使大型菜单屏幕阅读器可访问这还需要对HTML和CSS进行结构更改。

如果您是一家富有的公司和/或特别关注可访问性,那么您应该实现简单和高级功能然而,大多数网站可能不得不采用简单的方法。

结论

超级菜单可以改善您网站的导航性(当然,最好测试一下。)通过帮助用户 find more, they'll help you sell more (or meet other business goals, such as 吸引捐款 or disseminating helpful information for 非营利组织或政府网站)。

也可以看看:关于的文章badly-manbetx官方网站手机版ed mega菜单的缺点


(本文的早期版本最初发布于2009年3月23日该文章最后更新和修订于2017年3月26日。)