Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Multilevel Navigation - A Possible Alernative

DZone's Guide to

Multilevel Navigation - A Possible Alernative

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

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

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}