How to Chunk Content into Clear, Scannable Pages

by on 06/12/11 at 8:00 pm

Every website has content. But not every website has content that’s easy to scan and understand. That’s because they’re not chunking their content into a clear, scannable pages. Content chunking is a technique of combining and grouping pieces of content into sizable chunks, so that it’s easy and efficient for users to consume. If your website doesn’t use content chunking, you’ll make users work harder than they need to when viewing your content. This can cause users to miss important information, struggle to find specific information and eventually leave your site due to a poor content experience.

Books and Phone Numbers

Content chunking is a lot like the chapters of a book. If books weren’t divided into chapters, it would make it hard for readers to remember certain points in the story and follow the story from beginning to end. Readers could easily get lost, forget what happened before and give up on the story all because the book wasn’t organized into proper chunks.

How to Chunk Content into Clear, Scannable Pages

A phone number is easy for people to process and remember because the 10 digit number divides into three chunks. Everyone knows what the area code is because it’s always the first three numbers in parenthesis. After that comes another three numbers, an intersecting hyphen, followed by four more numbers. Without chunking the numbers in this way, people would have trouble processing and remembering phone numbers.

How to Chunk Content into Clear, Scannable Pages

Creating Content Chunks

The content on a website works the same way. You need to organize your content into chunks, so that users can visually and mentally process your page. You could have a lot of content you want to show. But if it’s not organized in a clear and orderly way, it can look messy, cluttered and make it hard for users to scan and read your content. It can also make remembering information hard, so that when users leave your site and come back, they’ll have trouble finding the same information again. Content chunking can make your web pages look so clean and clear that it’ll look like you have less content, when you actually have the same amount.

Figuring out your talking points

The first thing you should do is figure out what you want to tell and show users. Come up with a few key talking points you would like to showcase on your page. You should only show the best. Think about what your users want to hear about the most and give that to them. For each talking point, you’ll need to have a headline, paragraph text and an image. Each talking point will make up one content chunk.

Styling and sizing content chunks

After you have your talking points figured out and content chunks together, you need to size and style them. Every page needs to start with the ‘hero’ content chunk. This is the content chunk that goes at the very top of the page that users first see. The ‘hero’ content chunk gives users a general feel of what they can expect on that page. The headline, paragraph text and image of the ‘hero’ content chunk should speak generally about the content and look bigger than the other content chunks. You can also center align it to make it look more like an introduction to engage users.

How to Chunk Content into Clear, Scannable Pages

The content chunks that come after the ‘hero’ should look different. You should left align the text on them, so that it not only looks different, but there’s a straight left edge to help users read the text easier. The headline should use a bigger and bolder font size than the paragraph text. This will allow users to recognize each content chunk easier when they scan the headlines. However, the length of your headlines should never exceed the length of your paragraph text. Otherwise, the content chunk will look off-balance and asymmetrical.

How to Chunk Content into Clear, Scannable Pages

Your paragraph text should use a font size that is smaller and lighter than your headline text, so that there is contrast between the headline and paragraph text. You should also make the length of your paragraph text lines to around 12 words per line, give or take, so that users can read the text efficiently without moving their eyes and neck too much. Last but not least, adjust your text leading so that there is enough space between each line of text to help users read each word easier.

The image you use with your text should line up with the length or width of your paragraph text. If you’re placing your image to the left or right of your paragraph text, the height of the image should match the paragraph text height. If you’re placing the image at the top or bottom of the paragraph text, the width of the image should match the paragraph text width. This makes a chunk of content look more like a unit.

How to Chunk Content into Clear, Scannable Pages

You can choose to use an image with an edge, or an image that blends into your background. An image that blends into the background looks more realistic and aesthetically appealing. But an image with an edge can also look appealing if you round its corners, feather the edges or put it on a white photo frame.

How to Chunk Content into Clear, Scannable Pages

Spacing and placing content chunks

The spacing of each element in a content chunk is important. You should add extra spacing between your headline and paragraph text, and extra spacing between your paragraph text and your image. This way the elements won’t crowd to close together. But don’t add too much spacing. Add just enough so that users can see that the elements belong together, but that they’re separate.

How to Chunk Content into Clear, Scannable Pages

The spacing between each content chunk is equally important. Without ample space between each content chunk, users can have trouble distinguishing one chunk from another. Avoid blending your content chunks together by adding ample whitespace or a separating line between each content chunk. You can also change the placement direction of your image. For instance, you can place the image on the left for one content chunk, and then place it on the right the next one. This contrast in placement direction distinguishes one content chunk from another and makes the page layout look more interesting.

How to Chunk Content into Clear, Scannable Pages

One common mistake to avoid when placing content chunks is putting too many chunks in a row on the page. Since the user’s browsing and scrolling direction goes down, it’s best to stack each content chunk vertically (one content chunk per row), so that users can consume each of them one at a time without feeling overwhelmed. However, sometimes you could have small-sized images and text, where more than one chunk can fit in a row to save page space. In this case, a general rule of thumb to follow is to put no more than three content chunks per row. When you put more than three content chunks in a row, it makes it harder for users to digest the content because they have to look at too many content chunks at a time.

When placing multiple content chunks in a row, pay attention to alignment. The top edges of your headline text should align with each other. And the bottom edges of your images should align with each other. This makes it visually appealing and allows users to scan horizontally with ease. You should also have ample spacing between each content chunk. However, the more content chunks you put in a row, the less whitespace you’ll have for spacing.

How to Chunk Content into Clear, Scannable Pages

When you chunk your content in a clear and organized way, it’s fine if the page gets long. Users aren’t afraid to scroll if the content they’re looking at is easy to process and understand. The problem with most web pages is that the content isn’t chunked in a clear and organized way. By applying proper content chunking to your website, you’ll find that users will spend more time browsing your content than they did before.

Adding links to content chunks

If you suddenly find your pages getting longer than expected, you can always add ‘Back to top’ links on your page. These links take users back to the top of the page by automatically scrolling them up when they click it. At the top of the page, you should have a sub-navigation with links that scroll users down to each content chunk.

Another thing can do with your content chunks is add ‘Learn more’ links after the paragraph text. This allows you to take users to an entire page about the content they’re interested in to give them more information than you can fit in one content chunk. This is a more effective way to navigate than through a menu because users see more than just a title. They can view images and read text about the content before they click it. Thus, this entices them to click-through to learn more.

How to Chunk Content into Clear, Scannable Pages

Final Thoughts

Content is the most important thing on a web page. But without chunking your content, users won’t see what’s important. Content chunking will make your pages more clear and scannable. It’ll help users find specific information quickly and easily when they first visit or revisit your site. Your website can offer the best content in the world, but if the content is hard and painful to digest, users won’t give it a chance. If they don’t, they’ll never see the true value your website offers.


How to Chunk Content into Clear, Scannable Pages How to Chunk Content into Clear, Scannable Pages

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

5 Responses to “How to Chunk Content into Clear, Scannable Pages”

  1. wladi4

    Jun 13th, 2011

    Great post! I totally agree with you! I use these principles constantly by designing my pages.

  2. Susan Silver

    Jun 13th, 2011

    Great post and I get a kick out of the use of Dart Frogs. They are my favorites although they are so poisonous. Just like other similar species they have the beautiful coloring that acts as a warning to stay away. Good choice to make this post really pop.

    Thanks!

  3. Nad

    Jul 5th, 2012

    Thanks, learned a lot about the Dart frogs (UX too).
    Thumbs up!

  4. Aidan

    Oct 31st, 2012

    Great article.
    I viewed it on a smaller window and the text content is flush left.
    Can you add padding to the left of the content?

  5. Erik Kielisch

    Mar 4th, 2013

    Thanks for the helpful tips! The “hero” chunk is very similar to the “nut graph” that start all hard news stories. Having studied journalism in college, I appreciate that some principles carry over into writing for the web.

Leave a Comment