- 设计理论 -

单选项or下拉菜单,你用对了么?

作者:阿肆Stella 原文出处:海盐社
2018-07-25

5.jpeg

屏幕快照 2018-07-25 上午10.55.47.png

无论是在移动端还是PC端,表单作为用户与产品进行数据与指令交流的主要工具,在用户体验过程中承担着重要的责任。最近半年接的需求基本上都是表单类型的,所以对表单的研究也越来越细致,发现了很多以前没有要注意到的问题,收获很多。

大家都知道,表单是由众多表单组件构成的,包括单选项、复选项、下拉菜单、开关等等,在特定场景下,有些表单是可以互换使用的,可以满足同样的操作需求,例如单选和开关、单选和下拉菜单。 今天就给大家带来一篇好文,好好探讨一下,在单选项与下拉菜单都可以完成单项选择的任务时,该如何进行选择。

一、单选按钮篇

场景1:强调选项内容

640.jpeg

你可能会在 以下场景下希望强调选项内容:

 -没有明确的默认选项或推荐选项。

- 希望用户阅读完所有选项。

 -选项对用户来说并不熟悉,用户不能迅速理解选项代表的含义

如上图所示,右图使用下拉菜单时,显示出的默认选项没有提供关于其它选项的暗示,如果用户不展开菜单,就无法得知除了默认选项还有什么其它选项。所以当你希望强调选项内容时,最好使用单选项,让内容全部暴露在用户视线内。

场景2:需要进行比较

640-1.jpeg

当用户需要对选项进行比较的时候,使用单选按钮:

- 用户可以一目了然地看到它们并轻松进行比较。

- 比较选项本身就就需要更多时间,而下拉菜单会增加不必要的操作时间

- 用户不需要每次查看选项时都要展开菜单进行比较

场景3:需要快速完成

640-2.jpeg

当用户需要快速完成表单时,使用单选项而非下拉菜单

- 便于用户快速浏览和勾选

 -下拉菜单会浪费不必要的操作时间

场景4:选项少于5个

640.png

当选项在2~4个时,使用单选项,有以下几个优势:

- 用户可以轻松快速地扫描全部选项。

- 快速响应,而无须先点击展开下拉菜单,再移动进行选择

二、下拉菜单篇

场景5:有明确的推荐选项

640-3.jpeg

当用户只能看到推荐选项时,更容易选择推荐项:

- 避免其它选项分散用户的注意力

- 增加更换选项的操作成本,降低用户更换选项的几率

场景6:选项内容可预期

640-4.jpeg

当选项内容为用户熟悉且可预测时,例如百分比,日期等,用户没有必要查看全部项目,所以使用下拉菜单

场景7:选项超过7个

640-5.jpeg

大量的选项并不适合全部并排显示,因为:

1. 数量太多的选项同时出现会增加用户的认知负荷,让用户觉得亚历山大

2. 占用页面空间大,影响UI视觉体验

如果选项数量非常多,下拉列表很长,最好提供一个可输入的文本框配合使用,用户可以在其中键入选项名称,列表仅显示过滤后的选项,使选择更方便快速。

640-1.png

总结

640-2.png

640-6.jpeg

由于表单的内容可能会很长,选项也会很多,所以在用户填写表单时很容易觉得麻烦或者乏味,所以为增强表单的用户体验,提供最适合的组件以满足用户的输入需求是非常重要的。这篇文章可以帮你更好更快速的在单选项和下拉菜单之间做出选择,提升你的表单使用体验。

屏幕快照 2018-07-25 上午10.57.41.png

6.jpeg

海盐社.jpeg

喜欢就分享
精选评论