Are there any guiding principles around what colours might represent beginner, intermediate and expert users in a forum site?
At first I was thinking green (beginner), orange (intermediate) and red (expert), but I'm concerned these colours are already associated with other tasks/actions.
The use of distinct colours (e.g. green, orange, red or bronze, silver, gold) can be subject to interpretation, as there are usual meaning associated with specific colours depending on cultural, language, context or any other number of factors. A similar question was asked previously on UXSE, where the target audience was for young children: Which colors would best convey 3 difficulty levels?
A different strategy to the use of distinct colours would be the use of saturation or brightness to indicate a progression, which is possibly clearer compared to the use of different colours.
I think given the possibility of different interpretation of colours, it is good to combine this with perhaps symbols or icons that also indicate a progression in the level of skills (perhaps stars). This will work well in mobile apps or mobile websites where there may not be enough space to display text.
So I would suggest a combination of colour and icons, perhaps as below:
My usual advice for a situation like this is to suggest going back to the core concept of what you're trying to convey... and then to look at other places where colour is used to convey a similar concept.
In this case, if you're looking for a visual metaphor to convey a level of mastery in a given field then the metaphor that leaps immediately to mind is that of medals or certificates:
Because gold and bronze can be difficult to distinguish (and because a medal to say "I have no mastery" feels counter-intuitive) I'd actually suggest just having the following:
...but on top of this, I'd strongly urge you to consider what the benefits of having such an indicator actually are, and to ensure that the criteria by which these are awarded actually serve some purpose.
Many forum sites based on popular platforms have a "user rating" that is based solely on post-count. The result is that a user can spam those forums with drivel and gain a high rating, whilst a user with a low rating might have posted a small amount of extremely high value content.
This is part of why "likes" or "votes" on contributions are often used instead, which can then be aggregated to provide some kind of rating. This approach ensures that the expertise level shows that other users found contributions beneficial (or entertaining) rather than just showing that somebody has posted a lot.
There are also several ways that you could vary the "rating" to make it more informative. Some examples would be:
This is a complex matter pertaining to some principles of gamification. If gamification is what you are aiming for, then your concern might be justified.
According to Gartner, gamification is such a sensible matter, that recent gamified applications were bound to fail meeting business objectives, primarily due to poor design
The cultural aspects are so inextricable, next to the overall principles of consistency and cohesion derived from the particularities of the project, that I won't even name them.
There isn't such thing as a universal principle with regard to color semiotics. According to this article Which color converts the best, there were some studies according to which red and orange buttons perform better than the green ones.
However, this was only an appearence. In reality, color makes little difference on its own. "What is more important is how it changes the visual hierarchy of the whole page, how it makes the call-to-action stand out. Plus additional information and wording of the button itself."
It makes sense.
I have a pertinent suggestion, but I must say that I don't know much about the context of your business and I cannot guarantee that it will work.
Speaking of visual hierarchy, "expert users" represent the highest class, according to your description, so you must find a way to make it stand out the most. You can achieve that through color contrast. Is your background green? Than make that button red, in order to obtain a complementary contrast, which is the most powerful. Then, expert users will pe perceived as dramatically important.
the "intermediate" class should be just a tad more obvious than the one representative for beginners. Once again, the color choice depends on the overall design, in the sense that you should go for a "middle"-powered contrast.
the "beginner" class should be less intrusive, but still in color harmony with the chromatic environment. Something like an analogous contrast.
I hope this helps. If I come up with new ideas, I will update the answer.
Made a design for a gaming service some years back. The bar below indicated ranks in a modified Elo ranking system. The design scheme was inspired by karate belt colors. The color blocks were displayed near the profile picture of each ranked member. White [new beginners] to black [experts]. I haven't included any theory, but I just thought you should have the input.
EDIT: On the index page you saw the whole rating range which, I believe, helped the understanding of the colors.
download bmml source – Wireframes created with Balsamiq Mockups
