How to handle very long accordions?

Question

I have condensed a rather long list of items into an accordion so that only the titles are initially visible and the accordion expands to show the details. The list contains the main content of the page, not navigation.

I think this works well because users will be looking for the heading that applies to them, and there is no reason for them to care about the details of the other ones, so hiding it works well, and allows them to find the one they need sooner.

Here is an example of the type of interface I'm talking about. Difference is on mine only one can be open at a time, they animate open and closed, and some [really only one] of the content sections on mine are pretty tall)

The tricky thing is there are some categories with 25+ items, and when there is an item near the bottom with significantly more content than the currently opened one (or even worse when none are open), when opened it just extends most of its content off the bottom of the page.

My question is twofold:

1. Is it in general a bad or questionable decision to have an accordion with many many options that requires scrolling to see all of? (I don't think so, but not sure if it threatens the pattern)

2. How to handle opening accordion sections with lots of content that are near the bottom of a page (this accordion has varying height internal sections). My initial idea would be to scroll the page up so that the clicked section moves up to the top of the viewport, showing as much of the opened section as it can but not going off the top. I just worry that this might feel twitchy or strange to the user.

Answer 1

When to use an accordion

What problem does an accordion solve? It solves the problem of not having enough space to show all items, so instead, you collapse all but one of them and allow the user to toggle between them. The downside is that the toggle controls are dependent on the length of the contained content. In your case, it sounds like the contained content may make an accordion impractical.

Here's what UI-patterns.com has to say about the accordion pattern:

Usage

• Use when you want the benefits of a normal sidebar menu, but do not have the space to list all options.
• Use when there are more than 2 main sections on a website each with 2 or more subsections.
• Use when you have less than 10 main sections
• Use when you only have two levels to show in the main navigation.

Some of those numbers seem a bit arbitrary, but they're good rules of thumb to follow. Essentially what they indicate is that if you have too much data, you may not want the accordion pattern.

Alternatives

UI-patterns.com actually offers a compelling alternative, the vertical dropdown menu. It's a good approach for your situation because it opens up a lot of vertical space for longer lists of items (since the list will appear on top of other content). If you need to fit the control into a sidebar, consider the horizontal dropdown menu on the same site.

Using an accordion anyway

If you're still forced to apply the accordion pattern, consider the accordion on the right hand menu on UI-patterns.com. Some of the headings there contain around 25 items, and even though the bottom headings disappear from view when you're looking at it, it's not confusing. That's because the accordion animates its transition from its open to its closed state. This is important because it tells the user what is happening to the headings as they click on them. If they were to just jump open and shut, the headings would be gone and it may be unclear where they went. So if you implement an accordion anyway, consider using an animation to make the transition extra clear.

Answer 2

Your concerns are well justified. Accordions don't scale well, both in terms of number of items and in terms of space. If that's the content you're dealing with, then maybe an accordion is not the right solution? Look at the accordion navigation menu on the right at UI-Patterns. Open the top item, then scroll down a bit, and open the bottom item. The large top item collapses, and the item you've just expanded goes up and disappears from view.

You can still go for the collapsing content concept without using an accordion if you use the standard expandable sections approach, where you can expand as many items as you like at the same time. It's a very widespread UI pattern to FAQ's, e.g. at iToldem.com.

Answer 3

I sorta faced the same issue with a client of mine in their intranet.

Yes, having the page become too long did become an issue for users, and they complained that they had to look hard for information. To solve that (quickly) we added a layer of tabs, in which the accordion component would be placed. After re-organizing the items around, it reduced the number of items per container. However, there may be a chance that this might not apply to you, so I'm not too sure.

This is a much better done example of what I mentioned above: http://unowhy.com/#/actu/index.htm but we couldn't afford to allocate resources to make it this pretty.

With regards to your second question, I'm not clear what you meant. I just don't think that there should be an issue with the page expanding to cater to the extra content appearing in the page. Depending on how it's visually developed you may need to make sure that the accordion doesn't cover the footer or other components (a bug that we faced during early development) but other than that, there shouldn't be a problem.

Hope I helped!