Top 10 tips for online usability

I thought it’s about time I provide my own top 10 tips for building a usable website.
There’s loads of lists out there, some of them better than others. I always find they use some jargon that novice users might not necessarily be familiar with.
I think it’s important that since usability refers to how the process of making a website easy-to-use, that usability tips are also easy to understand.

What I provide in this post is what Jakob Nielsen would probably call a set of heuristics that can be used for user-centered design.
I’d rather refer to them as the top 10 rules to follow to ensure nothing goes wrong in the design process.
So, here it goes:

1. KISS - keep it simple stupid! First and most important rule. When you start designing a website or a GUI - sure you want it to look professional and fancy, sometimes with a bit of eye candy. It’s fine, as long as you remember that the interface is built for the user and therefore needs to speak to the user. If yourself find a feature hard to comprehend on the interface, then chances are the user will not understand it at all. Try to make everything obvious, visible and available for use to your target audience.

2. Typography - I see lots of websites breaking the fundamental rules of typography - make sure you allocate concise and straightforward spaces to text and content on the interface. You don’t want your user to bounce off the website because they find it overloaded with information. Make sure paragraphs are short, important words are highlighted and the information is structured with headings and bullet points.

3. Consistency - hugely important! You want your users to understand the interface you provide them with. Color codes must be respected throughout the site, as well as page layout, font-sizes and graphical elements. If you have links in underline dotted blue, make sure that rule is enforced on the whole interface. Same principle goes for headings, image captions, etc. In terms of graphics, try to keep the same style of imagery on your site - don’t include vector illustrations on one page and artistic photography on another. Sure a bit of variety is always good, but keep in mind the images should respect a global theme throughout the site.

4. Menu hierarchy - You have 20 items to include in your menu, but not sure whether to use a rollout menu, split the items into separate menus, use different color styles… Before you make a decision, take some time to think about which items in your menu need to be the most visible and which are more generic items (sitemap, contact, info, etc.). Ensure the menu items which are the most important are strikingly visible to the user. If necessary, you might want to consider having an additional call-to-action for those important links somewhere else on the page. For more generic items, ensure they are located in a typical spot on the interface (home, about, contact) towards the top of the website, or in a sidebar. Finally, always make sure you include a full list of links in the footer of your website, as this is also good for helping search engines crawl your website.

5. Start from the beginning - If you feel confused about where to start and have millions of ideas popping up in your brain about how your interface could look like, then sit down and write a simple list of inital requirements: what’s the title of the website, does it need a logo, what/how many links need to be included, how much content does the site require, are there any special features to be included (contact form, widgets, blog…), do you need to find a colour code… You will find that writing down (on paper, on screen is useless) will make much more sense once you sit down in front of your computer. Plus it gives you a nice screen break to think about it in all tranquility. It also enables you to think about how you can make the elements interact the best on the interface.

6. Technologies - Once you’ve decided what your website requirements are, start thinking about what technologies you are going to use to implement it. You might need a blog, some animations, videos, sounds, etc. It might be a good idea to opt for a CMS (Content Management System), which allows you (and your client) to easily make changes on the website. My favourite is Wordpress, which is by far one of the most customizable and user-friendly blogging platforms available out there, and it’s completely free!! Also think about Javascript functions, cookies, Flash, etc. in terms of accessibility. If you are targeting users which do not necessarily have access to modern computers, you might want to keep your website in plain HTML with CSS, to ensure its worldwide accessibility.

7. Search Engine Optimisation - indeed, this is related to usability. I believe that a great majority of the algorithms used by search engines to index and rank webpages can be perceived on a usability-level. For instance, a search algorithm might look at the quality of your content according to its hierarchy, the keyword density, the technology used, etc. These factors are deeply related to usability principles. Search engines will rank websites in a higher position just like users will rank usable websites higher than complex and unintuitive ones. Apply SEO theories to your websites and you will be on your way. I suggest www.seomoz.org to get started, probably one of the best online SEO resources out there.

8. Prototyping - You don’t want to spend days designing a system to then realise that it is completely unusable. Respect the progression of low-mid-high fidely prototypes. If you follow this progression and ensure for each step of the process that you perform some usability debugging then you’ll be on the right path. I suggest using a list of heuristics (rule-based method of identifying new issues) as a checklist to proceed to the next prototyping level. There are a few out there, including Jakob Nielsen’s famous list of heuristics.

9. User Testing - I used to hate this part of the usability process: building scenarios and personas to theoretically determine the issues of a graphical interface. Until I got to a level at which I had resources to test my GUIs on real people, and I must admit, IT WORKS. As a designer / developer, you end up spending so much time on a project you become unable to have any sort of objective (or subjective) judgement on your work. Testing it on other people is the best way to improve your interface. User testing will provide you with a list of problems you would never have come up with on your own. Submit your work to a new pair of eyes (friend, partner, colleague) and trust me you won’t regret it!

10. Believe in yourself - in usability, there are dozens of different ways of improving interfaces, but no universale method or sets of rules. The first achievement when attempting to design usable graphics interfaces is thinking with a usability mindset: ask yourself if the interface is good at what it’s supposed to do, are you happy with the way it looks and do you think others would be appealed by the idea of playing around with it. If you believe you have achieved all three, then you’re good to go beta-testing, and learn from the first batch of users.

That’s it, I’ll soon post some more about usability and marketing and especially how they can be used to improve your Return on Investment.