Optimizing Article Layouts Through Chunking

How to properly chuck content

Chunking content consists of evaluating your page from a layout and formatting perspective. Clarifying upfront what type of article you are publishing, the sections you have, and the assets you have available could help you see how the page could be oriented.

Are you publishing a guide or case study with multiple distinguished sections? Or, perhaps you're publishing a story. Below are some layout chunking tactics that can help optimize your article page layout.

If your article consists of varying sections...

• Start each new section with a header or a header with an image. This helps readers register that they're viewing a distinguished section and understand that the content below is framed differently from the content preceding it. If you're using images as a divider, consider using the ‘large’ variation to further distinguish it as a visual break.

• Use anchor links. This will provide a quick overview of what content can be found in your feature. The links also help users orient themselves as they're looking for information that gives them insight into what the page entails.

• Add key takeaways or a summary. Priming users can help them understand the article’s framework and purpose. It will also help them know what to expect when reading the article. 

If your article is a long-form storytelling feature...  

• Use a drop cap to signal the start of your story. Drop caps can also be used at transitory points, such as conveying a new chapter. However, it should not be used in every paragraph. When used judiciously and in the absence of header titles, drop caps signify new sections that would allow you to keep a linear editorial flow with little disruption.

• Use images that help tell the story. Images can be used as another form of information, however, having a photo added with little to no relation to the surrounding content could distract readers and be seen as an unnecessary filler. Position images where there is a natural break in the story.
  
  Note: Additional image sizes are available, including large, medium, and full bleed. Full bleed images are best used for photo essays or immersive storytelling. 

General best practices for article layouts

• Use header treatments consistently. Go in the order of H2 for section titles, H3 for sub-section titles, H4 for labels, and H5 and H6 for annotations or footnotes. This not only helps with SEO but also improves a page’s layout structure for those who rely on screen readers to call out the headers within the page. 
• Avoid using the full-width divider (horizontal ruler) on article pages if the sections of your content do relate and connect to each other. Only consider using this as a way to serve information unrelated to the body of the content. A full-width divider visually implies a new section on your page that is unrelated to the content above it. It could also have users think they are at the end of a page. If you're looking to use a divider to break up connected sections, consider using the horizontal rule (HR) under the ‘Style’ button within the C20 Rich Text Editor.

Components that will help with chunking

Below are some tactical approaches to help with sectioning the content across your pages more meaningfully:

Listing bulleted information

• C23 Numerical Listing — This is useful if you are seeking to bullet out a numerical list or a series of steps. Numbering items off are also useful for users to track how many items there are and to comprehend the content in chronological order.

• C45 Visual Listing — This component allows for a more visually engaging content by displaying thumbnail images alongside the listed content. It’s useful for calling out information that could benefit from visual support to aid the concept.
  
  Within this component is also an icon variation, in which a library of icons could be sourced and found within this AEM assets folder. 

• C105 Statistics — Consider using this component if your content has statistical information that could be prominently highlighted. Icons are optional, and there is a white background variation.
  
  The library of icons could be sourced and found within this AEM assets folder. 

• C129 Visual Grid Listing — The layout of this component allows for flexibility in organizing a series of visuals and texts in a compact fashion. Formatting content in this visual grid listing can allow users to compare, contrast, or connect important points in an article.
  
  Consider using this component if the C38 Image component is too large or the C45 Visual Listing is too small for your accompanying images. This variation comes with a 2-up, 3-up, and 4-up.

Compressing information

• C54 Accordion — If your page includes FAQs or content that could be compartmentalized, consider using the accordion component, which allows users to quickly glance through the headers and decide which information is most relevant to their needs.

• C89 Text and Image Expansion — This is a very effective component in showcasing letters, essays, biographies, or stories in a compact fashion on landing pages. The image remaining fixed with scrolling text also helps make the page feel more dynamic and engaging.
  
  For article pages, it could be used as a way to call out stories or short essays with an accompanying image. Note that there is now an ability to disable the expansion call to action link in the authoring panel. Checking this box will ensure the text remains exposed and not hidden. 

• C120 Points Over Image — This requires more advanced authoring experience. However, it's an interactive component that could engage users in an intriguing way. You can find more information on how to author this component here. 

Highlighting key information

• C28 Quote — Using pull quotes throughout an article can help call out impactful messages that could be more easily read up by a reader who is skimming an article. This can also help to reinforce a key message in the article.

• C70 Callout — This could be used for key takeaways at the top, or as an interstitial in the middle of the article to call out something as a sidebar, or towards the bottom as an end cap for footnotes, sources, or more about the author. 

Real Results

The UX team had conducted an experiment to optimize an article page layout with “chunking” techniques across the Restoring Fire to Native Grasslands page.

The results revealed that with revisions to the content being sectioned into groups and distinguished with more visual breaks overall increased page enagement. 

Check out this UX Findings deck to learn more about the study and insights around chunking content on Nature.org. 

Sources:

https://en.wikipedia.org/wiki/Chunking_(psychology)
NN, How Chunking Helps Content