I'm programming an application to measure time intervals. The application contains several timers on one screen. Only one of these timers can run at once. My initial design has a start button and a stop button for each timer. When the user starts the timer with start the stop button is greyed out and when the timer is running the start button is greyed out.

Question: would it be better to have rather just one button, which would display either the text "stop" or "start" depending on whether the timer is running or not? I'm a bit torn on this issue, as I consider it an advantage when the user sees all the available options at once. On the other hand, having just one button would provide a cleaner design.

  • 1
    Simon, could you provide a mockup of the current ui? Jun 8, 2012 at 13:44

4 Answers 4


Question: would it be better to have rather just one button, which would display either the text "stop" or "start" depending on whether the timer is running or not?

Yes, I would go with one button as a start/stop toggle. Every UI element you put on the screen is something the user needs to figure out--they add to the cognitive load. Notwithstanding the fact that you have multiple timers visible in one screen.

So in this case simpler is better.


When we think of page level interactions, we tend to forget about user. I think it would be better to understand user persona. These days more and more people are getting acquainted with smart phones. Web interactions are also somehow getting influenced by mobile interactions. In mobile scenario; if users are presented with both the buttons at a time, (even considering active/inactive states); it won't help user. Same can be applied in web scenario. (I am giving mobile example because this is very common interaction in mobile).

Also, there is no point showing the inactive buttons which user can't use.

I think, going with option with single toggle button might be helpful for user.


For most applications I'd tend to go for the single button solution, but for timers I would go for separate start and stop buttons. The reason is "bounce".

Occasionally you double click when you mean to just click. On a mobile device it might be because you are moving while using the app, or it might just be a simple slip. With most interfaces it's not much of an issue, you can just correct your error, but with a timer, if accuracy to 0.1s matters you would have to restart whatever it is you're timing.

So to avoid that go with two buttons, and then if a user accidentally hits the button more than once, no harm is done and the timer keeps running.


Do you have a mockup of what it looks like so far? I first imagined it to be one timer above the other, with the play/pause button/s on a side, all with he same visual priority.

Depending on execution, I think both alternatives have advantages and disadvantages. For example, having only one command simplifies the usability concept: You can't do what you can't see. But having the play option (for example) on all timers creates familiarity of use (a user might think: "Oh, so I can play any of these" and then when one is active and the others greyed out he/she will realise there can only be one running at the time).

But there are other ways of expressing the same using other visual elements and not only buttons. For example, an alternative to show the difference between the playing timer and the paused ones could be size, or surrounding color. Or position (the active could go on top and get slightly bigger). Or you could have a dark layer covering everything except for the active one (like a jQuery lightbox). I always lean towards cleaner designs... so there are just some ideas.

Your Answer

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

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