3

I have the following UI, which on the face of it is fairly simple, but I've been going around in circles trying to find a satisfactory layout. This is my effort so far:

enter image description here

Features:

  • The "P2 Pressure" at the top will display a read-only, numeric value in the blue box.
  • The "Add single" button requires a valid value in the first textbox
  • The "Add for Set P2" button requires a valid value in both textboxes
  • The "close valves" and "pump out" buttons start actions that don't require any input
  • The "abort" button is enabled while one of the previous four actions is running (each of which can take several seconds)
  • Finally, a status message will appear along the bottom of the window to display a summary of the currently running action

Colours and styles aside, I'm looking for suggestions on how I could improve the layout, particularly the middle section where it perhaps isn't obvious which textbox is used by which button. I was wondering whether to group the first textbox with the first button, and group both textboxes (which would include a duplicate of the first) with the second button?

This is a desktop application by the way, if that makes a difference.

2
  • What does Add Single actually do?
    – SteveD
    Apr 20, 2018 at 8:24
  • 1
    @SteveD The UI is used to control an industrial gas valve. The first button opens the valve after the delay specified in the first textbox. The second button is similar but also closes the valve once a sensor reports the pressure specified in the second textbox. Apr 20, 2018 at 8:40

1 Answer 1

4

The following UI comes to my mind (and thanks for the clarification comment):

mockup

download bmml source – Wireframes created with Balsamiq Mockups

For valve delay and pressure request you can use the numerical input (it automatically constraints to input only the numbers, normally you can also limit the ranges).
Also the order of those should be "the mostly used at the top".

If the user changes the value without confirming it by pressing Set button (at least for delay), the value returns to the one initially set.

Next to the current pressure you can add a visual representation of the pressure. If you have some ranges (safe, unsafe, critical, run away), you can change the colour of the bar.

You can also play with "enabled" property of the controls if the valve is closed or is pumping out.

1
  • That looks great, I'll give that some consideration - many thanks. Apr 20, 2018 at 14:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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