Over a million developers have joined DZone.

Multilevel Navigation - A Possible Alernative

· Web Dev Zone

Make the transition to Node.js if you are a Java, PHP, Rails or .NET developer with these resources to help jumpstart your Node.js knowledge plus pick up some development tips.  Brought to you in partnership with IBM.

I do not know about you but I really dislike menu systems that go beyond the second level. Some menus seem to keep expanding and expanding. One of the problems I have with this is that if you go down to the third level and move off the menu item by accident, you have to start all the way from the top again.

Sure, you can use JavaScript to delay the fading out of the menu but, I really want to try and avoid the use of JavaScript in this regard as far as I can. The other aspect is, that I just do not find it so useful. I cannot remind myself of the last time I actually used a menu item that was more then two levels deep…

So I was thinking about this scenario, breadcrumb trails etc. I started pondering the idea of how one can avoid three level menu systems while still giving the user easy and quick access to the various areas of the website or web application.

With this in mind I came up with a “system” that uses no more then a two level menu system i.e. top level and sub-level links, breadcrumb trails and the “You were here” trail. Now the crux of my entire idea lies on the effectiveness of this “You were here” trail. To best illustrate this let’s step through a typical user session at a website. We will look at this from two different perspectives, as a new user as well as a returning user.

The New User

The typical new user to a website is in ‘exploration mode’. They have not been here before and will more then likely move through the website going to either the top level pages or jump to some of the sub level pages that particularly interest them. So in this case a simple two level menu system combined with a well built and thought out breadcrumb trail should ensure a pleasurable experience for the first time user. They will be able to move two levels deep simply using the menu and as they dig down a little deeper the breadcrumb trail will help them find their way back quickly and easily.

The Returning User

This user is a more discerning user with a completely different use case. They typically know what they are after and want to get to the information they require with as little hassle as possible. Now, this is where the “You were here” trail comes into play and removes the need for menu system that go beyond the second level. During the users last session, each page they visited past the sub-level was logged along with a unique identifier.

This unique identifier was stored on the users system in a cookie as well is in the database. When the user returns to the site, the system checks whether the cookie is set and if it finds it, it pulls the last five visited pages from the database based on the unique identifier and populates the “You were here” navigation box. Obviously the amount of pages to display can be set by the user and defined as a preference inside this same cookie.

My believe is that if one combines a well designed information architecture, a two level menu system, a breadcrumb trail as well as the “You were here” functionality, no user should feel that they cannot get to where they want to quickly and easily. Combine the above with a search functionality and Bob’s your uncle!

Whether this is a new idea or not, I do not know but, either way, I believe this would be a solution that can be implemented successfully and I would love to hear everyone’s thoughts and ideas with regards to my thinking.

Learn why developers are gravitating towards Node and its ability to retain and leverage the skills of JavaScript developers and the ability to deliver projects faster than other languages can.  Brought to you in partnership with IBM.

Topics:

Published at DZone with permission of Schalk Neethling. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}