Usability is key to any website; using websites is what people come to them for, so clearly how easily they can use it is incredibly important. Below are a few ways you can increase the usability of your website. Some of them are pretty straight forward to implement, and will definitely benefit your users.
Most people know that the stuff above the fold is your most important stuff. What you put above the fold is what your user is going to see first, and so you should put all of your most important things above the fold. But hold on, maybe I’m getting ahead of myself.
The fold is the bit of the website you can see without having to scroll down. After you scroll you’re below the fold. Now, most users do scroll below the fold, but having your most important content above the fold is important, as it’s the first thing the user will see.
Yeah, that’s true. So the fold is going to be different depending on what device/computer your user is using. This can cause some troubles, as if you say something is above the fold, it isn’t necessarily always going to be above the fold for everyone.
Fortunately, rather than running around asking your neighbors what screen sizes they’re using, Google have put together a little tool that should solve all your foldy woes. The Google Browser Size Tool tells you what most users can see when they’re on a website of your choice. Where it says 99%, that means 99% of users can see this section of the website without scrolling.
Grids basically help you to separate your content into areas, and keep everything in proportion. This helps you to align your content in a way that the reader will be able to understand easily. Many heavy content sites use a grid system of some sort. Take a look at CNN and how The Onion’s grid is set out.
One of the more popular grid services and one that I would recommend is 960.gs. Why not try it out, and explore a bit more with grids?
Your website and its visitors are going to be different from another website and its visitors. For instance, if you have a less tech savvy website, most users might be using Internet Explorer, with smaller screens. On more tech savvy sites, or design sites, the opposite might be true.
It’s important therefore to research your users and increase usability for that set of visitors.
As I just mentioned, it’s important to know what your users are using so you can mold your website for your largest base of users. For instance, if only 1% of your users is using opera, they might not be your biggest concern. Saying that however, it is important you make your website work for the vast number of visitors you get.
If your visitors see your website isn’t working how it should, they might just leave!
From a usability standpoint, if you find out where your users are clicking, you’ll be able to alter your content and layout so that the things you want clicked are in the most clicked area.
There are many ways you can map the clicks of your users, the most common being the use of heatmaps. Clickheat is free and gives you a bunch of cool features, however if you’re looking for a paid option, you might want to look towards CrazyEgg.
Typography is a very important part of usability. Here are some quick tips on how to improve your designs typography:
Links (or anchors, whichever you prefer) are one of the main ways your users are going to navigate your site. According to research blue links get the most click throughs, with other colors trailing behind. Users instantly recognize the blue color which big sites like Google use for their links, and click on them.
Of course, blue mightn’t mix so well with your website’s design, and you might opt for another color. The important thing is that you have your links in a different color. Underlining might help too. If your links are just in bold or something, your user probably won’t notice they’re links at all.
Navigation is another way you can easily increase your usability. One of the main ways your users are going to get around is via search.
Search is a very powerful tool on the web, and should be a pretty big priority, especially if your site is very content heavy. Have your search box somewhere where the user can find it, so if they’re looking for something they can find it easily.
Tags and Categories help users to find stuff that you think is similar to the article or piece that they’re reading. Tags are usually part of the post, and we’re all familiar with the ubiquitous tag cloud.
When you’re coding your images, I would strongly suggest using alt tags and width and height properties for most of your images. If the image is somehow deleted, alt tags will allow your users to still realize there was supposed to be an image there, and it will tell them a bit about it. This especially important if the image is also a link.
When you’re on a website with a lot of images (lets say a showcase or list of some sort), scrolling down becomes a pain as all the images load separately, and you’ll find yourself moving up the page without scrolling, because the images are still loading above you. If you have a width and height set (or even just a height!) the image height will already be loaded, so there wont be any unnecessary scrolling. This isn’t as important if you only have a few images.
Small things can really make a big difference when it comes to usability and it’s down to you to optimize your website for your user base.
Comments
very useful, thank you very much.
Hey there – nice and simple article. I don’t really agree with the first point here about working above the fold… Many usability tests are showing that users are scrolling down when they don’t see what they’re looking for right away. This used to be so some 5-10 years ago, and websites were literally made so that there was no need for a scroll bar.
Otherwise, great job!
Yeah that’s true, nowadays it’s a lot less of a worry than it was about 5 or 10 years ago.
I’d still say though that you should have your most important stuff above the fold if you can.
wow. Nice short and precise article. I develop Joomla CMS, but I never knew about ”the fold” … Thanks a lot.