3

The software needs to display numeric values of many (say 20 or more) control variables. It needs to show the current value which may get updated by the program every so often. Additionally, the user may want to set target values for some or all of these variables.

This could be done by two columns (first column showing current values, second column showing desired values) but I fear that this will clutter the whole UI unnecessary, doubling the number of display elements.

What would be alternative designs for such an UI? If possible I would like to combine both, the current and the target value in one element and make the target editable as well as indicate if a target value has been set.

The software is for controling a machine, so the users are used to some complexity and a more technical presentation.

Example:

enter image description here

|improve this question|||||
  • 1
    "It needs to show the current value which may get updated every so often", the image you share has an input for both columns, are both editable in this view? – Alvaro Mar 20 '17 at 11:02
  • The first column showing the current value would not be editable. The value would get updated by the program regularly. – Trilarion Mar 20 '17 at 12:14
  • 1
    You'll cut the number of fields in half just by displaying the non-editable values without a text field. Another benefit would be that the non-editable information will look non-editable. – Ken Mohnkern Mar 20 '17 at 15:47
  • @KenMohnkern That's true, but the number of displayed elements will stay the same. Please note, that I edited the question a bit in that regard before you commented. I guess the question is really about how to hide/show target values depending upon if they are needed/ not needed. The existing answers go some way along that line and are definitely helpful but they are not that convincing that I can mark them as solution yet. – Trilarion Mar 21 '17 at 8:08
2

Considering the current values are system generated and not editable. I think this will help:

enter image description here

Depending on the type of users of your product, you can even think of displaying the set link on mouse-over. You can use a horizontal scroll for the values columns, and keep the Current and Target columns fixed to the viewport when number of columns increase.

|improve this answer|||||
  • You exchanged rows and columns here and decided to replace a target value not set by a set link. While this is already nice it still suffers from the doubled number of elements/cells in the table. Is there a typically used, nice looking way to combine both rows (columns in my question)? – Trilarion Mar 20 '17 at 12:16
  • 1
    @Trilarion Additionally, the user may want to set target values for some or all of these variables - meaning it's optional. In which case, it's best to let the user choose if he wants to set the target value. You've to repeat something, either the Target title or the set link. The approach above saves vertical space. – DPS Mar 20 '17 at 12:29
2

You can use one of the below image for reference[just cooked up something it still requires a lot of work but you get the basic idea]. It is one of the way to show the range type present / target type UI. It visually represent the current and goal. you can put a textbox for the target field if you want. but placing the editable icon is important to show that the field is editable.

enter image description here

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.