We have a system where users should be alerted when different metrics goes outside of specified boundaries. The user should be able to configure these boundaries for each metric. There is a warning boundary and a critical boundary for each metric.

So for example, for the metric X (which in the normal case is 50) the user wants to have a warning alert when X > 60 or when x < 40 and a critical alert when X < 20 or X > 90. The critical range should be "outside" of the warning range.

We're having problems implementing an inuititive interface where the user configures these different alert ranges.

We've tried to implement this with a lot numerical inputs with lots of validation messages, but the interface gets messy and users have problems understanding the interface.

Any ideas of how to design this in a more intuitive way?

3 Answers 3


What about something like this? Basically a double range slider where the user sets the boundary between the OK and Warning, and Warning and Critical alerts.

The "normal" value is highlighted (popped out) of the usual number range.

The user could either drag the little boundary markers or you could make the labels (currently 19, 45, 85, 108) an input field so they can type in directly.


You could even provide further validation with the result in text. e.g.,
OK range: 45-85
Warn range: Below 45 & Above 85
Critical: Below 19 & Above 108

  • This is a visually very intuitive and simple, so I like it. The system would need to provide upper and lower limits in some way (as pointed out in my comment to BasBeasto) but I guess that's something we would have to live with!
    – Bjorn
    Aug 11, 2015 at 6:31

I just went through this exact exercise on a metering system. We established that a meter could only have 5 states.

  1. Critical (Above normal)
  2. Warning (Above normal)
  3. Normal
  4. Warning (Below normal)
  5. Critical (Below normal)

This seemed to provide enough flexibility without going overboard. Allowing the user to create any number of states has power-user potential, but only complicates things for the majority of users.

The graphical solution provided by @kerr looks great, however I've been bit numerous times on UX that looks good but is difficult to use. I would suggest that the solution provided by @kerr would be the output once the meter(s) are configured.

A simple tabular data entry like the following would allow the user to quickly and easily enter the acceptable ranges without having to understand how to use slider controls or something similar.

enter image description here


Are you looking for an interface for setting these boundaries or displaying the alerts? If you're looking for the input I would use something like this:

enter image description here Then if the user adjusts the warning bar past the range of the critical bar you can just have the critical bar extend simultaneously keeping it always greater or equal to the warning. This will save you from having to validate that the warning range is <= the critical range, and that all the values are withing the min/max range.

  • This is a nice suggestion, however doesn't this require that there is an upper and lower limit for the boundaries? How would you set 1000? (and you probably need to invert the colors, the gray color should be in the middle, but that's a simple fix)
    – Bjorn
    Jun 26, 2015 at 14:31
  • It does require there be an upper and lower limit, I figured there would be some sort of boundaries that you would expect users to fall between. You could implement it so the values are higher intervals or that if a user types in 1000 it just maxes out the bar but that certainly makes it less intuitive. Also yes inverting the colors would probably represent this better.
    – DasBeasto
    Jun 26, 2015 at 14:38

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.