Without hovering your mouse over my logo found in the header of this site, do you think it links to my home page? I’m certain that most of you think it will.

Predictable web design is knowing your users, and knowing how they expect your website to work. Here are a few important methods to make any site more predictable for its users. Continue reading »

 

While cleaning up my daughter’s room today I saw a quick little reminder on why proofing is so important. She spelled horse wrong. She did manage to stay consistent though, something I like, and continued with the spelling error  throughout the short story.

hores

Scan of daughters short story title page

 

Improving a sites usability doesn’t have to be hard, or expensive. It also doesn’t have to hurt a sites design or appearance. In fact, it can often help. There are a ton of little things that you can do that can make a big difference, and they can often be done in a minute or two. Working on site consistency is your best start.

Consistency

One of the biggest, and easiest things you can do to improve your sites usability is to do things consistently. If your site or intranet has multiple authors a style guide is a must have, especially if there is no main editor. This Texas Electricity site was nice enough to let me use their site as an example.

When digging through their site, I saw a lot of inconsistencies. Templates were different on individual pages, headers were defind differently, colors were different, and font type was mixed up. The site needs some serious help. There are still a couple of items keeping it glued together though,  and that is a lot more than some site have to offer.

Saving Their Butt!

texasThere are two main things savings this site. The first thing that is helping them out is their logo. Even though they are using several different templates on their site, they at least continued to use their logo on most of the pages, example page: No Deposit Texas Electricity. Seeing that logo, will at least tell me that I am probably still on the same site. The second thing they did consistently, at least in some parts, was stick to a color theme. Its use is far and few between, but it is still visible enough to indicate I am on the same site.

Overall Appearance

Even though this site isn’t totally consistent, you can see how effective just a little bit of consistency can help a visitor out. This is also a classic example on how doing a usability test can improve a sites appearance. I have heard many say that they sacrifice usability for design. Why? Improving a sites usability should help improve design. By making this site more consistent in some of the major factors like template, colors, and font they could substantially improve usability. It will also substantially make the site appear more professional in design.

Increase consistenty, increase usability, increase professional appearance.

 

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.