下拉菜单为何是一种不好的用户体验?

本文讲的是下拉菜单为何是一种不好的用户体验?,

一个完全不合理的行业标准

随着在用户界面和可用性方面的研究,尤其在用户输入表单上,我越来越意识到一个事实那就是下拉列表的用户体验几乎总是不好的。

下拉列表经常用于有多个选项,只允许用户选择一个的时候。它和单选按钮的效用相同。使用它而不使用单选按钮的理由,是因为它占用更少的空间,但是我已经陈述过了我们不再需要节省网页上的垂直方向上的空间

下拉列表有一个很大的问题,那就是用户不能直接看到所有选项,而是需要点击查看所有的选项,然后浏览一遍,然后才能做出一个选择。当用户在大多数输入表单上使用键盘时,下拉列表的体验是特别不好的。

下面是一些替代下拉列表的可选方案:

1. 用多个单选按钮替换下拉列表

这些选项应该直接出现在视野中,而不是在用户点击后才显示。这样用户就能直接看到有哪些选项,然后做出知情的决策。一定要确认单选按钮做得简单明了,并且只能选择一个。

2. 两个选项应作为一个开关按钮

如果只有两个选项,应该把下拉菜单替换成一个开关,并且最普遍的那个选项应该被预选上,一个很好的例子就是在一个注册表单里选择性别,如果用一个下拉菜单,每个用户都需要做两次点击--选择这个菜单然后选择这个选项,用开关的话,女性(全部人口的51%)被预选上,那么只有9%的人需要做1次点击,这是一个巨大的差别,这里就有一个很糟糕的例子,来自Yahoo.com:

3. 许多选项应作为一个自动完成控件

一个被广泛接受的观点就是下拉列表里最多的选项数应该在15个左右(有人说是12,另一些人说是16),如果超过了一个范围,很容易产生迷惑性,对用户来说是一个很艰难的抉择,浏览一个那么长的选项列表,那么多的选项放在用户手里。我们应该努力尽可能地去除很多选项,因为我们已经在后台做了很多工作,这样用户要想的越少,越好。

一个很好的例子就是国家选择器,到现在为止,当你选择你的国家时,使用下拉列表仍是一个绝对的标准。ludacris,Smashing Mag一年前就这个问题写过一篇很好的文章,叫做《重新设计国家选择器》,当有很多可能的选项时,使用自动完成控件,让系统去完成这样的工作,而不是用户。

所以,有没有哪些位置用一个下拉列表才是最佳的选择呢?是的,当然有,在任意一种你有多个选项的情况下,你都可以在你的表单里使用多个单选按钮,用户根本就不知道他们当前选的是哪一个的,但是这种情况发生得很少,如果这种事情真的发生了,那么重新思考一下,利用多样的控件来让用户使用起来更简单才是明智的,作为一个很好的表单应该怎么设计的例子,浏览一下Typeform,他们做的每一件事情都是对的。

最后几句,我想说几句虽然有些偏离主题但是需要说的:如果这个字段是可选的,那它就不应该出现在表单里,移除所有不必要的注册流程和对用户来说不必要的东西。这就通常意味着你需要在必选的模块那加一个*(如果在某些情况下,你仍然需要可选的输入框,标出它们是可选的)*。





原文发布时间为:2016年05月11日


本文来自合作伙伴掘金,了解相关信息可以关注掘金网站。

时间: 2024-12-02 07:36:55

下拉菜单为何是一种不好的用户体验?的相关文章

Excel怎么设置二级联动下拉菜单?

  Excel怎么设置二级联动下拉菜单?在excel里制作下拉菜单有好几种方法,我主要介绍下用数据有效性设置下拉菜单及怎么设置二级联动下拉菜单.这两种方法我将均以例子说明. 一.用数据有效性设置下拉菜单 例:如下图所示,要求在销售员一列设置可以选取的下拉菜单. 步骤1:选取销售员一列需要设置下拉菜单的单元格区域(这一步不能少),打开数据有效性窗口(excel2003版数据菜单 - 有效性,excel2007和2010版本 数据选项卡 - 数据有效性 - 数据有效性),在窗口中的"设置"

Excel中制作下拉菜单的4种方法

Excel中制作下拉菜单的4种方法   其实还有另外3种: 1.创建列表 在一列中按alt+向下箭头,即可生成一个下拉菜单(创建列表).此方法非常简单. 2.开发工具 - 插入 - 组合框(窗体控件) 如果你的excel没有[开发工具]选项,可以从 文件 - 选项 - 自定义功能区,选中"开发工具".(excel2007为office按钮 - excel选项 - 常规 - 显示"开发工具") 3.开发工具 - 组合框(ActiveX控件) 注: 在"设计模

JS 实现导航菜单中的二级下拉菜单的几种方式_javascript技巧

最近整理了, JS 实现导航菜单中的二级下拉菜单的三种方式,便于项目中应用.  如何实现导航菜单栏中的二级下拉菜单? 我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css <meta charset="UTF-8"> <title>Document</title> <style> *{margi

JS中用三种方式实现导航菜单中的二级下拉菜单_javascript技巧

我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片.那么如何实现导航菜单栏中的二级下拉菜单?下面小编给大家分享实现思路. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding: 0;list-style

用 PHPRPC 实现 Ajax 级联下拉菜单

ajax|菜单|下拉 级联下拉菜单就是从一个下拉菜单中选中一项后,相应的另一个下拉菜单的内容会随之改变. 一般来说,最简单的,就是每次选中都提交一次表单,刷新整个页面.这也是用户体验度最差的. 另一种是把所有选项在第一次加载时就全部载入整个页面中的 javascript 数组中,然后级联通过 JavaScript 来控制,在整个数据量不大时,这是一个不错的实现无刷新并且快速的方法,但是当整个数据量非常大时,这种方法就会使第一次加载变得非常慢了. 还有就是采用 Ajax 方式,即开始只载入第一层菜

用PHPRPC实现Ajax级联下拉菜单

级联下拉菜单就是从一个下拉菜单中选中一项后,相应的另一个下拉菜单的内容会随之改变. 一般来说,最简单的,就是每次选中都提交一次表单,刷新整个页面.这也是用户体验度最差的. 另一种是把所有选项在第一次加载时就全部载入整个页面中的 javascript 数组中,然后级联通过 JavaScript 来控制,在整个数据量不大时,这是一个不错的实现无刷新并且快速的方法,但是当整个数据量非常大时,这种方法就会使第一次加载变得非常慢了. 还有就是采用 Ajax 方式,即开始只载入第一层菜单的内容,当用户选中第

活用Firework4制作下拉菜单

菜单|下拉 Firework4的一个新增加的功能就是能轻易地制作下拉菜单.下拉菜单是目前比较热门的一种网页交互方式之一.仿Windows界面的下拉菜单非常流行.但是由于制作菜单需要懂得一定的Javascript语言或者操作步骤比较麻烦.因此在一段时间内还很少有人制作这样的东东.现在有了Fireworks就简单了. 闲话休提,言归正传.新版本的firework4.0,在界面上,跟firework3.0没有多大区别.打开firework4,新建一个文档,(记住页面大少要象素800×600)你利用一些

JS组件Bootstrap实现下拉菜单效果代码_javascript技巧

Bootstrap 下拉菜单 这一章讲解了下拉菜单,但是没有涉及到交互部分,本章将具体讲解下拉菜单的交互.使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏.标签页.胶囊式导航菜单.按钮等)添加下拉菜单. 如果您想要单独引用该插件的功能,那么您需要引用 dropdown.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 一.用法您可以切换下拉菜单(Dropdown)插件的隐藏内容:

Javascript设计网页中的下拉菜单

javascript|菜单|设计|网页|下拉 在网页制作时,为了更好地组织信息,使显示的信息分类明确.层次清晰,网页制作者往往费尽心机.常用的方法有用树型结构显示信息,用表格进行网页布局,用框架(frame)组织页面等等.但对于习惯了Windows操作系统的用户来说,利用菜单操作可以算是最自然的方法了.下面我们就来看一下怎样在网页中设计下拉式菜单. 下拉式菜单由若干个显示在窗口顶部的主菜单条和各个菜单条下面的子菜单组成.每个子菜单往往还包含几个子菜单项.通常,只有菜单条显示在窗口中,并且当鼠标指