Fog Creek Software
Discussion Board




U.I. Button Question

So I've been looking at the main GUI for my next release of the product, and am bothered about a certain "feature".  The product is an RS232 serial port sniffer.  And here's the issue:

When the main GUI starts-up, there is a pretty GREEN *button* labelled [ON].  Once its clicked, it pops back up (not depressed), and turns RED and gets relabled as [OFF].  Press it again, and it reverts back to the [ON] illustration.  This button does exactly what it states, (ON = begin receiving data.  OFF = stop receiving data).

While this might "seem" intuitive, would your experience offer the following methods of actions better:

1.) When the [ON] button is pressed, the button remains depressed, and is relabeled as [OFF].

2.) You would just rename it.

3.) Other suggestions.

4.) Its perfectly fine.  If a user can't figure out an ON/OFF button, then they shouldn't be using your program to begin with.  ;)

I worry that it may also be assumed that the program is already in its [ON] state by default (which is not the case).

Or am I just paranoid.

sedwo
Wednesday, October 01, 2003

Simplest fix - relabel the button to 'Turn On' and 'Turn Off'.

Thay way people aren't confused with whether the button is showing the current state (i.e. is is On or Off?) with the button's action (i.e. Turn it On or Turn it Off).

RocketJeff
Wednesday, October 01, 2003

At least you labeled the button... pity the color blind user faced with a red/green button.

I agree with the "Turn on" "Turn off" labels.  And the color of the light is probably adding to the confusion, turning it into a simple button may be the best option.  A green light with the text "Turn off" would be quite confusing.

With action buttons it is always better to label them with verb phrases than with nouns (that's actually in the Apple HI guidelines from System 7 on).

Lou
Wednesday, October 01, 2003

Oh, and if you really like your green light I suggest that you put a text label (not a button) next to is which translates it.  Beneath that you can have a button which says "Turn on" or "Turn off".

System Active (O)
[ Turn Off ]

Lou
Wednesday, October 01, 2003

I always find these sorts of things somewhat confusing.  UI buttons were meant to initiate an action, not hold a state like this one.

Suggestion:  Replace the button with two radio buttons (or a drop-down list), one labelled "ON" and the other labelled "OFF".  That should be clear.

The Pedant, Brent P. Newhall
Wednesday, October 01, 2003

I agree with Brent. Do you absolutely need to deviate from the Windows standard of toggles and radiobuttons? What happens when your user comes from a country where 'red' = 'go' ?

Prettiness takes time to learn, even if it just takes a second or two, and most of your users are already trained in the magic of radiobuttons.

Spam
Wednesday, October 01, 2003

For this particular type of application, a button seems like a better interface than a checkbox or radio button (although those are ideal for other types of applications, for example a setting that you enable/disable and then leave it that way for a long time). The suggestion to make the button label a "verb" is also very good.

Personally, I think the button should be labeled "Enable" and "Disable" (in either state), or alternatively, "Start receiving" and "Stop receiving". Also, I would place an icon with 2 different states (such as an "x" and a checkmark, or some type of icon for receiving data plus the same icon with the red circle and line overlaid on it) next to the button, plus explanatory text.

For example (attempting to represent this in plain text):
[ Start receiving ] X not receiving
[ Stop receiving ] / receiving

Philip Dickerson
Wednesday, October 01, 2003

sedwo, who are your users?  Can you ask them?  How many of them find it confusing?

If they don't have a problem with it, you don't even have to worry about it.

The Pedant, Brent P. Newhall
Wednesday, October 01, 2003

I have been looking at the ways many devices have used the On/Off button and most notably is the fact that it stands out through a different shape or colour.

I do not have the luxury of large screen real estate, and thus went for the very short and simple.

Brent, my users are very technical in nature, but that still should not excuse the reason for me to design it in a way that any common folk might understand its operation.

The VERB idea is a good one.  I'll research a thesaurus.

sedwo
Wednesday, October 01, 2003

change the colors! don't use red and green but light red and dark red, much like a light on an electronic device.

ron meyer
Wednesday, October 01, 2003

Two buttons: one "On", the other "Off".

When you press the "On" button, it stays depressed and the "Off" button pops-up. Vice-versa for the "Off" button.

This approach is sometimes used with toolbar buttons. One example existed in the older File Open dialog.

I think people won't be confused by this: it shows state as well as how to change the state in a clear way.

(Use labels other than "Off" and "On").

Changing the text of UI elements is not a good idea since it's unexpected (also consider how to use keyboard shortcuts).

A radio button is the more "correct" UI element to use but I suspect that it is too small for what you want.

njkayaker
Wednesday, October 01, 2003

Oh, and avoid the color stuff (it's confusing and unnecessary).

njkayaker
Wednesday, October 01, 2003

I agree with the last two comments.

Look at the way MS does the 'bold' Italic' ...etc buttons buttons in Word, they are depressed when bold is selected, and raised when it is not.

Aussie Chick
Wednesday, October 01, 2003

stop thinking on/off.

what some sniffers do is have a 'record' and 'stop' button, and sometimes a 'play' button. assuming your sniffer records, of course. if not, maybe on/off or listen/stop listening makes sense.

one of my basic theories is that most ui has noun/verb confusion, and users are even more confused, possibly because some the underlying ui is often confused. this might be one of those cases--is the control a thing with a position, or a command to change state?

mb
Wednesday, October 01, 2003

Also, if you have SQL Server installed, look at the "SQL Server Service Manager" application for an example UI for a similar purpose.

This has:
- a graphic image that shows the current state: an image of a server system with a superimposed green arrow or red square
- a button with a green right-facing arrow, followed by text "Start/Continue"
- a button with a red square, followed by text "Stop"

Only one of the buttons is enabled at any time - clicking the "Start" button disables the "Start" button and enables the "Stop" button (as well as starting the service).
[Actually, there is a 3rd state - "paused" - and button, but I'm ignoring that for this discussion.]

For another example: The dialog for any service in the Windows Services control panel has "Start" and "Stop" buttons (only one of which is enabled at a time) underneath a line of text that shows the current status (such as - Service status: Started).

Philip Dickerson
Wednesday, October 01, 2003

mb,

Oh I like the Start/Stop dual buttons illustrated simply by  your typical stereo interface (and as you mentioned, MS Services).  There is no space for the graphic and text; but the graphic button alone should definately be adequate.


|>    <-- Start action

[]    <-- Stop action.  Or would an (X) graphic represent it better?

()    <-- imagine the "repeat/loop" graphic.  (for looping control of repeating the "send string" action)

sedwo
Wednesday, October 01, 2003

You are suggesting using a right-pointing triangle as your "start" icon.  That symbol normally means "play".  A circle normally means "record".  Doesn't the button tell the sniffer to start recording data?

Rob Mayoff
Wednesday, October 01, 2003

Excellent advice, mb!

I suggest replacing the "START" button with two small buttons, one for record |> and one for stop []

These should be small enough that they take up no more screen space than the original button.

When the thing is running, the |> button is greyed out but the [] button is active.  When the thing is not running, the |> button is active but the [] button is greyed out.

The Pedant, Brent P. Newhall
Thursday, October 02, 2003

This is great stuff guys.  I'm going to make the "winamp" of serial sniffers.  ;)

And being the fact that its on the Pocket PC, makes a perfect fit.

sedwo
Thursday, October 02, 2003

*  Recent Topics

*  Fog Creek Home