17

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.

  • 1
    I had a similar case in the past.. I went with green (or bronze), silver and gold.. I believe it recalls instantly the meaning of levels.. – Felipe S. Jul 15 '16 at 3:40
  • Welcome to the site, @Felipe. Did you study user perceptions with your past case at all? Or is it just your own perception that it "recalls instantly the meaning of levels"? – Graham Herrli Jul 15 '16 at 3:57
  • @Felipe, thanks for your answer! Also interested to know whether this was tested with users. Although if not, I can confirm it made perfect sense to me as soon as I read it. – Jacquip Jul 15 '16 at 4:15
  • Is there any particular reason that you want to use colours to indicate the different levels of skills (since colours can be interpreted in different ways)? Would icons be more effective? – Michael Lai Jul 15 '16 at 4:33
  • That's true. Although, on this particular site users have an image (which they upload) as their 'icon'. I think a image and an icon could be visually busy and a colour system may better integrate into the current design. I think your answer below is a good one as it helps visually represent progression. – Jacquip Jul 15 '16 at 5:22
31

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:

enter image description here

  • 1
    +1 - Good answer. Small nitpick, did you mean (e.g. yellow, orange, red..)? – DasBeasto Jul 19 '16 at 13:24
  • @DasBeasto Good pick up. I changed it to green, yellow and red. – Michael Lai Jul 19 '16 at 13:40
  • 2
    Also, for colour-blind users, don't forget to provide other means of distinguishing between the levels. – Yvonne Aburrow Jul 20 '16 at 8:41
  • 1
    @YvonneAburrow that was my intent with the last iteration of my solution, but an important point nonetheless :) – Michael Lai Jul 20 '16 at 9:12
  • That's why I like your "remove colour bias" version :) – Yvonne Aburrow Jul 20 '16 at 9:27
6

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:

  • Gold - top level
  • Silver - second level.
  • Bronze - third level.

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:

  • No emblem - Beginner (no mastery)
  • Silver emblem - Intermediate mastery
  • Gold emblem - Expert mastery

...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:

  • Turn it on it's head for a "training wheels" metaphor (new users have "help me, I'm new" badges that go away through use, as opposed to established users having an "I'm better than you" badge)
  • Provide topic/subforum specific mastery levels instead of just one for the whole forum, so that a field of mastery is expressed as well as a degree of mastery.
  • 1
    I'm pretty impressed with the Stack Exchange system of points and badges. Works for me! – Yvonne Aburrow Jul 20 '16 at 8:42
5
+50

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.

  • 1
    Thanks for the link to the awesome "Gamification at work" book - I started reading it, and it is excellent. I would recommend it to others too. – Yvonne Aburrow Jul 20 '16 at 9:28
  • Hello, Yvonne. I'm glad that you have found it helpful. Feel free to recommend it to whomever needs this information. – Mircea Jul 20 '16 at 15:36
0

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • 2
    Nice, but only works if people understand the karate levels? I knew the lowest one was white and the highest one was black, but had no idea about the others. – Yvonne Aburrow Jul 20 '16 at 8:44
  • 1
    @YvonneAburrow I was only providing one solution out of many. I think that the uxd just should come up with an idea and then test it. Because I don't see any common or standardized way of doing it. I believe that this is in the same category as "rating" which is seen done in a variety of ways. So to answer your question – it does not matter that you are not familiar with karate levels. You make up a level of expertise indicator in your system that fits your context and then go test it. NOTE: I just updated my post a little. – JW_ Jul 21 '16 at 13:37

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.