Mega菜单(有时拼写“Megamenus”)是一种类型可扩展菜单其中许多选择以二维下拉布局显示。它们是适应大量选项或透露下级别网站的优秀设计选择。

作为下面的截图显示,Mega菜单具有以下特点:

  • 大,二维板被分成团体导航选项
  • 导航选择结构化的通过布局,排版和(有时)图标
  • 一切一次可见- 没有滚动
  • 垂直或水平从顶部导航栏激活时的形成因素;从左侧导航激活时,它们可能会出现巨型飞行(未显示)
  • 菜单选项显示悬停,单击或点击
Daveramsey.png.
Daveramsey.com Mega Menu将内容分成五个不同的组。打开Mega菜单的用户可以快速扫描不同的类别。
筛选%20shot%202017-03-06%20at%204.51.13%20 pm.png
Nova Scotia Mega菜单包括图像推广当地景点和活动,视觉造型在两个不同的类别之间没有区分,浏览列表学习更多关于。应用不同的字体面或颜色可能使这些群体不同。
GameStop.com Mega菜单很难扫描,因为选项标签未被载入并彼此相似(例如,标签Xbox 360预先拥有很难区分,因为它们都从这个词开始二手)。
约翰%20LEWIS.PNG.
零售商johnlewis.com使用了难以扫描的标签的Mega Menus,并彼此区分。
Moleskine.com在Mega菜单中使用了图像,以帮助用户可视化和比较产品。

作为Novascototia和Moleskine的例子,Mega菜单为图像和其他丰富的内容提供了足够的空间。Mega菜单中的图像可以帮助用户选择正确的选项。

Mega Menus还允许设计人员显示本网站的多个级别的信息架构 - 在上面的五个例子中的三个中(Dave Ramsey,Game Stog,John Lewis),Mega菜单包含第一级别类别和二级类别。

Mega菜单击败了正常下降

我们从用户测试中知道Mega菜单工作。以下是支持这一经验事实的一些论据:

  • 对于具有许多功能的更大网站,定期下拉菜单通常隐藏大多数用户的选项。是的,您可以滚动,但(a)这是一个痛苦,(b)滚动隐藏菜单顶部的选项。因此,您无法在视觉上比较所有的选择;你必须依靠短期记忆。人们在他们的脑海中有足够的,并且短期记忆弄乱了他们在你网站上完成任务的能力。Mega菜单一目了然地显示一切,所以用户可以看,而不是试图记住
  • 定期下降不支持分组除非您使用Kludges,例如使用空格字符的前缀辅助选择来缩进它们。Mega Menus让您在视觉上强调物品之间的关系。这再次帮助用户了解他们的选择。
  • 虽然纯文本可能很精彩,但插图当Moleskine的例子所示时,确实值得一口话。Mega菜单可以在适当时轻松使用图片和图标。而且,即使您坚持单独发短信,您可以使用更丰富的排版(例如,根据其重要性,您可以使用差异化链接尺寸)。

悬停上显示的Mega菜单的时间考虑因素

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

  1. 用户刚刚将鼠标移动到屏幕上的目标,鼠标轨迹与Mega菜单相对应的链路相交。
  2. 用户实际上看着导航类别,需要有关它们的更多信息。

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

要考虑这两个用户意图,请不要为Mega菜单进行响应时间快:鼠标应该保持静止0.5秒在显示任何悬停依赖的内容之前,例如Mega菜单或工具提示。违反此指南将使屏幕闪烁,当用户移动鼠标时,屏幕闪烁。只有在Navbar项目上休息指针的0.5秒后,您只能假设用户实际上想要看到其相关的下拉列表。

因此,时间应该是:

  1. 等待0.5秒。
  2. 如果指针仍在悬停在纳瓦栏项上,则在0.1秒内显示其Mega菜单。
  3. 继续显示它,直到指针在Navbar项目之外,下拉栏0.5秒。然后,在小于0.1秒钟内将其拆下。

第3项的一个例外:最佳实现可以感知用户从导航栏项目移动到下拉内的目的地。当指针在这样的路径上时,将保持下拉条件。本补充指南解决了对角线问题,当路径临时占用活动区域外的指针时会发生这种情况。当用户正在指向其中的某些内容时,下降不应消失。

对角线问题:指针路径在保持下拉目的区域之外。

在上面的例子中,用户首先指向运动&休闲Navbar项目,现在想要选择Haberdashery.。在这两个斑点之间移动指针使它越过宝贝和孩子纳瓦栏项目。许多用户将如此迅速移动,指针将退出活动区域小于0.5秒。然而,旧的或悠闲的用户可能会如此缓慢地移动鼠标,即在它们仍然针对菜单项时,下拉会消失。很烦人。

将选项分组在Mega菜单中

主要分组指南是:

  • 块选择进入相关集合,比如那些在做一个后发现的人卡排序研究用户的用户心理模型。
  • 保持中等水平粒度。不要提供具有许多需要广泛扫描的选项的庞大群体。相反,不要让个体群体如此之小,以至于Mega菜单具有过多的群体,用户必须花时间理解。
  • 使用简洁描述性标签对于每组。记住标准规则写作网络:增强Scannability从携带最具信息的单词开始避免制作条款
    • 保持短语和直接;动词的基础形式(“商店”)通常比Gerunds更好(“购物”)。
    • 分辨标签。johnlewis.com的礼品兴趣礼品通过场合例如,不要很好地工作。
  • 订购群体。您可以使用功能中的固有顺序(如工作流程)或根据重要性来执行此操作,将最重要或常用的组放在左上角(假设左右语言如英语)。
  • 只显示每种选择一次复制选项让用户想知道这两次是否相同或不同。此外,冗余使整个界面更大,更繁琐。

保持巨型菜单简单

“保持简单”的标准可用性指南也适用于Mega菜单。只是因为你能够把任何东西放入他们并不意味着你应该。简单性至少适用于交互语义,至少与它适用于演示层一样。较少的选项意味着扫描较少,更少理解,少得错。

特别是,避免GUI小部件和其他界面元素涉及比简单的单击更高级的交互。Mega Menus是一个短暂的屏幕存在,不应该取代对话框,这些对话框是更复杂的互动的自然家,可以更好地支持它们。在其他好处之外,对话框具有标准解雇方法(OK /取消按钮),留在屏幕上,直到它们被驳回,如果用户需要看到盒子模糊的东西,可以移动。

同样 - 但更糟糕的是 - 隐藏了Mega菜单中的搜索框。这有两个原因:

  • 搜索框应不断可见在页面上而不是仅在用户激活Mega菜单时显示。
  • 具有GUI小部件(文本字段和命令按钮)使MEGA菜单成为重量级交互区域而不是简单的导航菜单。

无障碍

因为动态屏幕元素始终有可能导致可访问性问题,所以请用屏幕读者和其他辅助技术编写它们是很重要的。

即使正确编码,Mega菜单也会对使用屏幕放大器扩大屏幕的微小部分的低视网膜用户来引起问题。(同样的问题会影响智能手机和平板电脑用户。)使用小屏幕或屏幕放大镜,只有一小部分Mega菜单可能会看到。

何时使用站点放大镜观看John Lewis的网站,用户可能无法意识到Mega菜单包含不适合屏幕的其他选项。

例如,在johnlewis.com截图上面,屏幕放大镜将显示第一组,但不是礼品食品和酒精主题或本集团的权利。丢失的丢弃阴影,出现在完整菜单的右边缘上,太微妙了一个信号,以帮助大多数用户,特别是愿景不佳的用户。用户可能会假设可见的内容是所有可用的内容,因此,如果它有许多低愿望客户(网站的常见情况,则该网站可能会失去订单针对老用户)。为菜单边界具有强大的视觉信号是一种缓解此问题的一种方法。

此外,Mega菜单内的微小选项导致触摸屏的选择错误,而过于挑战的展示/隐藏行为伤害了运动技能损伤的人。

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

  • 简单:不要打扰下拉目本身可以访问。相反,使每个顶级菜单选择可点击,导致常规网页您在哪里呈现普通,完全可访问的HTML中的所有下拉选项。
  • 高级:使用jQuery插件从后端编辑站点,该插件将使Mega菜单屏幕阅读器可访问。这还需要对HTML和CSS的结构变化。

如果您是丰富的公司和/或特别关注可访问性,您应该实现简单和高级功能。然而,大多数网站可能必须与简单的方法做出。

结论

Mega Menus可能会改善您网站的导航性。(当然,它总是最好测试。)通过帮助用户更多,他们会帮助你更多(或满足其他业务目标,如吸引捐款或传播有用的信息非营利组织或政府网站)。

也可以看看:文章关于设计不良的巨型菜单