User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm trying to come up with a good disposition of UI elements to help depict Function Speed vs Quality.

Can anyone point me in the right direction?

  • Are the Labels Right / Informative Enough?
  • Is the Slider the Right Control?


download bmml source – Wireframes created with Balsamiq Mockups

share|improve this question
up vote 11 down vote accepted

I think the slider's acceptable, but you should lead with the benefits, so it looks something like:

Faster Running Time |-----X---|---------| Better Quality 

People are smart enough to understand they're sacrificing one for the other, or at least not dumb enough to think they're going to get both.

share|improve this answer
+1 That's exactly the kind of insight I'm looking for... Thanks! :) – edgarator Nov 29 '12 at 3:17

Slider is the right control. Simplify the text to just the words Speed/Quality.

You could add a second visual to to represent the time. This would change size as you moved the slider accentuating the trade-off. The total length should represent the longest possible time. However this is a nice to have (;


download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
Beautiful Suggestion! :) – edgarator Nov 30 '12 at 1:04

You might take cues from Photoshops jpeg save options which presents a similar tradeoff, file size (economy) vs. image quality. When the slider is slid 2 things also change, the number in the Quality box (currently showing "10" here) and the file size (to the right of the slider, "619.4K" here), so the user gets feedback on what the slider setting means. (This is an old, 2008 version of Photoshop, but that's still 20 years of refinement!)

Photoshops jpeg save settings

share|improve this answer
Hi Obelia, I actually looked at this and to microsoft internet security settings to give me an idea, but didn't like the examples, I think they were a little bit convoluted... I'm still trying to remember good examples of it, but the answers in this post are being brilliant so far. – edgarator Nov 30 '12 at 1:52
+1 for the example to set context of what others do. – JeroenEijkhof Nov 30 '12 at 5:53

Here's another idea based on Rachel Keslensky and Lisa Tweedie answers, just for the sake of enjoyment! :)

However, as I see it this is not a standard control.


download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
I quite like that idea. It gives equal weight to the two variables and reinforces the weighting. Compared to my solution it loses the explicit link with the exact quantity time. In my design I focused on that because I made the assumption that this may be the variable people would most be interested. This may be incorrect of course! – Lisa Tweedie Nov 30 '12 at 8:35

I would add "quality" label is suffisent than "better quality" and "running time" rather "faster running time"

share|improve this answer

Your Answer


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.