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.
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.
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.