I'm modifying an interface for an interactive line chart that can contain anywhere from one to twelve series of data. Users will be able to choose which series they can view by clicking on a set of checkboxes.

The checkboxes are sorted by type of series; three checkboxes per series, as well as a "show all" checkbox that will plot all of the lines in that series. There is an additional set of three optional checkboxes at the bottom that allow the users to cut "across" the data to see date-specific, rather than series-specific, comparisons.

Here's my question: how should I handle toggling of the "show all" checkboxes?

Currently, if a user chooses either a "show all" checkbox or a date-specific checkbox, all of the chart's existing lines are cleared and new lines are drawn based on the boxes chosen. My thought here is that this behavior would prevent cluttering or "muddying" of the data.

What I'm concerned about is whether that's a bad experience for the user. Say I chose a checkbox from each of two different series, and then chose a "show all" checkbox from a third series. Would it be confusing to see my first two choices removed?

I'm including an edited screenshot of the interface, which is still currently in the review stage. I would greatly appreciate some sound guidance. Thank you!

enter image description here

3 Answers 3

  1. As far as I understand, the main confusion occurs at the "Show all", so I would simply rename the label to "Show all of series 3 only" to make sure users understand this action clears out all other series.

  2. The timeframe cuts controls could be displayed on the right, with the horizontal highlight to show that it's a cut across all series.

  3. What does the "right axis" mean? It's confusing.

  4. If you eliminate coordinates' segment from 6 to 8%, the users will have a better detail on the line dynamics. Unless the 8% is a max point reacting to the data somewhere in the series.

enter image description here

  • 1
    Zoe, your feedback is outstanding and very thoughtful. I particularly like your idea of placing the time-specific checkboxes to the right with the horizontal highlights. To answer your questions: 1) The left and right axis labels refer to the types of series that can be plotted. The first two and last two are related and plotted on different scales. 2) The minimum and maximum values of the y-axis automatically adjust to the series the user chooses. If those plots have a larger range, the scale increases, and vice versa. Jul 16, 2016 at 16:21
  • I see, makes sense. Glad to know you like my answer.
    – Zoe K
    Jul 16, 2016 at 17:04

"Say I chose a checkbox from each of two different series, and then chose a "show all" checkbox from a third series. Would it be confusing to see my first two choices removed?"

It would be very confusing if the first two choices were removed but still shown as 'checked' in their respective checkboxes as there would be a mismatch in state between the checkboxes and display.

I would downgrade that to 'annoying' if the GUI at least removed the 'checked' status from the checkboxes (it's not clear which of these two happen from the 1 screenshot)

I say that because the checkboxes say "select all" for their respective series, not "select all here and clear everything else" or "select all (exclusive)"

So I'd either clarify what happens via the label or, and this would be my approach, keep the previously selected series as being visible.

  • I appreciate your helpful feedback. The way I have it working currently, when a user chooses the "select all" checkboxes, all other checkboxes are unchecked, so this falls into your "annoying" category (which is not at all how I want to treat our users). As you and Zoe suggested, I'll rewrite these labels to be more clear on how they function. Jul 16, 2016 at 16:25

Yes, it would be confusing and potentially annoying or even frustrating.

You might want to rethink how the interact. Maybe you have the choose from all, date, or custom first. If they choose custom, they get the option groups.

Generally speaking good form design is: if something is toggled, radio button. If choices and multiple selections, checkboxes, dropdown.

  • Thank you for your insight, Nicole. The client had asked for the checkboxes in the original requirements, as they wanted the users to see all the possible comparisons and choose any number of them. I had added the "select all" and date-specific checkboxes as a second-round enhancer to cut down or across the series. Jul 16, 2016 at 16:31

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.