Don’t violate fundamental design laws - even if you’re Apple

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.

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 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.

picture-311

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

  • Using physical interfaces as metaphors is generally a good guideline, if it leads to a better interface. But I wouldn't take it as a rule of thumb to follow in every case.

    I used to have a Windows Mobile phone before the iPhone and it had a dedicated button on the side to record/stop. That's 1:1 mapping for the on/off switch on a physical mic. I used it without needing to look at the device.
  • Not defending Apple, but bringing in a new perspective.

    More than any laws, interfaces need to be natural and intuitive. This is very hard to define or parametrize but you know it when you see it. And I think the microphone does that here.

    If you've ever used a hand-held microphone, it looks very similar to the design. On the stem of the mike is a small on/off switch and then you make sure you position it correctly to eliminate breathing hiss and hold in unobtrusively as you speak.

    Reality does diverge from theory -- and some time it is a really good thing.
  • 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).
blog comments powered by Disqus