Improving Content Comprehension With Layouts
Explore how to design content structure and navigation that make your content easy to understand
Anyone with a computer and a design program can create a page layout. But unless you’re trained in design, it won’t look very good and it won’t communicate very well.
Global Head of Computational Design
and Inclusion at Automattic
We’re all about designing an exceptional reading experience at Setka, so that your blogs, posts, and pages can communicate effectively with users, be a powerful champion of your brand, and improve business KPIs. Our framework for great content design is based on 750+ pages of research and insights from the best in the industry and features step-by-step instructions for creating well-designed written work. In this step, we dig deep into designing layouts that make your content easy for a reader to skim and quickly comprehend. Check out the full framework for insights that will help make your content easier to read, more engaging, and a better representation of your brand.
What we’ll cover
(backed by data)
Why Great Layouts
When a reader lands on your page, you have mere seconds to convince them that your page will be valuable to them. If they don’t think you’re providing what they’re looking for, they’ll quickly move on to another resource.
To help them out, you want to do everything you can to quickly catch their eye with interesting and relevant information and show off exactly what they’re going to get out of reading your page.
And this doesn’t mean just writing a catchy headline or using a splashy header photo. According to data from Chartbeat, “the portion of the page below the fold is viewed for nearly three times as long as the top of the page… [and] readers who do scroll down past the fold engage much more towards the bottom of the page than they do at the top.” That means, while you may be spending a lot of time paying attention to the “above the fold” area of your site in order to grab your audience’s attention, you should put just as much thought into the content and design below the fold in order to keep that attention (and maybe even get them to convert).
of users switch or stop engaging entirely if content is unattractive in its layout or imagery.
admit to judging a company’s credibility based on its website design.
would prefer to view something beautifully designed versus simple and plain (with only 15 minutes to consume content)
That means you’ll want to give careful consideration to your content layout—including its structure and navigation options—as well. Doing so can seriously improve comprehension, helping readers do their quick appraisal and understand the incredible value you’re about to provide. It can also keep them engaged longer by guiding the eye where you want it to go, shining a spotlight on the most important parts of your story and making sure the reader can grasp the meaning—and click on CTAs—as effortlessly as possible. Great layouts help dictate the flow of a story, and the order in which information is consumed.
A considered, well-designed layout motivates audiences to read further, scroll deeper, and make more sense of what they’re engaging with.
Ultimately, improving content comprehension through smart layout design can increase scroll depth, time on page, and conversion rate, while decreasing bounce rate and customer service inquiries (since people are more likely to actually find the information they’re looking for). Let’s take a look at how to do it best.
The Basics of
To win readers, leads, and deliver on all-around audience and customer satisfaction, content marketers must strive to make their editorial user experience as effortless and enjoyable as possible. This is easier said than done, especially since every reader interacts with the web in different ways, making it impossible to cater to every taste, reader aim, language level, and otherwise when designing a piece of content written for an audience of hundreds, thousands, or millions.
That said, there are some patterns in the ways people consume text on the web that you can use to make smart design decisions that keep all kinds of readers engaged. The Nielsen Norman Group (NN/g)—world leaders in research-based user experience design—observed more than 300 people use hundreds of different websites, and found that most people scan content and make quick appraisals before reading—or moving to the next best thing. Specifically, “In sometimes less than a second, a user can complete an initial appraisal of a page, estimating the nature, quality, importance, and potential value to them.”
In sometimes less than a second, a user can complete an initial appraisal of a page, estimating the nature, quality, importance, and potential value to them.
— Nielsen Norman Group
While knowing that most users scan that quickly can seem discouraging, by tailoring your design to make sure the most compelling information gets to them fast, you can convince them that it’s worth staying on your page to read more. Through their studies, NN/g observed four common patterns that users would follow to scan a page:
Users scan in the shape of
a letter F, reading earlier sentences more fully and then only scanning the beginning of lines as they go further down the page.
Layer cake pattern
Users scan by reading the headings of a page first to determine which sections (if any) they want to read further.
Users scan the page more sporadically, paying attention to text that particularly stands out, such as bolded fonts, text in a different color, or sidebars.
Users scan to find the areas of the article they are especially interested in, which they will then read more fully.
Users may unconsciously prefer a specific scanning style, use a different style in different contexts, or even mix styles as they work their way through a web page. According to NN/g reports:
The users’ mindset and tasks dictate the way they scan a webpage. After examining the gazes of people doing many different types of tasks, including very open-ended, exploratory tasks, we found that people scan in different ways depending on:
- the strength of their need for the information on the page
- whether they are looking for anything in particular
- exactly what it is that they are looking for
- whether the page is arranged well
By understanding that scanning is not a random act but one motivated by the desire to quickly find specific information (or just to find something that catches your eye), you can design your pages in a way that delivers the most compelling information in ways that allow different types of scanners to find it quickly. A powerful, unique, and creative layout can guide the eye, structure your story, and engage the reader.
Now we’ll dig into how to design a successful layout that divides a piece of content—long-form or otherwise—into easily digestible chunks that follow a predictable pattern within your digital publication to give readers exactly what they’re looking for and keep them from quickly clicking away.
With Ease Using
Unfortunately, you can’t just make one layout and be done forever. Smart content teams know that they should always be testing new things, tweaking their designs to customize them for the content at hand, and running experiments to optimize their pages even further.
That said, you can’t be redesigning your whole site for every article. Templates can be a powerful way to strike the right balance between speed and flexibility—to keep your team trying new things while also making sure you’re able to publish your articles on time. These reusable layout designs allow for consistently quick and easy content organization and a unified look and feel across a digital publication.
By developing a few base templates for certain article types, the bulk of the work is already done when it comes to designing your piece. You and your team can then spend your precious time thinking of ways to make the page even better, tweaking and testing things like a new CTA placement, an animation instead of a picture, etc. Watch the data carefully to see how these things affect the metrics that matter to you, and then add something to your template if it’s working well so it’s easy to include on all articles moving forward.
When saving a Post Template in Setka Editor, our tool encodes its layout, structure, content, and all its other style elements. Users can make new ones or choose from saved templates when creating a post, so all they have to do is copy in a new story, make a few edits—and done.
The Setka Editor makes flexible but templatized design even easier with the use of Components.
These micro-templates allow you to save layouts
and styling for specific content blocks (like pull quotes, lists, etc.), which can then be easily inserted into any content piece to allow you to customize layouts while still keeping a streamlined production process.
Best Practices for
4.1. Make your content the optimal width
The optimal column width for effortless reading is 66-75 symbols.
Before you can think about the rest of your layout, you want to get the basics right—and here that means ensuring the width of your content is ideal to help people scan the content and avoid overwhelming them.
Too wide and your content takes over the screen in a daunting way and can be exhausting to a reader, forcing them to move their eyes dramatically across the page and sometimes making it hard to find the start of the next line. As James Craig explains in his book Designing with Type, “Reading a long line of type causes fatigue: the reader must move his head at the end of each line and search for the beginning of the next line.” This is especially hard when you’re trying to scan quickly.
If your lines are too narrow, on the other hand, it “breaks up words or phrases that are generally read as a unit, ” says Craig. On top of that, Baymard Institute explains, “too short lines also tend to stress readers, making them begin on the next line before finishing the current one (hence skipping potentially important words).”
Get your column width right and you can create a comfortable reading experience while also optimizing for F-pattern scanners, putting the perfect number of keywords at the start of your lines so that they can quickly understand what they’re going to get out of your content.
4.2. Use a logical structure that clearly breaks
Use sub-headers throughout your articles, break paragraphs into smaller chunks, incorporate images throughout your post, weave in design elements to bring attention to key points, and use a strong call-to-action at the end of your post.
Layout isn’t the time to get super creative or avant garde, especially when it comes to the basic makeup of your article pages. When reading on the web, users have certain expectations about how content is generally structured, and they scan the page based on those norms.
Promise your audience a predictable, well-spaced content structure to make reading as easy and enjoyable as possible.
Breaking your content into different sections—especially standard ones like an introduction, key points, and a conclusion—helps readers more quickly understand what you page is about and find the information they’re looking for. Promise your audience a predictable and properly-spaced content structure to make reading as easy and enjoyable as possible.
Then, you can add a layer of creativity on top of that, using elements like lists, dividers, pull quotes, and sidebars that work together to improve readability and make the overall article more interesting.
4.3. Establish hierarchies for easy scanning
As we’ve mentioned, scale and font sizing are important tools when conveying the significance of a certain block of content. That’s why headlines are generally designed to ignite curiosities as the largest piece of text on a page, followed by an optional subhead or accented introductory text.
Body copy, on the other hand, appears as the smallest—though at a size of no less than 16 points—with bolder headers and subheaders styled and spaced accordingly throughout to meaningfully break up a story for emphasis, visual interest, and easy consumption. This caters to eye movements following the Layer Cake Pattern, for instance, in which readers scan headings before deciding on which parts to read.
When finalizing layout, keep in mind how readers typically read and scroll through pages. By setting up your articles to suit these behaviors, you’ll see much more engagement with your content.
Setka Editor allows you to create pre-set text styles for different uses on your page, such as for headers, subheaders, or pull quotes. This allows you to more easily add these hierarchies as you’re designing your post, and also keeps them consistent throughout for a sleeker design.
4.4. Make content navigation a breeze
Use anchor links to hyperlink your table of contents so people can click and jump directly to the section of the page they’re interested in.
Especially when your content is long, making it scannable isn’t enough to truly help your reader out. Instead, you’ll want to look for ways to make it easy for readers to navigate around your content to find what they’re looking for.
To start, you’ll want to include a table of contents at the beginning of any guides or long-form content that’s over 3,000 words. There’s a reason the table of contents has been a standard part of books for centuries: not only does it provide a built-in summary of what a user can expect by reading your work, it helps them quickly navigate to the content they’re most interested in.
Another way to improve navigation for users? Make every bit of your page searchable! A readers in search of something specific will often turn the the good old Command-F or Control-F function to search for keywords on a page, so make sure all of your text—including things like pull quotes and tables—is searchable rather than static images.
Make your table of contents even more useful with the help of Setka Editor’s “sticky animations” feature. Using this tool, you can select an element of your content and set it to “stick” to a certain point of your page, meaning it will stay in sight as the user scrolls down the rest of the page—and the reader can easily find the table of contents anytime they need it without having to scroll back to the top of the page.
4.5. Emphasize certain content to catch the eye
Think about how you can combine smart organization of your text with images for an extra pop. For instance, take a bulleted list to the next level by replacing the bullets with small graphics or illustrations related to the point.
Highlight especially relevant data by pulling it out of the paragraph and turning it into a visual element on the side. Get creative with how you combine eye-catching visuals with your content to better convey your message and drive attention.
When content marketers succeed with their visual strategy, they glue the reader’s eye to the page, motivating them to keep exploring and consuming brand stories. Maximum engagement happens in the body of a page or post. That’s why an aesthetically-driven visual flow is so vital to effective written content.
So, when you’re thinking about the visual strategy of your page, don’t just think about the pictures. Also pay attention to how your text is formatted and where you can add small visual elements to catch the eye.
According to NN/g, things that can pop out within a block of text include:
- Bolded or underlined words
- Text in a different color from the main body
- Numbers written out as numerals
- Text in quotation marks
- Bulleted lists
Design elements like pull quotes, sidebars, or explanation boxes in different colors or styling can also be a way to add visual interest throughout the page.
As we’ll explore much more in-depth in our ebook on imagery, whether you employ photos, illustrations, iconography, or something else entirely, incorporating a visual or design element every couple of paragraphs is key to retaining readers and keeping them scrolling onward through a story.
4.6. Provide additional information in helpful ways
When you’re thinking about the structure and layout of your content, you want to do everything you can to accentuate the most important information—while preventing additional information from cluttering the page so much that it’s hard to scan.
Making use of your margins and other smart formatting can help achieve this. For instance, you might have an important tip in a box in your margins to make it easy for someone skimming down the page to spot it, or an especially impactful quote pulled out of the paragraph and set in a larger font. On the flipside, you may decide to use sidebars or footnotes to pull additional information out of the flow of your main content so it doesn’t distract scanners—but allows readers to dig deeper if they want to.
Setka Editor’s footnote feature allows you to create in-line footnotes that look great but stay out of the way unless the reader wants them. Your footnote will look like a hyperlink on a bit of text in your article, and show up as a small popup box where you can include multimedia information. You get full control over the user experience, too, choosing whether your notes pop up when the user hovers or clicks on the linked word or phrase.
4.7. Create compelling links to encourage exploration
At the end of the day, good design means a better shot of directing and converting your users via a call-to-action—but getting them to just explore your site more can be a win. CTAs in blog posts don’t have to be limited to buttons in the traditional sense. Other clickable elements can also be used throughout articles to help increase time spent on-page, like a carousel of related stories at the bottom of a post or visually consistent and standout hyperlinks throughout.
Besides encouraging engagement, these links can help users who are scanning better understand your content. “In lieu of headings, [people] use links to get a sense of what a section of text is about, ” says NN/g, so make sure at least some of the link copy highlights a relevant point to the paragraph as a whole. The company goes on to advise using “the information-bearing word, phrase, or heading as the link rather than adding an additional word or button, ” like the standard “Read More, ” “Click Here, ” and so on, as this “prevents gratuitous page clutter as well as needless fixations, and is better for accessibility.”
Make sure everything works on mobile
We’re sure you already do this, but before you publish anything on your site, always make sure to check what it looks like on mobile. Adobe shares that 73% of users say it’s important to their reading experience that the content displays well on the device they’re using, and according to WARC, almost three quarters of internet users are expected to access the web (and your content) solely by their smartphones by 2025.
You want it to be just as easy for readers to quickly find the relevant and interesting information they’re scanning for, even on a smaller screen, so take the time to check you layout on all devices and streamline it if something’s off.
The Setka Editor makes it easy to ensure your page is optimized for mobile thanks to automated mobile layouts that scale your site down perfectly, the ability to set custom styling for mobile audiences, and an easy way to view mobile previews.
Examples of Successful Layouts
Ecommerce giant Etsy’s blog — known to readers as the Journal — is a great example of layouts that work to support wider business and content goals.The focus of which is customer experience and in-product marketing in hopes of facilitating scalable interactions and attracting new users. “We need outstanding marketing capabilities to amplify the voice and relevance of our sellers and get buyers coming back more often, ” explained CEO Josh Silverman, and the Journal is just the place to do so.
Posts cover everything from DIY Inspiration and featured shops and creators to shopping guides, gift ideas, and decorating tips with varying layouts based on the content within. Each format starts out the same, with a large headline up top sandwiched between smaller text indicating author name, date, and category tags. Product-centered stories feature easily shoppable, collage-like galleries interspersed with larger imagery while creative how-to’s incorporate clear headers, lists, and illustrative photos to make the content as easy as possible to read and understand.
Furthermore by Equinox
With Furthermore, luxury fitness company Equinox has created a beautifully branded editorial content destination that sports standout layout design throughout the site’s varied stories as well as its homepage. With articles that range from features like “How Fitness Encourages Sobriety” to Q& As and coverage about workout routines and trends in athletics, Furthermore reaches a wide spectrum of readers — all drawn in by a simple yet striking aesthetic.
“When we surveyed the editorial landscape, we saw a wide-open space where true fitness science unites with an elevated, premium aesthetic, ” explains Elizabeth Miersch, the company’s VP and Managing Director. “The Equinox brand has every right to own that, ” and own it it does with carefully curated photography, a sleek black and white palette, and minimal but considered layouts.
Most articles begin with a split first screen view — headline to the left, hero image to the right, accompanied by publication info. Below the visual, the reader encounters a line of introductory text, slightly smaller than the headline, working to guide the eye toward the main content. Stories continue — right-aligned for
a unique look and feel that allows for ample white space (and
an area to place ads and CTAs) — periodically broken up by eye- catching elements like quality images, full-screen pull quotes, and contrasting text boxes for increased engagement and more time spent on-page.
Content will continue to be a huge piece of how we market the Equinox brand. It’s a major differentiator for us… There’s no way we could have grown the way we’ve grown without the incredible editorial team we’ve built here. Everyone on staff has a traditional magazine background; there’s just no better training ground than that.
VP & Managing Director at Equinox
Miro — a visual collaboration platform that powers 2 million users worldwide — relies on Setka Editor to power its design-driven company blog. With pre-designed templates and components to easily brand, style and layout everything that gets published, each article that goes up on the Miro blog has a special look to it — one the distinguishes it from any other brand.
Their choice of typography and color palette runs through all the posts they publish, creating a consistent and memorable identity that enhances every read — especially since the company’s rebranding. Every element, from pull quote to illustration, speaks to their aesthetic and unique identity; even Miro’s new logo works as an effective design element in and of itself, prominently visible at the top of each page and cleverly used in various colors and sizes in cover art and in-line CTAs.
Break it up
Use headings wisely, keep paragraphs short, and be sure to break up blocks of text in a visual way. Readers will ignore walls of text, so when structuring your content, put yourself in their shoes. Make it as easy as possible for your audience to consume and engage with your content by employing a predictable, clear, and attractive structure.
Guide the eye
A successful layout leads the eye across a page or post, making sure to entice readers and sustain their attention at pivotal points in the piece — or places where they might potentially lose interest. And remember: it’s not about mere decoration. Every visual element — from icons and stock photos to headers and accent copy — needs to work together to help the reader easily and quickly understand the story.
Know your story
Whatever themes your digital publication may cover, the designer or editor creating the layout for a post needs to carefully read the story at hand in order to know what needs to be highlighted, accented, or scaled in order to create meaningful visual emphasis. Think of ways to visualize certain facts or data points in a way that makes them shine, or how to position bits of content in a way that boosts their potential impact.
Ready to take your layout to the next level? Use our checklist below to evaluate how you’re doing in terms of designing for optimal comprehension, and identify areas for improvement—or let us do the work for you! Reach out for a complimentary content makeover session (which includes a content design prototype) and we’ll analyze your content design based on 750+ pages of research, providing tons of action steps for optimizing your content for comprehension and more, plus plenty of resources for convincing your team of the business value of better content design.Get a Prototype
Layout Scoring Checklist
CONTENT IS THE OPTIMAL COLUMN WIDTH FOR EASY READING – For main text columns, aim for a width between 66-75 characters.
CONTENT IS BROKEN UP INTO A LOGICAL STRUCTURE – Aim for clear and recognizable content blocks, like an introduction, key points, and a conclusion.
TEXT HAS A CLEAR HIERARCHY – Headers, subheaders, and body text should be distinct to make it easy for the reader to scan and find key points.
CONTENT INCLUDES A TABLE OF CONTENTS WHEN HELPFUL – Any long-form content over 3,000 words or guide-style pieces should include this—other than that, use your judgement.
CRITICAL INFORMATION IS ACCENTUATED – Use highlights, bold text, or other formatting options to emphasize the most important or interesting information within paragraphs, drawing the eye and helping scanners out.
YOU’RE MAKING USE OF YOUR MARGINS – Include sidebars to accentuate important tips, side notes, or other kinds of additional information.
YOU’VE GOT PLENTY OF LINKS TO RELATED RADING – Use “Read More” and “Learn More” links in margins and at the bottom of the article to encourage further exploration.
Setka, the company behind Setka Editor, a WYSIWYG editing tool that helps content creators easily implement content design best practices without having to code. Thousands of brands, publishers and media players from around the world work with Setka Editor to enrich the reader experience and improve the ROI of their content, and it’s been recognized as one of 14 global WordPress VIP technology partners delivering innovative management and editing tools that easily integrate into any CMS.
Setka is on a mission to promote a data-driven approach to improving editorial design, and ultimately completely transform the experience of reading content on the web.