User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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.
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?
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.
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.
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.
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:
(*): 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?
