1

I'm having a difficult time organizing the excessive number of listboxes for a report I've been asked to write.

They want tons of filter options with multiple select lists. Is there a better way to organize these lists or an alternative to listboxes that may look cleaner? I can hide the listboxes when the checkboxes are checked but that still doesn't look great to me.

This makes my eyes hurt:

page layout with listboxes

Edit:

I decided to use a Progressive Disclosure design pattern to clean this up a bit. I'll continue to improve it as I learn more. Thanks Son Do Lenh for the answer!

new page layout

  • I've tried: 1. the screenshot 2. Hide listboxes when checkbox checked; looks better but still looks funny when you have a few checkboxes checked. 3. Put listboxes all in one column and listboxes to the right in another column and hide (or not) listboxes when checkbox checked; either way this is okay but the user will not like scrolling down so much. I'm just not sure what the best practice would be for organizing things such as this. I'm leaning towards #3 though. Any suggestions? – twistedaxe Jun 24 '14 at 19:32
  • Could you elaborate more on what these checkboxes are supposed to do? – Son Do Lenh Jun 24 '14 at 20:06
  • These are report filter options. The checkbox is used so the user doesn't have to select all items in a list if they want to run the report by all. In the screenshot, it is enabling/disabling the listbox when the checkbox is toggled. – twistedaxe Jun 24 '14 at 20:17
3

Staged Disclosure UI pattern is one option here.

It's a variant of Progressive Disclosure pattern. And Setup Wizard is a classical example of this pattern.

In your case, I'd suggest **breaking the over-complex configuration screen into multiple ones that require fewer user interactions, and are less visually overwhelming.

In other words, you can try to

  • Divide this reporting task into distinct steps that have little interaction, and let users finish them one by one.
  • You will have more space on each step to display more data items in one listbox (instead of squeezing all data in and let users scroll forever).
  • Don't forget to let them see the number of steps they need to advance as an important contextual piece of information.

Wizard

An alternative is Inline-expand/ Collapse/ Accordion UI pattern.

It's used when:

  • There are too many screen elements (features, content, options etc) to comfortably fit on the page.
  • Most users won’t need all the elements all the time.
  • It is important show additional elements in context and without hiding anything else on the page.

Collapse

Update: Reading your comment and your new proposed screenshot, and in thinking more about your problem, I'd say that these reporting options don't necessarily have a chronological order, and hence it can be appropriate to use the Tabbing concept too. Something like the screenshot below with the tabs displaying options and the green button below all tabs is Print Report now.

Tabbing Tabbing 2

Assumption taken for this answer:

  • All the options are necessary. If some are not, you should remove them or at least, make them default and not force users to select them.
  • Hmm I'm not sure if breaking these filters down into steps would makes sense for my users but researching this did get me thinking! Would something like this be acceptable as far as good design patterns go? Only display the most common filters and have an Additional button to toggle the rest of the filters: http://i.imgur.com/EAhk6Jd.png – twistedaxe Jun 24 '14 at 21:20
  • Looks like it's going in the right direction. I'm pretty sure that you can identify a set of "most used options" with their default selections. Then just group the rest into the Additional link button, which would expand down the page when users click on it. You see, there're different possible ways that Progressive Disclosure can be implemented. – Son Do Lenh Jun 24 '14 at 21:31
  • @twistedaxe, you're welcome :) – Son Do Lenh Jun 25 '14 at 12:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.