Just turn OFF: exploration of visual cues

When I went to bed last night, I proceeded to set my alarm and noticed something odd on my alarm clock’s display.  The number 1 was displayed on the left-hand side and due to my sleepy state, I ignored it.  Next, I pressed the first button to check the alarm time, and a radio station frequency was displayed instead.

By then it had hit me that the radio was turned on and this confirmed it.  So the radio is on, but obviously I’m not hearing it.  So I check the volume knob and sure enough it’s all the way to the bottom.  Why was it left in this state? Because someone wanted to turn it off and couldn’t figure out how.

It’s inevitable living with other people that their alarm clocks will go off when they’re either sleeping (I sleep through them more regularly than I’d like) or not at home.  I certainly can recall plenty of instances where frustration has occurred whilst attempting to determine which button or which way to turn a switch in order to simply hush someone else’s clock.

What you can normally figure out is how to snooze the clock as it’s almost always the largest button, usually rectangular in size and right in the centre.  I never use this button and I don’t know anyone that does.  And even if you do use snooze every day, you still need to turn off the alarm.  So regardless, the OFF button is the primary button on a alarm clock — so why is it relegated to a non-obvious location, non-illuminated, and its appearance is the same as any other button on the device?

A good 20 minutes produced this in Adobe Illustrator…

This alarm clock is ringing, can you figure out how to turn it off?
If you guessed the obviously located, illuminated, unique green button you are correct.

Since it is located away from the other buttons and has a unique shape, even when the alarm is off (and therefore not illuminated) you know immediately that it has the most important purpose of the device.

I also put in a snooze button.  I bet you can find that one too. 

Just about anyone, regardless of age, technical skill, and sleepyness should be able to turn this alarm clock off.  We automatically recognize and process visual and audio cues without even realizing it.

Another great example is Windows itself and the standardized window style everyone has come to know and love.  Whether it’s a small tiny dialog or a big large application, the end goal for any window being displayed in a graphical user interface is to be closed.  In Windows XP, the X was turned red to make it even more obvious and in Vista, they even made it a different shape from the other buttons.  The red indicates a stop (which is a constant in the modern world), the unique size and shape indicates an important function, and finally, it’s always located in the top corner so you know where to find it.

Windows has other visual cues too.  For instance, an ellipsis indicates another window will open to prompt you for more information.  So, in the properties for any file in Vista, you’ll find this Security tab where you can clearly see the difference.

The Edit button will bring you a new dialog where you can select new permissions for every user listed.   Since this will be prompting you for information, it gets the ellipsis.

The Advanced button opens up a new dialog which displays the advanced permissions but doesn’t actually prompt you for any information or allow you to edit anything.  So, it doesn’t get the ellipsis.

The underline under the E in the Edit button and under the V in the Advanced button indicates you can press the Alt key, plus that letter keyboard combination to activate the desired button. 

Finally, the highlighted OK button indicates you can press the Enter key to hit that button and although it’s not obvious, you can use the tab key to highlight the other buttons.

There’s more cues in this dialog of course, but that’s all I’m going to mention here.

Sadly all Microsoft applications don’t have the same degree of cues.  Let’s look at Messenger:
  
The primary goal of Messenger is to communicate using text to your contacts.  To even do that, you need to open a conversation window to a particular contact.  So, how do you do that? What visual cues tell you how to do that?

Click a contact — nope, that just selected it.  Maybe I have to choose one of these toolbar icons?  Wait, what do these icons do anyway?  There’s a mail icon and it’s the first thing listed, so that must be it.  Wait, why is Internet Explorer starting?  Why is Hotmail loading?

It gets worse.

Okay, maybe I have to click the little green guy next to the name.  Nope, that opened something else, but look, there’s options here!  But, none of them say to start a conversation.

In fact, the only cue you get is when you finally hover over a name in Messenger and it tells you this:

Right-click to interact with this contact

And finally after right-clicking you get a small cue to the primary goal of the application. 

Send an instant message
Send other

So you’ve found the way to send an instant message, and the bold indicates that the bolded function is the default action.  But, how are you supposed to know to double-click to perform that action?  Not all default actions are double-click…

Now back to the toolbar icons, which ones take you to a website?  Which ones open up a dialog box?  And which ones open up a menu? 

You might have just said the ones with an arrow open a menu and you would be right, except for this one:

Oh, and did I mention that the last two options in this menu do not appear in the normal options window or in the normal application menu — but the top three do?  That is, if you can find the normal application menu…  Also, good luck finding out how to turn off the application — try hitting the X?  It just hides it.

No application has a perfect user interface but Messenger’s ranks among the worst for usability and comfort.  Even if you know what opens what, and which clicks to do where, without any visual cues presented, you don’t gain the confidence and a sense of familiarity that you would normally get with an application that did properly make use of these key interface ideals.  When you see the red X presented, subconsciously you’re aware that you can get out of that window by clicking that button (or advanced users by hitting the Esc key on the keyboard).  The Messenger interface has failed to provide a direct way to it’s primary function, let alone any unique cues towards it.

As for the alarm clock, I guess I’ll continue to use my phone as a primary alarm as no one will be able to turn that one ‘down’ when I’m not around.  It’s also relatively easy to turn off — flip open and choose the only option displayed — Disable.  Amusingly, the default action when flipped open is the dreaded snooze.  At least that default, however useless it may be, is consistent.

Posted on November 21, 2007, in Uncategorized. Bookmark the permalink. Leave a comment.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: