There are many variables that play into the equation of readability and usability in web design. Content needs to be as readable as possible to be efficient and effective, but styling is important at the same time. There is unique balance for every website, and that balance must be found to have a successful website. This is true for all types of sites, especially blogs which contain a large amount of text.

The following article describes how to easily create a clean, readable, and user friendly blog article layout.

Scannable Layout

When the word readability is mentioned, scannable content often comes to mind. Scannable content is the key to readability, and will unlock the user friendly layout every designer wishes to achieve. This is because the majority of users will scan text rather than actually reading through the entire content.

There are many very simple ways to make content more scannable. Here are a few:

The Hierarchy:

The hierarchy is a common term used in typography meaning the difference between elements in copy, the content, such as headers, sub headers, and body text. Using the hierarchy greatly improves the readability of the article, and makes the article easier to scan.

Strong Headers – The headers are probably the most important element of an article in terms of how scannable the article is. Headers are the first focus points for readers, meaning they immediately attract the user’s attention. The focus points are what make content scannable.

Headers should be well-defined and separated from body text. Using stronger and larger fonts will often do the trick, but there are a couple more techniques that are good to make use of. First, underlining the largest and most important header is a common technique. This is very easy to do, just make a 1 to 5 pixel border on the bottom of the header, and provide a little padding to make it more clean. This will further separate the header and add structure to the hierarchy, while making the post more organized overall. Also, spacing is key to good headers. Ample spacing between body text above and below the header will make for a more readable layout.

Noupe uses this bottom border trick on H1 headers to provide good organization of the post.

Define With Colors – Obviously, size is the single most important way to differentiate between levels in the hierarchy, but color contrasts should not be overlooked. Notice how in this article, the largest headers are a shade of blue, sub-headers are very dark blue, and the body text is black. This provides support to the structure of the hierarchy.

Smashing Magazine is a very readable site overall, due in part to the scannable content. They use a good hierarchy structure with well-defined headers using color and text contrasts to differentiate header types.

Smart Spacing:

Spacing is extremely important in blog articles. There are many types of spacing including line height, letter spacing, line length, and margin size. These are all variables in the equation, and each has a large impact on how easy the article is to scan, and ultimately the readability.

Line Height – Line height is the distance between each individual line in body text. Line height is important to get perfect. If not done correctly, then the user will be squinting and straining his or her eyes to read the content. That will occur if the line height is too small. If too large the opposite will occur. The text will appear to be separated and will not flow properly.

Letter Spacing - Similar to line height, letter spacing will impact the legibility. If too small the users will be squinting and unable to read the text.

Line Length – The amount of words per line is known as the line length. This also plays into the equation of the legability of the article. Although the line length will generally be determined by the container that the text sits within, it is still something you should pay attention to. If line length is done poorly, the readers eyes will not flow properly from the end of one line to the beginning of the next, and the reader will be disrupted.

Margins – Believe it or not, white space will support the content better than any other technique. This is because the eyes of the reader are guided through the text instead of being distracted by other elements. White helps to move all the focus of the user towards the text. The margins between the hierarchy elements, different paragraphs, and the sides of the content are all important uses of white space.

The way an article is broken up is critical. When it is broken up, white space between paragraphs in the body text will help to support the content significantly. Users are also more likely to read an article that is broken up into chunks rather than one straight shot of text. Margins on either side of the article is also important. These will help to separate the article from distracting elements such as the sidebar, and as mentioned above, will help to focus the user’s eyes towards the text.

Emphasis on Important Information:

In blog articles, it is good to put emphasis on important information within the body text. This may include tips you would like to stick out, or important contact information. Whatever it is, these points of emphasis within the article become focus points, and as mentioned above, focus points are the core factor of usability.

Bold Text – Using a heavy bold font is the best way to make information stick out. It’s contrast and increased size attract a user’s eye almost instantly when place within copy.

Webdesigner Depot uses the bolding technique very frequently to bring forth important information within a post.

Italic Text - Italics are a less popular form of highlighting information, but it is still very useful. It doesn’t stand out as well as bolding does, but it certainly will jump out from the rest of the text.

Highlight/Underline Links – Highlighting links is a technique that everyone should be aware of, but I felt that it should be mentioned anyway. To highlight links, you should use a different color, larger size, and/or underlined text.

Quotes – Finally, the way quotes are integrated is very important. Quotes need to stand out more than anything, and they should be separated from the content. Using large and colorful quotations marks is an excellent styling tactic that will help to emphasis the quote. Along with that, many blogs will put quotes in italics.

Here is a beautiful, clean, and well-spaced example of a quote from Freelance Switch. The quote is very defined and it is obvious that it is in fact a quote.

Smart Organization

For a blog article to be enjoyed, or read at all, good organization of information is key. The way you break up the article and organize it into sections has a bigger affect than you may realize. If anything is not organized properly, it will be confusing. This same principle applies to blog articles and ultimately the web as a whole.

Use Lists:

Lists are very user friendly, believe it or not. Users are much more likely to read an article that is structured a list. What do I mean when I say a list? This article is one example of an article formatted as a list. If you look around at other blogs, you will see that the majority of the articles are formatted as a list.

Sure, lists are common, but why does everybody use them? First off, they are very organized. A reader can read the headers and decide if he/she wants to read the body text under the header. Secondly, lists are the ultimate way to make content scannable. A reader can quickly scan through each point in the list with ease.

Break Content Into Chunks

Finally, good organization involves breaking the post up. The more the post is broken up into paragraphs and sections, the better. A user is much more likely to read through an article broken into pieces, rather than a straight wall of boring text. As mentioned above, breaking the content into paragraphs provides white space, and white space supports text and improves readability.

Good Image Layout:

Images are very important to blog articles. They provide a visual aid to information, and add a lot to the article. Also, readers will be much more attracted to an article if it contains images. Images can help, but if done poorly they can have a more negative effect to the post.

Spacing is the most important element of a clean image layout. This will have a MAJOR influence on the article. The text should flow around the image and the reader’s eye should smoothly move with the text. Enough space should be used so that the text can be read without being disrupted by the image. Borders are also a good styling option that can help to make images look much more clean. A good border shouldn’t take away from the image, but make it fit into the layout better.

Take a look at the example below. The image on the left uses no border or margin. This has a negative affect on the text itself, and is not a clean and smooth layout. The image on the right, however, has significant space and a subtle border that provides a nice readable layout.

Usable Features

Usability is the key to a successful website, and the usability impacts whether or not a reader will receive information correctly. This is particularly important on a blog, where the base of the website is driven by articles filled with information. It is important to convey the information in a usable manner.

Usable Comments:

As a blogger, I can honestly say that receiving a large number of comments on a post is a good feeling. Many usability factors play into a comment form and discussion field however, and these factors will directly influence the amount of users that will leave comments.

Avoid Too Many Fields – The fields that users have to enter information into will impact the amount of users that will bother to leave a comment. First, you should avoid using CAPTCHAs. Sure, these will decrease the amount of spammers, but it will also decrease the number of readers leaving comments at the same time.

You should keep it to the standard form, which includes name, email, URL, and comment. That exact order is also standard practice among blogs, so you should stick to that. Consistency within a website is very crucial, and being consistent with other websites is just as important.

Threaded Comments – Threaded comments are another very user friendly feature that many blogs use. These allow users to comment on other peoples comments. Generally, users will leave “@replies” to respond to a comment, but this becomes unnecessary if a threaded comments feature is implemented.

Below is an excellent and very clean threaded comments layout from AppStorm. Notice how the use of lines shows that the responses are underneath the original comment.

Post META (Before Post):

In a standard blog layout you will see META before the post. This includes the title, the date published, the author, and the number of comments. These provide the users with convenient and easy information about the post. To improve usability, make these items clickable. For example, the comments item should bring the user to the comment section when clicked, and the categories item should bring the user to an archive of all other posts in that category.

Post META (After Post):

In addition to the META before the post, there is also META after the post. This generally includes a list of related post, a RSS feed option, author bio, and generally ad placement. These provide users with a place to go next after they have finished the article and if they would like to get right into a new article.

Table of Contents:

This is not as common, but there are a few blogs out there that will provide a table of contents at the beginning of each post. This allows for quick navigation to certain sections within a post and provides that extra usability that can be very helpful to some users.

Tutorial9 provides a quick navigation feature in most posts to help users find their way through the article.

Here is another table of contents from Web Design Tuts.

Let Your Voice Be Heard!

Throw in your opinion as to what techniques you believe will make blog posts make readable and usable.

Tagged as: blogs, usability, Web Design