在这两篇文章的第一篇中，我们已经介绍了UI设计中关于切换按钮的一个关键但尚未解决的问题。表达哪个选项是活动的并不容易。有许多视觉线索类型可供选择：字体风格、颜色和轮廓，仅举几例。为了评估哪些视觉线索能够有效地传达所切换的选项，我们对100多个真实用户和27个视觉线索进行了全面的案例研究。继续阅读，了解我们的研究结果及其影响，以便在设计你自己的切换按钮时加以借鉴。
案例研究结果
让我们来看看我们发现了哪些有效的方法来强调一个按钮，使其清楚地显示出它是活动的。但首先，要对我们的参与者进行快速的总结。
参与者回顾
在我们的数据收集完成后，我们首先要审查我们研究中的参与者的质量。这次审查导致一些参与者的资格被取消，主要是那些有迹象表明在随机选择答案的50-50人，这是没有努力真正完成任务的明显迹象。在我们剔除这些违规者后，每个研究的参与者人数如下。
| 研究类型 | 5秒测试 | 20秒测试 | ||
|---|---|---|---|---|
| 小组 | 1 | 2 | 1 | 2 |
| 参与者人数 | 28 | 29 | 30 | 27 |
注意： 这些数字仍然高于我们设定的最低收集结果的数量，因为我们在发起在线招聘时考虑到了高达16%的退出率。
比较视觉线索的效用的衡量标准
我们使用该工具进行了四项研究 五秒测试.两个有5秒的时间限制，两个有20秒的时间限制。我们需要一个指标，可以客观地比较各个切换器，以及一个特定的切换器在5秒和20秒的测试变体中的表现如何。
我们创建了一个加权指标，命名为 "成功-信心分数"。成功-信心分数是由正确答案的数量（根据预期）与对问题的李克特量表答案相结合得出的。"你对你的答案有多大把握？"
首先，我们分别计算正确和不正确答案的平均信心，并计算每个切换的平均信心。根据参与者对李克特量表问题的回答情况，平均信心值可以在0到1之间。例如，如果每个选择正确切换面的受访者都在李克特量表上回答 "绝对确定"，那么对于给定的切换面，正确答案的平均置信度将是1。
然后，我们使用计算出的正确答案和错误答案的平均信心，并通过以下公式计算出切换的成功-信心分数。
Success-Confidence score = (correct_num correct_conf) - (incorrect_num incorrect_conf)
correct_num -> number of correct answers
incorrect_num -> number of incorrect answers for toggle
correct_conf -> average confidence with correct answers
incorrect_conf -> average confidence with incorrect answers
由于每次测试的参与者人数不同，我们通过将成功-信心分数除以给定测试的参与者总人数，使其标准化。结果是下面的公式。
归一化的成功-信心分数=成功-信心分数/参与者人数
归一化的成功-信心分数的尺度是-1到1。负1表示所有参与者都以高信心提供了错误的答案，1表示所有被试都以高信心回答了正确答案。
对研究问题的评价
研究问题1：粗体字
1.7%的低错误率和0.86的高成功-信心分数证实了我们的预期：与普通文本相比，切换按钮中的加粗文本使选项被认为是活跃的。这个版本的切换按钮甚至表现得足够好，在所有被评估的切换按钮中获得了第三好的平均排名。基于这个结果，我们可以有把握地宣称活动按钮中的粗体字是一个功能性的但又简单的解决方案，可以传达哪个切换选项被选中。如果你的所有切换按钮都使用同等分量的字体，这个知识应该特别有用，因为情况经常是这样的。
问题2：文字大小
我们测试了四个切换按钮，在激活和非激活按钮中的文字有不同的大小差异。正如预测的那样，字体大小差异几乎不明显的切换器表现最差，错误率几乎为15%，置信度只有0.63分。与此相比，字体大小差异最大的切换器的错误率只有4.4%，置信度为0.81，与差异最小的切换器相比，这都是明显的改进。两个中间的切换器的表现被设定在这两个极端之间。出乎意料的是，差异第二小的拨动器的表现略胜于差异第二大的拨动器。然而，这种不规则现象很小，足以用数据中的噪音来解释。
由于表现率总体上随着字体大小的增加而增长，我们对 "更大的大小差异意味着对切换的更好的视觉提示 "的预期得到了证实。然而，由于使用明显较大的字体来表示活动状态会被证明在视觉上不讨人喜欢，我们建议使用粗体字来代替。粗体字不仅容易包含在你的设计中，而且表现得更好。
RQ3：文本标签中倒置的颜色的对比度
事实证明，黑色和白色以及橙色和蓝色的倒置颜色组合是我们测试过的性能最差的一些切换器，错误率分别为19.3%和23.7%，置信度仅为0.56和0.41。较低的信心水平表明，即使是那些设法选择正确答案的受访者也对自己的答案完全没有信心。我们关于深色被认为是活跃的颜色的预测被两种情况下小于0.5的错误率所证实。然而，低信心使较低的错误率的强度恶化。这意味着我们关于倒置的字体颜色是一种无效的视觉线索的假设得到了证实。尽量避免使用视觉重要性相同的颜色，这在涉及切换背景的第8个研究问题中也可以看到。
研究问题4：文本标签中的红色与绿色的文化感知
一个看似令人惊讶的（虽然并不完全出乎意料）的结果来自于带有红色和绿色文字的切换器。这个切换器的错误率是32.5%，置信度只有0.32，使其成为整体表现最差的切换器之一，平均排名为24.67。这个结果表明，与其他颜色组合相比，红/绿组合不仅不能改善结果，而且实际上使其变得更糟。可能的解释是，绿色被认为是一个开关，而不是一个活动状态的标志。红绿色盲也是最常见的色觉缺陷类型，这足以成为不使用这种视觉线索的理由，我们实验中的错误答案也反映了这一点。
问题5：文字标签中的颜色与黑/白的对比
彩色和白色标签的组合表现良好（平均排名为9.33）。令人惊讶的是，出现问题的切换是彩色和黑色的组合。这种切换的错误率为14%，置信度仅为0.59，这表明参与者无法可靠地选择主动的一面。我们预测，这种现象很可能是由黑色文本与彩色文本相比的视觉强度造成的，无论色调如何。因此，不建议简单地通过将不活动的黑色文本变成彩色来区分活动和不活动的切换。对于更好的基于颜色的方法，只需继续阅读我们对下一个研究问题的发现。
研究问题6：文本标签中的原色与中性色（灰色阴影）的对比
与紧接着的研究问题中的切换器相比，这个切换器以其灰色代表了白色和黑色非活动选项之间的中间地带。这反映在所得到的12的平均等级上，它比颜色与黑色的选项好，但比颜色与白色差。
RQ7：文本标签中同一颜色的不同饱和度
我们测试的最后一个文本颜色的切换变量也证实了我们的理论。饱和度的不同是一个强大的线索，足以保证满意的结果（错误率为8.7%，置信度为0.77）。这表明，受访者可靠地选择了正确的选项。请注意，虽然错误率与原色与中性色相当，但同一颜色的不同饱和度激发了更高的信心。因此，较好的选择是使用较低饱和度的同一颜色，而不是灰度的非活动切换按钮。
问题8：背景中倒置的颜色的对比度和问题9：背景中红色和绿色的文化感知度
这些假设中定义的切换按钮与假设3和假设4中的切换按钮相对应。我们保持了相同的颜色对，但这次我们用颜色来填充切换的背景，而不是给文本上色。背景颜色的结果与文字的模式相同，黑色和白色的组合表现最好，橙色和蓝色次之，红色和绿色居末位。然而，与彩色文本的变体相比，填充变体的表现比它们的文本替代物更好（错误率提高了5-8%）。
起初可能看起来违反直觉的是，尽管由于深色/浅色模式的设置，黑色和白色的填充物具有更强的刺激混淆的潜力，但它仍然比黑色和白色的文本替代物或带有色相的倒置颜色表现得更好。浅色/深色模式的设置会如何影响这个特定切换的结果，值得进一步研究。然而，考虑到其他类型的切换背景所取得的总体上更好的结果，对于建立一个最佳的切换器来说，这可能是不必要的。
问题 10：背景中同一颜色的不同饱和度
不同深浅的橙色取得了9.7%的错误率和0.72的归一化成功-信心分数。与此相比，不同色调的灰色的错误率为15%，归一化的成功-信心分数为0.63--这两个总体上还算不错的分数，证明这些视觉线索是可用的。与灰度变体相比，橙色的改进非常明显（结果是平均排名为13.67，而不是18）。值得注意的是，即使橙色变体的表现比灰色变体好，它们的表现充其量仍是一般。如果以这种形式使用背景色，我们建议将它们与另一种视觉线索结合起来。
RQ11：背景中的饱和色和灰度色
正如预期的那样，不活动按钮是浅灰色的版本比深灰色的版本（6.1%的错误率和0.79的置信度）表现更好（12.3%的错误率和0.66的置信度）。它的表现也超过了假设10中的橙色版本，总体表现良好，获得了6.67的平均排名（第六名）。饱和度较高的版本被置于下半部分，但仍然设法超过了假设10中的灰度版本（平均排名15，而不是18）。这两个假设的结果表明，如果我们想用饱和的颜色填充来表示活动，最好与低饱和度的灰色结合起来。
RQ12：按钮的反转设计
我们认为，与假设10和假设11中描述的饱和度相比，反转设计会让用户感到更困惑。以6.1%的错误率和0.78的成功-信心分数，这种切换的排名仅次于最佳饱和度变体（饱和色和较低饱和度的灰色），以7.33的平均排名位居总体第七。然而，需要注意的是，与5秒的测试相比，这个切换器在20秒的测试中表现明显较差（排名之间下降了9位）。这可以解释为，有填充背景的那一半（正确的选择）会很快吸引用户的注意力（导致在5秒的测试中表现更好）。然而，当为用户提供更长的时间来观察切换时，他们开始质疑自己的直觉，导致错误率增加了一倍多（从3.5%到8.8%）。因此，我们建议避免反转切换按钮，而采用避免潜在混乱的视觉提示，并且不以任何方式突出不活动的按钮。
RQ13：突出显示活动按钮的轮廓
正如预期的那样，突出显示的轮廓为受访者提供了一个可靠的决定线索（8.8%的错误率和0.76的成功-信心分数）。10的平均等级使这个切换器在性能上处于切换器的前一半。由于被其他视觉线索所超越，建议与另一线索相结合以获得更好的视觉清晰度。
问题14：不活动的按钮与背景相吻合
另一个令人兴奋的结果。尽管我们怀疑受访者在感知非活动按钮时可能会有问题，但这个切换取得了令人振奋的结果。错误率只有0.9%，置信度超过0.89，它在总体上排名第一，平均排名为1.33，这比RQ11中简单的饱和色与灰度的切换要好。这意味着，让不活动的按钮与周围环境的颜色相同，是在切换按钮中传达选择的最高方式。
RQ15：压花与压印的按钮
两种浮雕式拨动按钮的错误率为83.3%，置信度得分也相同，为-0.58。这意味着，追逐镂空并不总是正确的解决方案，至少在涉及到拨动器的时候是这样。
我们希望这个结果是由于在数字界面中普遍使用浮雕效果来赋予界面元素更多的重量。一个有更多视觉重量的开关会被认为是活跃的。
问题16：检查符号
正如它的直接性质所预料的那样，在切换按钮中的活动按钮上添加检查符号的做法表现得非常好，获得了2.33的平均排名，而成功-信心分数只有0.86，错误率为5%。我们认为选择这种切换方式的唯一问题是它在网页设计中可能会有麻烦，而且它可能会诱发与复选框的不必要的联系。
RQ 17: 单选按钮
尽管单选按钮切换的性质与复选标志的设计相似，但当作为一个图标使用时，它的意义就不那么明确了。这一点通过获得较差的平均等级5.67和较高的错误率9%以及较低的成功-信心分数（仅0.8）得到证实。尽管这个视觉线索的表现相当好，但将单选按钮作为切换按钮并不符合其语义，因为单选按钮是为了在表格中使用，而切换按钮是为了表示状态的立即改变。
视觉线索的排序
我们分别对切换器所代表的视觉线索在5秒测试、20秒测试以及两者结合时取得的结果进行排名。这就产生了3个独立的排名。我们计算了每个切换器的平均排名，并得出了三个最差和三个最好的切换器。
最差的拨动器
倒数第三名 - 第9号切换器 - 红色和绿色文本标签
- 平均排名：24.67
- 5秒测试排名：25
- 20秒测试排名：24
- 综合排名：25
倒数第二名 - Toggle #22 - 浮雕按钮(无阴影版)
- 平均排名：26.33
- 5秒测试排名：27
- 20秒测试排名：26
- 综合排名：26
最后一名 - 拨动#27 - 浮雕按钮(阴影版)
- 平均排名：26.67
- 5秒测试排名：26
- 20秒测试排名：27
- 综合排名：27
最佳切换器
第三名--2号切换器--粗体字
- 平均排名：2.67
- 5秒测试排名：4
- 20秒测试排名：2
- 综合排名：2
第二名 - 第24号开关 - 检验标志
- 平均排名：2.33
- 5秒测试排名：1
- 20秒测试排名：3
- 综合排名：3
第一名 - 第26号开关 - 不活动的按钮与背景重合
- 平均排名：1.33
- 5秒测试排名：2
- 20秒测试排名：1
- 综合排名：1
5秒和20秒测试之间的差异
我们的次要目标是了解受访者在决定答案之前，根据观察时间对切换器的看法的差异。我们的期望是，20秒测试的结果总体上应该比5秒测试的结果更好（错误率更低，置信度更高），因为参与者会有更多的时间来思考他们面前的拨动器。
我们计算了平均值，结果可以在下表中看到。
| 测试类型 | 平均错误率 | 平均置信度分数 |
|---|---|---|
| 5秒测试 | 0.1728 | 0.5749 |
| 20秒测试 | 0.1670 | 0.6013 |
结果证实了我们的预期，因为在20秒的测试中，平均错误率较低，成功-信心分数较高。然而，这些差异并不显著。我们感兴趣的是，是否有任何特定的开关在两个测试变体之间显示出明显的差异。因此，我们关注那些在5秒和20秒测试结果之间表现出最大改进/恶化的切换器。
20秒后表现更好的切换器
在5秒和20秒的测试中，4号、11号和18号拨动器获得了最大的改进，如下所示。一旦参与者有更多的时间来观察它们，它们都获得了6个等级。这表明，随着观察时间的增加，线索的清晰度得到了提高。
- 5秒测试排名：16
- 20秒测试排名：10
- 错误率的差异。-0.0527
- 归一化的成功-信心得分差异。0.0913
这个视觉提示在激活和非激活状态下的字体大小差异是第二小的。我们认为，排名的变化是由于一些参与者需要时间来注意较小的字体大小差异。然而，当额外的时间被添加到测试中时，这种差异是很明显的，足以引起重视。
接下来的两个开关有足够的共同点，我们可以把它们放在一起分析。
- 5秒测试排名：12
- 20秒测试排名：6
- 错误率差异。-0.0526
- 归一化的成功-信心分数差异。0.0912
- 5秒测试排名：17
- 20秒测试排名：11
- 错误率差异。-0.0526
- 归一化的置信度得分差异。0.0772
这两个线索的设计方式都是：更明显/饱和的颜色表示主动选项，而非主动选项则由较浅的颜色来描绘。结果的差异表明，有一定比例的用户最初认为浅色是更明显的颜色。然而，当用户花更多的时间去思考这个切换时，这个百分比就会下降。要想做出一个马上就能理解的切换器，界面设计师也许应该看看其他的视觉线索。
20秒后表现较差的切换器
拨动15
拨动17
| 拨动号码 | 5秒测试排名 | 20秒测试排名 | 错误率差异 | N.信心分差 |
|---|---|---|---|---|
| 15 | 11 | 19 | 0.0526 | -0.1018 |
| 17 | 15 | 21 | 0.0877 | -0.1299 |
拨动15显示出最大的排名下降，而拨动17在错误率和信心得分方面遭受了最显著的负面变化。
我们对这两者的下降进行了解释，因为这两个切换器在某种程度上是相似的--都有深色和浅色的一半--这意味着它们会被认为是不同的，例如，在移动设备上使用浅色模式与深色模式设置时。虽然用户的本能反应可能是选择较深的颜色作为主动，但只要有一些时间，更多的人就会开始猜测自己。与其说是深色吸引了他们的目光，他们可能会开始过度思考，认为较亮的颜色在黑暗中被突出。一个好的切换器不应该鼓励这种怀疑。
未来研究的潜力
我们在研究中测试的所有线索都是简单/单一的。从这里开始，下一步的研究自然是更深入，研究的重点是更详细地评估我们的发现。如果非活动按钮的字体更粗，我可以在非活动按钮中使用粗体吗？视觉线索的组合是否会比单独的任何一个线索表现得更好？虽然答案可能看起来很直观，但研究数据可能证明并非如此，正如我们的研究所显示的那样。
另一个下一步将是测试颜色改变的效果。绿色的饱和度会不会和橙色的饱和度一样好？
测试使用不同颜色方案的网站导航原型中的视觉线索的性能是另一个雄心勃勃的继续研究的领域。我们在空白处测试了我们的切换器，但它们的性能有可能会因视觉环境的不同而不同。
结论
在这篇文章中，我们描述了我们的研究，我们分析了一个复杂的视觉线索列表，这些线索是由切换按钮用来传达哪个选项是激活的。通过用真实的用户测试我们的研究问题，我们收集了大量的数据来对视觉线索的有效性做出可靠的陈述。
下面是我们得出的一些要点，在设计下一个切换按钮时，你应该牢记这些要点：
- 如果你选择使用颜色作为主要线索，我们建议你使用一种饱和的活泼的颜色（最好与你的CTA配色方案相对应）和一种浅灰度的中性颜色 相结合。使用切换器的背景填充的颜色比使用彩色文本要好。如果不活动的按钮的颜色与周围的背景相同，这将进一步提高按钮的可理解性。
- 在任何情况下都不应该使用视觉重量相近的对比色。红色和绿色的文化认知不会帮助你传达选择的内容。有更好的方法可以做到这一点。对黑与白的组合也要保持警惕。使用这种颜色方案的切换器是最容易引起混乱的，其根源在于黑暗/光明模式的设置。
- 你可以选择一条简约的道路，用字体本身来显示按钮状态的不同。黑体-细体组合是常用的解决方案，但你也可以使用不同的字体大小。只要确保将字体大小区分得足够好。建议使用字体重量或大小来支持其他视觉线索，因为它非常灵活。
- 如果你决定使用浮雕作为主要线索--你真的不应该。事实证明，它在传达切换器的活动状态方面是不可靠的。甚至一个简单的边框也更有效。如果你决定使用浮雕拨动器的视觉吸引力，我们建议将浮雕与一个主要的视觉线索相结合，如粗体字或颜色填充。
- 使用你确信会成功的设计并不可耻。勾号或单选按钮图标都表现得非常好。选择它们的明显缺点是在你的网页设计中加入了繁琐的内容，因为单选按钮作为UI元素的功能与拨动按钮的功能不同。拨动按钮可能会被认为是过时的（类似于物理形式而不是网站）。至于单选按钮的图标，你还不如用单选按钮来代替。
遵循这些提示，你的切换按钮设计就不会再让用户对此刻选择的东西犹豫不决。
