How to properly layout multiple interactive controls using best UX pattern?

Question

I'm working to redesign an existing page that generates reports, based on user selections. Currently, this is a rough draft of the page layout:

• The user must always begin at 1 and that selection will change the links list at 5 on the right and the treeview at 5 on the left.
• The user can also make optional searches at 2 and 4, as well as another selection by dates (preset dates) from the dropdown at 3.
• The left nav at 6 is only for leaving the page and doesn't enter into the selections for the reports.
• A key point is that each selection the user makes will affect 1, 5 (treeview), and 5 (links list). The user can also drill into the treeview and that will also affect what is displayed in 1 and 5 (links list).

The fact that you have 6 widgets that all interact with one another makes it more complex, but the starting point for the user is always at #1. The available data is further based on roles, but that is covered under the back end business logic, hence the need for the interactions and updating of the widgets.

So what would be the best pattern for this layout to avoid the current cluttered look on the page and make it simple to navigate for the user?

To me it's awkward and hard to follow visually the first time I worked with it myself.

Edit:

Something that I left out originally, is that the user would have selected a report type that will reflect itself as the active selection in the Main ComboBox at 1 before they arrive at the page. In other words, they select a report type from the previous page and that selection populates this page when it loads, so there will always be a selection on the page. It won't every appear blank without data.

If they want a different report type after they are on the page, then they change the Main Combobox at 1 and the other widgets reset themselves accordingly. The report type at 1 drives the page, with the other widgets being more like filters for the original selection.

Final:

Based on the input we received, we decided to redo the UI and use the toolbar for everything except the tree at (5) and the leftNav at (6).

The main dropdown (1) has the list at (5) incorporated into it as a second level to the dropdown and the filters are all to the right of the main dropdown as they are secondary, optional elements.

It's a much cleaner interface now.

Answer 1

I have worked recently on a similar interface, so I know the pain... Here is what I have come up with, adapted to your needs, I hope.

Let's start with a blank slate:

I have decided (but you may prove me wrong) that the first two levels of choice are always visible to the left, so that the user can see where he/she is all the time. There are downsides of that, though:

• it eats up space, so if you have a lot of analytical data to display, you should rather go for hiding it
• the list may grow long, hiding the external links from the user, or even longer, getting too long to be usable itself
• due to its placement, it needs to be rather narrow, so the item names in selector and the list need to be quite short

So, as a vulnerable part, it's a matter of refinement, but let's leave it like this for a moment.

By the way, as you can see, I have named the levels of selection, using words: group, category, and then "deeper structure selection".

Then you have filters pane. On this screen it is contracted, and includes:

• "Deeper structure selection" mega dropdown (described below)
• Date selector (working on selection to avoid usage of submit button here)
• Feature 1/2 search filter fields (filtering data on the fly, to avoid usage of submit button here)

The reason for avoiding submit buttons is that you could go for many buttons, which would make the interface too complicated or one button, which is an alternative. You would just put a button on the far right side of the filters pane. However, as we have this mega dropdown which visually is a different area for the user, having a submit button on the filters pane might lead users to not understanding that after closing the mega dropdown it is necessary to submit it for the selection to work.

Note the blank slate. It is inevitable, because there is no data selected to display at the beginning. So why not use it? Should contain explanation what should be selected first, in textual or graphical way.

Regarding the mega dropdown, it contains the tree for deeper selection of the items. Note that most probably you will need to provide three selection states. Lowest level items need just two, like selected/deselected, but for the higher levels you need to provide also a state for "some in branch selected".

Below the tree, you can see a submit button - it is necessary here, as it refers to multiple click in the tree structure, and is visually closed within the mega dropdown, so users should not be confused. I also believe there would be too many requests to the data warehouse if it worked on the fly. The data structure here may be complicated. There is also a visually degraded Cancel. The reason behind putting is there is that users might not be sure if by closing the mega dropdown on the filters pane they will or will not trigger filtering.

Now, how to show the users if there is something selected in the mega dropdown when it is closed? You will not be able to reflect all the information in the filters pane. Instead, go for changing "Deeper structure selection" to something like "10 selected". When followed by arrow down, it will tell the user that he can still click it once again to trigger mega dropdown and select some other elements. He is already familiar with it after all.

I hope it answers your question. I apologize, but I may be unable to improve this answer during the day today, but maybe some comments will help.