I love taking voice notes on the go.

But when I started using the voice recording app that comes with the iPhone, I was frustrated by its horrible usability: the application dedicates the largest screen real-estate to a giant microphone screenshot that does nothing, and places 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 piece of UI in the app.

This becomes very important in contexts where you build muscle memory for a frequent action so that you doesn’t need to look at the device to perform a task. With the voice recorder application, I typically need to look at my iPhone to locate the button, which isn’t the best approach because I often take voice notes while driving.

What’s the fix?

Make the giant microphone an active area: when tapped once it starts recording, when tapped again it pauses, and when double tapped, it stops. When recording, the microphone should glow to show the state of the app.

This is not the first time they violates Fitts law. The tiny close/minimize/maximize icons on the top left in OS X are good examples. Those tiny buttons require users to slow down as they get closer to them to hit them with precision. This is one area that Microsoft has designed windows better, because not only they made the buttons bigger, they also added a pixel buffer around the buttons to increase the hit area.

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