Fixed Sidebar with Accordions

Question

I've been constructing a page with a fixed sidebar, that has lot of info placed into collapsed accordions.When user remains at the top of the page ,all is well, he can expand the accordions ,say 5 and peruse the contents.

But when user has scrolled down to the bottom of the page, expanding the accordions is a bit tricky as they tend to overflow the parent page.

What will be the best experience in this case?

1. Scrollbar inside the sidebar ?.
2. Collapsing all the accordions and hiding the (+) icon of accordion.?

Any other options are welcome too, as i feel the sidebar which contains the summary is an equally important piece in the page.

Answer 1

Check out the new Angular 2.0 Page .

If i caught your problem correctly, above approach is the best solution for the user experience. A fixed navigation like system on the left that acts like an accordion, on click of each element on the left side pane you can load the contents dynamically on the space on the right which can be scrolled.

If there are very large number of items on the left pane , you can make that scrollable too and add a search at the top to find each category. So that every content is easily accessible to the user without much hassle.

Here is a screenshot of the same.

Answer 2

If you're going to keep the accordian menu, have it so that when one accordian opens the previous one closes to optimise space. Try to avoid a scroll at all cost.

Answer 3

You could possibly refrain from using the according all together like shown in the image. A fixed sidebar with provision to scroll the main items (the arrows at the top and bottom). On clicking the items, you could show a content area beside it showing all the contents that you had planned to display inside your accordion. The users should be able to toggle the visibility of this content area.

Using a scroll bar inside a side bar is not such a good idea I feel.

Hope this suggestion helps.

Answer 4

Try to examine how Apple and Google have designed their design guidelines websites. On the Apple webpage after you click one of accordion's headers content of other boxes become hidden, but I don't find it an easy way to grab the big picture of opportunities of the menu. Otherwise Google doesn't hide any boxes until you click on the link (content of the accordion) it's a better solutions cause you could recognize all the content at once there is no need to click each accordion's header separately.

Moreover Google is using animation while you are clicking accordion's headers so it's easier for the user to see what content is appearing and how long the accordion content is.

https://www.google.com/design/spec/components/bottom-sheets.html https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/