If a sticky window panel is larger than the screen size, how should I display it?

Question

I have one panel at the right where users can choose search options that is a sticky panel.

However, on different screen sizes etc., if the height of this panel is higher than the screen height not all of it is visible. You then have to minimize some sub-windows. Is there a better way to handle this issue?

If the panel is not sticky, the users always have to scroll to the top to see the panel.

Answer 1

How about making the search options stick to the top of the screen instead (a la Twitter)?

Notice I'm scrolled down the page, but the navigation is still present at all times. This could be an issue if you already do this with navigation, but it has some good up-sides as well. Namely, you can fit a lot more data into a horizontal bar due to dropdowns. Since its thin and horizontal, this keeps all browser heights happy (maybe not widths, but using icons cleverly on smaller devices this could still work).

Also, I'm rather wary of trying to fit large amounts of data into small areas, like an accordion. This DOES have its place and can be useful, but we used something similar at my job and it turned into a horrid UX mess.

Based on previous experience here, I'd suggest instead of trying to cope with large filtering options, see what really get used and are necessary. You might find you can pare it down to 2 or 3 options that are useful, rather than 500 that no one uses. One key principle of UX is to keep options at a minimum so the user is not overwhelmed. This seems like a perfect example of a time to do that (unless, of course, your usage warrants it).

Answer 2

The stick panel can be made separately scrollable using an iFrame. This does increase cognitive load on the user so I recommend testing it before you implement it; I am not sure this is a good solution. But it solves the issue of always being visible and the issue of being too tall for the screen.

However, I would strive for a design that minimizes the need for scrolling. Perhaps have the menu detect the height of the screen, and if scrolling is necessary close the previous section when you open a new section. This will make it an accordion menu, the same interface Outlook 2003 used for the left hand navigation panel.

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

If you have good height detection, then the menu can allow multiple sections open when it has room, and as few as one open when space is tight, adapting to the available space.