\n CONTENT DESIGN & THINKING\n
7 Design mistakes making your content hard to understand
![](\"content-expirience-7-Design-Mistakes-That-Make-Your-Content-Hard-to-Understand-and-How-to-Fix-Them-Fast-cover-1-1200x630.png\")
Today’s incredible technology capabilities means the world is your oyster when it comes to how you want to design your content pages.
You can add animations, have content fly on and off the page or only pop up at a certain moment, nest information in an interactive way, and so much more. The problem is, some brands get a little too creative and the whole point of the page – the actual content – sometimes gets lost.
Remember, the ultimate point of your content (for the reader, anyway) should be communicating information – and in today’s world, you have to communicate quickly if you want to succeed. Readers judge a web page within mere seconds, scanning it quickly to determine if it will be valuable to them and they want to stick around and read further, or if they’d rather find a different resource. By optimizing your design to support easy comprehension, you can help them understand all that you’ve got to offer – by ignoring it you can quickly turn them away.
Here are some of the most common mistakes we see brands and publishers making when it comes to their design and layout – and quick fixes to really help the reader understand the amazing info you’re providing.
![](\"01-1.svg\")
Your content width too wide or narrow for scannability
![](\"Make-your-content-the-optimal-width-for-scannability.png\")
Have you ever tried to read a webpage where the text spans across the whole screen, making you swing your eyes dramatically back and forth to take it all in (and often causing you to lose the beginning of the next line)? Or what about a super narrow column of text, where you feel like you’re jumping to a new line every other word?
In getting creative with content design, too many publishers play with how much of the page the text takes up, sometimes pushing things a little too far. Column widths that are too wide can have readers overwhelmed by the number of words and make it harder to scan quickly. Consumer psychology publication Social Triggers shared that research has found people feel shorter lines look more organized and are easier to understand. But if you get too narrow, everything can feel cramped and hard to digest. 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).”
\n PRO TIP\n
The Elements of Typographic Style Applied to the Web states that, “The 66-character line (counting both letters and spaces) is widely regarded as ideal.” While you don’t need to get too granular with this, aiming for a column width within 10 or so characters of that number should help set your page up for the ultimate readability success.
![](\"02-1.svg\")
You Have No Logical Structure
![](\"Use-a-logical-structure-that-clearly-breaks-down-content.png\"){kind=spacer}
When you were in grade school you probably learned about the “hamburger” essay format, which stated that good writing has an intro (top bun), conclusion (bottom bun), and a number of supporting paragraphs inside (the patty and toppings). While as adult creative writers we can work a little outside the bun with our structure, you still want there to be some semblance of organization when it comes to your work. Readers have certain expectations when they land on a content page, and they base their scanning off those norms.
If there’s no introduction, the reader may not know where to look to get the gist of the piece. Without breaking down your key points into clear sections, scanners won’t be able to quickly determine what will be covered – or find the specific paragraph with the info they’re looking for.
The Nielsen Norman Group (NN/g) – who observed how over 300 people read (and scan) websites – recommends having a “predictable” layout as it makes reading easier (because if you make your readers work for it, they’re likely to jump ship quickly). This means your structure should be consistent throughout, and should include elements that readers are used to seeing on the web, like headers in a larger font that break the content into clear blocks of information
\n PRO TIP\n
Your structure should be consistent throughout, and should include elements like headers in a larger font that break the content into clear blocks of information.
![](\"03-1.svg\")
There’s No Clear Hierarchy of Information
![](\"Establish-hierarchies-for-easy-scanning.png\")
You can’t just break up the information – you’ve got to label it! The number of times we see header text that’s almost indistinguishable from body text is shocking.
According to NN/g, a very common scanning pattern involves just scanning down the page for the headers to determine the value of the content and get the gist of the information before potentially reading deeper into sections of interest.
\n PRO TIP\n
Use distinct bolder headers and subheaders to meaningfully break up a story for emphasis, visual interest, and easy consumption.
![](\"04-1.svg\")
There’s no table of contents for longer pieces
![](\"Make-content-navigation-a-breeze.png\")
Long-form content and step-by-step guides are becoming more common on the web as companies work to share their expertise in meaningful ways (and take advantage of the SEO boost that longer content can provide).
And while long-form content can be incredibly valuable to readers, it can also be a doozy for those who are trying to quickly gauge whether a page is for them. Even with a super strong structure and amazing headline hierarchy, scrolling down the entire page to get the gist is tiring. That’s why it’s shocking that more content creators don’t take advantage of the simple solution of summarizing a long page and even helping readers access the information they’re looking for faster: with a good old table of contents.
A good rule of thumb is that anything over 3,000 words should have a table of contents (TOC), but even for shorter pieces you can use your judgement whether including it will help showcase what your content has to offer. Be sure to use anchor links to allow users to click on a topic in the TOC and jump straight down to that section.
\n PRO TIP\n
A good rule of thumb is that anything over 3,000 words should have a table of contents.
Want to check your own work?
Get a free checklist to see if you’re taking advantage of all the best practices for improved content comprehension.
![](\"scorecard-1.png\")
![](\"05-1.svg\")
You don’t accentuate the most important info
![](\"Emphasize-certain-content-to-catch-the-eye.png\")
So many publishers break up their content into a few sections with eye-catching headers and call it a day. But why stop there with helping your readers to scan and understand your content?
Emphasizing the most interesting or helpful content within a section can be a way to support readers who are interested in digging further, but still might not want to read every single word (which almost nobody does anymore). Let’s call it micro-scanning. When people find a section of content they think might be interesting to them, they sometimes scan within that section, to quickly get the information or further confirm whether they want to read deeper.
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
Use some of these within each section of your text to accentuate the information you’re sharing and help your reader understand more quickly.
\n PRO TIP\n
Emphasizing the most interesting or helpful content within a section can be a way to support readers who are interested in digging further.
![](\"06-1.svg\")
You don’t make use of your margins
![](\"Provide-additional-information-in-helpful-ways.png\")
So many content pages just have the main body content surrounded by a whole bunch of nothing (or, worse, a whole bunch of banner ads). Yes, white space is important, but by not using your margins at all you’re missing an opportunity to show off valuable information in a way that will really stand out, as a scanner works their way down the page.
Consider using your margin space to include sidebars to call out the most important tips or pertinent facts from your body copy so they’re easy to spot. Alternatively, you can use the space to include side notes or additional information that might be interesting but that you don’t want cluttering up your main copy.
\n PRO TIP\n
You can use margin space to include side notes or additional information that might be interesting.
![](\"07-1.svg\")
You don’t encourage exploration
![](\"Create-compelling-links-to-encourage-exploration.png\")
So many content makers are so focused on driving towards the CTA that they forget that encouraging other kinds of engagement can sometimes be better for developing the relationship with your reader or customer.
Instead of just focusing on linking to your CTA, make sure to include other types of links for exploration, too. Besides encouraging engagement, these links can help those people who are scanning, to better grasp what your content is all about – and may help them more deeply understand the content. “In lieu of headings, [people] use links to get a sense of what a section of text is about, ” says NN/g.
\n PRO TIP\n
Instead of just focusing on linking to your CTA, make sure to include other types of links for exploration.
It can feel like a lot, but these simple design changes don’t have to take a lot of time – and will have a huge impact. Best of all, Setka makes them easy to implement with tools optimized for improving comprehension of your content.
Want to improve your content experience even more? Read our Ultimate Guide to Content Design that Converts, with advice for making your content easier to understand, to read, how to make it more engaging, and deliver a better representation of your brand.
Next steps
Use this checklist below to see how well your content is encouraging engagement—or let us do the work for you by reaching out for a FREE 3-Step Content Makeover from Setka, which includes a content design review, scorecard of your content and action steps for optimizing every part of your content – to more deeply engage your readers (and get better ROI).
Get a FREE Content Makeover![](\"scorecard.png\")
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.