What's the best way to show efficacy/difficulty of a certain solution in guidelines?

Question

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?

Answer 1

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.

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?

Answer 2

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.

Answer 3

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.

https://developer.apple.com/library/mac/#documentation/userexperience/Conceptual/AppleHIGuidelines/Intro/Intro.html
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