Example of a Great User Interface

Designing good user interfaces is a very hard thing to do. It’s something that Apple does great, Windows does generally pretty well, and Linux is getting better, but…

Instead, I have an example from the more mundane world of consumer electronics.

Many years ago, I bought a certain alarm clock from Sony. (I’m sorry I don’t have a picture–I no longer have the radio, and haven’t been able to find a picture on the web) It lasted many years before finally dying earlier this ear. I was pretty sad about it, but I didn’t realize how wonderful it actually was
until I got a replacement.

To summarize the features, it had a digital AM/FM tuner (absolute requirement for me–I can’t stand fiddling with tuning knobs), two alarms, a sleep timer, an LCD panel, and…well, that’s about it. It was flat, black, and pretty small.

The buttons were all arranged on the top part of the radio in three rows. There was a “top” row located towards the back, a middle row, and a “bottom” row closer to the face, which was angled, not vertical.

If I were to do a little descriptive diagram of the button layout, it would look like this:

(On) (Off)(Tune Down) (Tune Up)

(1) (2) (3) (4) (5)

The particular genius of this device is that it is exceedingly simple to use in the dark, when you can’t see any of the buttons but have to go on feel alone. It’s genius because It’s HARD to design simple things.

  • The functionality is dvided into three rows: it’s easy for the fingers to find where they are among three options. Plus there are other guides as we’ll see below.
  • The On button has a “normal” convex surface, but the Off button has a concave surface. This makes it very easy to figure out which button is which, in addition to left-right difference. Your fingers adapt and “learn” which button does what by feel better than position. (The On button also doubles as the sleep timer, when the radio is already on)
  • The Tune Up/Down buttons have little < and > grooves on them. It’s hard to tell which groove goes in which direction so in this case you have to memorize the location. Since there are only two buttons, this is relatively easy to do.
  • The row of five preset buttons has a very simple mechanism to orient your fingers: button 3 has a little raised dot on it. This instantly allows you to figure out where the middle is, and move to the correct preset. (Buttons 1 and 2 also set the alarms when the alarm is off).
  • The buttons were about the size of my fingertips. Any smaller and they would be harder to press; larger and they would be too far apart.
  • The arrangement of the buttons in three rows gives a compact layout that easily allows the fingers to travel to other buttons quickly.

Most of these things I just took for granted–until it died. My new alarm clock works pretty well, but it’s MUCH harder to use at night. There is just a single row of about 6 (small!) buttons for things like sleep timers, tuning, changing the band, etc. Some of the functionality is divided into other areas, but overall, it’s a much less effective design.

There are a number of lessons to be taken from this experience that can be applied to software as well:

  • Layout often isn’t enough for an effective interface. Just as an alarm clock usability increases with subtle, but smart, tactile cues, an application’s interface benefits from smart visual cues. I’ll cover what some visual cues can be in a future entry.
  • You need to consider use cases when designing an interface. Given the design of some alarm clocks, I wonder if the engineers ever took them home to test them. Same with software; you need to consider and test how users interact with the interface. What makes sense to the designer might be completely unrealistic to the average user.
  • Design can be a very subtle problem. How did they know to put a raised dot in the middle of the preset buttons? How do you first realize that it greatly increases usability?
  • You need to think about the usability of each component in an interface. Even the “simple and stupid” items like buttons and labels. If you’re making your product accessible, there are even more things to worry about.