正确使用下拉菜单很好,可以帮助用户缩小选择范围,逆向屏幕空间,防止错误数据输入。然而,在某些情况下,下拉菜单并不重要,对用户体验有负面影响。
重要的是要知道何时使用下拉菜单或其他界面元素,如无线电按钮、开放文本字段等,而过度使用或滥用这些元素会导致可用性问题。
在本文中,我将讨论Web下拉菜单的性质,并分析应该或不应该使用它们。我还将展示一些不好的例子来帮助你设计。
一:不要使用下拉过长的列表
使用表单下拉菜单看起来很容易——它们在界面上没有太多空间,所有浏览器都支持它们,用户对它们有足够的了解。然而,当选项超过15时,用户可能会被淹没,他们无法导航。
看到超过20个非分类选项可能令人困惑和畏惧,而且用户很难找到他们想要的输入;还有一个滚动问题,用户必须将光标保留在下拉框中,否则他们最终会滚动页面。
Web下拉列表最经典的例子是National选择器,通常有100多个选项。虽然它通常按字母顺序排列,但有时它被放在流行的国家/地区的顶端,这可能会使用户感到困惑。
更好的选择是使用自动完成的文本字段,因为用户已经知道他们在寻找什么输入。
自定义搜索输入
二:选项不要太少
另一方面,如果选项太少,下拉菜单将是一个不好的选择,因为它通过隐藏可能已经暴露的信息,给用户流带来不必要的摩擦。
一个更好的选择是使用一个无线电按钮,使用户可以立即扫描可用的选项,而不需要任何努力。
如果你没有什么选择,你最好用收音机盒,而不是下拉菜单
三:禁用灰色选项
当一个选项被禁用或不可用时,它应该显示为灰色而不是删除。如果删除了残疾项目,界面就会失去空间一致性,使用户更难学习——因为残疾项目,他们可能找不到某些选项。
与其删除残疾选项,不如将其灰色化以表示残疾或不可用状态。您还可以考虑显示工具提示,以说明为什么禁用该选项以及它如何被激活。
取代删除残疾选项,用灰色表示残疾状态
四:在输入更快时避免下拉菜单
在某些情况下,输入可能比使用网页下拉菜单快。典型的情况是信用卡有效时。在网站上输入mm/yy肯定比从下拉菜单(月和年)滚动快得多。
虽然它确实需要某种形式的数据验证来使用自由表单输入字段,但从可用性的角度来看,它仍然是一个更好的选择,因为它减少了用户的负担。
对于用户来说,输入可能更快,并且避免使用下拉菜单。
五:避免过度使用
当某些数据或信息可以自动导出时,就不需要一直向用户要求输入。
这方面的一个例子是在结帐过程中使用的卡片类型字段,它根据信用卡号码的少数数来确定卡片的类型,因此要求用户选择卡片本身的类型会造成额外的麻烦。
不要养成在其他地方可以找到数据时添加新输入字段的习惯。
六:减少操作次数
您可以自定义站点下拉菜单部分,以减少操作的次数。
一个经典的例子是日期选择字段,如果使用常规列表菜单,需要三个Web下拉菜单(月、日和年),这对用户来说是很烦人的。
更好的选项是自定义菜单组件,允许用户在网站上只选择一个下拉菜单的输入。
使用自定义菜单来减少所需操作的数量。
七:使用简单明确的标签
用户根据他们的标签选择菜单选项,因此准确和信息是很重要的。通常,最好使用句子大小和写简明的标签清楚地表明选择的目的。
以下是一些标签准则:
对于动作菜单项,使用动词描述要发生的动作
对于链接,使用名词来标识用户要针对的页面
删除菜单项中的文章;使用删除页而不是删除页
将菜单项保存在一行文本中
通过按照逻辑顺序排序列表来组织菜单项也很重要——如果你知道的话,在顶部排列最多的选项。这需要用户随着时间的推移进行研究、测试和改进,以重新评估结果。