Evaluating the Usability of Collapsible Sections (or jQuery’s Content Toggle)

Go to article

Posted on March 25, 2013 in Organizing Content

After my post on Organizing Page-Level Content, a couple of people asked me about the usability of collapsible sections, also known as content toggles or dropdown hotspots. These are sections that are collapsed upon initial display and then expand when clicked.

Here’s an example:

Read this content

You can implement collapsible sections in several ways. In Flare, you can insert drop-down hotspots from a quick button on the ribbon. In Drupal, you can use the Collapse Text module. In WordPress, you can use the Collapse-O-Matic plugin. The theme I’m using (Canvas from woothemes) has collapsible sections built directly in.

You can also code the sections directly using jQuery through the Toggle method. For example, if you wanted to toggle a section with the ID “section” so it appeared in an expand/collapse state, you would insert a reference to the jQuery library in script tags, and then insert another script like this:

1	$('#section').toggle();

In the above code, #section is the unique ID of the element you want to toggle. (Including the twisting arrows is more complex.)

Wikipedia’s mobile pages use collapsible sections by default. Here’s an example if you want to explore collapsible sections a bit more.

Problems with the Collapsible Sections

Collapsible sections are cool but somewhat problematic. One person commented:

I really like collapsible sections, but I’ve encountered some usability issues with them (searches won’t look in collapsed sections, users might not know which section contains the info that they want). It would be great if you could search for something and the search result would auto-expand the correct section, but I haven’t seen that.

Another person asked via email:

How have users reacted to having to use progressively disclose the information by clicking? I ask because I received negative feedback when I incorporated togglers in Flare at a previous company.

Are collapsible sections really a best practice for help documentation, or do they just present more problems?

Overall, I think collapsible sections provide a strong advantage in organizing content and should probably be followed despite the drawbacks. Collapsible sections do all of the following:

• Collapsible sections compress a lot of information into a small space that users can visually scan in a quick way.
• Collapsible sections hide the length of information so that the content looks simpler and lighter to users (until they expand all the sections to see just how much content is there).
• Collapsible sections allow you to include content in a way that adjusts to the user’s need. If users want more information, they click the link to read more. But if not, users aren’t burdened by all the content.
• Collapsible sections allow users to interact with the content so they’re choosing what they want to learn.

If you trend toward longer pages, collapsing the sections can provide a huge win for navigation and usability.

Now for the downside. If a user searches for a keyword that’s buried inside a collapsed section, the user might be bewildered by not seeing the highlighted keyword on the page, because the collapsed section remains collapsed even in search results. (Seems like there would be an easy workaround for this, but I don’t know it.)

Keep in mind that Google doesn’t highlight keywords in search results. Google bolds keyword matches in the search engine results page summary, but when you click the result link to view the page, nothing is highlighted or bolded. So it seems a bit unfair to require help to highlight keyword matches on the full-page view.

Another drawback may be with content re-use. With Flare, you can store all of these collapsed as snippets and re-use the snippets, but what if you’re using another tool or platform that doesn’t have a snippets-like feature? You may be limited to only reusing larger chunks of content.

Finally, some users may find it annoying to have to expand content before being able to read it.

In looking at help systems, I don’t see many tech writers using collapsible sections. This may be due to limitations with the tech writer toolset, but I think a greater reason is that most topics are short, and the TOCs are massive. We’re still writing in the book paradigm rather than following the Every Page Is Page One style. As soon as you switch to a style that favors longer help topics, collapsible sections are about the only way to avoid intimidating the user with too much text.