Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I've been working on a side navigation reconstruction project that is now entering the design phase. Through research i've noticed many sites using different colored text to highlight/bookmark user location or a background color with different text color. Examples below from Twitter Bootstrap and Google News.

Twitter Bootstrap Navigation

Google News Navigation

In providing a better user experience do users need heavy colored indicators (background colors) to represent page location or will a simple text colored link item work?

share|improve this question
add comment

4 Answers 4

up vote 3 down vote accepted

That depends on how much you want to emphasise it. A background colour is definitely more noticeable than a coloured link, but it is also more distracting.

You need to decide what the best balance is for your application as one is not always better than the other.

share|improve this answer
    
I think a colored background with various hues for different states is the way to go. I also looked into some less distracting colors which will indicate where the user is but not draw too much attention. Thanks for your help. –  Courtney Jordan Dec 3 '12 at 13:04
add comment

There are really more than two choices.

You can use background shading or hot colors like you suggested above. But you can also change the font weight, use bullets, or add indentation. In short, you can use any of the Gestalt principles to visually differentiate the current option. Whatever works with your site design.

I might add, that you should be careful about using more than one strategy at the same time (e.g. bullets and shading). It's usually too much.

Conversely, you should also make sure that whatever you go with has enough visual contrast from the other options to set it apart. This is a question of degree more than type. There are certain exceptions, such as high contrast mode, where using one strategy only (color) won't work because the color information gets removed before display.

Remember your colorblind combinations and use a contrast checker if you need to.

share|improve this answer
    
Isn't it crucial for accessibility to offer two different strategies? E.g. a high-contrast-mode user would have no clue which page is active because there is no color information available at all. –  unor Nov 29 '12 at 13:06
    
@Unor: You are correct it is crucial to offer different strategies but before I can move forward with that I need to see which navigation pattern (examples above) provides for a better user experience. I'll be investigating color after the pattern has been established. –  Courtney Jordan Nov 29 '12 at 15:08
    
I'll point out that I said that you should "be careful" about using more than one strategy at the same time; not to avoid it. There are certainly exceptions, and you've pointed out a very specific one: using color only doesn't work in high contrast mode. I've edited by answer to clarify. –  Jeremy T Nov 29 '12 at 15:42
    
@Jeremy: Thankfully I have a test subject that will be helping with high contrast matter but your contrast checker is a great resource and will really come in handy. –  Courtney Jordan Nov 29 '12 at 16:16
add comment

You should definitely indicate the current page nav item and it should not be a link (that is it should not be clickable to reload the current page and not have a pointer change to indicate click-ability, it could still be link that is disabled).

There are many ways to indicate the current page nav item: different text color, background color, border box, a different margin (indented), etc. When I do navigation menus I think of how 3 states should be indicated: a plain active link to another page, the current page, and the hover over an active link (even though this isn't useful on touch UIs it's useful on mouse driven UIs). All 3 states should be clear and obvious and not require experimentation on the user's part to determine what they mean.

Personally, I find the google news indication by just using a red text color not enough, I'd prefer a stronger indicator.

share|improve this answer
add comment

With accessibility in mind, when using color to highlight the current page in the menu, you should offer a different way (not depending on color) in addition.

See WCAG 2.0: 1.4.1 Use of Color:

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

See the technique G128: Indicating current location within navigation bars. It gives examples:

  • different background color + adding check mark icon
  • adding asterisk character
  • different background color + disabling link (*)

(*): it's arguably what "disabled" means here; is it enough to "unlink" it (and don't offer a click mouse cursor), or does it need to be greyed out or something?

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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