UX Hack: Making Long WordPress Posts Easier to Read & Scan

UX Hack: Making Long WordPress Posts Easier to Read & Scan

Overwhelmed by hordes pumping out low quality “content” day and night and Google’s ever more stringent rules for what makes it to the top of their search pages, many are starting to realize that producing quick, superficial, rehashed content is a massive waste of time.

In order to compete, in order to win, you need to produce something of substance, something of quality. That often means long posts and articles. Sometimes very long.

“Substance” and “quality” aren’t always defined by length, of course. There are plenty of exceptions there.

That said, often the only way to give a topic its due is to explore it in depth. And for that reason, the web is changing.

The web has always had plenty of long-form content. Academics. Deeply passionate hobbyists. Insatiable bloggers. They’re all familiar with it.

But now those who never would have considered it in the past are turning their attention to it more and more regularly. They’re beginning to realize it may be the only way for them to survive.

First there were content farms. Now we have endless long posts. The reader needs a break.
First there were content farms. Now we have endless long posts. The reader needs a break.

Longer Posts Require More Structured Presentation

As the web begins to see longer and longer posts, and more average readers begin to come across these very long posts, I believe we’re going to start to hear a growing, collective moan.

“5,000 words again? Give me a break already.”

It’s not that people don’t want in-depth information. They do.

But trying to decide whether these particular 5,000 words are really what you’re looking for is challenging, to say the least. And that, more than anything, is the fault of the publisher.

The endless road of 5,000 word post can be a (no pun intended) turn off.
The endless road of a 5,000 word post can be a (no pun intended) turn off.

When most people come to a web page, the first thing they do is begin scanning. Even if they’re familiar with the site, they want to know if this particular post is something they should put their time and energy into.

The problem with most 5,000-word posts is that they are structured no differently than a 500-word post.

A 500-word post, even if it’s only marginally structured with some thought to presentation, is easy to scan.

A 5,000-word post is not.

For that reason, we need a change.

Why Not Scan For Them?

Yes, indeed. If readers want to scan, why not scan for them and hand it to them on a silver platter?

And by that I mean why not provide an attractive, easy-to-read, highly-representative “summary” section of the post right at the beginning?

Why not help your readers find what they want?
Why not help your readers find what they want?

And not only that, why not link to sections within the post from that summary?

Some may think giving readers the thumbnail version will defeat all their hard work represented in those thousands and thousands of words below it. But I would argue against that.

Those little snippets and chunks of information are likely to draw more people in than do the opposite.

Who, after all, can eat just one potato chip?

The visitors you lose quickly probably would have left even more quickly upon seeing your wall of words at the top.

Many of those who find the one section they’re interested in and jump right to that also would have probably left even sooner rather than spend their time searching for something they may or may not have found.

And of course you will get a lot of people jumping into a spot deep in the post, and then having finished, will be so interested that they will go directly the beginning and read the whole thing through.

What Does This Look Like?

So, what will this summary section look like?

Well, it could easily come in all sorts of forms.

I created a sample mock up below of something that came to mind for me. Those with actual design skills could easily outdo it.

I cobbled this mock up together with several different plugins, which I’ll mention below. But that’s another part of this long-form content world. We’re going to need tools that can present these long posts in a way that’s easier for readers.

A key part to this is that it will need to practical, not just pretty. For that reason you’ll see I also created a mini table of contents that visitors can access at the top of the post. But that table of contents also follows them down the (very long) page in the sidebar so that it’s always there should they decide to jump around.

A Sample Summary Section

So here’s what my mock up looks like.

summary-section

And at the bottom of that section, you’ll notice an option to see a full table of contents for the post. And so with that open it looks like this:

full-toc

 

Plugins

OK, so I’ll run through the plugins I used.

First, I’ll start with the table of contents plugin. It seems like there are a number of good ones out there. The one I went with is called Table of Contents Plus. You get a lot of control with this plugin, and it also comes with a widget and a shortcode – both very important for my purposes.

There may be other good ones too. I didn’t search around much. This one looked like it had what I wanted, so I went with it.

The table of contents plugin is important for a few different reasons. First, it turns all your subtitle text (h2, h3, etc.) into links that go directly to those sections. And so not only is that good for the table of contents, it’s also good because you can easily copy those links and then use them to link elements that aren’t part of the plugin.

For example, you could easily link an image or a bullet point or just a piece of text right to the section you’re looking for. This would take a lot more time if you had to build your own “jump links” as they’re called.

The second reason the table of contents plugin is especially important is because you can combine it with another plugin, the Q2W3 Fixed Widget plugin, to make it follow the visitor down the page in the sidebar.

You can see that in action here. I’m quite a ways down the page in this screenshot, but you can see my table of contents right there with me.

toc-widget

One thing to note about having the table of contents follow you down the page like this is that the table of contents widget should probably be the last widget in your sidebar. If it’s not, and that’s the only widget you “fix,” then it will appear to run roughshod over the other widgets in your sidebar as it goes past them.

For most of the design, I used two different shortcode plugins: Shortcodes Ultimate and Olevmedia Shortcodes.

I did a lot of nesting there – e.g. table of contents inside of spoiler box insider of message box. You can play with them to get your own design.

And that was it really – four plugins.

Still, with all the nesting, etc., it was a little more complicated than it should be, but as mentioned, hopefully that will change.

The important part, of course, is what you put in your summaries.

So, any thoughts? Is this a worthwhile endeavor for very long posts? Can you see yourself appreciating them?

Also, be sure to check out Chris’ recent post on longer content (more magazine style content). Content is changing. And we should start thinking about adapting.