Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
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. –  alexeypegov Nov 30 '12 at 9:53
add comment

3 Answers

up vote 0 down vote accepted

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?

share|improve this answer
add comment

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.

mockup

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.

share|improve this answer
    
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 '12 at 12:45
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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