Jul 18 2010

Intuitive, minimalist user interface design

One of the things that makes Apple's products so popular is their simple user interfaces. The Macintosh computer introduced the graphical user interface at a time when cryptic text-based interfaces like DOS reigned. The iPhone introduced the touch-screen Macintosh graphical user interfaceinterface to the masses when cell phone interfaces were based on a keyboard, a trackball, or a stylus. As we at White Glove Apps design an iPhone app, we know the user experience has to be great, simple, and intuitive, or people won't use our app.

Here are two examples of minimalist interfaces, good and bad, from my everyday non-smartphone life. (Sorry, blippy: this is as much of my personal purchasing habits as I'm prepared to make public!)

Intuitive design: the Polar Heart Rate Monitor

Polar heart rate monitor readout

iPhone fans would appreciate this heart rate monitor because it only has one button, yet seems to know what you want it to do. This wristwatch is the readout for a chest strap that measures your heart rate as an EKG does. The monitor is designed to be used while exercising, so it has to be easy to read and use without a lot of awkward motions.

The large numbers in the display are a good start. Pressing the button cycles through the various modes, like time, exercise, and zone (target heart rate minimum and maximum).

When you enter exercise mode, it starts a chronometer (stopwatch) to track your time. Then, after about 20 seconds, it switches to your heart rate if it can detect the transmission from the chest strap. You might like to go back to the chronometer to see when your aerobic 30 minute exercise session is over, or see what time of day it is. But pushing the button ends the exercise session, so how do you switch the display? In an ingenious stroke, Polar has you bring the wristwatch close to the chest strap. This provides another input method and is a fairly natural motion while you're exercising. You get a beep when the wristwatch registers this, letting you know the display mode has changed.

And how do you set values like your target heart rate zone maximum? In the zone mode, it displays HIGH for a second, then flashes the current value with a plus sign in the lower right. It gives you a few seconds to increase the value. If you do, it flashes the new value for a few seconds, then it switches to a minus sign in the lower left and gives you a couple seconds to lower the value, in case you overshot and increased it too much. Then it flashes OK? If you press the button, it accepts your new value; if not, it cycles back to the plus sign to let you change the value again.

Notice some of the user interface principles used in setting values:

  • It anticipates what you'll want to do: it first lets you increase the value, then gives you a chance to decrease it if you went too far.
  • It puts the plus sign in the right, which we associate with increasing or going ahead (because of our left-to-right writing system, I believe). It puts the minus sign on the left.
  • It gives you chances to change your mind without going through the whole process again. Because there's only one button, it takes a little extra time to do this, but not so much that it's annoying.
  • It doesn't use the "touch wristwatch to heart rate chest strap" gesture in setting values because you might not be wearing the strap when you're setting up the wristwatch.

Unintuitive design: the Vornado fanVornado fan

This fan also has a simple user interface, yet somehow manages to do be unintuitive and irritating. The user interface is just a knob that you turn to adjust the fan speed to the levels marked 0 (off), I (low), II (medium), or III (high). The problem is that the setting after off is high! You can't go the other direction, so to turn the fan on, you have to start at the highest setting. In fact, the positions are labeled, in order, 0, III, II, I.

This is completely counter-intuitive: imagine if, when adjusting the volume on your radio, rotating the dial clockwise from the off position set it to the loudest volume! Also, what if you've set this fan on low in a child's bedroom to help her fall asleep, and want to turn it off now that she's asleep? You've got to go through high, which is noisier, potentially waking her up, defeating the whole goal of the fan. [Update: HackerNews commenter geocar explains, in the comments below, why this interface is due to a mechanical limitation of a fan. So I'll cut this UI some slack.]

Intuitive, minimalist user interface design for smartphone apps

So while simple interfaces can be good, it's also possible to make them counter-intuitive. When designing a minimalist app interface, it's probably even more important to make it intuitive because there few reinforcing cues or help references. Thus, icons, layouts, and gestures should follow the standards for the platform. Early in the development phase, having potential users test-drive the interface and give you feedback is important.

For more specific advice on designing digital interfaces, I recommend the Ideation + Design blog from LukeW.