google finance style color change for time selection

[brendano]

I watched a new rookie user today:

..1. they moused over the timeline. understood the units were months. therefore gave the idea they could click.

..2. clicked. a big black box appears. they did not understand what this means.

..3. now when in this state, trying to click elsewhere seems to cause a zero-length interval. the UI says "from Jun 27, 2000 — Jun 27, 2000" but that's not true, it's showing zero articles but there in fact do exist some there i think. now they're very confused.

some ideas

• re 2 -- this interacts with the fact that the grabby resizer boxes are too big, or at least, they're too big in this situation. and they overlap. visually, what the heck does a big black box mean anyway? if we're thinking about design tradeoffs, we certainly should aim to get right the use case of "click on the timeline and not be confused".
• how about use a resize cursor when mouseovering the grabby box?
• zero-length intervals should never be selected. this seems like a bug. minimum size should be whatever the finest granularity is ... day or month. is there something weird with closed-open vs closed-closed intervals in the internal representation vs. user communication? (the UI wording in the summary box sounds like a closed-closed interval.)

[brendano]

Oh another thing. Mouseover shows month granularity. But clicking give you a much smaller interval than month. If the mouseover is month level, then a click ought to select exactly that month -- it's implicitly promised. So on the assumption the granularity of resize actions (and how the interval is described in the UI) should be day-level, if a mouseover is for month X, a click should select interval [day 1 of X, last day of X].

[brendano]

A click outside the selection should also cause that month to be selected, I think.

I remember some discussion a ways back about the difficulty of detecting a click versus a drag and whether timing comes into it. Were you still concerned about this? If so, fortunately I don't think it's relevant here. If the mouseup release occurs at the same x-value as the mousedown, treat it as a "select the whole month, in the spirit of a click" event.

[AbeHandler]

ya. this is definitely something @myersnews brought up too. getting click vs. drag right was definitely a pain. i could never really get an interaction that felt right.

i think you're right that the mis-match between day and month granularity is weird. i think it makes sense to say that span T can't ever be smaller than a month.

so an initial click opens a one month window.

re: black boxes. agree they are confusing. how about something more like...

http://www.yellowfinbi.com/Image.i4?ImageId=6354

[brendano]

re: black boxes. agree they are confusing. how about something more like... http://www.yellowfinbi.com/Image.i4?ImageId=6354

yeah the three parallel vertical lines seems to be an indicator of resiziness...

[brendano]

more examples of commonly used interface elements for resizing a time interval. we should use standard practices.

google finance (link):

Also it has

• color changes of the below-time-line-colored-area when selected versus not. Rookie's current method, of simply imposing gray, isn't quite as direct
• uses only two vertical lines internally. good, less
• doesn't try to constantly update during the drag -- only on mouseup release. i wonder if this is because it's technically too hard due to too many refreshes. i've noticed that rookie is unresponsively slow and buggy when dragging on an F-less setting. the slowness causes bugs to surface -- for example i've seen it in a state where the mouse button is released but it is still in resize mode -- which i suspect are race conditions that were in the original code, but the slowness of this setting forces them to surface which they didn't before.

[AbeHandler]

Easy (and fixed):

• update on mouse up only (done)
• thinner black bars on side, lines on top of rectangle
• zero length selection should be impossible now. initial click = 1 month
• resize cursor on handles
• month level granularity. no more day granularity

Harder (lower priority, but certainly doable):

• color changes of the below-time-line-colored-area when selected versus not. Rookie's current method, of simply imposing gray, isn't quite as direct