菜单 关闭

大型菜单对网站导航很有用

通过 雅各布·尼尔森李安琪3月26日,二千零一十七

总结:大的,矩形菜单组导航选项,以消除滚动和使用排版,图标,以及解释用户选择的工具提示。


超级菜单(有时拼写为“超级菜单”)是一种可扩展菜单其中许多选项以二维下拉布局显示。它们是一个很好的设计选择,可以容纳大量的选项manbetx官方网站手机版,或者一眼就能显示较低级别的站点页面。

如下面的截图所示,大菜单具有以下特点:

  • 大的,二维面板分为导航选项数
  • 导航选项结构化的通过布局,排版,和(有时)图标
  • 一切一目了然-不滚动
  • 垂直或水平从顶部导航栏激活时的形状因子;当从左侧导航激活时,它们可能看起来像巨型飞行(未示出)
  • 菜单选项显示在盘旋,点击,或丝锥
达维拉姆
Daveramsey.com超级菜单将内容分为五个不同的组。打开Mega菜单的用户可以快速扫描不同的类别。
屏幕%20shot%202017-03-06%20at%204.51.13%20pm.png
新斯科舍超级菜单包括宣传当地景点和活动的图片,视觉风格在这两个不同类别之间没有很好的区分。浏览列表 进一步了解 .应用不同的字体或颜色可能会使这些组不同。
GameStop.com Mega菜单很难扫描,因为选项标签没有正面加载,彼此太相似(例如,下面的标签Xbox 360预拥有 很难区分,因为它们都以单词开头预先拥有的
约翰%20lewis.png
零售商johnlewis.com使用大菜单,其中的标签很难扫描,也很难区分。
moleskine.com使用超级菜单中的图像帮助用户可视化和比较产品。

正如新斯科舍省和莫拉斯基省的例子所示,超大菜单为图像和其他丰富内容提供了足够的空间。Mega菜单中的图像可以帮助用户选择正确的选项。

超大菜单还允许设计师展示网站信息架构的多个层manbetx官方网站手机版次——在上述五个示例中,有三个(Dave Ramsey,游戏停止John Lewis)大菜单包含一级类别和二级类别。

超级菜单胜过常规下拉菜单

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

  • 对于具有许多功能的大型站点,常规下拉菜单典型地隐藏用户的大部分选项.对,你可以滚动,但(a)这是一种痛苦,(b)滚动隐藏菜单顶部的选项。因此,你不能在视觉上比较你所有的选择;你必须依靠短期记忆.人们有足够的想法,短期记忆的混乱会降低他们在你网站上完成任务的能力。超级菜单一目了然,所以用户可以看到而不是试图记住.
  • 常规下拉列表不支持分组除非你用Kludges,例如,在次要选项前加上空格字符以缩进它们。超大菜单让您直观地强调项目之间的关系。这再次帮助用户理解他们的选择。
  • 虽然纯文本可能很棒,插图真的值得一口话,如moleskine示例所示。超大菜单可以在适当的时候方便地使用图片和图标。而且,即使你一个人坚持文字,您可以使用更丰富的版式(允许您根据链接的重要性区分链接大小,例如)。

悬停时显示大菜单的计时注意事项

如果鼠标悬停时显示大菜单,一个挑战是区分两种不同的用户意图:

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

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

为了解释这两种用户意图,不要为超级菜单做响应时间快:鼠标应该静止0.5秒在显示任何与悬停相关的内容之前,例如大菜单或工具提示。违反此准则将使屏幕在用户移动鼠标时不易闪烁。只有在将指针停留在导航栏项上0.5秒后,才能假定用户实际上希望看到其关联的下拉列表。

因此,时间应为:

  1. 等待0.5秒。
  2. 如果指针仍悬停在导航栏项目上,在0.1秒内显示其超级菜单。
  3. 一直显示直到指针在导航条和下拉菜单之外0.5秒。然后,在0.1秒内将其取出。

第3项的一个例外是:当用户将指针从导航栏项移动到下拉列表中的目的地时,可以感觉到非常好的实现。当指针在这样的路径上时,下拉列表应保持可见。本补充指南阐述了对角线问题,当路径临时将指针置于活动区域之外时会发生这种情况。当用户正在指向其中某个内容时,下拉列表不应消失。

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

在上面的例子中,用户首先指向运动休闲导航栏项,现在要选择男子服饰用品.在这两个点之间移动指针,使其穿过婴儿与儿童导航栏项目。许多用户的移动速度非常快,指针将退出活动区域不到0.5秒。然而,年长或悠闲的用户可能移动鼠标的速度太慢,以至于当他们仍在瞄准菜单项时下拉列表会消失。非常讨厌。

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

主要分组指导原则是:

  • 将选项分块到相关集,比如你在做了一个卡片分类研究用户的心理模型的特征。
  • 保持中等水平粒度.不要为庞大的群体提供需要大量时间扫描的众多选项。相反地,不要让单个组太小,以至于大菜单中的组太多,用户必须花时间去理解。
  • 使用简洁,然而描述性标签每组。记住标准规则为网络写作:通过以下方式增强可扫描性从携带信息最多的单词开始避免虚构条款.
    • 言简意赅;动词的基本形式(“shop”)通常优于动名词(“shopping”)。
    • 区分标签。约翰路易斯公司礼物 按利益礼物 通过 场合,例如,一起工作不好。
  • 秩序组。您可以使用特性之间的固有顺序(如工作流)或根据重要性进行此操作,将最重要或最常用的组放在左上角(假设使用从左到右的语言,如英语)。
  • 仅显示每个选项一次.复制选项让用户怀疑这两个事件是相同的还是不同的。也,冗余使得整个接口更大,更麻烦。

保持超级菜单简单

“保持简单”的标准可用性指南也适用于大型菜单。只是因为你可以把任何东西放进去并不意味着你应该。简单性应用于交互语义,至少和应用于表示层一样多。更少的选项意味着更少的扫描,不太明白,少犯错。

特别地,避免使用GUI小部件以及其他界面元素,这些元素涉及比简单单击更高级的交互。大菜单是短暂的屏幕显示,不应取代对话框,这是更复杂互动的自然家园,可以更好地支持它们。除其他好处外,对话框具有标准的解雇方法确定/取消按钮)待在屏幕上直到他们被解雇,如果用户需要看到框中隐藏的内容,则可以四处移动。

同样的——但更糟的是——把搜索框隐藏在一个大菜单中。这是不好的,有两个原因:

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

可达性

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

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

当约翰刘易斯的网站是用网站放大镜查看,用户可能不会意识到,巨型菜单包含其他选项,不适合屏幕。

例如,在上面的johnlewis.com截图中,屏幕放大镜将显示第一组,但不显示礼品食品和酒精主题或这些群体的权利。丢失的阴影,出现在完整菜单的右边缘,对大多数用户来说,这是一个非常微妙的信号,尤其是视力差的人。用户可以假设可见内容是所有可用的内容,而且,因此,如果网站有很多低视力的客户,它可能会失去订单(网站的常见情况针对老用户)对于菜单边框具有强大的视觉信号是缓解此问题的一种方法。

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

有两种主要的方法来提高超级菜单的可访问性:

  • 简单的:不要费心让下拉列表本身可以访问。相反,使每个顶级菜单选项都可单击,引导到常规网页如果您以普通格式显示所有下拉选项,完全可访问的HTML。
  • 先进的:使用jquery插件从后端编辑站点,该插件将使Mega菜单屏幕阅读器可访问。这还需要对HTML和CSS进行结构更改。

如果你是一个富有的公司和/或特别关注可达性,您应该实现简单和高级功能。大多数网站,然而,可能需要用简单的方法。

结论

大菜单可以提高网站的导航性。(当然,最好是测试。)通过帮助用户找到更多,他们会帮你的更多(或满足其他业务目标,如吸引捐款或传播有用信息非营利或政府网站

参见:文章关于设计不当的大型菜单的缺点manbetx官方网站手机版.


(本文的早期版本最初于3月23日出版,2009。文章最后一次更新和修订是在3月26日。2017)