7

For the past few weeks I have been working on reconstructing my employers side navigation. While attending a recent meeting, discussion on side navigation hierarchy arose and there was a debate on how to display hierarchy levels that would best benefit the user.

Examples Include:

Side Navigation with all levels on left side.
Levels defined by text size.

Side Navigation, levels defined by text size & on left side

Side Navigation with indented levels.
Levels defined by text size and extra padding.

Side Navigation, levels defined by indent & text size.

Out of these two examples what provides a better user experience in identifying sub-categories within a side navigation? Are there better methods to display sub-categories within a side navigation?

Improve this question
2
  • 2
    It's more conventional to put the expand/contract button to the left of the item. The arrow symbol to the right of the text suggests to me a submenu will pop out to the right.
    – obelia
    Dec 7, 2012 at 19:03
  • @Obelia: Yes that is correct unfortunately due to the websites current right arrow convention I have to go with this look for now but it has been taken into account and will be handled upon a future release.
    – Courtney Jordan
    Dec 10, 2012 at 12:41

5 Answers 5

Reset to default
2

One of the benefits to the first option however is it leaves you more room for variable length link text. Depending on your use case the benefit of having indentation might be mitigated by the negative effect of wrapping text:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I think option 1 could be effective if you use something other than size to communicate the hierarchy to the user:

mockup

download bmml source

This option maximizes available space for link text, which can matter depending on the viewport through which your user accesses the site.

Additionally, the user's eye is able to travel along a single vertical path to evaluate their navigation options.

My suspicion is contrast is a "primary" perceptive function, not a reflective function on the user's part. They just see the contrast without having to think about it.

Option 2, by using white space to create delineation, might require "secondary" perception. The user's brain would engage in cortical reasoning to group the items together.

I don't know enough about human psychology to categorically state whether there is any meaningful difference between the two visual representations and cognitive load, so if anyone can provide a link or set me straight that would be great.

I would just prototype the two using the longest navigation labels you think could possibly appear and do some usability testing. That data would show if there is any meaningful difference. It's possible they're both effective.

Improve this answer
2
  • Your examples are very supportive. After viewing your colored navigation I think items on the same level may be a bit difficult for users to grasp.
    – Courtney Jordan
    Dec 10, 2012 at 12:53
  • No problem--you know your users and your use case best. It would be cool to see what your final result ends up being.
    – Charles Wesley
    Dec 10, 2012 at 16:28
3

2nd one is better, fast glance and the user will know where they are and how deep they are on the website. take a look at what Google is saying about this kind of navigation.

I wouldn't make the text much smaller, because that would make it hard to read. but indenting sub categories is a common practice. Think about Windows Explorer view

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
5
  • I'm more fond of the second example vs the first example. My only concern was the second example is visually it looks ragged with the extra padding.
    – Courtney Jordan
    Dec 7, 2012 at 15:27
  • Last few times I used border-left about 5-10 pixels and solid colour. It does look ragged, and it's done so it would be easier to tell where the user is. Using 2nd example the user will be able to tell almost instantly where he is. Using 1st example the user will have to spend more time trying to find out where he/she is.
    – Igor-G
    Dec 7, 2012 at 15:36
  • @CourtneyJordan you don't like tagged edge and you want to come up with some kind of "nicer" solution to this problem?
    – Igor-G
    Dec 7, 2012 at 15:43
  • 1
    I am open to other examples available. My main goal is the final product is beneficial/easy to use for the client. With your example above it feels more structured using indented categories/sub-categories with borders. Great Example!
    – Courtney Jordan
    Dec 7, 2012 at 16:20
  • I think it can depend on the use case. Personally I like the second option for short labels or where your users have larger resolutions. The problem for me comes when the labels become too long, or your left column needs to be a smaller percentage of the total viewport width. I posted an answer with an alternate approach to option 1 just for the sake of comparison/conversation
    – Charles Wesley
    Dec 7, 2012 at 17:02
1

The arrows are too distracting, especially when they don't account for levels. You should do something similar to Windows 7 File Explorer, they place the arrows right before the item names, rather than aligning all of them to right. enter image description here

Improve this answer
0

I would say the 2nd example with equal font sizes is good. Other ideas are to emphasize hierarchical levels by brightness values and font weights.

Improve this answer
0

I find the side nav at Pulse (http://www.pulse.me/) to be particularly well-done. May not suit your case(s) without a more detailed understanding of your needs, but worth checking out.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.