BACK to BASICS: Blogging and the User Experience

What makes a blog post readable? Well, there’s an answer, but it’s not a simple one. Consider this though: What makes a painting pleasing to the eye? It’s the aesthetics, right?

When looking at a painting, it may not be easy to explain exactly how the artist came to the end product, but there is a method to the madness – an experience the painter creates for the person through style and technique. And blog post is no different.

User experience as it relates to the Web is often defined by how the user feels interacting with a system, product or service online. It's centered on ease of use and efficiency. You can improve the experience you are creating for your readers in your blog by following simple steps. The goal? Create an experience that is respectful of the reader’s time. Don’t make them work for anything. Put in the legwork to create a publication piece that delivers the information with ease.

Of course, the actual content – what is said, how it’s said and who is saying it has a lot to do with this. But in this article, we’re going to explore the “other side” of readability. Not what you should be talking about but how you can organize and format the content in a way that improves the experience of the reader.

Creating a blog post is a little bit like a painting. You know that yellow and green makes blue. You know that a stroke of the brush one way creates a particular effect. Except in this case, the medium is the blog. And the approach to how you are organizing the information will create a better piece of work.

When you approach content from an organization and formatting standpoint, you can create “templates” that better the user experience. With a little bit of structure in your approach, you’ll be elevating the user experience in no time.

Determine the Style of the Blog Post

Just like a painter, the writer must decide on a style. In the visual arts world, it could be impressionism or expressionism, for example. If you painted the same subject in those two styles, it would create a very different experience for the viewer of the art.

Similarly, there are many different styles you could write a blog post in. A person could take several different approaches to one topic and it would read completely different from style to style.

The academic approach to writing offers a wide range of styles for writing. If you’ve ever written a paper in school, you might remember having to write in a certain style. Taking cues from school days, some styles for your blog post can include:

• Inverted pyramid: All the important information is presented and summarized upfront, and then goes into greater detail following the intro. This is the style journalists and many Web writers use, because it quickly relays what the story is about.
• Narration: Here, the author draws from experience on a topic and the style is to typically paint a picture. Often, the story in is chronological order, building to a climax. Conversational style is founded in narration.
• Compare and contrast: Comparing shows how two or more things are similar; contrasting shows how two or more thing are different. Analogies shows how to dissimilar things are similar.
• Problem/solution: In this type of writing, you address one or more problems by giving solutions to them that the reader can apply.
• How to/process: How-to or process-type posts give an in-depth, step-by-step look into how something works and explains to the readers how to go about doing something.
• Cause and effect: This approach explains why something happens. It examines the causes of something and explores its effects, and sometimes predicts what might happen next. This approach often links events together in time, so is usually told in chronological sequence.
• Numbered Lists: People love lists (“top 5” lists or “7 ways to …” lists) because they already know that the information is going to be broken up and easy to digest.
• Opinion/debate: A logical way of asserting an individual stance or opinion on a topic, often backed by evidence of the perspective.

After you have an approach, you’ll then need an outline of how you’ll organize the information you are presenting. Based on the type of style you choose from the list above, the organization of the information will come naturally with a little assistance from your research on the type of writing you’ll be using.

An outline helps organize thoughts, assign resources (where additional information will be helpful) and plan for content assets (like images and videos).

A Note on Writing Specifically for Blogs

It’s best practices to give the reader something in return for their time. Something they can use, something they can apply – at the very least make it clear what the message is so the reader feels like they were rewarded for the time invested in the reading experience.

And because a blog is the medium, not a college classroom, ditch some of the more traditional rules of third-person writing. Address the reader as “you” to make it a conversation between two people.

Last but not least, infuse it with your individual personality and perspective – no matter what approach to the topic you choose. Each person has something unique to add to the conversation based on their experiences and “place” in the world.

Create an Experience through Technique

Painters have individual techniques that make subtle and noticeable differences in their work. They visually plan how the painting is going to look, and they use painting techniques to make it come to fruition.

In a blog post, you want to plan for how it’s going to look visually, not just what it says. Remember, we are talking about how to structure content for readability. This includes not only the way the information is organized (as we talked about in the previous section), but also the way it’s laid out and formatted visually.

The following are some things to consider when creating blog posts:

Font

Try not to use a bunch of competing fonts. Often, a rule of thumb is to use fonts that complement each other, like "display" fonts for headlines, and then a more readable font for a paragraph. A general rule of thumb is not to use serif fonts on the Web for paragraphs. Serif is the “decoration,” if you will, at the end of the letter character – the projected stroke off a letter.

Here's an example of a serif font, Times New Roman (screenshot from Fonts.com):

These types of fonts are generally less legible on the Web than in print. The exception is Georgia, a serif font specially adapted for the Web that addressed some of the problems serif fonts posed.

You also want to consider whether the font is widely available on multiple devices. A sample of commonly used fonts for the Web is:

• Arial (what you are seeing in this article)
• Tahoma
• Verdana
• Lucida Sans

You can also check out Google Web Fonts, an “open source” project that offers a variety of Web fonts that are compatible with several browsers and mobile devices. Other options for fonts is TypeKit.com.

And keep it clean. Lots of bold words, capital letters or italics can be confusing all at once (keep in mind as well that on the Web, using caps indicates yelling). A page with these elements clumped together is a visual assault, and in turn, makes it harder to read. Used sparingly – a bold word here, an italic word there – it’s appropriate for emphasis.

Layout

A “wall” of text can be intimidating to readers, and they might just abandon the page altogether. Try breaking your paragraphs into no more than four lines of text. There’s usually a natural break in the “thought” where this is possible. If not, consider ways to reorganize the paragraph into two separate thoughts.

The length of a line can impact the readability as well. Consider keeping the character count lower, usually determined by the blog’s width parameters. There’s many theories on how many characters should be in a sentence, but just try to take a practical approach; what are other well-known online publications doing? What are the margins people are used to reading within, such as Word documents or commonly viewed documents?

Think about the leading as well -- the space between lines in a paragraph. Loose leading tends to make Web pages more legible. 

Other ways to make the format of a blog post more “readable”:

• Consider the word count; this is dependent on how much needs to be said on the topic to drive the point home. Some topics deserve more time and exploration than others. Readers will continue to read if you are offering something captivating and useful.
• Create subsections throughout the post, using headers and subheadings to create a visually pleasing Web page. The easier something looks to read, the better—especially on the Web.
• Break paragraphs and even whole sections into digestible bits when necessary to add variety to the way the post reads. For example, almost any concept or thought can be turned into bulleted lists or numbered lists.
• Vary the sentence length to keep it interesting. A mix of longer sentences and shorter sentences can make a subtle difference. Experiment with using standalone sentences for emphasis, apart from other paragraphs. Revise longer, run-on sentences when you can by breaking it into two thoughts.
• When using anchor text to link out to a resource, consider summarizing the main point of the article as it relates to what you’re talking about. You can grab an excerpted quote or two from the post and insert it after the link. This not only adds a new visual element on the page, but also ensures your reader doesn’t have to do extra work (clicking and reading) to understand the message.

Imagery and Media

Prior to even posting, you may have an idea of where you want your images to go. For example, a particular section might conjure up images you’d like to find in a stock photography site or naturally lend to a type of image you create, like a chart.

But if you don’t know where your images should go, what they should be or how many you should use, try the following:

1. Upload the text version of the post and use the preview function if you have it in your blogging platform. Then, look at the post in terms of quarters of a page.
2. For longer posts, aim to have a visual aid in each one of the quarter quadrants. For shorter posts, maybe you only need to look at the page in halves, where each half could have an image. For very short posts, one main image could suffice.
3. If you’re shopping stock images, choose pictures that tie into the theme of the section. It should feel planned, and support the points you’re trying to make. It doesn’t have to be a literal translation of your point, but if it feels too disconnected from it at first glance, create a caption for the image that ties in the concept with the visual.
4. Have a visual above the fold so that the reader sees something other than just text when they land on the page. Insert an image that’s left- or right-aligned on the page and up towards the top of the post.

Here's an example of what not to do in a layout of a blog post:

More tips on imagery in a blog post:

• Think about the appropriate size for the visual. If it’s something that needs to be larger to be understood, make it so (one example is an infographic or something that has additional info that needs interpretation, like a table). The reader shouldn’t have to make that extra click to enlarge the image, if you can help it.
• For smaller-sized images, consider word-wrapping the text around the image so it feels like a continuous experience of the piece, not something that’s just slapped on there.
• Vary the placement of the media on the page. Some images might be right-aligned on the page, some might be left-aligned, and some bigger images might be centered on the page, with text above and below it.
• If you have a white background like most blogs, and you’re using stock images, think about choosing images with white backgrounds; this makes the post feel more continuous, as the there are no visual boundaries.
• Vary your media when you can. One stock photo, one video, a screenshot and a chart makes the post more interesting to look at, and gives the readers multiple ways to engage and consume information.
• When using screenshots, take the extra step to add a thin border around the image to make it feel more finished. This can also help any confusion about where the image begins and ends (especially if it has a white background), or any other misunderstanding that could occur with having an image of a Web page embedded in a post.

Of course, we can’t forget all the other important elements on a blog that make it a great experience, like any plugins that engage the reader further including social sharing buttons, breadcrumb navigation, related posts and more. We also can’t forget how important SEO and social tactics are for having those posts be found in the first place.

But the tips laid out in this article address what you can do for your posts once the reader gets there – the most important part. Take these tips and your blank canvas screen, and start looking at the visual aspects of organizing your content and information to create the best experience you can for your readers.