Marketing

How to craft more usable, useful, and engaging content

4 min read
Tyler Hakes
  •  Feb 24, 2017
Link copied to clipboard

Content is about more than just words on a page. It’s about conveying information, providing knowledge, and telling stories.

In other words, it’s about communication.

Just like with any other type of communication, usability should be a key consideration with any content that we create and publish on the web. It should be designed, written, and formatted with the end user in mind.

“Good design can help you transform an otherwise good article into an epic resource.”

Twitter Logo

Unfortunately, too many companies simply think that creating a blog and publishing stuff—words on a page—is enough for success.

But it’s just not the case. Content that isn’t usable isn’t useful.

Related: The ultimate guide to web content accessibility

Jakob Nielson’s now-famous eyescan study taught us a lot about the way people read on the internet. In particular that pages are read in an F pattern, meaning that we tend to skim the first few lines of a block of text and then jump down the page for the next entry point.

Can you see the F-pattern? Source: Nielsen Norman Group.

This informs many of the principles that go along with good content user experience. And it shows us that the way content is presented is easily as important as the content itself.

In this article, I’ll discuss how you can use design as a tool for radically improving your content to make it more usable, useful, and engaging.

Design and layout

One of the first and most critical components to creating great content is making it readable. This means paying attention to the styling of your page, the words, spacing, and layout.

In particular, you want the content to be easy on the eyes and intuitive to read to skim.

Create a comfortable reading line

Right at the top of the list for creating usable content is controlling the reading line. Or, how far your reader’s eye will have to travel from left to right as he or she reads the words on your page.

The reading line of your page will ultimately be dictated by 2 variables:

  1. Size of the font
  2. Width of the column

If you have a larger font size, then you’ll need a wider column in order to achieve the same length of reading line (measured in characters). And, on the flip side, if your font is smaller, then you will want a narrow column to condense the reading line to make it more comfortable.

“Just throwing words on a page is nowhere near enough for success.”

Twitter Logo

Taken together, most experts suggest that each line of text contains between 45 and 75 characters for desktop computers and between 35 and 50 on mobile devices.

If it’s much longer than this, your readers will have fatigue and skip to the next line before the end. If it’s shorter, the text will feel choppy and difficult to read.

Because most users have high-resolution devices and larger monitors, many sites now use larger font size (20-22px) with a wider column width (800-1000px). But any combination that results in readable font and a comfortable line length should be feasible.

Set proper spacing and height

Secondly, the words on your page need to be easy to distinguish, but not so spaced out that it creates awkward space between each word, line, or paragraph.

Notice how the spacing in this text makes everything clear. Each line is a comfortable distance apart and you know when a new word or paragraph begins.

Pay special mind to the character and line spacing. Although most browsers set these to readable numbers by default, your stylesheet may overwrite the defaults and make your text difficult to read.

Similarly, the line height between text within the same paragraph should be enough to make reading comfortable, but not so much that it’s easily confused with the spacing between paragraphs.

Remove distractions

Although many sites still use sidebars for things like advertisements or related content, much of the web has moved to long-form page design within a single column.

This is in part for aesthetic reasons (it looks cleaner and simpler for your reader), but also because of its impact on engagement and conversion.

A nice example from Videofruit.

Videofruit studied this and found that simplifying their page to one column increased their conversions by 26%.

This is likely the case because readers are able to focus on each element sequentially, rather than having their attention torn between the body of your content and the offers that float alongside it.

It’s impossible to say for certain whether you should have a sidebar next to your content—there are exceptions to every rule. But, as a general principle, you want to reduce the distractions as much as possible. Ideally, a reader half-way through an article should see nothing but the text they’re currently reading.

Fewer distractions means more engagement and higher value creationTwitter Logo.

Writing and structure

The physical form of your lines and paragraphs also play a big role in engaging your reader.

This goes beyond the elements of writing style or proper grammar, and instead involves the pace and cadence of your writing, how the words fall, and where they direct a reader’s attention. Each of these plays an important role in how readers consume your content.

Related: Typography tips for a more comfortable read

Write with intention

It may seem like having 2 paragraphs, each comprising 5 sentences, is no different from having the same content broken into 5, 2-sentence paragraphs. But this is untrue.

Variations in length and density gives our eyes a place to “latch” into the content. This means that the literal form—or pace and cadence—of your writing matters a lot.

Think of this like a “hook.”

Your eyes just naturally fell on that previous sentence because it was shorter than both this paragraph that you’re reading now and the one before it. This means that you have the ability to control where your reader enters your content based on how you use paragraphs, line breaks, and blocks within your writing.

“Fewer distractions means more engagement and higher value creation.”

Twitter Logo

This works because—as any designer will tell you—we are naturally drawn to whitespace, or the absence of stuff. So a single, short sentence stands out amid a sea of words.

Vary between short, simple sentences and more complex, explanatory paragraphsTwitter Logo to give your reader to most chances to enter your writing, engage with what it’s saying, and not get bored half-way through huge blocks of text.

Use short lines to make fine points or distinctions.

Use subheadings

Make generous use of subheadings to break apart your writing further, giving the reader a sense of place within your content.

This works for much the same reason that we often tend to read books up until the end of a particular chapter. Users like to have clear distinctions between sections and use subheadings as markers.

It also creates a “hook” where readers will naturally enter into reading while skimming.

Refer back to the F-pattern heatmap above. Each subheading serves as the top of a new “F.” But, if the “F”s come too frequently, they begin to blur together and just look like big blocks of heading text rather than individual sections.

Break up your text

Skimming is an essential part of consuming content on the web.

There’s so much stuff to read, so we rarely have time to pour over every word of an article.

“Create content that takes skimming into account.”

Twitter Logo

As content creators, we shouldn’t attempt to fight this tendency—it’s not our job to force visitors to change their reading habits. Rather, embrace this reality and create content that takes this into account, creating visual breaks in the text and a visually engaging presentation.

Related: Copywriting principles that will make new users love you

Beyond just using subheadings to create clear divisions within your content, you can also use other visual elements to break up your words and keep readers engaged as they scroll through your content.

There are a number of ways you can break up your text:

  1. Lists (ordered or unordered)
  2. Photographs
  3. Charts, graphs, or other visuals
  4. Chapter or section breaks
  5. Blockquotes
  6. Call outs
  7. Calls to action

We can see in this example, from the Buffer blog, how the text is broken up frequently to give the reader a way to skim through the article and understand its flow and structure without necessarily having to reach every word.

As a reader, if I get bored with the words, I can jump to the next heading, list, or image to give me a clue about what was written or what’s coming up next.

A study from Buzzsumo found that articles with one image for every 75 to 100 words get the most shares.

Valuable info from Buzzsumo.

That may be a bit much for most articles, but it gives you an idea of how important visuals are.

As a general rule, you may want to shoot for for images every 200-400 words. This may make your content seem a bit choppy, but it offers more points for your reader to engage visually and pick up reading what you’ve written.

“Layout and design can’t compensate for bad content.”

Twitter Logo

Adding value through design

So far, we’ve talked about the sorts of nuts and bolts that go into making any content look and feel pretty good.

But design can do much more than that.

Well-executed design can transform content into a resource.Twitter Logo This may seem like a fine distinction. But, with so much content being created every day, it’s important for you to communicate value to your reader immediately. Design helps you make that point.

Content that exists as a designed experience feels less like “just a blog post” and more like something special and important.

Consider a magazine. If all of the articles were simply printed end to end in huge blocks of text, it would be boring and unengaging. Even with all of the previous tips in place, few people would find it valuable or seek it out as a resource.

Although the content itself might be just as interesting, it would be less usable.

It would feel less valuable.

Instead, magazine publishers meticulously design each page and the flow of the entire book to create something that’s both useful and interesting. You can apply this same kind of design to your content to add value above and beyond the content itself.

This kind of design serves both an aesthetic purpose (it looks better, which makes it seem more interesting to the reader) and it’s also practical for providing hierarchy and organization to the words and information you want to convey.

Provide organization and navigational structure

At its most basic, you can use design as a wayfinding mechanism for your readers.Twitter Logo Specifically if you’ve created a resource that has a lot of depth or covers a broad range of topics. Design makes it functionally more usable and also makes it feel deeper and richer.

Great example from Helpscout.com.

In this example, we see how HelpScout has neatly cataloged and categorized a massive collection of curated quotes.

If this were just a simple list of quotes in a regular blog post format, it would be boring. But because it’s given design and structure, it feels hefty. It feels like a valuable resource.

Similarly, Vero has created one of the most comprehensive guides to email marketing around. And they use a unique, visual table of contents to make it stand out.

Check out this great design from Vero.

The point here is that most companies would be happy to just write a really long blog post and slap it on a normal page. But, if you want to create exceptional resources, you need to consider the impact of design and organization of the information.

Make content more usable

Additionally, design can be used as a way to organize content into sections that makes it more usable on the whole.

Subheadings and other may provide some form of separation, but nothing grabs a skimming reader’s attention like a change in color, design, or flow. This kind of a designed experience gives the reader the ability to skim your content for important information and then instantly jump into reading when they find what they’re looking for.

From AffordableCollegesOnline.org.

Affordable Colleges Online has made a habit of creating this kind of designed resource. They’re not packed with information, they’re also hugely usable.

Give readers a sense of place and context

Design is, in large part, about providing relevant information to the user.

Moz’s Beginner’s Guide to Search Engine Optimization is a perfect example of the value added through design. The guide is absolutely massive and tackles a huge number of interconnected topics related to search engine optimization (it turns out, there’s a lot to know about SEO).

But the clear navigational structure and visual queues keep you engaged and in context as a reader, helping you traverse the information and make sense about how the concepts are linked together.

We can learn a lot just from looking at some of these companies that have invested time and energy into creating truly remarkable pieces of content for the rest of us to consume.

Layout and design can’t compensate for bad content.

“Give readers a sense of place and context.”

Twitter Logo

Creating something great starts with great content.Twitter Logo There’s no dressing it up.

But good design can help you transform an otherwise good article into an epic resource—something monumental and enduring.

This kind of content creates more value for our readers, which means that it creates more value for your business. It’s more engaging and captivating, which means that your audience is more likely to take whatever action you want them to after reading it.

Design is a critical element for contentTwitter Logo, and we can’t ignore its importance.

Let’s invest in crafting more usable, useful, and engaging content through better design.

You’ll love these posts about content

Collaborate in real time on a digital whiteboard