The Simple Volume Control

We have Sonos speakers here at the office. The Sonos application is pretty cool. However, there is one part of the system that bugs me and it’s extremely simple.

This is the volume control. Now when you have a Sonos speaker in a group environment, the volume is actually a crucial function. Some songs are recorded louder or softer and when people are working a high volume can be very annoying.

To use this control, you have to put your mouse onto the slider and drag right or left. It is very sensitive, so finding the right setting is tricky. The volume controls on my keyboard are not connected to Sonos, just my local machine.

So why is this bad?

The main factor here is fine motor skills of the users, or lack thereof. Most users are unable to move their mouse in 2px increments. However, a single pixel, in this case, is the difference between too loud and too soft.

Other Examples of requiring fine motor control.

  • Resize a column in a table/grid and you might find you need to move your mouse 1px to find the spot.
  • Screen capture software often makes you start your clicking in exactly the right spot.
  • Settings in an UI is often behind a 10×10 icon with no padding so finding it is challenging
  • Drag targets are often tiny and dropping on the right spot nearly impossible.

The bottom line is that, as a designer, always make sure you are not asking your user to be too fine with their gestures. Make it finger compatible and you will be in good shape.

The thing that Sonos missed it a Spinner control. If we take the existing Sonos volume, I would enhance it to look more like this:

Requirements:

  1. Keyboard: Arrow keys move volume
  2. Dragging from anywhere on spectrum moves volume
    1. Up/Right = Loud
    2. Down/Left = Soft
  3. Mouse wheel also changes volume
  4. Clicking up/down arrow icons move by 1
  5. Double-click on up/down arrows moves by 10
  6. Allow type in a number in the input box.
  7. Left click on the OFF will mute

First, we added feedback. What volume is it currently at? Then we added gestures. I wrote about using multiple gestures years ago.

All of the sudden, this control has detail and nuance. It can be used by people without a struggle. It is the job of a designer to make sure the UI Requirements are comprehensive. It is the job of the product manager to not cut scope on these requirements. Yes, it takes longer, but a positive experience is worth it.

Simple controls are rarely simple if you look closely.

Leave a Reply