Background: I'm in the process of writing guidelines for use within the company. These guidelines list all sorts of possible solutions to a given problem, and each of them are rated according either to its difficulty or to its efficacy, or both.

Question: What's the best way to show these values?

Current solution: I'm currently using two systems: a 3-stars system for the efficacy, and a 0-to-100 gauge for the difficulty. They are both color-coded: green when good for the company, red when bad.

I've looked at sites like ui-patterns.com but sadly nothing comes close to what I'm looking for.

Do any of you have any insight on what's considered best practice here?

  • Does it mean that less efficient but easy-to-do solution could be chosen instead of efficient but difficult one? Maybe, it's a good idea to rethink this and make things simpler by assigning "desired", "ok" and, for example, "not recommended" badges to every solution so it will not depend on difficulty but rather on... efficience only? Guidelines are always about recommendations so it should be obvious that is a recommended way and which one is not even if one is more difficult than another. Also, keep in mind, that "difficulty" could vary from one person to another. Nov 30, 2012 at 9:53

3 Answers 3


The problem is you're rating among three different dimensions: ease of implementation, effectiveness, and potential outcome. Ideally you want a simple icon that shows all three at once so it's clear that none of these can be taken by themselves.

Here's an example of a possible solution using an "analog clock" metaphor:

  • The more of the circle is filled in, the more effort is involved.
  • How "bright" the color is represents its effectiveness.
  • Whether it's Red vs. (neutral) Grey vs. Green shows how bad or good the idea is.

enter image description here

All of this being said, I don't think you need color -- why the heck are you showing "bad" solutions if you know they're already bad?


Best practice is hard to come by and is heavily dependent of what you want to show. The following suggestion is combining both efficiency and difficulty in the same graph.

  • Item 1 represents an item not efficient nor difficult, thus I’ve colored it red.
  • Item 2 is efficient but not very difficult so I’ve colored the item yellow.
  • Item 3 is difficult, but not very efficient – yellow again.
  • Item 4 is both difficult and efficient, thus I’ve colored it green.


download bmml source – Wireframes created with Balsamiq Mockups

I’m not sure what the accurate name for this diagram really is, but I know it as a four field diagram. Using the four field diagram could do in this situation if both efficiency and difficulty are equally important.

  • That is indeed a good answer to my question but unfortunately it covers only 90% of my guidelines. I realize now that I should have said I sometimes need to show only one of the two, either efficacy or difficulty. I would settle on this 4-values system (solutions categorized as (1), (2), (3) or (4) as in your graph) if I did not have this other concern.
    – jvzr
    Nov 14, 2012 at 12:45

One of the main goals of any styleguide is to promote a consistent UI by removing choices. Rather than rating solutions, present the preferred solution and the deprecated solution. If conditions require it, also present alternative solutions, but explain when and why each should be used.

Another way to approach this, is to step back from a specific set of interface problems and discuss design principles first. Most other styleguides, see below, frame the discussion of rules with a discussion of principles up front.

http://developer.gnome.org/hig-book/3.5/ http://www.labor.ny.gov/UX/guides/introduction/index.php
http://msdn.microsoft.com/en-us/library/windows/desktop/aa511258.aspx http://usability.gov/guidelines/index.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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