From Two 2 Twelve

How A Sensible Navigation Flow Is Crucial to Application Design

posted under web projects

During my recent revocation of the 72photos photo hosting service, I came across multiple hurdles in the lines of navigation. I’ll spare some of the more gritty details, but I will add, if and when your site begins to employ multiple areas such as, a separate website and client backend for instance, it’s crucial to have a navigation flow thats easy to follow, somewhat static (i’ll elaborate on that shortly) and most definitely sensible.

Here was the progression of navigation used on 72photos which consists of 2 separate sections, the main website and a user’s control panel area:

Version 1:

Main website: Displaying a set of links pertaining to navigation for the main website’s pages. The active link (the page you’re currently on) is subtly underlined.

Users backend: Displaying a completely different navigation from the main website with links pertaining to sections in the users backend.

Why this doesn’t work: Once a user was in their backend control panel, the only way to navigate back to the main website was to click the 72photos logo (not effective). Reversely, the only way to get to the users backend from the main website was one link entitled “dashboard” which replaced the “home” button on the navigation once a user was logged in. Since the main website and user backend designs changed dramatically from a dark design to light, a feeling of seperation would overcome to user when switching between the 2 interfaces with no elements constant to give the feeling of connectedness and flow throughout the system.

Solution (Current Version):

Main website: Redesigning the set of links to use the colors from the footer and highlighting the active link distinctly sets a tone for the main navigation which is now shown on every page/section of the application.

Users backend: A redesigned and re-aligned set of links as before, however, this time around the main websites navigation is still up top.

Why this works over the former: The constant, site-wide navigation up top gives users the ability to explore the entire website at any time and to always know where they are—where they came from. The new backend navigation cleans up the interface and keeps the header a reasonable size even though it now employs 2 separate navigation’s.

Final Thoughts:

I can’t say for certain my approach will work for you but as long as the most sensible items are in your main navigation and are always present you’re application’s usability will go up a few points.

Also, Throwing your entire applications site-map in an over sized footer bar is never an appropriate solution (speaking from experience).