enter image description hereI need to show 100's parameter & its current value with respect to Upper/Lower Control value and warning value. Each parameter has different Control/Warning line.

  • If value is close to warning line - show it as warning parameter
  • If value has crossed warning line & close to Control line - show it as different category
  • If value has crossed control line (upper/lower) - show it as different category.

    Please suggest a better (graphical) way to visualizing this.

I designed a mockup by having a grid of parameters with each row having a column of this image representing its value between Upper-Lower limit.

Yellow line represents Warning, but i am having difficulty in differentiating/visualizing when it crosses Upper/warning limit

  • Can you provide some visual efforts of the work you are doing so far? What is the larger context, and what are some constraints? Please be more specific and provide details....
    – Mike M
    Apr 17, 2019 at 22:42
  • I have updated my concept/design thoughts. Please share your idea or help me in refining this. Apr 17, 2019 at 23:04
  • You said there are 100s. Hundreds of individual parameters to set? What is the surrounding data, layout, and how does a user save these? Are they prevented from saving? Given a warning?
    – Mike M
    Apr 17, 2019 at 23:07
  • does a user input any values, or is this view only? Can they act on values that violate the threshold?
    – Mike M
    Apr 17, 2019 at 23:21
  • This is just for visual presentation of all parameters. No edit/update capability needed. User need to quickly preview the summary of each parameter & how its current values with respect to other control/warning line. Apr 18, 2019 at 21:53

1 Answer 1


Give the user the visible values. Show them the range, and show how much when the violate the range.

I'm not totally clear, but here's a shot.

You have a series of parameters. Right now you indicate a range, but without the values visible it's hard to know how close to the thresholds I am in exact terms. You may have one range from 100 – 500, and another one from 0 – 9,000, but you want to keep the UI consistent.

Showing the values shows me the scope by each parameter.

I'm using an orange block rather than a line, because this shows a zone of continuous violation.

Use icons color and text to show violations and warnings.

enter image description here

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.