I have an app where I need to show how likely an item is, e.g. "very likely", "quite likely", "not very likely". What kind of icons could I use to show this?

I don't need any pre-made icons, I would likely draw it myself to fit the app. I'm just having trouble trying to come up with a simple concept to represent probability...


Presumably, you have good reason for using a graphic code for this rather than words or numbers, (e.g., to facilitate easy scanning through a lot of data for certain levels of probability). Assuming your users (correctly) conceptualize probability as a quantitative proportion, here’s a few of thoughts:

Mini-pie chart, being a circle with some portion filled in to represent the probability.

  • Quarter filled = very unlikely (but hardly impossible).

  • Half filled = as likely as it is unlikely.

  • Three-quarter filled = very likely (but hardly certain).

Mini bar graph with one rectangle filled to indicate the degree of probability. This is better than the pie chart when you’re showing actual probability values, not ordinal quanta like “very unlikely” – “about 50-50” – “very likely.”

Splatter frame, being a square with a scatter of dots, to suggest randomness more than a pie or bar.

  • A few dots = very unlikely

  • Half-filled with dots = as likely as it is unlikely.

  • Three-quarter filled with dots (maybe some dots overlapping other dots) = very likely.

Shade coding, sort of the same idea as a spatter frame, but more suitable for small icons, especially icons that code other information (e.g., by their size or shape). Avoid three shades of gray –they may be hard to tell apart. Instead:

  • White (maybe with one small black dot to suggest some uncertainty) = very unlikely

  • Gray = as likely as it is unlikely

  • Black (maybe with one small white dot) = very likely.

Crispness coding, where degree of blur implies low probability. This is good when you are trying to represent the uncertainty about another value (e.g., by the blurriness of a frame around the variable’s value, or by blurring the ends of a bar in a bar chart).

Color, which can be used redundantly with shade to maximize accessibility. This is good if there is an emotional valence associated with the probability values. Stick with simple population stereotypes when choosing colors (e.g., green, yellow, red).

For general principles on graphically coding variables see my post Putting the G into GUI.

Graphic codes are not necessarily self-documenting, so be prepared to provide some, perhaps as a legend or as redundant text for each value. This could be the actual probability value, if it is known, or ranked word phrases like you suggest. Both your graphic code and your word phrases may need some testing. The phrases you provide for example may have different meaning for different people and contexts. Is “quite likely” more likely than equally likely and unlikely, or just not particularly unlikely? Is “not very likely,” still likely, just not very likely? If so, is it more or less likely than “quite likely”?

| improve this answer | |
  • 1
    These are some really great ideas. The last paragraph should really be emphasized. – jensgram Nov 18 '10 at 7:51
  • Excellent suggestions, thanks. The pie chart one did occur to me, but I wasn't sure how effective it would be. I like the "splatter" idea though, and colour is another good option. – DisgruntledGoat Nov 18 '10 at 13:43

If your users are fairly technical/logical/mathematical inclined you could—instead of an icon—present the probability as a number, e.g.:

  • (.9) with title="Very likely"
  • (.6) with title="Quite likely"
  • (.2) with title="Not very likely"

The values are just my take on the relative "distance" between "very likely", "quite likely" (more than 50%), and "not very likely". You should adjust those to fit your (user's) needs. If the values can actually be calculated that might prove even better (given that the numbers are still easily readable/understandable).

Alternative notations include P(.9) and P=.9.

| improve this answer | |

Please be more specific.

You could, I suppose use a green dot for "very likely", a yellow dot for "quite likely" and maybe a red dot for "not likely". But that is not very descriptive, and fairly generic. We need more details please. What are you trying to symbolize?

| improve this answer | |

Why not just use the percent sign (%) with titles like jensgram suggested? 50% 75% 100%

| improve this answer | |
  • 1
    For the same reason that traffic signals don't use words instead of colors. Graphical communication is quicker and less thinking intensive than textual communication. If you see 10 pie-charts on screen, you can easily get an idea of the relative probabilities compared to having 10 different numbers. – Lèse majesté Nov 18 '10 at 11:03
  • Actually, I think 10 different pie charts would take me a while to comprehend and compute. I don't like the % numbers, but the answer from jensgram looks like something I could visually recognise immediately. – Bernhard Hofmann Nov 19 '10 at 10:47
  • @Bernhard: I very much doubt that. You may think that numbers would be easier to compute, but I guarantee you that pie charts will be quicker. It's a lot easier to tell that a pie chart at 75% is roughly double a pie chart at 37% than having the numeric representations instead--especially if there are multiple numbers on screen and the two numbers aren't right next to each other. One requires extra language recognition and processing, the other is purely visual. – Lèse majesté Nov 19 '10 at 14:06
  • Just think about how often you have to gauge the relative sizes of objects (to perceive distances, proportions, movements, etc.) every second your eyes are open. Even if you're a professional accountant, you'll be doing those types of comparisons and recognition far more than you're processing numbers. – Lèse majesté Nov 19 '10 at 14:09

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