Improving this Website's Usability

Posted by Hans de Ruiter

A screenshot of the new and improved HDRLab website.

This website has undergone some changes recently in order to improve its usability. In chronological order, they are:

• The top navigation bar now highlights the current section,
• The side-bar navigation menu marks sections and pages with arrows and highlights, and
• The page header so that more content fits into a web-browser's window.

Highlighting the Current Section

The current section is now highlighted in the top navigation bar. With this change, visitors can instantly see what section of the website they are currently viewing, thus making it easier to decide what to do next.

"Breadcrumbs" in the Navigation Side-Bar

The first change can be seen in the navigation side-bar on the left. It now contains arrows marking which sub-section/page a visitor is currently on. The current page is highlighted in a different colour. This is similar to the "breadcrumbs" concept, except that it is built into the navigation menu. Breadcrumbs are a navigation aid that shows where within a website/folder the user is currently looking.

This change should make it easier for users to know where within the navigation menu the current page is, and what else is available in that section. In doing so, users should find it easier to navigate the site.

Shrinking the Page Header

A screenshot of the old HDRLab website.

Shrinking the size of the page header is a change that I have been meaning to make for a while. The old header (see the figure on the right) took up too much space, meaning that only a little actual content was visible within the browser window. Making this change was put off because of the effort required. For example, the old logo really only worked with this layout, thus a new one would be required (which has been done).

Theoretically removing the header photo would have saved a lot of space. However, it provides more colour, and a bit of a balance from the otherwise highly technical content of this site. Thus, the solution was to create a new logo, and fit it into the header photo itself. In doing so, the top header bar could be deleted, and the navigation bar moved to below the header (see the screenshot at the top right of the page).

The overall result of this is:

• Visitors see more actual content, and
• The navigation bar is now closer to the content, where users typically expect to find it (i.e., less searching).

Final Comments

"Don't Make Me Think," by Steve Krug.

Steve Krug's book "Don't make me think" was instrumental in working on this website's usability. This book examines website design from the user's perspective, that is, how a user is likely to use the website. This is one book that I highly recommend to website publishers/designers.

Anyone else who is interested in reading this book can find it at the following online stores (select the one closest to you):

Available online globally from the following stores:
New Zealand	Buy from thenile.co.nz
Australia	Buy from thenile.com.au
United States of America	Buy from amazon.com
Canada	Buy from amazon.ca
United Kingdom	Buy from amazon.co.uk
France	Achetez chez amazon.fr
Deutschland	Kaufen bei amazon.de

Comments (0) | 12 March 2009