1

I've been tasked with implementing a report parameter that contains other report parameters, for a reporting software I'm working on. The UI, as described to me is really confusing, but I am at a loss to come up with a better design. It is to look something like this : enter image description here and should behave as follows:

  • When clicked upon, the child report parameter should populate on the left hand side. If that child report parameter has report parameters, then when value was selected for it, it should replace the left hand side contents and its child parameter should appear on the right and the parent appearing right above it, like :
    • enter image description here
  • User should be able to go back up to parent/main levels
  • When user enters values for the child parameters, the main checkbox should be toggled to checked
  • When user clicks the checkbox, default parameter values for all levels should be set

All of this was to be under a <select> widget, and I only had a couple hours to implement this.

The sheer confusion of this design, the model I was given for it, and what the expectations for the view-model should be, ate up so much of my time, resulting in only the stuff for the first image to be implemented (except for saving the values of the child parameters. I was lost about that), a day later.

The <select> widget requirement was scrapped (literally impossible, and even if it weren't, it's counterintuitive as hell), but even after that, this design is really confusing. That checkboxes should not toggle onclick of the list buttons they're in, is counterintutive. However, I'm struggling to come up with something better. Could you help me out?

An idea I have

Instead of having to click checkbox to toggle whether a company is included with default values, simply clicking the button should do the trick. To deselect that company, user should see a trash icon or an X to discard, or even a small Discard button next to the active list button.

Weakness of that approach is that, what if user has multiple selected companies, and only wants to modify the child parameters of just one of them?

3 Answers 3

1

The first wireframe you present is confusing, as it's not clear at first that the right part (stores) is dependent on left part (companies).

The issue you mention at the end (selection of multiple companies) exists for both design.

All the options seem to be structured as a tree (with unique hierarchical relationship between station > store > company). If it is so, the best representation is nested lists, because it will match the user's mental model and reduce their workload by allowing them to view all options and their status at once, rather than forcing them to navigate constantly between different levels of hierarchy to check that they selected the right options.

Checkboxes are the easiest way, but you can imagine clicking on the name to select it (it becomes highlighted). You will also need a way to expand / minimize parent categories.

1
  • May I get a rough sketch of what this might look like? Commented Sep 23, 2019 at 16:51
0

I don't think hiding the main selection is a good route. Keep it displayed and hide/show contextual filters based on the selection. Maybe something on a left sidebar similar to an ecommerce site (amazon).

You could include an X next to the main filter, so they can go back, but I still like the filters being displayed personally. Less steps to get back to the beginning and a better UX in my opinion as its easier to see selections.

0

wireframe

This design allows jumping back and forth, but only when the requirement of the previous tab having something selected is met.

Random notes:

  • Having the color expand from the tab into the pane is not required, but helps highlight the current category.
  • Different colors for each tab would further differentiate the categories.
  • The tabs could be moved to the top and go left to right if that fits your page layout better.
  • Illustration not to scale.

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.