Speed vs Quality UI Pattern

Question

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}

Answer 1

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.

Answer 2

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}

Answer 3

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!)

Answer 4

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}

Answer 5

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