菜单 关闭

下拉:设计指南

通过 安吉李2017年6月11日

简介:下拉框和菜单是过度使用和笨重,但可以用于显示选项或命令的列表。


下拉显然有其在有效web manbetx官方网站手机版然而,他们过度使用和滥用创造了许多可用性问题和困惑设计师采用下拉用于各种不同的目的,包括:

  • Command menus,发起行动基于所选择的选项
Microsoft Word用下拉菜单显示当用户点击发布命令发布 图标。
  • 导航菜单,用户一个新的位置
哈佛使用下拉菜单提供一个链接列表,每个顶级类别的子类别。
  • 表格填满,它可以让用户选择一个选项来进入一个表单字段
森尼维耳市。ca.gov:这种形式下拉允许用户选择一个使用建筑类型
  • 属性选择,它允许用户从菜单中选择一个值可能的值
    . . /屏幕% 20枪% 202017-04-26 % % 2011.46.52 % 20 am.png 20
    Adobe颜色CC,一个工具用来收集一组颜色的RGB和十六进制值,允许用户从列表中选择一个调色板颜色规则。

虽然最初的术语“下拉框”和“下拉菜单”可以互换使用,但随着时间的功能区别两者之间出现了今天,下拉菜单主要覆盖第一个两个使用下拉(导航和命令列表),而下拉框通常选择表单填写的方法和属性的选择。

下拉框通常比下拉菜单有所不同:他们有一个下拉箭头旁边,用于选择属性或输入表单数据This control tends to be supported by a field label or a title that takes the position of the first item in the dropdown box, so that it can be seen before making a selection虽然MacOS和Windows不同的下拉实现,在这两种情况下命令菜单attribute-selection是不同的菜单事实上,麦金托什机人机界面指南explicitly recommends to not use dropdown menus for commands.

下拉的设计指南

下拉确实有自己的优势首先,他们节省屏幕空间因为他们是一个标准的部件(即使一个不愉快的),用户知道如何处理它们使用时,在形式和属性选择,下拉框阻止用户输入错误的数据,因为他们只显示法律选择。

尽管有这些优点,网络可用性会增加如果manbetx官方网站手机版人使用下拉少为此,这里有一些manbetx官方网站手机版指南下拉:

  1. 避免交互菜单,其中在一个菜单选项改变当用户选择另一个菜单在相同的页面上用户很困惑当选项来来去去,通常很难让可见时所需的选项取决于选择在不同的小部件。
    iTunes:视图 菜单包含不同的选项取决于专辑 (左)或歌曲 (右)选项被选中图书馆 侧菜单。
  2. 灰色不可用的选项而不是删除:任何东西都不能b­­e选择应该留在视图额外的用户体验,考虑显示一个简短的气球帮助信息如果用户在一个灰色的选择超过一秒,解释为什么这个选项是禁用的,如何使它活跃。

    如果禁用物品移除,失去了空间一致性和变得的接口很难学习

    屏幕捕获工具:梯度 and宽容 选项显示为灰色,表明它们不能被选择时没有填满 选择选项。
  3. 很长时间拉要求用户滚动使它不可能在一眼看到他们所有的选择他们还需要小心操纵鼠标不离开下拉(这是转向法律的一个实例,说的时间用户引导定位设备通过一个隧道的长度和宽度取决于隧道:时间越长和狭窄的隧道,就需要越多的时间用户移动指针从一端到另一个指导法律来源于费茨定律,我们讨论在我们的人机交互过程)。

    抵制诱惑尽可能包括许多项目如果你有很多项,考虑显示他们的替代方法,如传统的链接或HTML列表大型的菜单,这是二维的,而不是线性的,提供鼠标管理也更容易更快的平均到达时间项目内。

    安吉的使用下拉列表清单服务类别To see all the options, users had to scroll down several times.Users were unable to predict the end of the list because there was no scroll bar.
  4. 避免下拉框当打字可能更快。典型的情况包括州或国家的列表,比如美国邮寄地址是快得多的用户只需输入,说,“纽约”,比选择一个国家从一个滚动下拉自由格式的输入字段限制选项确实需要在后台数据验证,但是,通常从可用性的角度来看,这是最好的路要走(这是我们的一个ecommerce-usability指导原则,因为我们所观察到的许多错误付款形式与国家下拉)。
    . . /屏幕% 20枪% 202017-04-29 % % 203.41.22 % 20 pm.png 20
    Tinyprints复杂的采购过程通过使用下拉改变杯子的数量购买输入的数量会比从一个下拉选择一个快得多。
  5. 避免下拉框高度熟悉用户的数据,如天、月或他们的出生年份这些信息通常是硬连接到用户的手指,发现这些选项菜单是乏味的,打破了之前的准则,为用户甚至可以创建更多的工作。
    Live.com:创建一个帐户,用户必须输入他们的生日通过选择月,日,年久的下拉框这将是更容易输入这些信息。
  6. 保持在视图菜单标签或描述下拉时开放菜单标题提供范围和方向提醒用户他们的选择当标签被遮挡或删除菜单打开时,用户必须召回他们需要选择之前采取行动计划中断,可以随时中断用户的任务。
    . . /屏幕% 20枪% 202017-04-29 % % 203.50.18 % 20 pm.png 20
    广场站点隐藏了标签,选择业务类型 ,下拉时开放用户需要召回的标签为了理解上下文选项的下拉(我们也通常反对集中或右对齐的菜单选项,左对齐的菜单更容易扫描)。
  7. 保持全球导航选项的下拉菜单上桌面。埋葬你的网站的顶级类别可以在任何网站不利于用户成功。
    . . /屏幕% 20枪% 202017-04-29 % % 204.04.19 % 20 pm.png 20
    乔安网站特色少数顶级导航的链接,但大多数的全球导航部门 下拉菜单这manbetx官方网站手机版选择导航选项较少发现。
  8. 支持键盘输入在一个下拉导航下拉菜单(菜单和框)不仅应该支持鼠标输入,但钥匙下拉菜单,访问键应该让用户快速不使用鼠标选择一个可见的选项在一个下拉框,用户可以输入一个字母和快速浏览选项从那封信。

    这些替代选项将缓解的一些问题引起的下拉列表,同时改善可亲地盲人用户。

结论

不久前,作为介绍网络可用性方法的一部分,我们为观众经营一家小型用户测试完成注册页面时,我们的测试参与者进入她的地址在一个窗体,带有一个文本字段街的名字,但一个街道的类型(下拉菜单大道,大道,法院,开车等等)Guess what? The user typed her full street address in the text entry field, because that's what she'd always done in the past下拉菜单然后完全出人意料,她不得不回到文本字段,抹去她已经输入地址信息的一部分。

这个小研究,进行了前面的一群数以百计,表明,有时是足以与单个用户运行测试,清楚地说明一个点一旦你看到这种混乱在行动,你意识到使用“帮助”下拉菜单保存用户几个按键可以损害超过它带来的帮助遵循这些指导方针在自己的manbetx官方网站手机版来提高你的网站导航和增加成功的任务。


(这篇文章的早期版本最初公布的11月12日,2000年本文最后一次更新和修改后的6月11日,2017年)。