I'm developing a web application where the user builds beer recipes. When you're building a beer recipe, it's important to know how the different parameters align with / deviate from the 'accepted' values (as defined by the style you're going for). For example, if you're building a lager and add a bucket of hops, it'd be nice to know at a glance that your hop levels are far too high.

Traditionally this has been approached in a "slider" approach. For example (not my app): enter image description here

In this image, you can see the parameter's value on the left, and the black marker on the bar represents the value's position in the "sweet spot." The really unfortunate thing about this problem, is (for my application at least) that there's going to be multiple of these indicators close to each other, so repetition can be killer for visually complicated sliders.

My problem with the slider approach, is that while it's relatively intuitive, it gets cluttered when there are multiple near by each other.

My only proposed solution to this, is to simply use a color gradient/stepped gradient and display that color as the "status." It's not dramatically different from the slider approach, I'd just be selecting the color the black marker is at.

Is there a better way to indicate accuracy/deviation for a given range?

2 Answers 2


I tried to design an alternative to sliders for your question. It is intended to visualize data with less clutter and better readability. It isn't much different from sliders, but features:

  • more white space
  • rows differentiated by colors (as offered by @Monomeeth)
  • indicated standard and selected values
  • more details provided when parameter is selected

Overview of parameters

Both standard and selected values are shown. Fields on the right indicate the selected value.

Overview of parameters

One parameter selected

Color parameter is selected. Labels for standard/min/max values are displayed.

One parameter selected

Expanded view

All parameters are expanded, all details are shown.

Expanded view

PSD file is here for anyone interested. Hope that helps, but the problem is that I have no idea how to implement this thing.

  • I like the approach. As far as implementation, since it's a web app, the OP will just have to code it to function this way. Thanks for sharing your PSD as well. :)
    – Monomeeth
    Apr 28, 2016 at 9:51
  • Glad you liked it :) Apr 28, 2016 at 9:57
  • This is a marked improvement to the slider approach, and I definitely like the way you've gone with it. I'll be accepting this answer, unless someone submits a better one today sometime. Thanks!
    – Ron Brogan
    Apr 28, 2016 at 13:08

It sounds like you actually like the slider approach generally, so I'd suggest keeping that and finding a way to minimise your concerns.

I'd probably use some background shading to help differentiate your sliders so that the risk of error to your users is minimised. Below is an example of what I mean:

enter image description here

Obviously you will have to choose your colours and transparency to suit, but you get the idea.

Another option could be to use horizontal lines, but I think the shading will work better in this scenario.

  • How would changing the colors reduce the visual clutter the OP was concerned about? Apr 28, 2016 at 5:04
  • 3
    It's not about changing colours, it's about using colour to differentiate your rows (in this case sliders). Doing this helps users not get lost following which slider is for which setting. I guess an analogy would be an Excel spreadsheet with hundreds of rows of data. By shading each alternate row it's a lot easier for users to follow the data across all the columns within each row. In a nutshell, my answer suggests using this approach to minimise the possibility of any clutter causing users to slide the wrong slider, etc.
    – Monomeeth
    Apr 28, 2016 at 5:36

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.