Marty July 6th, 2005
I’m in the middle of a contract where we will creating a site that incorporates several departments presentation needs to a varied number of customers. In short, Department A needs to be able to present information to Customer Type A and Customer Type B, while Department B needs to be able to present information to Customer Type C, as well as some information which is share by all Customer types. The data varies between global information without any account specificity, and user-specific transactional data.
The navigation consists of a global ‘frame’ from the parent company (header, footer and left-nav style). Between them is our content (<div id="container">), which in turn has two divs, leftcol and rightcol (I know, so original). We are basing the left navigation - the main navigational element - on the parent site, although we are tweaking the style slightly, customizing the menu items to our site specifics, and most of all making it compliant by removing tables and image-based ‘text’ links. The main content of the page would fit in the right column div, often being fed from another part of the company’s database.
The main navigation isn’t a problem. I’m using nested lists to create a primary and secondary navigation to mimic the table-based rollovers that the parent site has. The problem is that when we reach certain portions of the site, I would need to go to a tertiary level of navigation. Not necessarily a problem in and of itself, although it does pose space problems within the width of the left column div.
Still, it was my recommendation as the most advisable method to go, following this general pattern:
<ul>
<li>HEADER 1</li>
<li>HEADER 2</li>
<ul><li>page 1</li>
<li>page 2</li>
<li>CURRENT PAGE</li>
<ul><li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li></ul>
<li>page 4</li></ul>
<li>HEADER 3</li>
<li>HEADER 4</li>
<li>HEADER 5</li>
</ul>
Simple, aside from spacing problems (32-character option names don’t fit very well). However, the client team wanted to use a set of navigation for that particular page, all within the right column DIV. So, suddenly, we’re left with left navigation, and not-quite-as-far-left navigation. I tried to explain the fact that having to left-justified navigations would most likely be confusing to the user, and that incorporating the navigation into overall navigation would perhaps be more advisable. They weren’t so sure, because they wanted to make sure that the topic navigation was in the face of the user.
After some discussions, it was then suggested that perhaps top navigation within the right DIV (the ‘frame’, if you will) would make more sense. At first, I wasn’t so sure because having two navigational areas - one top and one left - isn’t always the best idea. However, most situations also use this with TOP = primary/global nav, while LEFT = secondary/subject nav - not the other way around. In the end, I created three comps:
1. Integrated Left Navigation
2. Dual Left Navigation
3. Left and Top Navigation.
So, the result? Strangely enough, to me at least, the last choice seems to be the consensus winner. While I had my concerns about offering two separate navigation elements (well, four if you include the header and footer links - but don’t get me started there), it seems to work pretty well. Creating the ‘Inner Nav’ using a top tab-based navigation, if offers a way for the user to focus on the navigation inherent to that particular user-specific system (in this case “Orders”) as opposed to the more global (and generic) navigation on the left side. All of the items that the customer might need to use from within that Order space would be within that inner navigational space - and when they are done, they simply use the global navigation to the left to visit other portions of the site.
From what I know about usability, it seems to fly in the face of good design, but in this case it seems to make the most sense, and actually appears to work fairly well. I’m sure the usability folks will have plenty of words on the subject, but at this point, I’m having trouble finding it.
Daily Links »
