菜单 关闭

不要使用分割按钮导航菜单

通过 Raluca Budiu6月25日二千零一十七

总结:菜单在徘徊,类别的着陆页点击:我们讨论的挑战和解决方案复制这种模式在触摸屏上。。


桌面网站丰富的信息架构通常同时使用大型的菜单类别登陆页面实现导航。超级菜单通常呈现一组子类为主要导航选项,而类别着陆页面包含这些子类别的列表以及用于更好地为用户定义类别的附加内容。。

诺德斯特姆。com:用鼠标悬停女性 类别暴露了大型菜单(左)与相关的子类。点击同一个标签会导致类别登陆页面(右),其中包括一个女性 子类加上附加内容。。

在许多的桌面设计,manbetx官方网站手机版,用鼠标悬停在一个主要类别往往暴露了菜单,而单击类别需要用户类别的着陆页。但悬停姿态没有触摸屏,因此设manbetx官方网站手机版计师必须解决这种不对称规模导航ui时工作在许多设备。。

再次重申,触摸屏上的挑战是,允许用户访问类别着陆页和菜单的环境中,用户可用一个手势是:水龙头。。

用于导航的分割按钮

分割按钮熟悉了桌面应用程序的UI元素设计师;manbetx官方网站手机版它本质上是在一个里面有两个按钮。分割按钮包含一个标签和一个图形元素(多数情况下,一个向下的三角形或“箭头”):单击标签通常执行一个默认的,频繁的动作,单击箭头显示下拉与一组选择,行动。例如,在微软Word中,下划线按钮是一个分割按钮:点击标签U凸显了文本,并单击箭头允许您选择一个突显出不同的风格。。

微软Word中的三个按钮:前两个是更改字体样式的图标,第三个是一个分割按钮。点击标签强调当前的选择,当单击箭头显示下划线的列表选项。。

这种设计工manbetx官方网站手机版作相当好。应用程序。即使新手可能不明白分割按钮之间的区别和普通按钮,当他们继续使用应用程序时,他们最终会学会它。另外,如果应用程序设计得很好,并且与按钮标签相关联的默认操作manbetx官方网站手机版被很好地选择,大多数用户可能永远不会需要选择下拉菜单中提供。例如,普通下划线的使用量大大超过双打或点画下划线,所以强调在Microsoft Word的按钮将满足这些用户没有发现这是一个分裂的按钮。。

在这个简短的绕道了桌面应用程序设计的世界里,manbetx官方网站手机版让我们回到最初的问题:提供类别登陆页面和大型菜单没有徘徊。似乎分割按钮为这个问题提供了一个理想的解决方案:毕竟,他们允许设计者提供两个manbetx官方网站手机版功能在相同的设计元素。事实上,这正是不少网站使用的解决方案。。

例如,在库比蒂诺市的移动版本响应性网站,使用主导航菜单中的箭头扩展该类别,同时利用标签需要人类别的着陆页。(菜单内的移动站点包含明确的指示,提醒用户有这种行为。这样的教学文本通常是一个警告信号,可能存在可用性问题。)

库比蒂诺。org:敲击业务 主导航菜单中的类别将用户带到类别登陆页面,同时利用相应的箭头暴露子类业务 。(还要注意教学文本的顶部导航菜单。)
拉丁语。com:利用导航菜单内的分类标签导致类别的着陆页,同时利用滚动箭头展开一个手风琴。注意,La Times使用此解决方案用于所有屏幕尺寸,包括桌面。。

为什么分割按钮不适用于导航

不幸的是,分割按钮不是解决类别着陆页和菜单都可用问题的好方法。有几个原因:

  • 用户不熟悉导航键分开。这种模式在网络上是罕见的,人们不要指望菜单标签做两个不同的事情。此外,在许多移动实现(就像在上面的洛杉矶时报和库比蒂诺市的例子),分割按钮看起来像手风琴一样:一个标准的UI元素和知名的行为。没有理由期望一个特定实例的行为不同于其他网站。。

    即使最终桌面应用程序的用户学习使用分割按钮,大多数网站没有重复使用的相同级别,因此,如果你的网站是使用这种模式的少数网站之一,那么人们就不会发现它。。

    使分割按钮更多的发现,有些网站在菜单标签和箭头之间使用分界,世界上的坦克截图。虽然这似乎是一个合理的解决方案,由于胖手指问题,这两个目标(菜单标签和箭头)对于触摸屏使用来说太接近了。。

WorldofTanks。com:在导航栏中,一些主要类别(游戏) ,,宗族 ,,媒体 ,,社区) 是分割按钮,与标签导致相应类别着陆页,和箭头扩大下拉菜单。双功能由立式分离器暗示视觉和标签之间的箭头。不幸的是,触摸屏上的两个目标太近,不能可靠地选择。。

通过添加显式的指令文本(如上面Cupertino城的示例)来提高可发现性也不起作用:大多数用户不费心阅读菜单内的说明。毕竟,他们已经看到数以百计的菜单和知道如何使用它们!!

  • 分割按钮使界面看起来不可预测的。上面我们已经建立,用户不希望标签和相应的箭头(以同样的方式,有不同的行为他们不期望移动比相关的标签图标来做其他的事情)。尽管如此,您可能认为,如果人们没有发现这些按钮的双重功能,就不会有任何危害。大多数时候类别登陆页面和菜单包含大致相同的信息,和去任何一个可能会不够好。。

    错了!虽然用户可能能够达到他们的目标他们是否使用菜单或类别的着陆页,他们会非常不满,当网站不会按预期的行为。触控手势时,用户很少有精确的或一致的:有时他们会点击箭头,有时点击标签,寻找相同的结果。如果接口不同的东西后的两个实例(看似)相同的用户操作,似乎将车和不稳定。。

  • 触摸屏接近目标很难达到。即使人们公认的分割按钮在导航栏,机会是,他们无法可靠地选择两个函数在一个触摸屏。而在鼠标驱动接口分割按钮可能是相当有用的,它太容易了错误不小心点击错了,当标签和箭头太接近对方。。

使用什么而不是分割按钮?吗?

如果分割按钮是有问题的,设计师应该如何支持触摸屏manbetx官方网站手机版上的登陆页面和菜单的访问?这里有几个选择:

  • 利用一个主要类别公开菜单,但是访问类别着陆页删除在触摸屏上。类别的着陆页包含重要信息,还是只是复制的内容菜单吗?诺德斯特姆的例子从一开始的文章,类别的着陆页并没有带来任何额外不在网站上的内容。在这样的情况下,是好的不包括一个方法来访问这个页面的导航菜单触摸屏设备。(该链接可能是站点上可用的其他地方。)

    注意,我们不推荐的对应解决方案,这是触摸屏上删除访问菜单。在理论上,当用户点击类别项时,他们可能只是带到类别的着陆页。从那里,他们可以选择感兴趣的子类别。虽然这种模式在网络上遇到(见下面美国肺脏协会例子),我们通常不建议使用,因为它大大减慢网站导航:每次人点击一个主要类别,他们将不得不等待相应类别的着陆页加载之前能够选择一个感兴趣的子类别。。

    Lung。org:徘徊在一个类别在顶部导航栏公开相应的菜单。此菜单无法在触摸屏上访问。相反,利用类别时,用户被带到类别登陆页面。。
  • 利用一个主要类别公开菜单;访问类别登陆页面,提供一个链接到菜单里面。。 这种设计允manbetx官方网站手机版许用户在所有设备上访问类别的着陆页。。

    这是在HBO的网站采用的解决方案。鼠标驱动装置,用户可以悬停在主类别查看子分类的列表,也可以点击他们去类别的着陆页。触屏平板电脑,轻敲主导航栏中的条目,只需简单地显示菜单,允许用户查看子分类站点的任何地方。部分的主仍可以通过一个单独的链接菜单中可用。。

    HBO。com:在桌面,悬停在一个主要导航等类别体育 显示相应的子类别。点击类别会导致该部分的登陆页面。在触摸屏上,敲击一个主要类别会暴露菜单。桌面和平板电脑,类别可以通过访问登录页面链接标记体育之家 在菜单里面。。

    这种模式的一个优点是,设计师可以摆脱徘徊在桌面(显示菜单上点击相反),可以使manbetx官方网站手机版用一个鼠标和触摸屏设备的设计。(桌面上的悬停也有问题),例如,用户可以在屏幕上移动鼠标时意外地触发菜单,或者他们可能意外关闭菜单,因为他们试图达到一个项目里面。)

    如果你使用这种模式,确保导致的链接类别的着陆页都有一个描述性的名称等所有运动查看所有,避免简单地调用它(因为这个名字通常是为网站的主页保留的)。。

  • 使用两个水龙头:首先为菜单,第二类登陆页面。。第三个解决方案是使用越来越多,成为联系的新标准的好机会。当用户第一次点击一个主要类别,他们看到了子菜单;当他们再次利用,他们被分类的着陆页。(这个交互方式非常类似于使用双击鼠标驱动用户界面,它工作得相当好。)
    三角洲。在平板电脑上,利用一次上与我们同行 扩大显示一个下拉菜单;再次敲击将用户带到类别登陆页面。。

    这个设计模manbetx官方网站手机版式是一个很好的例子,一个模式:相同的输入(利用一个类别)产生两种不同的输出取决于系统的状态(它已经扩展菜单如果菜单没有扩大,或者它加载类的着陆页如果菜单扩展)。。

    然而,尽管它的受欢迎程度,这个解决方案有一些缺陷:

    • 缺乏可发现性:用户可能没有意识到,他们可以访问类的着陆页再次利用相同的主要类别。。
    • 冲突与另一个触摸屏模式:利用开放的标签菜单通常关闭菜单。用户将心烦意乱,如果而不是解雇菜单,他们需要等待网站下载一个类别的着陆页,他们不想。。

结论

如果您正在努力使类别着陆页和相应的子类别在触摸屏设备上可用,不要去分割菜单按钮。而解决方案看起来优雅,在触摸屏上它不工作好。相反,你有三个可行的替代方案。的首选和最直接的一个涉及包括内部链接类别的着陆页相关的菜单。或者,在主类别的第一个轻击上显示菜单,然后在第二个轻击加载类别着陆页面。最后但并非最不重要,如果类别着陆页菜单是多余的,您可以删除访问触摸屏。。

幕后故事

本文的想法的灵感来自于BBC体育网站:利用部分菜单,网站有时公开菜单内容,有时需要用户的体育 无所不包的页。我们最初认为这种行为是分裂菜单的一个例子,图标扩展菜单和标签链接到类别页面。然而这种行为似乎很不稳定,有时点击标签实际上扩展菜单。我们不确定目前的设计包含一个错误或者是有意为之,manbetx官方网站手机版但是,如果所有运动的确是一个分裂的菜单,菜单我们强烈建议反对复制它。。

英国广播公司体育:点击菜单图标有时会暴露菜单,有时会把用户带到体育无所不包的 页。。