How to display a potentially huge set of options in a scrollable list?

Question

Background

I am designing a report building tool within a larger application because the users require the ability to create a large variety of customized reports.

Solution

To enable this I have decided to use an inspector that is used to alter any of the potentially large number of options, including display options and types of data. The inspector is sectioned off such that relevant types of options are grouped together.

Problem

The inspector as a whole is scrollable, some of the options within the inspector can have many items (possibly hundreds or thousands) that night need to be checked. This requires a scrollbar, but the scrollbar inside a scrollbar can cause havoc with the users (see: http://baymard.com/blog/inline-scroll-areas).

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 1

I'm not sure of what you are working in but I was always fond of a select box replacement written in jquery called Select 2. It has the appearance of a select box but when you click on it it gives a search box underneath. There are also examples for selecting multiple options if it is needed.

Here's a quick mockup:

^{download bmml source – Wireframes created with Balsamiq Mockups}

The above would be how it looks when expanded, and when collapsed it could look like a normal select box or be styled to indicate it's a bit different. Another option is to have instead of a standard select box have a textbox with a button that drops down like a select (again there is a working example on the Select2 site). This essentially removes the separate search textbox and moves it up into the select.

This option takes up just as much space as a select on the form and removes things like popups that I personally hate to find in a form as it breaks the standard flow.

Answer 2

You can use a popout window, this will also free some space on the report inspector :

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

I will also give the same solution Select 2: http://ivaynberg.github.io/select2/

here you are also able to view the selected options...and scrolling would be required in both areas ('selected options' and 'options to select')..

for hundreds or thousands of options, how can we display them without scrolling...

Answer 4

you could use an accordion, with all the option categories collapsed by default. clicking on one expands it. while clicking it again collapses it, like a toggle. clicking on another one expands that and collapses anything else thats currently open. after making a selection, the selection will be a part of the title in the accordion.

Answer 5

Search only works if they know the name, which may be part of the problem for the user. They may not remember the exact name and only think of a synonym for the name instead (e.g. they type "dashboard" when the name is "summary"). For large sets it is often viable to list the most frequently used in a short list and then have Search as well as a pop-out for All to see more options at once and increase scan-ability. It might be helpful if it is a really long set of options for search to query more than just the official name as well to help those tricky naming versus recall issues.