A Crash Course in Usability

Usability is probably one of the most important factors in web design. As I said before, users can leave your site just because of bad usability, and that’s something you usually don’t want. Getting to grips with usability is easy, after all, you’re a user too! So once you’ve finished coding your site you can go through it all and decide if it’s easy to use for you.

The Implications

Lets be honest, the average user has a very low attention span. So low in fact that about 81% of people leave a video if it starts to buffer half way through. People don’t have to wait, and most importantly, people don’t want to think about what to do next, and how to get to another section of a website. They want it to make sense and just work for them. Thinking takes too long and your users are going to perceive the site as weird if it doesn’t work how they think it should work.

So there are loads of implications to usability. It could lose you sales and even readers if you’re not careful.h

Improving Usability

Improving the usability of your website may seem like a big undertaking, but it really isn’t, so don’t you worry about it, ’cause here’s a few tips on how to get started

Follow a Standard Model

If you look at most websites, they’re designed in a similar way. There are variations, but generally websites follow similar patterns. Blogs and all that usually have a column style layout, header at top, a menu and a footer. A portfolio might be more open with only maybe one column, a header, menu and a footer.

If designer started putting their header in their footer and messing around with what people are used to, people wouldn’t be able to use your website as easily, since they wouldn’t be used to it. This would decrease the usability for that user. Of course, this doesn’t mean that you shouldn’t try and be different, just not so different that it affects usability.

Horizontal navigation is usually better

Horizontal navigation is generally better for websites. People have became accustomed to horizontal navigation. Although there are some great examples of vertical navigation, horizontal is what I and many other designers prefer, as is pointed out in this article.

Skim Reading

Lets be honest, most people don’t read articles. They read the titles and then read a small bit under the titles they’re interested in. Skim reading allows people to pick out the bits that interest them.

That’s why online writing differs so much from the type you get in a newspaper. Online writing thrives from headers, sub headers, bold and italic text. If you bold some text, it instantly seems more important. Headers tell the user what this section is about.

Make your CSS work for the reader

I recently did an article on pseudo classes that covers how pseudo classes can help usability. For instance, adding a hover state to an element that a user can interact with will let the user realize that they can interact with it as it changes when they hover over it. CSS like this makes a users experience, well, much more usable.

Padding on links

There are loads of other techniques in CSS though that improve usability. As seen here, adding padding to a link can improve usability because the user has a greater area to click on, meaning they wont miss as easily.

div a {
        padding: 5px;
}

Clickable boxes

By expanding the clickable area of a link inside a box as shown above, it makes the menu a lot more usable. It just means your user has less problems when trying to click on the items. See here for a load more information.

Bigger is Better

When it comes down to making your website more usable, bigger is better (well, you know, within a limit). Bigger text is easier to read, and bigger inputs allow your users to easily target them. Making your text bigger can greatly improve the usability of your site for your users. Not only that, but by making your text bigger you make your articles more friendly, so they don’t look like huge amounts of text that would be a big undertaking for even the most accomplished reader.

Adjust for your users

I’m pretty sure I’ve said this before. There are those out there who optimize their website for their own experience, and then there are those who make it look nicer for everyone who has ever existed. The first type of web designer is clearly plain crazy, and the second one is going way out of their way for no real benefit.

Get something like Google Analytics, check what kind of people are using your website, and optimize it for them. Don’t make it work for people using Internet Explorer 6 (god help us all) if no one is using it!

Fast Loading Pages

As I mentioned earlier, users are strange creatures, with very short attention spans. If your page isn’t loading fast enough, this will bother them to no end and they’ll just leave. Heck, I’ve done it before. If something isn’t loaded in under 10 seconds I’ll often go to another website to find the information elsewhere.

Tips to speed it up

Optimize Images for Web (always)
Decrease size of CSS/HTML files (delete deprecated classes, or remove bits you no longer need)
Don’t load unnecessary Javascript/CSS files (they’ll simply add to the load time)
Try to use inline CSS as little as possible (if the CSS is in a seperate file, the browser will cache it, so it doesn’t have to be loaded again)