4

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?

Improve this question
2
  • Pete - what's the default/initial state - auto or manual? And please confirm one thing - if I want a 120-second refresh interval, do I have to click 12 times?
    – gef05
    May 24, 2011 at 12:55
  • @Gary Franceschini -- Please give it a try and tell me what you think.
    – Pete Wilson
    May 24, 2011 at 16:35

3 Answers 3

Reset to default
3

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.

Improve this answer
4

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.

Improve this answer
2
  • 1
    +1 for pull down menu of options. Something to point out about the hourglass icon: on a windows machine, it tends to indicate "please wait, the computer is doing something", at least up until Vista/Windows 7, when they changed the loading icon to more of a mac style 'ball'. I'd say a stop watch works here.
    – thedaian
    May 24, 2011 at 13:30
  • Since it's a configuration control, I'd replace the stopwatch with a gear.
    – Monica Cellio
    May 24, 2011 at 13:57
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.

Improve this answer
2
  • 1
    Or a two-state toggle button: pause/resume. Yeah, that's the way to do it. Start off in auto mode and let him push the button to pause. And, yes, pushing the refresh icon refreshes right now.
    – Pete Wilson
    May 24, 2011 at 21:08
  • 2
    Of course! Nobody's going to want coarser granularity of time. They'd like it in milliseconds if they could get it. This is a good example of my designing the thing, then forgetting about the user while implementing it. I'll throw away the configurable-time idea and give the guy two radio buttons: manual / auto. Thanks for mentioning this. Very helpful. This is why we have design reviews
    – Pete Wilson
    May 24, 2011 at 21:11

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.