复选框vs.单选按钮

我最近在一个主要网站的注册页面上遇到了下面的框。它包含了至少两个设计错误。在进一步阅读之前，看看你是否能找到它们。

错误#1是本文的主要关注点:在单选按钮的位置错误地使用复选框。因为上面的两个选项是互斥的，页面应该为用户提供单选按钮，这将限制他们只选择一个选项。

错误2:首先提出两个问题，然后把它们放在一个冗长的大框里。一个简单、简短的问题会更好:“是的，请给我发送其他特色产品、解决方案、服务和教育机会的信息。”

具有讽刺意味的是，对于一个问题，使用复选框将是正确的，因为用户将回答是或否。建议从电子商务网站的用户测试是默认情况下保持复选框为空，所以用户必须主动点击它来选择更多的信息。

何时使用哪些小部件

自从第一版在麦金托什在1984年，选择复选框和单选按钮的规则是一样的。所有随后的GUI标准和W3C官方Web标准都包含了这两个控件的相同定义:

1. 单选按钮当有两个或多个选项的列表时使用互相排斥的用户必须选择一个选项。换句话说，单击一个未选中的单选按钮将取消先前在列表中选中的任何其他按钮。
2. 复选框当有选项列表和用户可能选择任意数量选项，包括0、1或几个。换句话说，每个复选框独立于列表中的所有其他复选框，因此选中一个复选框不会取消其他复选框。
3. 一个独立的复选框用于用户可以打开或关闭的单个选项。

听起来很简单，对吧?

然而，我经常遇到一些网页错误地使用单选按钮和复选框。即使20年过去了，还是有必要再次说明这些指导方针。

额外的指导方针

4. 使用标准的视觉表示。复选框应该是一个小方块，当被选中时，它有一个复选标记或一个X。一个单选按钮应该是一个小圆，当它被选中时，里面有一个实心圆。
5. 将一组一组的选择直观地呈现出来，并在同一页上清楚地将他们与其他组区分开来。上面的示例违背了这条原则，因为布局使两个复选框看起来是处理不同的主题，而实际上它们是单个主题的备选选项。
   • 使用子标题来分割一长串复选框分为逻辑组。这使得浏览选择更快，更容易理解。风险在于，用户可能会将每个子组视为一组单独的选项，但这对复选框来说并不一定是致命的——无论如何，每个复选框都是一个独立的选择。但是，单选按钮列表必须始终显示统一，因此不能使用子标题来分割。
6. 垂直排列你的列表，每行有一个选项。如果你必须使用水平布局，每行有多个选项，请确保按钮和标签的间距，这样就可以很清楚地看到哪个选项与哪个标签对应。例如，在下面的列表中，很难看到要单击选项4的正确单选按钮。
   一个 两个 三个 四个 五个 六个 七个
7. 使用积极主动的措辞对于复选框标签，这样就可以清楚地看到如果用户打开复选框会发生什么。换句话说，要避免像“不要再给我发邮件了”这样的否定，因为这意味着用户将不得不为某些事情打勾不发生。
   • 编写复选框标签，以便用户知道如果选中某个特定的复选框将会发生什么，如果不选中该复选框将会发生什么。
   • 如果你做不到这一点，最好使用两个单选按钮——一个用于开启功能，一个用于关闭功能——并为每一种情况都写清楚标签。
8. 如果可能的话，使用单选按钮而不是下拉菜单．单选按钮有较低的认知负荷因为他们让所有选项永久可见，这样用户就可以很容易地比较它们。单选按钮对于那些难以精确移动鼠标的用户来说也更容易操作。(有限的空间有时可能会迫使你违反这条原则，但一定要尽可能保持选择的可见性。)
9. 总是为单选按钮列表提供默认选择．根据定义,单选按钮总是只选中一个选项，因此在没有默认选择的情况下不应该显示它们。(相反，复选框通常默认没有选择任何选项。)
   • 如果用户可能需要避免进行选择，则应该为该选择提供一个单选按钮，比如一个标签为“None”的按钮。为用户提供一个明确的、中立的点击选项比要求用户不从列表中进行选择要好，特别是后者违反了只选择一个选项的规则。
10. 因为单选按钮只需要一个选项，所以要确保选项既全面又清晰．在对老用户进行测试例如，人们无法完成要求他们选择工作的表格，因为它没有提供“退休”选项。如果不可能做到全面，可以提供一个标有“Other”的按钮，并添加一个输入字段。
11. 让用户通过点击按钮/框本身或其标签来选择一个选项：目标越大，点击越快费茨定律．在HTML表单中，您可以通过以下方法轻松实现此目的用元素编码每个标签，就像我在上面的例子中使用水平单选按钮所做的那样(要选择该选项，请单击单词“Four”)。在测试中基于web的Flash应用程序，我们发现用户错误进一步减少了慷慨的点击区域，扩展几个像素超出明显的点击区域。(这种效果在HTML中很难实现，尽管一些CSS技巧可以做到。)
12. 只使用复选框和单选按钮来更改设置，而不是作为操作按钮让事情发生。此外，在用户单击命令按钮(例如标记为“OK”或“Proceed to XXX”，其中“XXX”是流程的下一步)之前，更改的设置不会生效。
    • 如果用户单击回来按钮，对页面上的复选框或单选按钮所做的任何更改都应丢弃，并恢复原来的设置。显然，如果用户单击a取消按钮(虽然导航网页不需要取消选项因为回来按钮也有同样的作用)。
    • 如果用户首先单击回来然后向前，则最适合将此序列解释为撤消重做对，这意味着控件的外观应该显示用户的更改，就像用户从未单击过一样回来．在用户单击“OK”或等效命令之前，这些更改仍然不会在后台生效。

为什么这些准则很重要

当我坚持正确使用复选框和单选按钮时，我只是在挑剔吗?不。有良好的可用性是遵循GUI标准和正确使用控件的原因。

最重要的是,以下设计标准增强用户预测控件将做什么的能力以及他们将如何操作。当用户看到复选框列表时，他们知道可以选择多个选项。当他们看到单选按钮列表时，他们知道只能选择一个。(当然，不是每个用户都知道这一点，但很多人都知道，尤其是自从1984年以来，这已经成为一个设计标准。)

因为许多人知道如何操作标准GUI小部件，所以正确地使用这些设计元素增强用户的掌握感在技术。相反,违反标准会让用户界面显得脆弱——好像什么事都能毫无预兆地发生似的。例如，假设你可以点击单选按钮而不会产生任何直接影响，因此可以在选择之后但在点击“OK”之前考虑你的选择。在这种情况下，当一个网站违反了这一标准，并在你输入一个选项后意外地将你转到下一页时，就会令人感到震惊。更糟糕的是，它会让你担心在网站的其他地方使用表单时会发生什么。

复选框和单选按钮最大的可用性问题来自标签的模糊、误导性，或者描述的选项是普通用户无法理解的．上下文帮助可以缓解后一个问题，但最好还是用户测试任何重要的交互控件集。幸运的是，复选框和单选按钮很容易测试使用纸上原型，因此您不需要实现任何东西来查看用户是否理解标签并能够正确使用小部件。

当需要单选按钮时，没有一个专业的交互设计师会犯使用复选框的错误。这两个控件之间的区别是任何交互设计课程的首要内容之一。所以这里还有一个使用正确插件的最后一个原因:如果你不使用，别人会认为你是个业余爱好者。