Usability of selecting a range of data in stock-type charts

Question

A stock chart is a common tool for displaying financial data or other time-series related data where the data can be streaming by the minute or even by the second, and you also may have historical data that can go back hours, days, months, or even years.

Here are three examples from different vendors: google, yahoo, and morningstar looking at a sample stock, in this case the Toro Company.

Google
https://www.google.com/finance?q=NYSE%3ATTC&ei=RVGJVpmeHcu0mAH05b_wCA

Yahoo
https://finance.yahoo.com/echarts?s=TTC+Interactive

Morningstar
http://quotes.morningstar.com/chart/stock/chart.action?t=TTC&culture=en-US&region=usa

These tools all have a Zoom selector similar to the one below from google.

Google and Morningstar both use a draggable slider, while Yahoo does not.

---

On the face of it, this all seems relatively straightforward. In actuality, I think the UX decisions get complicated here rather fast once you start interacting with the zooming tools and/or slider, if present.

The TORO stock has data going back prior to 1980, but that is not what the range slider on Google and Morningstar indicate at first. Then once you start dragging the range slider, the values beneath the range slider itself start switching on you in a surprising (not in a good sense) fashion.

Perhaps the problem the ux designer faces here is the end-user has two ways he/she could simultaneously zoom in on the data. One zoom could be considered a "meta-level" zoom: e.g., I want to look at data for the past 15 days in a stock that has 45 years worth of data. Fine. Zoom into that range. But next, within those 15 days, maybe I want to zoom at a daily level or an hourly level. Should the same range slider handle be performing both of these functions? That's what Google and Morningstar try to do, and this is what yields funky behavior in the range slider from the end-user's perspective.

Yahoo dodges this issue by allowing the user to pan the data, and once you select a zoom level, you are locked into that zoom level. You can still adjust the zoom (within a selected zoom) by using the "plus" and "minus" buttons they give you, and I think this still avoids the surprises you get from the Google and Yahoo sliders.

I would love to know if there have ever been usability studies or guidelines issued on this subject. And maybe there is another approach to stock charts that gives a simpler user experience?

I have seen one case where a person made two range sliders: one for the meta-range, and the other for the range within that meta-range. Maybe this is a valid solution, but it seems too complicated to me; it's too much work for the end-user.

Answer 1

The difference between them is less than you'd think, both the google and morningstar examples can be panned in the detail view just like yahoo (the morningstar isn't a nice drag animation though), and google uses the mousewheel to the same effect as yahoo's + and - buttons. What has been added for the non-yahoo examples is an overview view, to give what's known as a detail+overview interface in information visualisation circles with the rangeslider controlling the correlation between the two views and as you point out also acting as another zoom setting control which is where the bother seems to begin.

The trouble is at the start the overview isn't actually global i.e. the full range of accessible data, and this seems to be because showing the full history would then render the rangeslider too coarse for many zoom levels - when the overview represents 20 years worth of data and say the view is 800px wide, each 1px drag is going to be a ~10 day jump in the detail window - hard to control and the data in the detail window would just 'jump' too if it was a less than 10 day setting.

So what they've done is set the overview's range to take account of the chosen zoom level so the rangeslider resolution is finer; and then, they've had to make a decision as to whether people want to first see a) the most current data at a fine level of detail with a restricted overview (potentially making people think historical data doesn't exist), or b) to see the last few months worth of data in the detail view and the full history in the overview. They've gone with the first presumably based on whatever testing they've done.

Assuming that the overview is useful (and that's not a given, how many users typically want to know the price of a stock from 10 years ago?), then one solution that doesn't add more sliders would be to accept the overview should show the full history, and is then only suitable for very coarse navigation and design accordingly - remove the slider altogether from it for a simpler visual indicator and use a "click here" functionality to jump to that rough point in the detail view, and use the existing pan and zoom setting ability in the detail view for fine-level navigation - but that would need user testing.

As for usability tests on chained detail and overviews i.e. involving intermediate-level views, I'm not aware of any.