Building a 4-level deep navigation system

The way a visitor navigates in a website is not only important but crucial in any case. Creating intuitive and easy to use navigation systems can uplift the user experience and make a website successful at the end of the day.

Recently, I was challenged to create a 4-level navigation system for a customer. Needless to say that it was the most difficult part of the project. I decided to take a look at various implementations and decide later which one was appropriate. I am going to try to describe some of them here and mention the pros and the cons of each one.

The hierarchy

Here it is the given hierarchy of the system.

• Home
• Company profile
       
  • About
       
  • Personnel
       
  • Headquarters
   

• Services
  

     
  • Feasibility Studies
             
    • Buildings
                     
      • For houses
                     
      • For offices
                     
      • For stores
                   

    • Land
      

                     
      • City land
                     
      • Country land
                   

   
  

  • Patterns
    

                 
    • General
                 
    • Orderer patterns
             
• Contact

Let’s move on to the possible navigation schemes. What happens when a user tries to reach the deepest level?

#1 Flyout menus

The following image shows the vertical alignment of the 1st level and, as you can see, next levels open up from left to right.

We ‘re on “For Stores” level and obviously this menu takes up a lot of the screen space. It’s enough to turn this solution down.

Arranging the first level horizontally produces more or less the same ugly and not usable results. Furthermore, flyout menus won’t help a visitor remember how to come back again to the same destination after some browsing. Breadcrumbs can help, but not drastically.

#2 Menus ordered both vertically and horizontally

What is good with such a scheme is the fact that visitors are helped to remember the structure of the website. However there some serious problems with this technique:

• such a design covers a lot of our given screen space
• being at a deep level is visually complicated

#3 Tree menu

Such a scheme is much simpler and reminds the Windows Explorer hierarchy.

However it is a visually poor scheme and it requires a lot of clicks. It doesn’t let visitors concentrate to the content. On the contrary all the spotlights are on it.

#4 Drop down lists

It is one of the most convenient solutions. Everything can be reached from the top of the page and a visitor needs only to make a selection. The whole scheme is easy to be used and it doesn’t take any learning.

What is not good with drop down lists has to do with design. Such lists remind signing up forms and they all look the same unless some JavaScript is applied to change how things appear. Visitors need aid all the time when drop down lists are the main navigation system.

#5 Tabs

It is the scheme that is going to be applied. It includes all the pros of the previous solution, it is friendlier and it can be designed a million different ways.

To create such tabs you also need some JavaScript but this time it has to do with functionality, not design. Furthermore, using tabs is intuitive and all the relevant information is easily accessible. The whole look & feel of the website is much better this way.

Epilogue

Deep level navigation systems used to be a pain for designers and they still are. Some years ago the finally selected approached didn’t exist at all. New tools and technologies prevail because they provide solutions to real problems. Using them just for showing off doesn’t help anyone. Or at least this is what I believe.