在最近与客户的WebEx会面中,我惊慌失措地认为我无法转过我的麦克风。我应该给一个6小时的演讲 - 如果我甚至无法突破自己,我将如何做到这一点?我一直点击跨越麦克风图标,但麦克风留下来横渡了我所做的一切。

Here’s a screenshot:

Control bar for the WebEx app for desktop: (Top)Unmutedstate; (bottom)Mutedstate

In my panic, I was completely oblivious at the change in the icon color! Eventually, I discovered that, even though the microphone was crossed in both states, the red color of the icon was meant to signal that the button was active and I was muted.

I have seen users fall prey to this issue many times. TheMute按钮用于在两个系统状态之间切换(MutedUnmuted), but the problem is that users cannot easily tell what the current state is and what they are switching to. (Also, contrary tobest practices in icon design, in the WebEx implementation, there is no text label for theMute按钮。)

Two Pieces of Information, Two Controls

In a situation where users can move between 2 possible states (let’s call themofffor simplicity), there are two bits of information that are relevant to the user and, while related, are not identical:

  1. 系统的当前状态(或者off;在麦克风示例中,Muted或者Unmuted)
  2. What will happen if the user presses the button — that is the next state, which could beoff或者, depending on the current state (in the microphone example,Unmute或者Mute)

An obvious way of implementing them would be to have two different UI elements: a state indicator and a change-state button. For example, in the Tesla app, theControlsscreen takes this approach: you have both a state indicator to show you that the car is locked and anUnlock按钮。点击状态指示器没有,但敲击控制器解锁汽车。

Tesla for iPhone: (Left) The icon abovethe Unlockbutton 作为国家指标;按钮Unlockis a state-switch button that is clearly labeled with what will happen if users press it. (Right) The state and the button label change once the user unlockedthe car.

Two Pieces of Information, One Control

However, if you have a 2-state system, the current state and what will happen next are complementary. In other words, one may assume that the two pieces of information (state and what happens next) could be conveyed through a single control — a switch-state button. That’s because, if users knew one, (in theory at least) they could infer the other (if you know that your next state will beoffthen you can infer that the current one is;或者, if you know that your current state is,你可以推断你的下一个是off).

However, remember thatany type of inference takes time and cognitive effort, and often people are under the time pressure to respond quickly. If I am trying to unmute myself, everybody is either waiting for me or ignoring me and moving the conversation along, so I don’t have time to pause and think about the interface or make inferences.

Sometimes, however, the state can be easily determined based on other signals. For example, in a video player, there is just one control (thePlay按钮),它表示未来的状态。有足够的信号虽然弄清楚视频正在播放 - 用户可以听到视频或在屏幕上看到图像的更改。

Youtube:Playicon is replaced withPausewhen the video is playing. The icon indicates the state that the system will move to, should the button be pressed.

If you decide to use a single control to indicate both state and what will happen next, how should that control be labeled?

There are two alternatives that could be considered in that situation:

  1. s的按钮标签通信状态ystem will move to, should that button be pressed — that is, it tells the user what will happen next.

    This is the standard recommendation for button design. Specifically, a site-registration button will be calledRegister和a submit button for an ecommerce checkout form will be calledPurchase或者Place或者der

    If a button is used to switch between two states, to follow this recommendation it should also change label, like in the Tesla example above or in the OBS example below.

    OBS工作室:按钮开始录制遵循经典的命名推荐和交换标签Stop Recording在ce the recording has started.

    If there is no text label (presumably because the icon is clear enough), then the icon should change depending on the state it moves the system to. A classic example is the interplay between thePlayPauseicons seen in the YouTube example above and present in most video players.

    2. The button communicates the active state using a shadow。这是用于在现实生活中发生的东西,打开/关闭按钮:当你按下它们时,他们没有改变标签,但“沉没”。在UI设计中,要捕获那个隐喻,设计人员通常会添加一个阴影,以指示按下该按钮,现在它是活动的。

    In Word, the icon forBfor Bold (left) acquires a shadow when selected (right) to indicate that you are in bold模式 (not normal). In this implementation, the button does not change label as the user presses it.

    Understanding this design clearly depends on the shadow being recognizable as a signifier for active state. This design should NOT rely onthe user remembering the color of the button in its two states和knowing which color stands for active — in order for it to work, it should be absolutely evident that the active state is a pressed button, a feat that is sometimes hard to achieve in aflat-design世界。

让我们回到WebEx示例。回想起来,我们可以看到WebEx使用单个控件来指示当前状态,并将发生的内容发生并实现第二种设计解决方案 - 信令活动状态。不幸的是,红色作为活动状态的指示剂的红色颜色是一个差的设计选择,原因如下:

  1. 红色在接口中任意使用红色 - 例如X(Leave)按钮也是红色的,它不能意味着它是活动的。(如果红色代表了活动状态,那将是什么红色Xmean? That I’ve left the meeting already?)
  2. 不同颜色(蓝色)用于表示其他按钮的活动状态VideoChat(i.e., the blue video icon signals that video is on).

在没有活动状态的清晰指标的情况下,留下用户依靠按钮标签来决定发生的事情,并将图标标签不变,这将只是引起混淆。

By the way, The Phone app on the iPhone uses the same implementation — the only difference is that it is more consistent than WebEx and deploys a white fill to indicate active state. Even with those adjustments, it’s hard to infer the active state of a button.

iPhone的手机应用程序:Mutebutton does not change icon, but signals active state using a white fill (left). Even though white is perhaps a better rendition of a shadow than an arbitrary color, it is not a strong signifier for active state

Recommendations

So, what is the overall recommendation for state switching buttons that double as state indicators? The safest solution is to use 2 UI elements, one for current state and another one for the switch-state action, like in the Tesla example.

If you want, you can combine the two in a single control like Zoom does. ItsMutecontrol has two separate components:

  1. A text label indicating what will happen if the user will tap on that control
  2. 指示当前系统状态的图标

Clicking on either will change the state.

In Zoom’s design, the icon is meant to indicate current state and the label indicates what will happen if users click that button. Clicking on either the icon or the label changes the state.

A newer version of WebEx has moved to the same design.

A newer version of WebEx uses the same design as Zoom for the switch-state controls.

请记住,您使用开关控制的目标是确保用户快速了解:

  • The current state, and
  • What will happen if they press that control

Assess the two states that the system will go through.

  1. Is it obvious what the two opposite states are?
    • If no, then that speaks in favor of the 2-control design: one for the current state and one for the action to move to the other state.
    • If yes (perhaps because there are strong conventions and a standardized design), you can consider a single design element that simply says what the command will do.
  2. 有外部线索(如声音、视觉陈ges in the environment) that could help users determine the current state?
    • If no, then use the 2-control design, with a state indicator (to clearly convey the current state) and a button to switch state.
    • If yes, then you can consider a single design element — a state-switch button.
  3. Will users need to quickly determine state and change it (like in the case of theMutebutton)?
    • If yes, then simply have an icon to indicate state and a button for changing it.
    • 如果否,则可以考虑一个状态开关按钮。