8 Blunders of Content Usability That Make You Lose Readers

We all are savvy marketers and content evangelists here.

We know how to write compelling web content and optimize it for efficient communication with the audience.

We realize how to structure writings and what content types work best for successful marketing campaigns.

But let's face it:

As marketers, we play a verbal symphony of content formatting. Anxious about on-page SEO and subject matter, we often forget about our texts' makeup.

Allow me to refresh your memory:

• Reading online is 25% slower than from print.

• Visitors read only 20-28% of the words on a site.

Why make it challenging for them to scan your content? Why ignore web typography and lose readers simply because they can't visually perceive the information on your website?

It's time to add a mathematical symphony of content formatting to your online project.

Want to make it pleasing and inviting? Want to improve the reading experience and communication with your audience?

Then avoid blunders killing your best marketing writings.

The thing is, a certain combination of letterforms and math proportions can make your site and content appealing to readers. When imbalanced, they turn web pages into a cluttered place holding visitors off your texts.

So, let's learn the math behind content formatting and check if we are guilty of any blunder mentioned here.

1. Right Align

A text looks great when aligned the right way.

The hassle is it's hard to do. All words are of different length, and you would need to wrap them by hand or apply a full justification to get there.

Neither method works for content formatting: the former fails because of different screen resolutions (adjust wraps to your device, and they will disappear at others), and the latter makes for unlikely word spacing.

As a result, texts look ugly and you – amateurish.

What to do?

Align texts left. Frayed right-hand margins look better than random spacing between words in your content.

That's what AWR does:

2. Wrong Color-Contrast Ratio

The contrast between background and text improves readability and helps users perceive information.

Poor color combinations and too little contrast make it exhausting for visitors to read your content and, therefore, stir them into leaving your site. All those red on blue or yellow on green, together with crude background images, frustrate people tremendously! So turn that Dutch concert of colors into a pleasing symphony, soft and easy on the eyes:

• Adjust no less than 5:1 color-contrast ratio to your website. Instruments like GitHub will help here.

• Pick a light, calming background color. It makes it comfortable for visitors to read and perceive your content.

The biggest ratio is between black and white, that's why black texts on white backgrounds have the best readability.

3. Hard-to-See Subheads

Online users are the best scanners ever! They need 10 seconds of opening your text to understand whether they want to read it.

Reading online is different, and marketers should (finally!) admit that it doesn't matter how great their content is if they fail at formatting it for better scanning.

I bet you've already seen this pic, and you know about the F-pattern inside out:

It's a perfect demonstration of why you should care about subheads. When poorly-composed and hard-to-see, they confuse the audience and don't serve their purpose, which is helping a visitor understand what's in this text and encouraging him to keep on reading.

Make sure that subheads of your texts are of

• a different font size

• a different color

• bolded

• intriguing

• clear and concise

Applying different types of subheads for one text would be a good practice to try, too. That's how Plagiarism Checker does it: bigger and bolded <h2> and caps locked <h3> make it easier for visitors to scan the post:

4. Wrong Spacing Before and After Subheads

Another mistake most webmasters make when formatting content is wrong spacing.

Sounds insignificant, but spacing before a subhead should be wider than spacing after it. This way we make it clear for readers to what paragraph this subhead belongs.

The "neither here nor there" strategy would be unwise to follow. Don't force your visitors to guess what happens on the page.

The AWR blog does it right. You read this article and see where the subhead belongs.

Guys from Cleverism agree: (This screenshot comes from my article for them, by the way.)

5. Complex Text Structure

Subheads are skeletons of your texts, as they help readers see which way the wind is blowing. Complex structures lead astray, and a visitor gets lost in content.

Let's compare:

Text structure #1 has three levels: Title - H2 - H3 - H3 - H2 - H2. It's fine because it's quite concise and clear.

Text structure #2 has four levels: Title - H2 - H3 - H4 - H4 - H3 - H2 - H2, and it's harder to grasp. A reader needs to concentrate all the time, remember where and what he's reading each moment, where this very paragraph belongs, etc. The more steps he has to take, the bigger chances are he will leave your website.

The simpler the structure, the better: Title - H2 - H2 - H2 will work best.

6. Wrong Font Size

The big idea is people won't read your texts if they have to take pains to do that. Too small a font (12px or less) on your website is disrespectful for its visitors.

Some experts argue 16px is the best font size for the web. However, size itself doesn't influence readability: to make it comfortable for the audience to read and perceive your content, consider a line height and length (keep on reading to learn how).

Fundamental premises to remember:

• 14px font size is the minimum for easy-to-read content.

• Don't use more than three font sizes on one page. (Our brain grasps threes the best.)

• Choose a font that would reflect your brand’s personality. (The psychology behind typography will help you do that right, as different fonts evoke different emotions and associations.)

Ten tips for using fonts from HubSpot will help you choose sides for good.

7. Large Text Fields

Together with font size, be sure to maintain appropriate line height and length for your texts, as it improves the reading experience by far.

Line height goes first:

Establish it based on the golden ratio (1.618) with the help of Chris Pearson's tool, Golden Ratio Typography Calculator. The goal is to relate all three typographical dimensions (font size, line width, and line height) in an orderly way that is pleasing to a human eye.

The larger font size, the bigger line height should you use because of the line width increasing.

But what is the best line width for your text column?

Make it between 50-60 characters.

A longer one might scare visitors off: it looks like more work to do, and it doesn't allow readers to focus because they have to spend time and energy jumping from line to line. A much shorter line breaks a reader's rhythm and makes eyes go back and forth quickly, which might end with skipping essential words.

To achieve the optimal line length for your texts, you can also use the formula of Robert Bringhurst, the author of The Elements of Typographic Style: multiply the font size by 30.

Another line width trick to try for a better reading experience comes from Derek Halpern (Social Triggers):

People prefer reading short lines, but you can't make the full article's line length too short (as mentioned before). On the other hand, you only need to hook them with the first few sentences of your text. So, as Derek says, "make the beginning part of your article a shorter line length than the rest of your article."

He does it with half-width images below headlines:

8. No Paragraphs

It stands to reason:

Content should have a structure, and paragraphs are the key indicator of your texts' readability. They make articles appealing and eye-catching, but those aren't the only reasons why you need them:

• Paragraphs help you organize thoughts.

• Paragraphs give readers so-called rest points through your text.

• Paragraphs navigate visitors around your article.

The last one is extreme today, when users scan texts rather than read them word for word. If you don't structure your content with paragraphs or make them too long, you risk losing readers: they will consider it difficult to perceive, and they will leave your website.

What to do?

Keep your paragraphs short, and include relevant keywords for readers to see if that's exactly what they were looking for. In other words, help visitors understand the awesomeness of your content while scanning it.

How?

• Highlight a keyword or phrase per paragraph.

• Use lists: they are easy to scan, and they allow to demonstrate relation between items.

• Support your content with images: they are perfect triggers, encouraging users to keep on reading.

“How many sentences to use in one paragraph?” you may ask.

Most publications where I contribute ask to keep paragraphs no longer than 3-4 sentences, some insist on 1-2 sentences, and others write 7-8 sentences for each column of their web content.

The optimal number of sentences in a paragraph for your website will depend on its three dimensions (font size, line width, and line spacing). Calculate a golden ratio for your resource to ensure maximum comprehension of the reading experience.

In a Word...

Content quality and subject matter are of the ultimate importance for business benefits. But you shouldn't underestimate the role of content usability, either. No matter how interesting and useful your texts are, visitors won't read them if they find them displeasing and hard to perceive.

Don't kill the conversion of your content. Make sure you avoid the above-mentioned blunders, and your readers will follow you:

• Align content left

• Consider color-contrast ratio

• Pay attention to subheads' style

• Check spacing before and after subheads

• Don't overdo it with structure

• Remember about the golden ratio of your website

• Make paragraphs short

Yes, everything of genius is simple.

We all know that, but they who make fewer mistakes win.

Note: The opinions expressed in this article are the views of the author, and not necessarily the views of Caphyon, its staff, or its partners.