2

I am trying to find some evidence against multi-colored navigation links, however it seems to be surprisingly hard to find.. perhaps not so many people have come up with the "innovative" idea of coloring navigation buttons with varying colors.

enter image description here

Also, if someone thinks that this is a great way of visualizing navigation buttons, I would be curious to hear that too.

In my opinion, the main problem here is that it is difficult to figure out which button is selected. The buttons stick on the screen and are used to indicate the selected option. I think this is pretty much common sense, however, some people I am working with on this project to think it is a "matter of taste"

| improve this question | |
  • It seems like a terrible design decision where all the navigation buttons are differently colored. It makes more sense to use 2 colors, where one of them is for an active state. (That also makes sense only if there are at least 3 buttons) – siddharthkp May 30 '13 at 19:04
  • Do they have different colors for other reasons than that it's pretty? – Koen Lageveen May 30 '13 at 19:04
  • Koen: Unfortunately no. siddharthkp: I think this is totally bad design, but can't seem to find any references to support my case to prove my point, and I would not like to set up a usability study to do it. I think not choosing this kind of "rainbow button" design should be obvious for anyone with any interaction design / usability background... Probably that is why it is difficult to find direct references as well – Skuirrel May 30 '13 at 19:13
  • Sounds like they're asking for some angry fruit salad. – Gray May 31 '13 at 16:42
5

A simple argument of consistency should suffice in an 'ideal' scenario. If the buttons are doing the same function (linking to a page) they should look and feel similar.

Using different colors also leads leads to the problem of highlighting everything. Usually, you choose a common theme for buttons and one for highlighting a 'selected' state. If you are using different colors, you end up 'highlighting' everything, all the time.

| improve this answer | |
  • RK: thank you for your advice. My problem is that I am trying to convince a person who has no background in interaction design or usability. However, I think this should make the point. – Skuirrel May 30 '13 at 19:33
3

I would suggest approaching it from a visual design perspective rather than a usability perspective. I only suggest that because the usability conversation has not worked for you. Going beyond the usability problems of highlighting a selected menu item, you could argue that multi-coloured navigation will make the color contrast of the design suffer. If there are too many colours happening at once, the areas of interest (call-to-action buttons, photos, content, etc.) will not stand out as much. This can be demonstrated easily by placing many colours against a white background versus two colours against a white background. Here is picture demonstrating good contrast: http://cdn.articulate.com/images/blogs/rel/uploads/2010/02/image11.png

This website offers a possible middle ground where the multiple colours appear on the hover state of the menu at the very top. It's visually striking but also very usable. http://www.fastcompany.com/

| improve this answer | |
  • Thank you Adam! :) Luckily, in our case, we have quite a good gfx designer who is using the color palette pretty sparingly. But I can see your point with limiting future possibilities. Really like the Fast Company web page gfx. Using the color palette sparingly has usability side-effects, though, when the site has more than three buttons, some of the colors are re-used, which makes unrelated buttons look related. But.. I hope I have gotten my point through in the team who is working on the project. – Skuirrel May 31 '13 at 15:59
0

Accesibility. Could a colour blind person be able to tell the difference in colours? Usually to show what is selected you would underline it or use high contrast. Color is a great way to make one button stand out for a call to action, but used on every button could make it as though the sections have unequal status. If that is important, a color blind person would need to know this.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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