19

We have an application with a built-in stopwatch. If the stopwatch is running the pause button is shown and if it is stopped the play button is shown. Currently the stopwatch itself as well as the button are in neutral colors.

It would be great if the color of the play/pause button could help the user to use the stopwatch more effectivly.

The background needs to stay neutral for technical reasons, so the only design option we have is coloring the button. I've read the discussion about the seperaton of the play and pause button and it makes perfect sense, but again technical reasons prevent me from having two buttons. So, one button on a grey background it is.

Should the running stopwatch with the pause button be green or red?

A green stop button would be a great indicator that the stopwatch is running, but it would be strange to press a green button to stop something. A red stop button would be a great indicator that this is a STOP button, but then the running stopwatch would always show the red button, which is kind of strange.

Improve this question
2
  • 2
    How will adding color to the button help the user to use the button more effectively? Surely the > sign changing into the || sign is as effective as you can get? What else can they do but click it?
    – Rahul
    Sep 4, 2010 at 21:54
  • 2
    It's just an additional way to convey information - like traffic signs which do not only have different shapes but also different colors.
    – Sandra
    Sep 5, 2010 at 12:50

8 Answers 8

Reset to default
9

ChrisF's answer is very correct - make sure that the colors are not the only indication! Assuming you're already taking care of that:

If the choice is strict between green and red - go for the red.

The button is an action, not an indicator. If it were an indicator you might have wanted it green (to show it's "okay" or running), but when dealing with actions - red means "stop" (and "pause" is a kind of "stop").

Moreover - you don't need further indication that the stopwatch is running - you see the actual numbers change!

BTW - if you have just one button, after you've pressed "pause" what does the button "become"? Will pressing it again resume or stop?

Improve this answer
2
  • 1
    +1 When I go jogging I find that stopping my gizmo is a lot harder than starting it. At the end, I'm tired, moving fast, and sometimes it's critical that I hit the button at exactly the right moment. There's no room for error, no second chances, no time for second guessing which button means stop.
    – Patrick McElhaney
    Sep 4, 2010 at 23:32
  • For color, I'd use grey or orange. Red is well associated with "stop", "close" or "turn off"...
    – Christian
    May 27, 2012 at 14:52
8

Please remember that a significant proportion of your user base will be red/green colour blind, so having a button that changes colour from red to to green won't help them.

It would be better to change the icon. I'd use the standard > for start, || for pause and [] (square) for stop if you need that option.

This would mean that when stopped the button would show > meaning "click to start". When running the button would show || meaning "click to pause".

Improve this answer
1
  • 1
    Sorry, I didn't state that clearly enough. Of course the icon will also be changed. I didn't mention this because I did assume that nobody would think otherwise.
    – Sandra
    Sep 5, 2010 at 11:31
6

One option that might work is to make the button colored while the clock is running and neutral when it's not. Instead displaying > and ||, you could make it look like a physical button with an embedded LED that lights up when the clock is running. Bonus points if you can make the button look like it's pressed in when the stopwatch is "on."

Picture of a toaster oven with a button that has a blue light and remains depressed when on

I was hoping you could use a red light to indicate either state (the clock is running) or action (stop the clock) -- sidestepping the conflation of two functions mentioned by Jim Jarrett in the play/pause question and Dan Barak here. But according to a quick survey of the appliances and electronics in my house, red is never used to indicate "on." (With one notable exception: the oven.) Most use blue lights, some use green. Some actually use red to indicate off (but find me in the dark).

Hence, I don't think this is a particularly good idea. (I like Dan's answer better.) But I'll post it anyway because sometimes we can learn as much from ideas that don't work as the ones that do.

Improve this answer
3

I think, color is not an option. If you use colors that are different from your UI colors it will be a distraction. I suggest to concentrate user's attention on INFORMATION (time) and to use the different position for command controls. For example, I know that Start/Continue button will be at the center of the workspace and Pause at the bottom (1). Then I see time I spent for some task. If I want to stop my timer, I will found my stop button at the bottom (2). Then I see that my timer is inactive (time label is inactive) and I will find the continue button at the same place as the start one (3).

stopwatch in action

In additional, to avoid "double" click (that can be cause by execution delays and so on...), it is a good habit to place multi exclusive action controls in the different places.

Improve this answer
2

The play and pause iconography seems more related to video and audio than running a timer.

A button with the text "Start" would be easy to understand. When pressing this start button, you'll need actions for the user to pause and to stop – if it's supposed to be a stopwatch.

Colorwise I'd suggest green for start, gray for pause, red for stop – a monochrome tint could be applied to make sure the contrast isn't to big.

Improve this answer
2

Taking a step back from the initial problem, have you considered that some users will see your button as an indicator of current state?

On my MP3 player, the screen shows play (>) when it is actually playing, and pause (||) when it is paused. My VHS Video Recorder, DVD player and Set-top box all do this as well.

What you're running into is a well known problem with "toggle" controls - the User Interface Hall of Shame used to have some good commentary on this. Essentially, you can't predict whether users will interpret the button as available state or current state.

I'd suggest the following:

Show two buttons under your stopwatch, play and pause: > ||

When the stopwatch is running:

  • Disable play and remove coloring
  • Enable Pause, color it yellow/orange

When the stopwatch is stopped

  • Enable play and color it green
  • Disable pause, and remove coloring
Improve this answer
1

Isn't it great how we've gone from devices that have stop, pause, and play buttons, to a toggle?

Colour draws focus away from other tasks, so if the intent for the stopwatch is that only few users will use it, or that it get only only occasional use, then I would avoid distracting colour.

Improve this answer
0

I've seen red for stop in a time entry app. There could be multiple timers listed in a table, but only one could be running at a time. Having the active timer with a red stop button help the user find it in the list.

I guess in hourly-billing, hitting 'stop' on your timer is a dangerous thing ;)

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.