When the iPhone O/S update brought a voice recording feature to the device, I was happily surprised because I love using recorders to take voice notes on the go then transcribe them later on.

When I started using the application, I liked the visual skin of the application but was frustrated by its usability: the application, as shown below, dedicated the largest screen real-estate to a giant microphone icon, and placed the functional buttons of the app in the two bottom corners, occupying less than 5% of the screen space.

What’s wrong with this?

One of the fundamental laws of interaction design is called Fitts’ law, which states that the degree of difficulty to reach a target depends on the size of the target and the distance. This means that further and smaller targets are harder to reach than closer and larger ones. In the voice recorder example, the most frequent target is the record/pause/stop function, which should be the largest and closest one.

This becomes very important in contexts where it’s important to build good muscle memory for that frequent action so that one doesn’t need to look at the device to perform that function. With the voice recorder application, I typically need to look to locate the button, and look again after tapping it to see if I hit the right target and can start speaking. And that’s not safe.

What’s the fix?

Make the microphone clickable. When clicked once, it should record, clicked again it should pause/stop. When recording, the microphone should glow a saturated color that shows with a quick glance the state of the application.

I remember my first Human Computer Interaction quiz, we were asked to redesign the Windows start button to make it work best according to Fitts’ law. Given that there were no other requirements to the design, the winning solution was to make the button occupy 100% of the screen. This way, the degree of difficulty in reaching that button is zero.

Note that this is not the first time Apple violates this law. The tiny close/minimize/maximize icons on the top left corner of each application are good examples of tiny buttons that are responsible for frequent tasks, and that require precision to hit.

Next time you’re designing a button, please make sure it Fitts.