Time for part 4 of 35 covering my usability and design analysis, Text That is Easy to Scan.

Your Website is Not a Book

So why is it so, so, so important to have text that is easy to scan on the web? Your website is not a book. What’s the big difference between a popular website and a popular novel? You read a book, you skim a website. Several studies have found most visitors don’t read a page in it’s entirety, and I can/would bet money that several visitors to this post will only read the paragraph headers. People read books, and visit websites, primarily to gain information. Keep your sentences short, and your paragraphs shorter. The Internet reads much like an encyclopedia. Just give them the facts.

Big Bold Headers

Without reading this post you should be able to guess that the first paragraph was about comparing a website to a book, and that this one is about using headers. Ever watch someone use your website? Ever watch hundreds of people use your website? I have, and on this site. They bounce around like if they were playing pong. They zip through a page at a lightning fast pace, highlighting content with their mouse for even faster reading, and then blast to bottom and top for a final scan before leaving. If you are reading this paragraph, I’m betting your mouse pointer is very nearby.

What makes the visitors hit the breaks, and slow down to read? It’s those big bold headers. It’s lists, it’s pictures, it’s those visual indicators that there is new content here, or something important for them to read. They don’t want to read your whole website.

Format to Read

I will keep this part brief. Format your text so your audience can read it, and read it quickly. Don’t build a retirement website using 8px font, and expect your users to like it. They won’t be able to read it. You should not use pixels to define your font size anyhow, use EM.

Stop using Justify! Justify is for block quotes. When you justify you content it makes it harder to read, more difficult to find the next line, and though you may think it looks nicer, know that many think it’s comical that you made such a silly error. The excuse that many other website do it does not fly in my book. Look at some of the most popular sites/blogs on the net to see how they do it. They don’t, and they don’t because it is the wrong format.

Consistent Methods Improve Usability

Now here is what can make your site shine over the competition. When identifying those important pieces of information that your visitors want to read, be consistent about identifying their level of importance.

For a simple example: When you look at my home page you will see a list of recent posts I have made. All of their titles have been wrapped in H2 tags. When you click their link and land on the posts unique page, the title is still wrapped in a H2 tag. So when a visitor sees font in that size, they know they are reading the title of the page, anywhere on the site. Additionally, all paragraphs throughout my site that have their own unique headings, a smaller in font size, H3 tag. They are smaller so that it is easy for the user to identify that it is not a new post, but just a part of a post.

The concept of consistency is a relatively easy for webmasters to understand. Consistency in practice seems almost impossible. Your mighty sword to fight inconsistency? Your CSS file. It’s time to put it to action, site wide.