Volume controls and mute order

Question

I'm designing a remote control that only have Volume Up, Volume Down and Mute. But I can't decide where to put the mute button, in the middle or on the bottom.

And what should I have for the Mute button? Just a speaker, a crossed speaker, or a speaker with a X, or anything else.

---

EDIT: I just made this prototype, based on the feedback. I will test it that way, and if I don't like I may change it. Any feedback is appreciated though.

---

I asked because I found it both ways around my house, few examples:

HP Laptop

Microsoft Keyboard

Apple Keyboard

Directv Remote

Answer 1

Alas whatever you do with those 3 buttons, it's going to be confusing for the user because they are all physically identical. 99% of the remotes I've seen in this century have rocker buttons for the volume control and a differently shaped button (usually smaller, because it's not used as often) for mute. That also allows one to figure out what he's pressing in the dark much easier (without needed a lighted remote). Don't copy the keyboard designs because the volume control is often an afterthought on those, so it's cheaply made with whatever common parts are available. There's also a difference in how one holds a remote in hand vs. holding hands on the keyboard, so even the ideal-case considerations are different between these two devices.

As example of good arrangement I suggest the XBox 360 remote below (image courtesy of Wikipedia).

If you google a bit, you can see that Panasonic, LG etc. use a similar layout. Samsung is similar but different enough that's worth discussing. They normally put the mute where the "TV" button is on the XBox remote above, i.e. alongside the volume up. In the place of the Xbox's "mute", Samsung places the channel list button. The two small buttons in between the rockers are very easy to find in the dark, but the lower one is somewhat easier to press. So I think Samsung made a deliberate choice of making the channel list easier to find than the mute. I suspect they may have conducted some user studies before they decided this, because they use that layout on many different models. But since you don't care about making a full TV remote, you have no competition for your mute button, so place it alongside the lower volume button.

Also since there are no [TV] channels for the user to change in your application, you could place the whole set of buttons further to the right. Look at how some Denon remotes (an expensive and a cheap one) both place the volume buttons to the right side (image from electronicexpressinc.com):

That's because on an audio-oriented product changing channels/tracks (on the radio tuner or CD) doesn't happen as often as one zaps the TV channels. You are however taking some risk in doing this. If your users are very used to TV remotes, they may find this volume-column-to-the-right arrangement "unnatural".

Answer 2

Mute button at the bottom as this is going to be used less than your standard volume controls, and should also follow a logical flow: Volume up -> Volume down -> Mute. If this is in the middle a user could accidentally press mute which would be annoying. A mute button should follow conventional design so a speaker crossed out would be fine.

Check out the link below, it will give you an idea how the button tends to look on other remote controls, it is best to stick with what is already known.

Google search mute button on remote control

Answer 3

I don't think the order is particularly important. What's more important is grouping. Volume up/down go together, so need to be grouped together.

As for icons, I also don't think that's particularly important either. Namely because this remote only deals with one thing: volume. There's no need to put a speaker icon on a remote that only deals with the volume.

I think you have a rather unique opportunity here. Most remotes suffer from being way to complex. You have the opportunity to go way minimal.

Based on all the above, here's a quick stab at an idea:

I've minimized things down to the essential:

• Grouping: Two 'buttons' One for volume (actually two buttons, but grouped as one), one for mute.
• Scale: mute button slightly smaller to both differentiate and because it's likely used less.
• Simplified icons: up, down, 'mute'. No need for a speaker since that's all this remote does.

The biggest benefit to this, IMHO, is that it makes things a lot easier to deal with by touch. Your prototype is going to be harder to use without looking directly at it.

Answer 4

On the bottom, and just a speaker.

Photo of the Macbook keyboard fragment

UPD: I've submitted my answer and then noticed you've edited the question and added pretty much same photo.

Answer 5

The Volume up and volume down buttons should be next to each other, for the simple reason that when users adjust volume they press these buttons alternately and blindly until the desire volume is set, so you don't want any other bottom to be literally in the middle of that interaction. For me this is a must.

About the mute icon, I would personally go with any of this type...

... because they have less cognitive load and make a clear visually differentiation between the other two (just one structure instead of two) :

About the position, you should take in count:

• That the up and down buttons should be the ones with the "easiest access", so it will depend on the physical design of the controller.
• That the mute button should be place somewhere where it's not possible to press it by accident.

btw, have you consider other designs as a possibility?

Answer 6

1. Signs (labels) should be on the surface of the button itself (when user looks at the button it should tell the user what its function is, without having to look at other places. Therefore it's not a good idea to put the labels beside the button.)
2. Volume up should be positioned on top of Volume down. (This will give a visual cue of high being on top and low being at the bottom. This way user doesn't have to remember the position of each button, he/she can operate it without having to look at the remote. Positioning buttons horizontally will create this problem. User will need to remember if right button means volume up or down etc.)
3. Shape of the mute button should be different to give the user clear distinction (User should be able to press on the mute button without having to look at it i.e just by feeling the shape with the tip of his/her fingers.