关于单选按钮的用户体验设计分析

1

单选按钮是构成表单的基本元素,当一个列表中有两个或更多的选项时,用户无法同时选中,并且必须选择其中的一个。换句话说,在同一个列表中点击未选按钮,会取消之前选择的选项。

2

通用单选按钮的控制

单选按钮是非常方便的,单选按钮可以防止用户输入错误的数据。因为只提供了可执行的选择及很多易用的功能,比如键盘导航和跨平台渲染。在这篇文章中,我们可以通过可用性测试来了解单选按钮的相关信息。

单选按钮是如何得名的?

单选按钮(Radio buttons)是以汽车收音机(Radios)换台按键命名的——当一个按钮被按下,其他按钮会弹出,只有按下的按钮在“选中”位置。单选按钮的UI就是仿照这些收音机按钮的。

3

一次只能按下一个按键

最佳的单选按钮的用法

只使用单选按钮进行设置

使用单选按钮来改变设置,而不是用动作按钮执行命令。此外,更改的设置在用户单击按钮(例如“进行”或“保存”)前不能生效。如果用户点击“返回”或“取消”按钮,页面上用户通过单选按钮所做的任何更改应被清除,恢复至原设置。

如果只使用单选按钮来影响某个命令的执行,最好能提供多种可选择的命令而非单一命令。这样做可以让用户通过一个简单的互动选择想要执行的命令。

4
通过按键一键完成指令

选项的逻辑顺序

应以逻辑顺序列出选项,比如最有可能被选中的到最不会被选中的,最简单的操作到最复杂的,或风险最低的到最高的。不推荐按首字母排序,因为它是建立在语言基础上的,不易推广。

选项应该是全面的,明确的

单选按钮最大的可用性问题来自于模糊、误导或是无法描述的选项,这些选项对于普通用户来说是无法理解的。语境有助于缓解这些问题,但最好还是对任何重要的交互控制都进行用户测试。

提供默认选择

《用户界面设计的10个要点》提出,用户应该能够撤消(和重做)他们的选择。这意味着让人们可以将用户界面恢复到原来的状态。意味着单选按钮应该始终有一个预先选定的选项。选择最安全的(防止丢失的数据或访问记录)和最保障隐私的选择。如果安全和保障性不是可选项,选择最可能的或最便利的选项。

如果用户可能不想选任何一个选项,你应该另外提供一个按钮来供他们选择,如一个标记为“无”的选项。为用户提供一个明确的,保险的选项比那些不明确的暗示要好得多。

5

试着列出你的选项

水平的单选按钮很难扫视和集中注意力。水平排列的单选按钮也会给选项与按钮的对应带来困难:选项对应的是前一个按钮还是后一个呢?而竖直排列的单选按钮更加安全。

试着把你的选项竖直列好,每行一个选项。如果您还是需要一个具有多个选项的水平布局,确保按钮和选项的空间足够大,使选项与按钮对应的足够清晰。例如,你应该避免图中所示的这种很难确定对应按钮的情况。

6
糟糕的例子:水平排列的选项

使用整个选项做为点击目标

单选按钮面积较小,根据Fitts定律它们很难被点击选中。为了扩大目标区域,可以让用户点击按钮及选项关键词而不仅仅是单选按钮来选中。让用户通过点击按钮本身或它的标签来选择一个选项。

7

左:仅能点击有限区域  右:较大的点击区域

可以在dualingo应用找到好的横向单选按钮:他们采用了一个传统的横向单选按钮,但将目标设置的足够大来方便用户在带有触屏功能的设备上进行选择。

8

好例子:水平单选按钮

使用单选按钮,而不是下拉菜单

如果可能的话,使用单选按钮而不是下拉菜单。因为单选按钮认知负荷较低,它们可以显示所有的选项,所以用户可以很容易地进行比较。

如果你的选项少于7个,你应该考虑使用单选按钮。用户将能够迅速浏览有多少选项,以及这些选项是什么,而不需要点击(或输入)来获得信息。

9

左:下拉菜单  右:单选按钮

避免嵌套

避免与其他单选按钮或复选框产生嵌套。你应保证所有的选项在同一级别,以避免造成混乱。

10

使用嵌套的选项会造成不必要的麻烦

使用动画和视觉反馈

精心设计的动画制作能让用户感觉到制作的精巧。用户界面元素,如单选按钮应该给人实质性感受,即使它们实际上只是屏幕后的平面图像。在用户输入后,应及时出现清晰的视觉要素和动态信息来对其进行反馈。

11

复选框是更好的选择吗?

如果只有两个选项,你可以使用一个单一的复选框代替。然而,复选框只适合一个选项的选中或取消,而单选按钮可用于更多更复杂的选择。

12

复选框选择

如果这两个方案都适用的话,你需要记住:

多义词

如果单一的复选框意思不清楚的话,使用单选按钮。在下面的例子中,选项是互斥的,所以单选按钮是更好的选择。

13

选择文本的方向(横向或纵向)

导航

在向导航页上,即使可以用复选框,你也应该使用单选按钮来使选项更清晰。单选按钮中默认选项的设计对用户来说是一个强大的暗示。默认选择会引导用户做出最佳决定,并在他们继续选择时增加他们的信心。

14

如果强烈推荐一个选项,添加“(推荐)”标签

简单的是或否

当有一个只需用户回答“是”或“不是”的简单问题时,复选框是正确的选择。

15

简单的问题可以在复选框问

结论

在设计单选按钮时,最重要的是要遵循设计标准,因为这能使用户提前预测控制和指令的执行,以及执行方式。而违反了标准会使用户感觉十分不安——在没有预警的情况下可能发生任何情况。

用心去设计~!通过纸张模型可以很容易的对单选按钮进行测试,你可以直观的看到用户是否掌握了控制方法,并能够正确使用它。

1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部