6

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.

enter image description here

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.

1
  • 2
    Due to excessive steps and multiple options it was really hard for me to understand the question... i can only assume that having a "Wizard" with different branches might help to guide your users toward generating their reports...
    – Mortalus
    Mar 1, 2013 at 23:43

1 Answer 1

5

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:

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

Mega dropdown with tree selector

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.

7
  • In your work on a similar interface, did you do any user research to see if it met your users' needs?
    – nadyne
    Mar 2, 2013 at 17:52
  • 1
    We did... some. What is specific about the tool is that it is going to be used by people having deep knowledge about the data. It's just an analytical interface. So, what we did first was the research regarding analytical needs of the users and their expectations. We ran several rounds of design and testing as well, of course. Mar 3, 2013 at 19:07
  • I really like the layout of the "refine your selection" across the top and moving the select group and category to the left. However, the leftNav with the external links won't allow the select group and category to fit there and the leftNav is a global piece to all the jsps. Maybe moving Select group and select category to the immediate left of the tree, but to the right of the external links would work.
    – user9533
    Mar 4, 2013 at 16:24
  • 1
    There are several options to go for. You can: 1. hide the whole left column in a dropdown similar to the one the tree sits in, 2. move the whole group/category to the mega dropdown, expanding it to the left and placing additional elements there, 3. leave the group/category above the "refine" section (namely if once selected it is going to be hardly ever changed by the users) - maybe you could use dropdown breadcrumbs for that, as described here: ux.stackexchange.com/questions/19586/… Mar 4, 2013 at 21:42
  • And for the external links, well, it really depends how visible they need to be. Can you move them to the footer, I mean: totally? Or maybe do the opposite, placing it in the header? Mar 4, 2013 at 21:46

Your Answer

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