Design to the Rule or to the Exception?

Microsoft Excel has a lot of great features. But I’ve long wondered why, when you type an equation in a cell, the default is to treat it like text.

For example, when I type 1+2 in a cell, Excel doesn’t add the two numbers, but instead displays “1+2” in the cell.

Now, this is the kind of behavior I expect in a word processing or presentation program. But Excel is a spreadsheet. It’s made specifically for processing numbers. So why did the designers decide that the default should be to treat an equation like text unless I type = or + at the beginning?

In contrast, Corel’s Quattro Pro treats numbers like numbers. When I type 1+2 in a cell in Quattro Pro, I get the result I expect: 3. I don’t have to type an unnecessary symbol at the beginning of the equation to signal that I’m using numbers.

Excel’s counter-intuitive design calls to mind advice from a fellow designer: “Don’t design to the exception; design to the rule.” Her advice is good. As designers, we shouldn’t force users to jump through hoops constantly because we’ve designed to the exception.

However, are there times it is appropriate to design to the exception? Accomodating colorblindness comes to mind. I once designed an interface that relied on color to provide important cues to the user—only to discover that one of our key stakeholders was colorblind.

So how many users are colorblind? I’ve seen estimates ranging from 5 – 8% for males, and less than 1% for females. That means we’re talking relatively small percentages here. Is that too small to design to the exception?

I don’t think so. And here’s the key difference between the Excel example and the colorblind example: in Excel, the exception was an extremely unlikely user scenario. Users virtually never want “1+2” to appear in Excel as “1+2.” They want to see the results of the equation. It doesn’t make sense to design to a scenario that almost never happens.

On the other hand, when we design to the exception for colorblindness, we are designing for a user, not a scenario. Most users probably won’t have challenges because of color in an interface. But for those who do, it affects their entire experience. Not only that, there are alternatives to color that work equally well for either type of user, colorblind or not. So in this case, it makes sense to design to the exception and find a win-win solution for the majority of users.

So when we question whether or not to design to the exception, we can make a better choice by asking if we’re designing for a scenario or for a user.

Smart Design on a ThinkPad

One of the little extras I appreciated most on my old ThinkPad laptop was the keyboard light. Whether taking notes in a darkened presentation room or finishing up a project while watching the last remnants of a sunset from my home office window, I often used the small light that illuminates the keyboard just enough to type.

There was just one small drawback: the light was activated by holding down the Function key in the lower-left corner of the keyboard while pressing the Page Up key in the upper-right corner of the keyboard. Now in daylight, of course, when the light is not needed, it’s no problem to find the two keys. But in the dark? Not so much. It was easy to hit several wrong keys before finally turning the light on.

Recently I replaced my old ThinkPad (RIP) with a newer, faster model. I loved it—but where was the keyboard light? Not on the Page Up key any more (which had moved anyway) and not on the Delete key, which was now in the upper-right corner of the keyboard. It wasn’t on any of the Function keys either. But I knew the laptop had one because it flickered briefly during boot-up.

Finally, I turned to the product documentation (which I should have done in the first place) and discovered the light was now controlled by holding the Function key and pressing the Space bar. Great idea! There’s no key on the keyboard that’s easier to find in the dark than the space bar. Kudos to Lenovo for a user-friendly change.

Ambiguity—the Enemy of Clear Design

Design can send confusing signals when elements on the screen seem to contradict each other, or when they don’t follow expected standards.

When I go to turn on wireless on my laptop, I get this screen:

At first glance, it appears my wireless is already on: the most prominent feature on the screen (next to the bright red icon which turns out not to be an icon, but only a graphic) is the glowing green button labeled Radio On. But were I to assume the wireless is on, I’d be wrong: the current status is indicated by text under the word Status immediately to the left.

Furthermore, when I click the icon labeled Radio On, I get this screen:

This one’s even more confusing: I’d intended to turn the wireless on, and after doing so, I get a button that says Radio Off. However, it’s still glowing green as opposed to grey. I can’t tell immediately if the state hasn’t changed, or if wireless really is on, even though it says Radio Off.

To add to the confusion, if I accidentally hover my mouse over one of the other icons at the bottom of the screen, the green glow moves. I haven’t changed wireless status, but now the button in the main section looks even more like wireless is off.

It turns out the green glow simply indicates which button is active when one presses the Enter key on the keyboard. And that brings up the final confusion: the green wireless tower on the far left looks like a graphic because of its placement on the screen and its two-dimensional style. But it turns out that it also indicates wireless state: green if it’s on, grey if it’s off (see the first image above).

Is this screen impossible to figure out? Of course not. After using it a few times and experimenting a little, I know what the buttons do and how to read the current state. Essentially I filter out everything on the screen as noise except for simple text under the word Status. If I want to change the status, I click the button to the right, ignoring its color and text.

But should it have been that hard? Should I have had to puzzle over the elements on the screen or mentally filter out confusion? Probably not.

The examples below show how the screens could be simplified to eliminate much of the confusion. If wireless is on, the following screen could be displayed:

And if it’s off, this screen could be displayed:

Key improvements:

  • The new screen title is clearer.
  • The icon-that-isn’t-an-icon has been removed.
  • The state is unambiguously indicated with the tower icon and accompanying text.
  • The possible action to take is clearly indicated by adding a verb: e.g., “Turn Radio Off” instead of just “Radio Off.”
  • The confusing green glow on the buttons has been eliminated. If I were actually going to put this screen into production, I’d take the time to make one final improvement: I’d use a white glow on the buttons to indicate which is active for the Enter key, so it was clear the glow had nothing to do with wireless state.

Removing ambiguity can go a long way toward making a design more usable.

Kudos to Adobe: Great User Experience

I went to Adobe’s site to update Flash, and I’m impressed. Their page knew I was using Mozilla Firefox, and I was presented with Firefox screen shots to guide installation. No “if you are using such-and-such a browser” choices to wade through. Adobe removed the clutter so I could focus on the task at hand.

Now that’s thoughtful, user-centric design.