1

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:

Ribbon

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. AVG or % CHG.

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:

Scenario 1
 Once they update the first drop down box from 2011 to 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.

Scenario 2
 Let them select 2012 and 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 APPLY.

Thoughts on best way to go here?

Improve this question
3
  • Does the 'BY SEASON' control also filter by time? e.g. if I used the right hand side to filter '2012 to 2012', would that give me the same chart as clicking on 'BY SEASON' and selecting 2012? Said differently, does the BY SEASON dropdown achieve a feature subset of the time-filter control on the right?
    – tohster
    Commented Feb 22, 2015 at 2:56
  • Not quite sure I understand what you are driving at? Based on the image, then selecting 2012 to 2012 would give the same result as selecting BY SEASON and then 2012.
    – Alex P
    Commented Feb 22, 2015 at 9:30
  • I ask because you want to drive consistency in the UX, so it has to be applied to the whole control panel. Having time filtering on the left but also on the right side is not intuitive because it presents two different interfaces at opposite locations that are capable of achieving the same results. Eg, if you selected 2012 on the left, then moved over to select a different date range on the right, you'd have to reset the left control which will feel disorienting to a user. Solving the "time filtering" interaction as a whole may yield better results than concentrating on the right side only.
    – tohster
    Commented Feb 22, 2015 at 9:34

1 Answer 1

Reset to default
2

Another approach is to create a custom widget which shows range of years user can select and let user select from year (first click) and to year (second click).

If only one value needs to be set that second click outside the dropdown will indicate that user is trying to change from or to date and wants to apply it.

To select same from and to year, user has select a year and click outside, when no years are selected.

Original UI achieved this with 3 controls (2 combo and 1 button), Now with above approach it is one single control.

This control makes selection of from and to date as one single operation, hence we can solve inconsistency in the toolbar.

Mockup below:-

enter image description here

Improve this answer
2
  • +1 Thanks. That's an interesting way to think about the problem. I hadn't considered it.
    – Alex P
    Commented Feb 21, 2015 at 17:58
  • I faced more challenging problem where the requirement was to select fromMonth/Year to toMonth/Year. Right now we are using four combos and trigger data refresh on any combo selection changes.
    – Chetan
    Commented Feb 21, 2015 at 18:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.