Unnecessary Subtlety

One of the flaws that I see again and again in visual user interfaces is what I call unnecessary subtlety.

Here's an example. One of these highlighted buttons indicates the current state; the other indicates the state that will be chosen. Which one?

Unnecessary subtlety, n., visual subtlety in a user interface which serves no non-visual purpose, usually indicated by a minor difference in shape or color between different screen elements or the same screen element in different states.

In visual interfaces, subtlety is frequently a good thing. When you're working on a document, you want the interface of the word processor to be subtle -- after all, the most important thing to you is your document, not the word processor.

I don't know why it happens, but graphic designers seem to get so enamored of the beauty of what they're drawing, that they forget what the point of a visual element is. Let's be clear:

• The point of a visual element is to convey information to the user.

There it is -- and it's pretty simple. It's not to be beautiful. It's not to look good on marketing materials. It's not even to make users happy. Now, I'm not saying these are bad things. They're not. But none of that matters if the visual element doesn't accomplish its objective.

• If it does something when you click it, it should convey that it is clickable. If it changes when you point to it, the change should be obvious.
  
• If it's a status indicator, the status should be conveyed clearly.
• If it conveys information, it should actually convey that information easily, quickly, and in a way that the user can be confident that they have the correct information.
  

One of these buttons indicates that the current text is bold and that clicking the button will make it unbold; the other button indicates that the current text is not bold and that clicking the button will make it bold. Which one?

One of these buttons has been selected with the keyboard and pressing the Return key will execute that action. Which one?

Each row of icons has one icon which indicates a current state of the selected object. Which ones?

Some of these words are hyperlinks. Which ones?

What is indicated by these icons? Does the open mailbox indicate that you have mail? Does the phone that's off the hook indicate that you are on a phone call?

Two of these four icons show status information. Which ones? And what statuses are they indicating? (hint: one of them that might to show status information cannot, in fact, do so.)

These last two examples are on the border between unnecessary subtlety and unnecessary cuteness. I'll talk about that, along with the opposite extreme of garishness, at a future time.

Finally, this example indicates a failed search in Outlook which clearly shows "No items found.".

Or is it? Notice the little icon in the upper left corner. This tiny icon, about 1/6" high, is the only indication that the search is still in progress. To its credit, the icon is animated, but that's hardly enough since you can't do anything in the application until the search completes (if you actually want the results, that is). In addition to unnecessary subtlety, Outlook compounds the error by displaying an incorrect status -- "No items found" really means "No items found yet." No status would be better than a wrong one.

The good news is that all of these examples are easily fixable. Just remind yourself:

• The point of a visual element is to convey information to the user.

Update 2/23: I didn't say where the examples were from, but it was pointed out to me that there's no reason not to. In order from top to bottom, they are Blogger, Microsoft Word, Microsoft Windows, Adobe Illustrator, BlackBerry 7100, and Microsoft Outlook.