it-swarm.cn

切换按钮应该显示其当前状态还是将其更改为状态?

我有一个关于在两种状态之间切换的按钮的快速问题。 (请考虑播放/暂停,或随机播放/常规播放。)正如标题所述,切换开关应该显示当前状态还是过渡状态?

我认为人们已经习惯了“播放/暂停”约定。但是,如果您显示过渡状态而不是当前状态,则随机播放/常规播放可能会更加令人困惑。例如,Xbox 360上的内置音乐播放器就是这样进行的:处于随机播放模式时,它会显示直接播放的图标,反之亦然,并且总是让我感到困惑(我处于随机播放模式或直接播放)。

我这样看:“播放/暂停”更像是开始播放或暂停播放中的动作。是的,在幕后是状态转换,但对用户而言,有一个动作。而“随机播放/直接播放”是一个选项,最好显示当前状态(可能只有一个图标和“更改”按钮以显示该选项已启用/禁用)。有什么想法吗?

461
Michael Brown

关于Face 2.(有一个v3,但我还没有得到)中,Cooper和Reimann(2003,pp。341-2)在“触发器按钮:应避免的选择习惯”。我强烈建议查阅这本书,因为我仅会摘录:

触发器按钮控件非常有效。它们通过使用单个控件控制两个互斥的选项来节省空间。触发器控件的问题在于它们无法履行每个控件的第二项职责-告知用户其当前状态。如果在状态关闭时按钮显示为ON,则不清楚设置是什么。如果状态为OFF时为OFF,那么ON按钮在哪里?不要使用它们。没有按钮,没有菜单!

作者(我认为这些是对该主题的权威)提出了两种可能的解决方案:您应该将按钮的动作拼写为动词短语 (例如切换为人像模式,从而节省了一些节省的空间)或完全使用其他一些技术(例如,两个单选按钮)。

268
jensgram

简短答案

答案很晚,但我很惊讶以前没有人指出这一点-拨动开关有可能显示其当前状态and它将显示为的状态只需更改通过在按钮上加上文字[outside,而不是在按钮上。

Real Life Switches

长答案

正如dotancohen指出:

问题在于英语中的“ on”和“ off”既是副词又是形容词。

身体外有文字的按钮会利用这一事实,从而发挥其优势!继续阅读...


iOS On-Off Switch

让我们关注蓝色的状态,例如说[〜#〜] on [〜#〜]

iOS ON

您能否确定该开关当前是否为ON,或者如果您移动/单击/轻按滑块,该开关是否会接通?文字明显吗?这里的“ ON”是状态(形容词)还是动作(动词)?不清楚有什么用的颜色可以帮助您决定这一点吗?可能,但不是肯定的-iOS用户可能已经习惯了这种设计状态,但是并没有告诉非iOS用户如何解释这一点。要了解我的意思,请使用与iOS开关设计相同的现实旅行开关-您能否确定旅行开关当前是否打开?

Ambiguous Trip Switch

下面的开关与iOS设计类似,但更糟糕的是...

Ambiguous On-Off Switch

...甚至不清楚滑动/点击手柄的哪一半!


Unambiguous On-Off Switch

詹姆士格报价的问题...

如果状态关闭时按钮显示为ON,则不清楚设置是什么。如果状态为OFF时为OFF,那么ON按钮在哪里?

...因为按钮既不显示ON也不显示OFF,因此这里永远不会出现-它只是独立存在。另外,关于ON和OFF的上下文也没有混淆-它们是非常清楚的状态(形容词),因为单击它们(在正常设计中)将无济于事!

有趣的是,对此设计的修改将允许按钮远侧的文本变为可点击/可点击。如果是这样,则最接近开关句柄的Word是状态,而另一个是动作,并且在切换开关时,角色将反转。

Modded On-Off Switch

即使这样,用户对开关的看法也不会改变-用户绝不会对开关的当前状态感到困惑。实际上,可以通过突出显示当前状态来进一步增强设计以提高用户友好性:

Highlighted On-Off Switch


Win8 On-Off Switch

按钮的颜色指示当前状态(在现实生活中,照度= ON),并且选项文本下方的On/Off(开/关)字样使用户确信当前状态。

414
SNag

无论您决定什么,请不要执行Twitter的操作。

Aargh don't change the button when I'm about to click it!

60
Daniel Alexiuc

问题在于英语中的“ on”和“ off”既是副词又是形容词。因此,找到替换词是动词形容词来标记具有以下功能的按钮:

Enable / Disable
Enabled / Disabled
Start / Stop
Running / Stopped

非常晚的编辑:看到我的一位同事设计的一个很棒的开关,它成功地保持了“开/关”的术语,但毫不含糊地做到了:

on off switch

35
dotancohen

合理的折衷办法是在按钮处于关闭状态时使其不突出显示(也许具有中性的背景颜色),而在按钮处于打开状态时使其突出显示(改变背景颜色)。

例如,查看Spotify(web)应用程序的此屏幕截图,您认为随机播放是打开还是关闭?

Shuffle is most certainly on

26
Marks Polakovs

我认为您的问题非常正确。

如果切换是动作-播放/暂停-那么它应该显示将要发生的事情。因此,在暂停时它将显示“播放”,然后在播放时显示“暂停”。

如果切换是选项-随机/线性-那么它应该显示当前状态。

我不确定如何向用户指示一个按钮是一个动作而另一个按钮是一个选项...

25
ChrisF

我会说,这取决于大小写,就像ChrisF所说的,在动作按钮状态按钮之间进行区分很重要。

如果您的按钮上有文字,则可以更改文字以显示单击它会执行某些操作(例如:“打开随机播放”)。但是,在您的情况下,由于它只是一个图标,因此我只需要根据状态来选择启用/禁用的随机播放图标。如果已禁用,则用户应该清楚它是直接播放的。您可以点亮它或将按钮显示为按下状态。

考虑在悬停上添加工具提示,以使其更加清晰。

20
mbillard

令我惊讶的是,没有提到在iOS(及其他地方)中使用的技术,一个组合的动作/状态按钮,其中两个选项都可见,分组并且活动的一个选项清晰可见。

可怕的ascii艺术可以展示:

[ ON | off ]

Airplane mode toggle on iOS

20
jezmck

我会停止说“不要使用它们”。

我建议在有清晰的打开和关闭状态的情况下可以使用切换按钮。例如,当您有一排灰色按钮单击时变为彩色时,可能会发生这种情况。

这就是播放/暂停在许多情况下都起作用的原因。播放按钮不是在两个状态之间的切换,而是使能/禁用。开启时(我正在玩!),它变成亮绿色,变成灰色并显示||。关闭时(我不在玩!)。

其他按钮也一样,因此一致性增加了负担。这也可能基于我们对磁带录音机或VCR的历史认识,您按下了按钮(即处于打开状态)或按下了按钮(即处于关闭状态),并且我认为这是考虑切换时的绝佳思维模式。

但是在任何情况下,如果不能简单地将它们“激活”,或者无法用较丑陋的复选框替换切换开关,那么出于上述所有原因,我将默认设置为“不使用它们”。

[〜#〜]加成[〜#〜]

我今天刚刚注意到Evernote的切换非常有效。他们采用了鼠标悬停的方法,实际上效果很好。请注意,这是打开/关闭样式控件的另一种情况。

toggled off

toggled on

附加

我今天发现了这个有趣的开关,并想起了用户体验问答。注意状态是如何立即显而易见的,并且当您触摸它时,状态也会切换,这一事实也通过带有纹理的“手柄”(即承受能力)变得很明显。我只知道当我抓住那个凸起的旋钮时,它就会切换在另一侧说与现在所说相反的话;就像飞机上的厕所一样。

这样他们就可以做好。

toggled offtoggled on

20
Kato

此处已经有18个答案,因此这可能对聚会来说太晚了,但是在这种情况下使用复选框很有意义。一些例子:

enter image description here

并在选择时:

enter image description here

这类似于 Facebook的“ Like”使用 的“暗淡/点亮”方法,但与复选框结合使用以提供更好的可见性。在任何情况下,关键点是仅使用一个单词(或一组单词),而不是试图使用户在多个单词之间做出选择。

另外,要避免使用负前缀(“Not”,“Non-”,“Un-“,”Dis-“,”Im-“,”Mis-“,”In-“,”Il-“,”Ir-“),否则,用户在拥有 un选中复选框:

enter image description here

20
Pacerier

我一直在使用Toggle Button使用简单的Toggle Button(一次具有可见状态)将“添加”和“删除”元素到集合中,该状态具有以下状态。

  • 添加(如果从未单击过按钮)

  • 删除(如果以前单击过该按钮,而现在某项已成为集合的一部分)

但是这对于新手用户(50岁以上)总是很困扰我,起初很难理解发生了什么,为什么在我得知该项目已成为收藏的一部分之前,按钮为何要求“删除”。在这种情况下,丢失的位是一条通知消息,内容为“项目已成功添加”。我正在使用显示在屏幕顶部的基于Javascript的状态消息(使用 http://Twitter.github.com/bootstrap/javascript.html#alerts ),但由于它在视觉上已与互动元素,我只为部分用户解决了一部分问题。

另一期

每次单击后,您的按钮都会更改其“姿态”或“翻转其侧面”。有时,它说“我是添加按钮”,有时它说“我是删除按钮”(在其他添加按钮的同一列中)。更改颜色有帮助,但这些仍然是一个按钮承担的两个相反的角色。不SO正确。

我的解决方案:

对于这个较小且经过充分讨论的问题,我的解决方案是用类似的东西替换切换按钮。

单击后未单击标题为“添加”的按钮,单击按钮将其自身替换为消息“已成功添加”,并显示一个24x24的小按钮,其标签为“ X”,并且您可以取消上一个始终为“添加”的操作。因此,您从不单击“删除”按钮,而仅“取消”先前的“添加操作”。另外,您无需在页面上显示单独的“成功添加”通知。这种方法的缺点是您需要更多空间放置“成功添加”标签和“取消按钮”,但我认为这是较不易混淆的方法之一。

enter image description here

12
Salman Ehsan

在许多情况下,避免使用此类按钮可能很有用或可能。

例如。如果是随机播放/常规播放:只需使用旁边带有“随机播放”标签的复选框,任何人都不会感到困惑...

对于播放/随机播放按钮,也许也不必更改按钮上的标签。您可以使用“按下”按钮指示“正在播放”,并使用“向上”按钮指示“未播放”。或者,您当然可以在用户界面的其他位置放置一个指示器(这就是我的立体声系统所做的...)。

并不是因为某家公司开始使用某个小部件,突然它应该用于所有东西...

11
JanC

在Facebook上,“赞”按钮是切换按钮的一个很好的例子。

在Facebook的Android应用程序上,按钮上有类似图标,关闭时显示为灰色,打开时显示为蓝色。请参见下面的屏幕截图。

基本上,我同意他们的看法-强调积极的想法,不要惹恼用户的大脑(最小变化)。

我不确定这是否是色盲的好方法。也许他们应该更大胆地做出指示。

enter image description hereenter image description here

在Facebook的web-app上,模式是不同的。按钮的文本更改以指示操作-单击时发生的情况。这很混乱。但是,这是有道理的,因为它们有很大的空间,并且具有用户喜欢帖子的单独指示。

enter image description hereenter image description here

9
AlikElzin-kilaka

我建议您观看下面的视频(从1991年开始!),例如,它是iOS切换器当前设计的开创性内容: https://www.youtube.com/watch?v=wFWbdxicvK

以及相应的论文: http://dl.acm.org/citation.cfm?id=143079

以下是他们比较的切换: The toggles they compared 并且结果优先: Results of the preference test

7
Riche Design

如您所指出的那样,带有标签的按钮(切换按钮)通常令人困惑甚至模糊。代替,
显示状态动作,如下所示:

在线 Go offline

因此,我们有一个不可点击标签清楚地指示了当前状态,还有一个不可点击按钮来执行更改状态的操作。

如果单击“脱机”按钮,则标签将更改为“脱机”,并且按钮将变为“联机”。

同时显示当前状态和操作是完全清楚的唯一方法。单选按钮可以做到这一点,但是标签+按钮解决方案更好,因为它在两者之间提供了清晰的视觉区别。同样,它自然比单选按钮更紧凑。

至于替代方案,我认为已经同意切换按钮可能会出现问题。甚至复选框也可能造成混淆:

 在线

未选中该复选框,因此该应用程序处于脱机状态。但这不是特别清楚。如果您看了一眼,首先看到的就是“在线”一词,因此很容易得出错误的结论。

麻烦的是,您只能看到一个标签。在决定标签指示状态还是命令之前,您需要考虑一下。此问题对于复选框和按钮很常见,尝试始终使用形容词(或动词等)可能会有所改善,但不会使问题消失。

6
Bennett McElwee

对于“播放/暂停”示例,我将正常显示当前状态,而将鼠标悬停时显示相反的状态(这是适当的,即不在触摸屏上显示)。该项目具有2个自然状态,没有统一动词。另一方面,可以将“开/关”简化为“电源”,而“开”状态点亮,而“关”状态则不然。

4
Rob Allen

我会总是当前状态一起去。我认为播放/暂停习惯用法是exception而不是规则。我认为像这样的播放/暂停可能是旧式磁带录音机时代的延续。当CD播放器上的播放/暂停结合在一起时,我记得当时在想那有多么酷和创新。

无论如何,一种使当前状态“处于选中状态”的方法很明显,就是使按钮发光一点,或者用看起来像蓝色的魔术勾勒出轮廓。

enter image description here

魔术蓝通常表示某些状态为“开”

因此,上述按钮实际上是iTunes的三态按钮。它具有3种状态:重复关闭,全部重复和重复1。很明显,按钮的表面在这里发生了什么。重复1为on

再举一个例子,我有3个不同的相机设置,这些设置可以通过一个按钮切换:正射1向上,正射4向上和透视。一个按钮在这些状态之间循环,而我在按钮的正面显示当前状态

一旦习惯了多个状态的单个按钮,它们不会that令人困惑。它们之所以出色,是因为它们分组为互斥设置,并且使用许多不同的按钮将UI的混乱保存起来。在某种程度上,它们就像一个紧凑的单选按钮。

我能想到的其他选择是:

  • 显示当前状态,和弹出菜单更改状态(即使只有2个选项)

这样的一个例子是Mac os如何向您显示蓝牙或机场的状态-它甚至有一个弹出窗口,其中包含有关每个操作将执行的操作的完整句子:

enter image description here

它显示当前状态(淡灰色表示关闭),并通过带有完整句子的弹出菜单显示下一个状态。

3
bobobobo

切换按钮上的标签(如播放/暂停)不应更改。该按钮本身应在视觉上指示其已被按下(保留标签“播放”)。这消除了所有的混乱。

2
Denzo

来自Evernote的@Kato的回答图像清楚地表明:标签传达了由切换按钮(“自动保存”)和切换按钮控制的内容,该切换按钮兼作状态指示器(O | I)。
某些切换的问题是试图将同一位用于两个不同的目的:传达状态和传达行动。
例如,我家的灯有一个匿名开关和一个明亮的指示器,它本身就是灯(当灯泡失效时,我们通常无法分辨出开关处于打开还是关闭状态) 。
剧本|暂停安排还具有清晰的指示符,即音乐本身的声音。拨动开关执行一项功能(控制),音乐执行另一项功能(通信状态)。
水平调整与线性切换控制状态,但不进行通信。您将需要拿起CD盒,等待主题完成,然后检查之后的主题是否是列表中的下一个主题(并重复确定)。但是,如果您认为它是一种改组| not-shuffle二进制选项,那么您可以在其控制的行为后标记(“ shuffle”为动词),并通过显示状态来传达状态。
据我所见,无论如何您都需要传达状态。
我的一个朋友为他的车门锁遥控器生气。它印有状态,他不知道这是动作还是反馈。

1
Juan Lanus

为了减少歧义,我建议:

  1. 使用操作作为切换按钮的文本,而不是状态。

  2. 确保按钮未突出显示。

  3. 突出显示鼠标悬停/聚焦时的动作,以强调会发生的情况。

  4. 突出显示当前状态并将其放在按钮旁边。

例如...

enter image description here

(其他示例:“打开” +“关闭”,“关闭” +“打开”)


或者您可以使用滑块

  1. 突出显示当前状态,该状态应显示在拇指控件上

  2. 将转换状态的动作放在空白区域(不要突出显示)

例如...

enter image description here

(想象一下,拇指控件看起来像拇指控件而不是按钮)


摘自我对 封闭重复问题 的回答,并做了一些改进。

0
Danny Varod