Proper Page Structure and Navigation for the Best User Experience

Proper Website Page Structure & Navigation

Creating the best web site user experience

Since entering the world of web design in 1995 I have seen and used many trends and styles. Some have come and gone and many are still evolving and catching on as we speak. Similar to an automobile a website is a machine whose parts need regular maintenance. As engineers and automobile designers are responsible for making cars run and operate more efficiently, it’s the job of the web designers and developers to make sure websites are easy to understand, navigate and function. With trends in web design still evolving, there are fundamental page structure and usability practices that haven’t changed much over time.

Website Layout and Structure

There are multiple ways to structure your webpage layout. Here are some web site layout techniques to make your site simple and easy to read:

1. Design your structure and layout similar as how you’d read a newspaper or magazine (left to right, top to bottom).

2. Use a multi-column fixed width page layout. Studies have shown it’s easier to read web page content with a shorter scan width. Using a fixed width design makes it easier for readers to scan and find the content they need. It can also help break up and categorize various content elements on your page. Imagine how difficult it would be to read an online multi-paragraph article with a full screen width and one column layout on a 24” monitor. Note: there are instances where a liquid design (full width) layout makes sense such as how Amazon uses it.

3. Here are a couple examples from Dr. Tom Lamperti and EOS Alliance that effectively use a fixed width multi-column layout:

Website Navigation

Website navigation is another critical element in your web page structure. Users need to be able to move easily between pages and categories with little to no confusion. Placements of your menu navigation along with proper labeling are keys to effective user experience. Follow these guidelines when creating and placing your website navigation:

1. Place your main menu bar on the top and bottom of your page. Placing the menu at the top above the fold as well as the very bottom will ensure it is always visible.

2. Keep your menu bars consistent between all pages. The slightest changes to such things as the menu title or ordering can easily confuse users.

3. Clearly label your menu bar elements.

4. When using fly-out or accordion based menu systems, don’t go any deeper than a couple levels. Requiring users to drill down multiple levels to get to the data their looking for may cause them to get lost within your site.

5. If your site does require a multi-tiered architecture use a breadcrumb navigation system so users can easily and find their way back to the homepage.

6. Here are a couple examples from Bed Bath & Beyond and Zappos who both use effective and easy to read fly-out menus.

In next month’s post I’ll be discussing challenges with website layout widths in regards to today's various screen resolutions.