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.


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.


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


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.

  • In fact we are using select2. I was thinking this would have the same UX implications that the multi-select options list has, but it seems to hijack the scrolling while the drop down is opened. This may be an issue with our users, I won't know without testing. The bigger issue is that the selected items are not visible without scrolling the list. Perhaps we can use this as a way to build a visible list. – rdellara Aug 18 '14 at 22:31
  • Scrolling happens depending on what the mouse is hovering over, if it is over the select then that will scroll. I'm not sure what you mean about selected items not being visible, if you look at the multi-select on the demo page it adds all the options into the top bar which is always visible and they have an x next to them to de-select. Perhaps there's a part of the problem that I don't quite understand. – Don Aug 19 '14 at 14:42
  • You are correct. I was thinking of the more standard multi-select box using shift-click or checkboxes. I think this option may indeed work best. Thanks! – rdellara Aug 19 '14 at 19:44

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


download bmml source – Wireframes created with Balsamiq Mockups

  • 1
    Thanks. This occurred to me as well. As the option list is multi-select (which I neglected to mention) this might hide the selected options unless I display the selected list with an edit button or something similar. This does seem like the best option so far. – rdellara Aug 16 '14 at 21:36
  • Another option, is to use multiple fixed size pages for the report inspector. Add next/previous page at the bottom right. This will eliminate the scrollbar from the report inspector. – DesignerAnalyst Aug 18 '14 at 7:46
  • this would have been my suggestion – Dave Haigh Aug 18 '14 at 8:50

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

enter image description here


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.


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.

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.