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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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





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

本文来自云栖社区合作伙伴掘金,了解相关信息可以关注掘金网站。
目录
相关文章
|
27天前
|
测试技术 Python
App自动化测试中,如何更好地处理弹窗?
在App自动化测试中,处理弹窗异常是保证测试稳定性和可靠性的重要环节。当遇到广告弹窗、升级提示等不定时出现的UI元素时,可以采用黑名单处理方法,如上述Python代码示例,通过尝试点击黑名单中的元素来避免干扰。同时,利用异常处理装饰器可以增强函数功能,保持代码整洁,当异常发生时记录日志、截图并保存页面源代码,便于问题排查。这两种策略能有效提升测试的效率和质量。
8 0
|
1月前
【实用】一个移动端简单的UI弹窗组件,虽算不上高大上,但至少耐看
【实用】一个移动端简单的UI弹窗组件,虽算不上高大上,但至少耐看
|
5月前
|
开发工具 索引
点击一个消除游戏图标时,背后都发生了什么
点击一个消除游戏图标时,背后都发生了什么
33 1
|
8月前
|
算法 搜索推荐 数据库
SEO免费流量难搞?试试360下拉词优化
SEO免费流量难搞?试试360下拉词优化
|
9月前
【项目经验】:项目中下拉框数据太多造成页面卡顿(二)
项目中下拉框数据太多造成页面卡顿(二)
|
前端开发
前端工作总结129-首页样式调整第一次
前端工作总结129-首页样式调整第一次
70 0
前端工作总结129-首页样式调整第一次
小说系统开发,选择合适的翻页设计优化用户体验
小说系统开发,选择合适的翻页设计优化用户体验
|
前端开发
小视频源码,可控的跑马灯,无需焦点
小视频源码,可控的跑马灯,无需焦点
262 0
|
安全 开发工具 git
[UWP小白日记-9]页面跳转过度动画(二)
原文:[UWP小白日记-9]页面跳转过度动画(二) 又打算动手写了 [UWP小白日记-6]页面跳转过度动画 上次写的,这次随着学习的进度使用新的玩法。 最近在搞GIT的学习,结果把好好的项目玩坏,都不知道当时是怎么想的拿在写的APP来玩GIT,害我重写了好几次。
1265 0