Deprecated: Assigning the return value of new by reference is deprecated in /nfs/c01/h11/mnt/34814/domains/ on line 36

Deprecated: Assigning the return value of new by reference is deprecated in /nfs/c01/h11/mnt/34814/domains/ on line 21

Deprecated: Assigning the return value of new by reference is deprecated in /nfs/c01/h11/mnt/34814/domains/ on line 540
Humanized > Weblog: Redesigning the iPhone’s Buttons
The volume buttons are wrong on the iPhone. Why? A demo is worth 10,000 words, so whip out your iPhones and give it a try.

30 Jul 2007

Redesigning the iPhone’s Buttons


In my recent article about the first generation woes of the iPhone, I complained that the volume buttons are difficult to use in landscape mode; that the natural mapping that works so well in portrait mode (up means louder, down means softer) fails after the rotation (left means louder, right means softer). I suggested that the iPhone could detect its orientation and correct the mapping accordingly. In other words, the iPhone should swap the meaning of the buttons based on the phone’s orientation. The result? Widespread criticism. Even the venerable Apple pundit John Gruber weighed in with “I strongly disagree with [Aza’s] idea about the volume buttons.”

It’s clear I need to make my case stronger, or else banish the idea to the halls of interface shame (a fate normally reserved for Clippy and Adaptive Menus).

What’s Wrong Now

There are three possible positions that the iPhone can be in: Portrait mode, landscape mode with volume bottoms on top (BoT), and landscape mode with volume buttons on bottom (BoB). The first two positions have good natural mappings, meaning that the position of the volume buttons map well to their meaning.

The iPhone in portrait mode
fig. 1, The iPhone in the portrait position. Pressing up increases the volume, a natural mapping.

When the phone is in the the portrait position, the mapping between the volume buttons and volume is clear: You press up to increase the volume and down to decrease the volume.

The iPhone in both landscape modes.
fig. 2, Depending on whether the iPhone is in BoT or BoB landscape mode, pressing right can mean either increase or decrease the volume — both can’t be natural mappings!

When the iPhone is in the BoT landscape mode, pressing right increases the volume. Is this mapping natural? It might not need to be — the relationship between volume increase/decrease and left/right is certainly weaker than with up/down. But, there is a convention held by everything from stove knobs to number lines that right means “increasing”. On the iPhone, this mapping is further strengthened by the on-screen display. When you press the right button, the volume indicator moves to the right. So yes, the mapping is natural.

However, when the iPhone is in BoB landscape mode, pressing right decreases the volume. This mapping is not natural because contradicts both our conventions and (more importantly) the on-screen display. When you press the right button, the volume indicator moves to the left! You can’t get much more reversed than pressing one way and having the iPhone’s volume go the other.

The Solution

In effect, physically rotating the phone into the BoB landscape mode has swapped the meaning of the buttons. The button that used to be in the position that maps to “increase volume” is now in the position that maps to “decrease volume”. The solution is to use software to swap them back.1. I implemented a demo and after some simple testing, I found that people don’t notice the software trickery: the volume buttons just work. It’s only when the software doesn’t correct for the physical rotation that people get tripped up using the volume buttons. But, as Levar Burton said, “You don’t have to take my word for it.”. A demo is worth 10,000 words, so whip out your iPhones and give it a try. For those of you who hate typing URLs on the iPhone, here is the the short URL:

The iPhone Volume Demo

The instructions are simple. Start in portrait mode and play with the volume buttons and watch how it affects the volume bar. Now, rotate the phone into the BoB landscape mode and try it again. It goes the wrong way, doesn’t it? Click the button to switch from the Apple style control to Humanized style control and play some more. You decide which way leads to fewer mistakes.There are a couple of caveats and remaining questions that I should mention.

  1. The demo only works on the iPhone. That’s because the page detects when the phone switches from portrait to landscape mode. That doesn’t work on the computer (but you can try picking up your monitor and rotating it anyway).
  2. I couldn’t figure out a way to have the demo detect the difference between BoT and BoB landscape modes, so you’ll just have to pretend that in the Humanized style control, the BoT mode doesn’t switch the control scheme.
  3. The 45 degree problem. John Grubber writes, “one of the problems I anticipate with your volume button switcheroo idea is that when my iPhone is in my pocket — especially, say, a jacket pocket (which because it’s summer I haven’t actually tried) — I’m not really aware of its orientation. Imagine an iPhone at something close to a 45° angle in a jacket pocket.”
  4. The natural position to hold the phone while talking is nearer horizontal than vertical (although not fully horizontal). Switching the volume buttons based on rotation will give the wrong mapping while talking.

Let me address the last two caveats.

The 45° Problem

The 45° problem isn’t actually much of a problem. After some experimentation, it appears that when the phone is in a pocket at an angle — even a rakish angle — people press the “up” volume button as if it’s in portrait mode. When the phone is close to horizontal, the left-to-right convention takes over. The tricky part is figuring out at what angle to switch between the mappings. The accelerometer in the iPhone is able to tell quiet precisely the degree of the iPhone’s rotation. Apple just uses it for detecting one of three orientations. With testing, we should be able to find exactly the right angle to make the iPhone’s volume buttons have the right behavior almost all of the time. And even if the iPhone does get it wrong once in a blue moon — how often do you change the volume while the phone is in your pocket? — that’s still much better then getting it wrong between one-half and one-third of the time as it does now!

The Talking Problem

When the user is talking, pressing the button near the top of the device should be mapped to increasing the volume. If you don’t believe me, just trying holding a phone as if you are talking and press the volume button you’d expect to increase the volume. If you are lying down, it’s the same thing: The volume button closer to the top/back of your head is the one that naturally maps to increasing the volume. To accommodate this behavior, if you are holding the phone to your ear the iPhone should not switch the button meanings. How does the iPhone know if you are holding the phone to your ear? It already has a proximity detector that detects just this.2


Is this problem a show-stopper? No. Am I blowing things out of proportion? Probably. The inability to always rotate the phone between orientations is a much worse usability problem. In the end, the volume button mismapping is just somewhat annoying. But little annoyances add up and can make the difference between an interface that’s a joy and an interface that’s a chore.

Will my solution really make things better? Most probably, but real user testing is always the final word.

[1]: As a couple people pointed out, if the iPhone were only allowed to be rotated into the BoT orientation, no software solution we be needed to fix the volume button mis-mapping.

[2]: Thanks to Magnus Nordlander for pointing this out to me.

by Aza Raskin