Don’t violate design laws – even if you’re Apple

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.

voice-recorder_flat1

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.

picture-311

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

I highly recommend Keynotopia for designing interface mockups for web and mobile apps

Keynotopia is a user interface design toolkit that enables you to use Apple Keynote or Microsoft PowerPoint to prototype, test and demo your application ideas quickly and cheaply, without doing any design work or writing a single line of code.

It includes thousands of wireframe and high fidelity vector user interface components and royalty free icons for mobile, web and desktop apps, all designed from scratch in Keynote and PowerPoint, and can be edited and customized without needing any design tools.

Keynotopia is used by 40,000 entrepreneurs, designers, and developers in more than 80 countries.

1 Comment

  1. i was just thinking about this the other day. on the one hand it's pretty gratuitous, that huge mic. on the other, it adds a bit of fun factor. in one redesign they could drop down to one button (do you really need to be able to resume the same recording? and what is that confusing grill button for?) and integrate both screens (recorder and recordings).

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *