I am working on an application where users get to rate various things. In one category, they are rating how "good" something is, and so I put together a little 1-5 rating system with star icons, like Netflix has.

But now I need a way for users to rate how difficult a task is, again from 1-5. I'd like to use the same sort of UI element, ie users can select from 1-5 of something to enter their selection. What is a good icon to use for this?

P.S. I know this question is related, but as this is a business application, I don't think I should use icons of skulls or daggers. =)

  • 1
    What about red stars? – Matt Rockwell Jul 29 '11 at 15:17
  • 1
    Can you turn the rating around and rate how easy it is? – Patrick McElhaney Jul 30 '11 at 12:36
  • Is it like a ski slope or Legos, where more difficult is "better" (until it exceeds ones abilities) or is it like starting a lawnmower, where difficulty should always be minimized? – Patrick McElhaney Jul 30 '11 at 13:02
  • @Patrick If there was a way to convey "easiness rating" to users more effectively than "difficulty rating," it'd definitely be worth swapping it around. But I'm even more stumped regarding icons that express "ease"! – Steven Noto Jul 31 '11 at 1:58
  • Boxing gloves. Four boxing gloves, and you're really fighting with it. – Volomike Apr 29 '16 at 2:45

14 Answers 14


I think that color will work better here than icon shape.

enter image description here

  • 11
    surely this is colour and number/position of bars else it may be an issue for people with colour perception difficulties – jk. Jul 29 '11 at 19:53
  • @jk You got me thinking about color perception, so I read a dozen articles about it. The most common solution of this problem for color blind people is to gradually increase brightness/contrast for 1-5 bars. Anyway, number of selected bars will clearly indicate how difficult task is even without a color. – Dmitry Semenov Jul 30 '11 at 6:06
  • 6
    yes, the advice i've always been given is to design in black and white first and then add colour after. despite doing this we still managed to find places we slipped up – jk. Jul 30 '11 at 7:58

Difficulty can be expressed in several ways:

  • Gears or brains - More means increasing mental difficulty.
  • Shovels - More means increasing physical difficulty.
  • Clock - More means increasing length in time, and as such, motivational difficulty.
  • 3
    +1 Sticking to the "star rating" pattern of one shape, repeated 1-5 times makes it possible to show the average rating in the same manner (e.g 3.25 = 3 full shovels and one partially visible shovel). – Patrick McElhaney Jul 30 '11 at 13:59

While I agree with @Dmitry about using color, I think the two can work together also.

Take the trail ratings used on mountains, for instance:


  • 2
    I really like the analogy here. I might worry about non-skiers not getting the reference... you could show a range from a green circle to a yellow square to a red diamond to work in the green/red spectrum, but then maybe that would be confusing. – Steven Noto Jul 29 '11 at 18:57
  • 3
    For what its worth, I've never laid eyes on these symbols before and would have no idea what they meant if they popped up in an app. – Graham Aug 1 '11 at 12:53
  • @Graham, right, but these particular symbols and their meanings aren't really what I was suggesting. Not so much as just a real-world case of shape & color working together to provide levels of information. – tksb Aug 1 '11 at 14:59
  • 2
    The trail ranking symbols work by rote memorization. There's nothing inside those symbols that indicates what they mean. Even the green circle representing "easy" gets lost when you don't also show yellow for "medium" and red for "really hard". When it comes to figuring out which trails are dangerous, user will take the time to learn the system. But in a software app, they won't. My point is that this scheme relies on plain memorization of symbols, and that's exactly what users do NOT do in software, unless truly forced. – Graham Aug 2 '11 at 17:22
  • Unless truly forced or color blind! – Barfieldmv Aug 19 '11 at 8:15

The nicest one I can think of is the Wireless type of icon that has the scale of 1-5 and at the same time can be color coded for priority/emergency (red for show stopper, orange for medium, etc...)

The Images below will show you the idea, but they are only on a scale from 1 to 4 you can easily create your own set to go from 1 to 5.

enter image description here

enter image description here

enter image description here

enter image description here

  • 2
    the problem here is that I would associate this icon set with other places I'd seen it: like my mobile phone reception indicator; I would have no idea what it would mean in this scenario. In other words: be very careful what else the icons you intend on using look like.... – colmcq Aug 3 '11 at 9:36
  • I agree with your point but, this can be changed and/or adapted to go with the reception indicator paradigm, for example when you have all 5 bars the color should be green (meaning all is ok, your good, the task is easy), having one red bar would mean (ups we've got a problem, the task is extremely difficult). There will be two indicators for the user, the most important one being the color and then as a way of expressing the gravity through forms would be the bars. – asuciu Aug 5 '11 at 14:17
  • Yes a color blind person might struggle with this. – NSjonas Nov 7 '13 at 0:18

Consider a 'star rating' system, with each 'star' icon representing the skill or profession in question.

Think about some recipe books: many rate difficulty by a number of chef's hats. Likewise, I've seen some software manuals use computer icons, and I've seen instructions for knitting show pairs of needles.

Similarly, you could swap in an image that represents your domain - paintbrushes for art, for example.

That said, don't use an icon alone - there's no images that unambiguously signify 'ease', in any field. Always label your 'stars' with the text "Difficulty:".

  • 1
    +1 for domain-specific iconography! And I agree, labeling is vital. – Steven Noto Jul 29 '11 at 22:29

What about using some kind of progression of repeated shapes - perhaps not stars, but arrows ...

Shape progressions

The idea being that "more shapes" = "more effort".

You could combine this with colours if you like, but having distinct shapes has benefits for

(a) anyone with colour vision deficit; or
(b) anyone who prints the page in black and white.

While I like the trail ratings suggested by @tksb, having an obvious progression means one less puzzle for your users.


Sweat-drops? Like in anime?

Honestly, I think you can stick with stars. People will understand, if you give a key.


How about emotive icons. Is it not fair to say that if a task is harder, the user will more likely experience negative emotions and vice versa. I'd have a range of icons: happy face.....sad face.

  • 2
    I'm hesitant about the assumption that "if a task is harder, the user will more likely experience negative emotions." – tksb Jul 29 '11 at 18:10
  • I like the idea here, though I think some tasks would fit this metaphor better than others. There's also the risk that it would be confused as a Like/Dislike rating. – Steven Noto Jul 29 '11 at 18:54
  • More importantly, do you really want to represent your product with sad, angry and frustrated faces? – Jimmy Breck-McKye Jul 30 '11 at 9:07
  • Like the Wong-Baker FACES Pain Rating Scale – Patrick McElhaney Jul 30 '11 at 13:33
  • 1
    thank me later: hyperboleandahalf.blogspot.com/2010/02/… – colmcq Aug 3 '11 at 9:41

In the past when breaking up a complex task into smaller items and wanting to indicate to a client how easy or difficult an individual task is, then I've used the following types of symbols.

They merge an element of time via the clock for how long a task takes to do and color to visual indicate a relative difficulty in relation to other tasks. For those that are color blind or cannot see color at all, the time on the clock also indicates the relative difficulty.

The symbols don't actually indicate real time just a scale of difficulty. This could be adapted to a 1-5 scale easily, but it only works if your tasks are indeed difficult in terms of time to complete as opposed to physical or mental effort.

enter image description here enter image description here enter image description here

[edit] - this is how they appear according to the Colorblind Filter for red/green colorblindness.

enter image description here enter image description here enter image description here

  • But, only testing for one form of colour blindness. Not everyon who is colour blind suffers from protanopia (inability to see red), and not all protanopia sufferers are completely incapable of seeing red. – Bevan Aug 1 '11 at 0:44

I think this is very easy to understand:

  1. Hard: A smiley sweating with a smug face
  2. Normal: A smiley with a normal face
  3. Easy: Smiley is smiling
  4. Really easy: Smiley is whistling

The time indicators could be clearer and also be more colorblind compatible by also showing slices: Colorblind time indicators

(Using slices can also be used on other icons to work together with colors.)


I thought of something similar to colmcq's answer; Infant's face for easy, adult's for medium, old for hard. (Borrowed from a submarine sinking game for Win 95)


There are some good ideas here, but if you've already used stars, I'd stick with stars. I assume you have some sort of legend on your existing scale, such as "Poor" under star #1 and "Excellent" under star #5. You could put "Very easy" under star #1 of the new rating and "Very hard" under star #5 of your new scale. I think mixing icons, such as using stars for the "goodness" scale and hammers for the difficulty scale, is cute, but you run the risk of the screen appearing too cartoonish and unprofessional. Having multiple different icons within a scale would be worse, imo.


How about using the Karate belt colors? Maybe too niche, but the higher the belt, the more complex the task?!

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