10 Tips To Make Your Website’s Layout More Usable

Wednesday, January 9th, 2008

In this article on our series detailing web usability, I will be discussing what can be done with your website’s layout to improve it’s usability. Usability can be defined as making your website as easy as possible for a visitor to manipulate and find whatever it is they’re trying to find. Here’s a list of 10 tips that can help you make your website’s layout more usable (in no special order).

1 - Search Form

The search button is sometimes the first object of your visitor’s desire. It can sometimes help retain user if they’re looking for articles of similar topics, in the case of a blog. The search form should be placed above the website’s fold (visible without scrolling), and, if possible, in the top right corner of the website.

2 - Your Logo

Your logo is important. Branding is important. Optimally, your logo should be at the top left of your website. If required, it could be centered in your header. Your logo should be clickable and should direct the user to the site’s homepage

3 - Footer Navigation

If you might have long page lengths on your hands, consider having a trimmed down footer navigation. If this isn’t an option, consider a “Back to top” link.

4 - Navigation Position

Try at all costs to keep your navigation’s position unchanged. If a new navigation is added, add it in a new place. For example, on inner pages, you can place a subnavigation in the right side of your content window, where there was no content before.

5 - Readability

When designing your content area, you should be making sure that you make your content as readable as possible. I wrote an article on optimizing your website for readability here.

6 - Center Your Layout

With widescreen monitors becoming more and more mainstream, websites should be designed to accommodate them. When someone has a widescreen and your website is tucked in the left, everything seems off-balance. From what I can see, there are no reasons not to center your website.

7 - Page Width

Again, widescreen monitors should also impact a website’s width. I wrote an article on how tall and wide your website should be. You can read it by clicking here.

8 - Separate Your Navigation

If you have navigation items that link to different “types” of content, separate them from your navigation. For example, links for editing your account or for toggling the language should not be nested with links to content.

9 - Know Your Fold

A fold is defined as the section of your website that is visible without scrolling. You should be well aware of where your fold is and place critical elements accordingly. For more information on folds, click here.

10 - Design Buckets

Buckets are defined as graphics that link to parts of your website normally accessible via the navigation. These can used to help direct users to a popular section, to a new section or to a promotional events. These can be front and center when a user first arrives to the homepage.

That’s all for now, hope that helps.