This post is co-authored by me and Amy Hupe.
Long pages of content can seem daunting, so to make them look shorter, designers and developers often reach for things that hide some of the content, such as accordions, tabs, carousels or a “reveal” widget. We’ll call these things ‘content-hiding interactions’.
But hiding content doesn’t solve this problem, and often creates further difficulties.
Long pages aren’t inherently bad
A long page of content is not the same as ‘too much content’.
If people are confident that the content is going to be useful or interesting, then they are willing to engage with it and to scroll. Just look at how we behave on Twitter, or at the lengthy introductions on many recipe blogs.
When content is ‘too much’, it’s usually because:
- it’s not what users are expecting
- it doesn’t seem relevant
- it’s too hard to read or to scan
- it’s trying to cover too many things.
Forget ‘the fold’ but remember to start with the best bit
Another misconception is that users ignore content that sits below ‘the fold’.
‘The fold’ originated with newspapers. Broadsheets are folded in half, so when displayed on a newsstand only the stories ‘above the fold’ are visible.
In the digital world, we used to observe that people were reluctant to move ‘below the fold’, meaning the part of the page that was invisible until they had scrolled.
Nowadays, the amount of content they see depends on the device they’re using and whether or not they’ve adjusted the text size on their screen. If they’re using a digital watch, they may only see a few words. There’s no single fold to design for any more – it’s a myth.
It is true that users often pay most attention to information that sits higher up the page. That’s why it’s important to put the best bit first.
Hiding content creates more work for users
Let’s look a bit harder at those content-hiding interactions – the accordions, tabs, reveals and other things that are often used to make long pages look like short ones.
Hiding content can give the impression of a less daunting page, but the penalty is that we’ve added extra interaction.
Some users will not know how to use the content-hiding interaction, or won’t notice it, and will end up missing the hidden content altogether.
Other users have limited ability to concentrate, perhaps because of an attention disorder, because they’re in a distracting environment, or because they’re stressed or in a hurry. Adding the extra step of deciding to deal with the content-hiding interaction gives them more to do, and threatens their concentration.
And to top it off: the content-hiding interaction may require JavaScript to work, which can impact page loading times and performance.
The content-hiding interaction is giving a false impression. It just swaps the default interaction (scrolling) for a more complicated one.
Instead of reaching for those content-hiding interactions – tempting when you’re thinking about interaction design – it’s time to jump disciplines and think about content design instead.
Plan and edit your content
Start by considering the scope of your content. Try to stick to one main message per page of content.
See if you can describe the main message in a single sentence, and if you can’t, that’s a good sign that you’re trying to fit too much on one page.
For example, here’s our sentence about this article: “We explain why using content-hiding interactions to shorten a page creates problems for users, and what to do instead”.
Look through the page to see what the messages are, then think about how relevant they are to your users.
Remove irrelevant information, then put the most important bit first and move less important messages further down the page.
You’ll have a shorter page and you’ll have users who are more engaged when their main need is met early on.Try how to edit anything to get started.
Make content scannable and readable
If you divide your content into meaningful chunks then it will be easier to read and to scan. Use clear, descriptive headings to help users locate what they need without having to read all of the content from top to bottom. We recommend making each heading into a headline.
Breaking up walls of text with paragraph breaks, bullet points and relevant images also makes a big difference to readability.
For very long pages, putting a list of links to the different sections at the top can help users who want to quickly skip to the information they need.
There’s lots more advice on making content easier to read; try these plain language guidelines.
Test your Big Long Page with users
If your content still seems lengthy after editing and breaking up blocks of text, get your users to help you.
Testing a Big Long Page of content will help you to learn what’s needed and what isn’t.
For example, to discover whether a particular chunk seems useful or not, try some plus/minus testing.
And don’t just test your content once. Content might get updated and user needs will change. Testing your content with users periodically will help to keep it focused and stop unnecessary information creeping in over time.
Put your accordions away
What if you have no opportunity to change the content at all, and the only way you can make the page look smaller is with content-hiding interactions – the tabs, the reveals, the accordions?
Put them away and do nothing!
Accept that the content is what it is. A long page, with or without content-hiding interactions, is a long page. Avoid adding extra interaction challenges to it.