What’s wrong with this picture?

Enter URL

While posting on the Microsoft Community forums I came across this dialog. It’s a very simple window but what’s wrong?

Good design doesn’t get in the way

When design just works we tend not to notice it. That’s good design. Bad design gets in the way.

For example, someone designed the dashboard in my 2008 Honda Accord and for the most part I get the information I need such as my speed, fuel gauge, etc. However, my steering wheel prevents me from seeing my left/right blinker lights. With my radio playing I often don’t hear the relay clicking and I end up driving down the highway a few miles with my signal blinking. I wish someone had simply designed the dashboard to put the blinkers at the bottom rather than the top.

We’ve had years to learn how to design graphical user interfaces (GUIs) for users and yet something like the above dialogs happen. Just like putting a period at the end of a sentence the button to conclude a dialog should come at the end. More folks are likely to want to complete the dialog rather than cancel it, which means the OK button should generally be on the right. Instances where clicking OK may lead to irrecoverable change of data should require the user to think one more time. In those situations forcing the user to click the button rather than hitting the enter or return key is a useful safety mechanism.


Humanized interfaces

Surprisingly, this dialog follows Microsoft’s developer design specifications, which generally put the affirmative button before the negative button. However, design consistency still doesn’t make for good design.

Western cultures tend to scan from upper left to lower right because humans are trained since childhood to read in a Z pattern—scanning top left to right to lower left to right. When that Z pattern is disrupted so too is our train of thought.

This dialog makes perfect sense for the most part. I see the title of the window in the upper left and I can make my changes in the middle. But when I’m done I want to… Cancel? No, I need to backtrack and click OK. This is offputting once in a while but when your job requires using a computer eight hours a day these small interruptions in thought tend to make you feel the software isn’t working correctly or is cumbersome to use.

DisconcertingTo further illustrate the importance of visual flow, imagine a dialog where the elements are scrambled. It would be like mixing up a sentence:

“the fence. The dog jumped”

Make user input convenient

I appreciate Apple’s direction in its human interface guidelines (HIG), which is to make user input convenient. They refer to the rigthmost button in this type of dialog as the action button. If pressing the action button is generally harmless then the developer can set it as the default button, the button activated when pressing return or enter. If the result of the button may be irreversible then the developer can choose not to set a default button forcing the user to click it.

One note: What is logical order for some cultures isn’t necessarily logical for others. Any person whose first language is English and has taken a foregin language class will quickly recall how adjectives sometimes follow the noun (e.g. casa blanca = white house) or the reading direction may be right to left (e.g. Arabic and Hebrew). The Z pattern western cultures use don’t apply to everyone. However, computer interface design is still primarily influenced by the West.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s