Mute or unmute?

The biggest dilemma of the ‘work from home’ era

Muting and unmuting the mic is the most frequent feature that people uses during a video conference call.

“Do you want to view Peppa Pig? Or is it Doraemon that you want?”

“Peppa Pig, Peppa Pig…”

“Here. Let me help you with the TV remote control.”

This conversation with my younger kid was telecasted to a dozen people in three continents because I forgot to mute! A Microsoft Teams conference call was going on while I was working from home. But I’m lucky compared with some souls who became the subject of viral ‘Zoom Fails’ during this Covid 19 lockdown.

Why are we finding it difficult to determine whether the video feed is ON or OFF? Mic mute or unmute? How hard can it be?

UI Toggle Button

Buttons allow users to take actions, and make choices, with a single tap. A toggle button allows the user to change a setting between two states.

‘Next State’ Toggle Button

Life is very simple when toggle buttons indicate the next upcoming state. Example? The ubiquitous ‘Play/Pause’ toggle button.

‘Play/Pause’ toggle buttons of multimedia players. Android apps of (1) Google Play Music (2) Amazon Music (3) VLC Player (4) Pocket Casts (5) SoundCloud (6) TuneIn Radio

The moment music starts playing, the ‘Play’ button toggles to ‘Pause’ button. This indicates the next available action for the user — pause the music.

Another example of the ‘next state’ toggle button is the ‘List/Map’ view button. If you are looking at a list of places in an app like OYO, you can change to a map view by tapping on ‘Map View’ button. The button instantly toggles to ‘List View’ once you are in map view.

‘Current State’ Toggle Button with Static Icon

These toggle buttons always indicate the ‘current state,’ rather than the ‘next state’ discussed earlier. This toggle button says that “You are here.” Most of the time, the next state is very obvious for the user. Example: next state is OFF if the current state is ON.

Take a look at the Android 10 notification drawer below.

Android 10 (Samsung One UI Core 2.0) notification drawer. For the ON state, the buttons are emphasized in the highlight color. For the OFF state, the buttons are in a ‘disabled’ state.

Because of the contrasting color between the ‘enabled’ ON state and the ‘disabled’ OFF state of the toggle button, it is very easy for the user to understand “where am I?”

‘Current State’ Toggle Button with Changing Icon

There is also one more variation where the ‘disabled’ OFF state is represented by a new icon. A diagonal line, striking off the corresponding icon, is the most popular icon change.

Android 8.1.0 (Motorola) notification drawer. For the ON state, the buttons are emphasized with a highlight. For the OFF state, the buttons are in a ‘disabled’ state with the icons having a diagonal line, striking them off.

Because of the unmistakable icon style (presence or absence of the diagonal line) for OFF and ON states, the dependency on contrasting highlight color is minimal.

Mic Mute and Unmute

Let’s now look at how six of the popular video calling apps are handling the toggle buttons for muting and unmuting the mic.

1. Google Duo

Google Duo Android App: Enabling and disabling the ‘mute’ toggle button.

Google Duo is a little confusing at first when muting the mic. Technically, it is enabling and disabling a ‘mute’ toggle button from OFF to ON. Just by looking at the button, it is difficult for a user to understand whether the button is in enabled (Mute ON) or disabled (Mute OFF) state. The ‘mute’ icon used is the same in both the states. This gives a higher cognitive load to the user and people might mute or unmute inadvertently.

2. Whatsapp

Whatsapp Android App: Enabling and disabling the ‘mute’ toggle button.

Facebook owned Whatsapp is also following the Google Duo way. A button highlight differentiates the states: enabled (Mute ON) or disabled (Mute OFF). Here too, the ‘mute’ icon is the same in both the states.

3. Webex Meetings

Cisco Webex Meetings Android App: Enabling and disabling the ‘mute’ toggle button.

Webex Meetings app clearly highlights the ‘mute’ toggle button in red color when it is enabled (Mute ON). The ‘mute’ icon is the same in both the states.

4. Facebook Messenger

Facebook Messenger Android App: Current mic status is shown with an appropriate icon and enabling/disabling is highlighted.

This second video calling app from the Facebook family has a different approach compared to Whatsapp. The ‘mute’ toggle button always shows the current status with an appropriate ‘mic’ icon. When ‘mute’ is enabled, the icon changes to ‘mute mic’ visually and the toggle button is highlighted using a color as well.

5. Microsoft Teams

Microsoft Teams Android App: Current mic status is shown with an appropriate icon; no button highlight in any state.

The ‘mute’ toggle button of Microsoft Teams always shows the current status by an appropriate ‘mic’ icon. When ‘mute’ is enabled, the icon changes indicating that the mic is muted. There is no color highlight of the button in any state.

6. ZOOM Cloud Meetings

ZOOM Android App: Button icon and button label are not in sync?

ZOOM is complicated. Stay with me on this, OK?

A label is always a welcome addition to an icon-only-toggle button. A button label clearly instructs the user about the next state that is possible. Remember the ‘Play/Pause’ toggle button of music player apps?

So, the label ‘Mute’ means ‘the user can mute the mic by tapping on the button.’ When you tap on the ‘Mute’ labelled toggle button, the label correctly changes to ‘unmute’ showing the next state; but the icon shows the current state of ‘mute.’ Unfortunately, ZOOM app uses the ‘unmute’ icon along with the ‘Mute’ label. A red highlight color is also thrown into the mix.

No wonder, people are having trouble with this ‘mute/unmute’ toggle button of ZOOM. When the same situation happens to ‘camera on/camera off’ toggle button, hilarity ensues as illustrated in the BoredPanda article on ZOOM fails.

What Should We Do to Help Users?

Dear designers of video calling apps, the simple answer to the above question is to use the ‘Current State’ toggle button with a visually changing icon.

Best practice for indicating mic ‘Mute/Unmute.’

When muted, change the icon visually; highlight the current ‘Mute’ state with a color; provide a short toast message (“You are muted”) on the current state change to the user.

When unmuted, toggle back the icon visually; remove the highlight color; provide a short toast message (“Your mic is ON”) on the current state change to the user.

What is your view on this whole ‘mute/unmute’ experience? How should it behave? Do comment below.

Leave a Reply

Your email address will not be published. Required fields are marked *