a Mute Button for kids
2016 | UI Design
It’s usually smart to reuse established patterns in usability, but I began to more critically interrogate iconography while designing educational products for children.
5-year-olds don’t have years of exposure to common symbols, much of which is based on obsolete analog history. The quintessential example is the floppydisk "save" icon; plenty of designers push to redesign it, but I side with Justas at Icon Utopia:
“A Settings gear, folders, etc. There are tons of objects you would rarely see in the real world these days. But they still make great icons. People learn icon meanings[…]and the physical object isn’t even important anymore.”
As long as the icon was interpreted as intended for my use cases, I defaulted to using standard icons.
Then, I observed the mute button in the hands of 6-year-olds.
Discovering the problem
Through feedback and observations, my team discovered that kids had trouble with mute controls for lessons during class. If students got annoyed, we expected them to click on a standard mute icon. Instead, they unplugged their headphones, missing any subsequent instructions.
This kind of error doesn’t appear in data, but can devastate actual learning results. We needed to improve the control and effectively communicate the following states:
- Audio can be turned on and off at will
- Audio is playing, in case student doesn't hear it
- Audio can be replayed if student needs help
Client names and other information have been omitted and obfuscated to comply with my non-disclosure agreement. Opinions and analyses in this case study are my own and do not necessarily reflect the views of my past employers.
I researched and designed interface controls for young schoolchildren using digital education tools. The mute button is one curated case.
Len Yeh, Product Design
This kind of error doesn’t appear in data, but can devastate actual learning results.
We started by exploring common representations of sound, audio, and other synonyms*. Most of it was expected: too metaphorical, visually elaborate, or conceptually complex (e.g. soundwaves).
Adults could tell you the irregular hexagon shape is based on a speaker cone, but most children think sound-emitting gadgets are cylinders, cubes, or headphones. We needed more appropriate UI cues.
*See the hero image of this essay
Abandon all biases
A few icons that were more literal caught our attention. Ears, avatars listening to headphones, or speech bubbles had qualities that seemed stripped down and contrary to our adult biases — worthy of exploring.
The avatars kept our attention, as they could be interpreted as the students. Would they copy the icon in a monkey-see-monkey-do fashion (i.e. icon has headphones, let's put on our headphones)?
The on/off ambiguity problem
While testing, we immediately ran into a common issue with mute icons. Does the icon show me the current status, or does it show me the action I can take?
Products like Spotify get around this since users have immediate feedback. If music is on, it's obviously not muted. We didn't have that luxury; instructions were intermittent. Even if audio is ON, the app could be silent.
The monkey-see-monkey-do approach also failed to solve certain requirements. Students were still taking off their headphones and unsure of how to mute.
Introducing The friendly bigmouth
Students were reacting differently to an avatar/emoji design, so we kept exploring. Maybe the face needed to represent a helper or teacher instead of a student. It could be telling them what to do. At the end of the day, all we really wanted to communicate was that someone was talking to them.
So why not just have an icon with an actual mouth?
At the end of the day, all we really wanted to communicate was that someone was talking to them.
Animation gave the mute button a level of interactivity that kids loved.