I need ideas to improve this timeout control

Question

I'm getting ready to publish a page of real-time stock-option data. Problem is I'm not so sure any more of many controls that I used to be in love with.

The first of these now-doggish controls is the pair that lets the user refresh the table of option numbers.

In the manual-refresh mode:

http://www.sellmycalls.com/pics/so-man.png

the user just presses the refresh (left) button to see new stuff. He can invoke auto-refresh mode by pressing the stopwatch (right) button, which also (by repeated presses) selects the refresh interval.

In the auto-refresh mode:

http://www.sellmycalls.com/pics/so-auto.png

the obvious thing happens; plus the stopwatch image tells him how much relative time is left until the next automatic refresh. He can press the stopwatch image repeatedly to change the refresh interval; or to re-enter manual mode. He can press refresh any time to over-ride auto and refresh manually.

This whole mechanism now seems awfully clunky to me. The goals of this pair of controls are:

1. let user toggle between manual and automatic modes
2. let user select the auto-mode refresh interval: 10 to 120 seconds
3. show the user his current auto/manual mode and his auto-refresh interval

Can anyone suggest a cooler, more user-satisfying way to present these ideas?

Answer 1

This UI needs to support the following:

1. Refresh now.
2. Count down to next refresh (if auto).
3. Toggle manual/auto.
4. Set interval for auto.

I think you want to leave the refresh button alone, and not overload its functionality. Refresh means refresh; users get that.

The other functions could be collapsed into a single UI. The countdown area will either show a decrementing time (if auto), or nothing (or "off") if in manual mode. A drop-down control or gear control can offer interval options (as already suggested by Patrick), with "none" or "manual" being an option. If the user chooses "manual" then auto-update is turned off; if he chooses any numeric value auto-update is on at that interval.

Answer 2

How about changing the stopwatch icon to a pull down menu that displays the current interval?

|| refresh | every 30 sec v ||



|| refresh | every  10 sec  || 
           | every  30 sec  |
           | every  60 sec  |
           | every 120 sec  |
           | manually       |

To show how much time is left, you might consider putting a progress bar in the background of the two buttons, as Safari does in the location bar when the page is loading. Another option would be to change "every 30 sec" to "in 29 sec" or "in 29/30 sec" as the timer counts down.

On more thought: if you end up keeping stopwatch icon, I would change it to an hourglass icon, since that's less ambiguous. An hourglass's only function is to count down time.

Answer 3

Since there are only 5 options, manual,10,20,60,120 I think it is not at all a bad starting point for a piece of custom design. I like the way it both shows the time elapsed - in a non intrusive way - and controls that time. I'm making an assumption that the user won't be changing the refresh rates all that often, and that the most common switching will be between manual and 10 seconds and back.

Test those assumptions.

The biggest problem I note with it is that the button moves when the time field changes size. Fix that and it will be nicer to use. A second tweak is to make clicking on the refresh icon do a refresh now, and clicking on the manual/auto text toggle between manual and auto - without changing the rate. I am saying that because of my assumption that the normal case will be switching between 10s and manual.

It's a nice idea and worth investigating a bit more.