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

待通知!获取关于特色产品、解决方案、服务和教育机会的更新。让Foobar公司和选定的组织向您提供有关其他产品的信息。
我们可以用电子邮件把最新情况发给你吗?
是的,请用电子邮件把其他产品的信息发给我。
如果您愿意,我们将不会使用您在此实例中提供的数据与您联系。
请不要使用这里提供的联系方式向我发送有关其他产品的信息。

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

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

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

什么时候使用哪个小部件

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

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

听起来很简单,对吧?

然而,我经常遇到一些网页错误地使用单选按钮和复选框。即使20年过去了,这些指导方针还是值得再次陈述。

额外的指导方针

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

为什么这些准则很重要

当我坚持正确使用复选框和单选按钮时,我是不是太挑剔了?不。有良好的可用性是遵循GUI标准和正确使用控件的理由。

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

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

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

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