1

Some button in my app is blocked until a timer finishes. But, I don't want to display the remaining time, so that the user does not keep staring at the timer, waiting for the button to be unblocked.

I am looking for a subtle way to indicate the user that a timer is running.

What are the possible means for doing that?

So far, I do this: the transparency of the button varies between 1 and 0.3 continuously, every 1 second.

  • 1
    why do you want it to be subtle and avoid displaying time? – Devin Nov 21 '15 at 22:08
  • Because the user needs to be doing something else during this time. The user should not keep staring at the timer. – Colas Nov 21 '15 at 22:18
  • 1
    Then you should add some context. remember, in UX context is everything – Devin Nov 21 '15 at 23:03
  • 1
    how about adding that standard circular animation on the button - pretty intuitive – Aditya Nov 22 '15 at 3:34
  • 1
    Perhaps with a small node that pulses at 1sec intervals. – dennislees Nov 22 '15 at 5:01
1

If you're looking for an element that will avoid any assumption of "progress," I'd go with a spinner. Best possibly placed to the left of the text in the button.

A spinner tells the user there will be action required "later," rather than "at this time," which, if it does draw the eye of the user, will only send their eyes back to the current intended focus.

Users are used to seeing a spinner for things like "Loading..." messages. This tells the user "something will happen later, come back when you assume enough time has passed for the status to change."

| improve this answer | |
0

A Pre-loader animation would work. Like Wtfsven mentionen above a spinner, or any moving animation would work. In taxi meters i've seen animation of a horse running. Maybe a running man animation would work in your case enter image description here

| improve this answer | |
0

I don't like the spinner because it is somehow means "A calculation is being done".

I tried "three dots" animating and I tried one dote pulsing.

But finally, what I chose is this: the button pulses between "0.3 opacity" and "1.0 opacity".

| improve this answer | |
0

Movement is the last thing you want…

Whether pulsating or rotating, all visual changes in the interface risk attracting the user's attention—and you've said they're supposed to be doing something else for the duration of this wait time. Why distract users by showing visual movement?

An alternative

Before the user clicks the button, show no wait feedback.

After the user clicks the button, if the wait time has elapsed, proceed. The user doesn't need to know that there was a wait time.,

After the user clicks the button, if there is more then 0.4 seconds of remaining wait time, show the wait feedback then. The amount of wait time is a known quantity, so ensure the feedback shows that the wait time is finite—in the style of a progress-bar.

Here's a suggestion—but there are many other possible solutions. To signal that the wait is directly involved in delaying the button's action, combine the button and the progress-bar feedback:

Progress-bar in a button

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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