I am creating a website that will display data using Highcharts.
On any given chart, there are various different filters the user can apply to see different aspects of the underlying data (e.g. time period, average etc.)
I want to create a ribbon with different options for displaying the data. Here is an example:
I want to make it as easy as possible to for the user to update the chart. For example, the
BY SEASON section is a drop-down menu and once they click a new metric then the chart will update. The same will occur if they select a new basis for the data e.g.
My issue comes with the time period (on right hand side). Suppose the user wants to update the time period from
2011 to 2014 to
2012 to 2013. I can see two ways of doing it:
Once they update the first drop down box from
2012 then update the chart immediately (i.e. it will show
2012 to 2014). And when they update the second drop down to
2013 the chart will update to show
2012 to 2013.
Let them select
2013 in the two drop downs and then hit
APPLY to update the chart.
In Scenario 1, the UX is consistent (chart always updates on a new selection) but it could be annoying as with a date range you typically need to change the to and from date.
With Scenario 2, it seems more intuitive for the user, but with the way the ribbon works now, it would be inconsistent i.e. for some selections the chart updates automatically but for time periods you have to select
Thoughts on best way to go here?