Layering Content

A person selecting from two paper prototype layer options
Adapting content for interactive reading on the web is about finding balance.

Delivering too many facts at once puts a heavy cognitive burden on your readers. But breaking it out into many too-tiny pieces requires them to click and load a new page for each small chunk of information, raising your site’s interaction cost.

It’s better to organize content into clear, distinct categories designed to drive quick choices and link to increasingly detailed content as you move deeper into the site’s architecture.

Death to Accordions

Accordions complicate the interaction, because it seems like you’re giving readers everything in one place, but they have to repeatedly jump between two levels of detail to process the information. It forces readers to bounce between accordion panel headings and the paragraphs of detail beneath them, while also needing to click the panels open and shut.

They’re not as good of a readability compromise as they seem, and we often recommend avoiding accordions altogether.

Except for…

An exception to our hard line on accordions would be if you have bits of information for distinct audiences that aren’t big enough to float their own individual pages. For example, an admissions page might have 25-50 words of additional application instructions each for international students, art majors, and residents of California. In that case, users would only need to click into the one panel that applies to their situation, get their customized information, and move on.

3-7 Choices at a Time

There’s a sweet spot in the middle of “too much” and “too little” that delivers just enough information for readers to make a choice, whether they just want a general sense of what you have to offer on a subject or are searching for some obscure detail for their special situation. This often looks like about 25 words of messaging or overview copy followed by 3-7 choices leading to pages with the next level of detail.

If you have more than 7 things at the next level, group them together by topic and keep layering until you can present chunks of content that fall within that range. You want to drive readers to the next logical level, but limit your presentation so they can only see one step at a time. It reduces their cognitive load and makes them feel like they’re successfully progressing toward their answer.

Except for…

If the next level of detail is a whole bunch of things that are all alike and fall into the same category, like a list of faculty members, short descriptions of all the scholarships available, or floor plans for every residence hall on campus, then a really long list is the best answer.

These represent the most advanced level of detail — the ultimate answer at the end of a user’s quest — so at that point he or she would be willing to spend more time reading and take it all in. The idea is not to gum up their path at an upper level with information that they’re not necessarily looking for yet.

These techniques take some practice to feel confident that you’re getting it right, but fusing a little information architecture and interaction design into your writing and editing skills can drastically improve your site’s user experience, no matter what the design looks like.

NewCity logo