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

留意!获取有关特色产品,解决方案,服务和教育机会的更新。让Foobar Corp.和所选组织为您提供有关其他产品的信息。
我们可以使用电子邮件发送更新吗?
是的,请使用电子邮件向我发送有关其他产品的信息。
如果您愿意,我们不会使用此实例中提供的数据与您联系。
请不要使用此处提供的联系方式发送有关其他产品的信息。

错误#1是本文的主要焦点:错误地使用复选框,其中无线按钮应该是。由于上述两个选项是互斥的,因此页面应呈现带单选按钮的用户,该用户将它们限制为完全选择一个选项。

错误#2是首先提出两个问题,然后将它们放在一个大,冗长的框中。单一的,较短的问题在这里将更好:“是的,向我发送有关其他特色产品,解决方案,服务和教育机会的信息。”

具有讽刺意味的是,通过单一的问题,使用复选框将是正确的,因为用户将回答是或否。这项建议书用户测试电子商务网站默认情况下留空复选框,因此用户必须积极单击它以选择进一步的消息。

何时使用哪个小部件

自第一版以来内部Macintosh.1984年,该规则对于何时使用复选框与单选按钮相同。所有后续的GUI标准和官方W3C Web标准都包含相同的定义这两个控件:

  1. 单选按钮当有两个或多个选项的列表时使用互相排他性用户必须完全选择一个选择。换句话说,单击未选择的单选按钮将取消选择在列表中先前选择的其他按钮。
  2. 复选框当有选项列表和用户可能的时候使用选择任何数字选择,包括零,一个或几个。换句话说,每个复选框都与列表中的所有其他复选框无关,因此检查一个框不会取消选中其他框。
  3. 一个独立的复选框用于单个选项,用户可以打开或关闭。

听起来很简单,对吗?

然而,我经常遇到使用单选按钮和复选框错误的网页。即使在二十年后,它也值得陈述这些指导方针。

其他指南

  1. 使用标准视觉表示。复选框应为一个小型正方形,在选中时具有复选标记或x。单选按钮应该是一个小圆圈,在选择时在它内部具有固体圆圈。
  2. 视觉上作为群体的选择组,并清楚地将它们与同一页面上的其他组分开。上面的盒装例子违反了本指南,因为布局使两个复选框似乎正在解决单独主题的替代选项时是单独的主题。
    • 使用子标题来分解一长长的复选框进入逻辑团体。这使得选择更快地扫描,更容易理解。风险是用户可能将每个子组视为单独的选项集,但这不一定是复选框的致命 - 每个框都是一个独立的选择。但是,无线按钮列表必须始终统一,因此您不能使用小标题来分解它。
  3. 垂直铺设您的列表,每行一个选择。如果必须使用每行具有多个选项的水平布局,请确保空间按钮和标签,以便丰富地清除哪个选择标签。例如,在以下列表中,很难看到正确的单选按钮单击选项四。
  4. 使用正极和有源措辞对于Checkbox标签,因此可以清楚用户在复选框上打开后会发生什么。换句话说,避免否定,例如“不要发给我更多电子邮件”,这意味着用户必须检查框以获取某些东西即将发生。
    • 写入复选框标签,以便用户知道如果他们检查一个特定的框,并且如果他们将其留下,则会发生什么。
    • 如果您无法执行此操作,则使用两个用于具有功能的单选按钮可能更好,并且可以为两个案例中的每一个具有关闭 - 并为其写入清除标签。
  5. 如果可能,请使用单选按钮而不是下拉菜单。单选按钮有降低认知负荷因为它们使所有选项都能永久地看到,因此用户可以轻松地比较它们。为具有精确鼠标运动的用户来说,单选按钮也更容易运行。(有限的空间可能有时强迫您违反本指南,但尽量保持可观的选择。)
  6. 始终为单选按钮列表提供默认选择。根据定义,单选按钮始终选择一个选项,因此,无需默认选择,因此不应显示它们。(相比之下,复选框通常默认为没有选择的选项。)
    • 如果用户可能需要避免进行选择,则应为此选择提供单选按钮,例如标记为“无”。为用户提供一个显式中立选项,可以更好地优于未选择未选择列表的隐式行为,尤其是因为执行后者违反所选择的始终选择一个选项的规则。
  7. 由于单选按钮需要完全选择,因此请确保选项既全面而明显明确。在使用旧用户测试例如,人们无法填写一个所需的表格,要求他们选择自己的工作,因为它没有提供“退休”作为选项。如果不可能全面,请提供标有“其他”的按钮,该按钮补充了一个类型的字段。
  8. 让用户通过单击按钮/框本身或其标签来选择一个选项根据较大的目标是速度更快,以便单击Fitts的法律。在HTML表单中,您可以轻松实现这一目标使用,正如我为上面的水平单选按钮的示例所做的那样(要选择该选项,请单击“四”单词)。在测试中闪存中的基于Web的应用程序,我们发现,通过慷慨点击区域进一步减少了用户错误,该区域扩展了几个像素以外的可见区域。(这种效果可能很难在HTML中实现,尽管一些CSS黑客可能会做诀窍。)
  9. 仅使用复选框和单选按钮更改设置,而不是动作按钮这会发生一些事情。此外,在用户单击命令按钮之前,更改的设置不应生效(标记为“确定”,或者“继续到XXX”,其中“XXX”是进程中的下一步)。
    • 如果用户点击背部按钮,应丢弃页面上的复选框或单选按钮的任何更改,并恢复原始设置。如果用户单击a,则相同的指南显然是持有的取消按钮(虽然导航网页不需要取消选项因为这背部按钮适用于相同的目的)。
    • 如果用户首先点击背部然后前锋然后,它最适合将该序列解释为撤消重做对,这意味着控件的外观应该显示用户的更改,好像用户从未单击过背部。这些更改仍然不会对后端生效,直到用户单击“确定”或等效命令。

为什么这些指导内容

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

最重要的,以下设计标准增强用户预测控制会做什么的能力以及他们将如何运作。当他们看到复选框列表时,用户知道它们可以选择多个选项。当他们看到单选按钮列表时,他们知道他们只能选择一个。(当然,不是每个用户都知道这一点,但许多人都这样做,特别是因为这是自1984年以来的设计标准。)

因为许多人知道如何操作标准的GUI小部件,正确使用这些设计元素增强用户的掌握感过度技术。反过来,违反标准使用户界面感到脆弱- 好像任何事情都会发生没有警告。例如,您假设您可以单击无线电按钮,而无需立即影响,因此可以考虑在制作选择之后的选择,但在击中“确定”之前。在这种情况下,当网站违反此标准时,它会乱驶,并在输入选择后意外移动到下一页。更糟糕的是,它让你害怕你在网站上其他地方工作时可能发生的事情。

复选框和单选按钮的最大可用性问题来自模糊,误导或描述普通用户不可能理解的选项的标签。上下文帮助可以缓解后一种问题,但它仍然最好用户测试任何重要的交互控制。幸运的是,复选框和单选按钮易于测试纸质原型设计,因此您无需实现任何内容以查看用户是否了解标签并可以正确使用小部件。

没有专业的交互设计者将在调用单选按钮时归咎于使用复选框。这两个控件之间的区别是在任何交互设计类中教授的第一件事之一。所以这是使用右侧小部件的最终原因:如果您没有,您将被占用业余。