Form layout with fields which are sometimes input and sometimes output

Question

I'm designing the UI for a desktop application. In one of the windows certain interdependent properties of an object are listed. I want the user to be able to choose which properties are to be used as input, which ones (outputs) are to be calculated using the inputs as well as to enter the input values.

How would you achieve this?

As an example, let's assume that the user is working with a sphere. The five relevant properties for him are the:

• radius
• surface area
• volume
• density and
• mass

Sometimes the user will know the density and the radius, sometimes the density and the volume, and so forth. With these inputs, all other properties of the sphere can be calculated.

My first idea was to separate variables in two blocks (input and output) and allow the user to drag&drop the properties between these two blocks. However, in the actual application the number of variables is slightly larger (up to 20) and I would prefer to group them by other criteria and let them have a static position.

Using a different form for every set of inputs is not feasible because of the huge number of possible input combinations.

Currently my approach would be to list the properties as shown in the image below (layout shown for two different input sets). To switch between input & output the user would just click on the properties. The properties itself would be marked italic/bold with the numerical fields enabled/disabled. A text would inform the user about how to switch between input/output. Is this approach ok? Is there a more intuitive way to switch between input/output without having to write the explanatory phrase somewhere (shown in the bottom of the image)? I'm also not sure if the italic/bold approach is enough or if further differentiation (e.g. background color) would make the layout more user friendly.

---

Why did I want to define the inputs and outputs separately (click with left/right mouse button) instead of just toggling/(un)checking the state? When switching the state of one of the properties the resulting system is usually not solvable. Therefore, the system needs to either

a) show no results and wait until the user finds a valid combination of inputs/outputs or b) decide by itself on which other property it should change the state to have a solvable system.

Option a) is bad because finding the right combination with that many variables can be somewhat difficult. This leads us to the second option. With the left/right click the status of each property could be "forced to be input", "forced to be output" or "doesn't matter- let the program decide". Which sounds nice. However, after changing some of the properties the point where the program doesn't know what property to change can be reached too.

Therefore, I'll try the toggle/checkbox/checkbutton solutions as shown in the images below (property names will be aligned to the left). To decide what property to change, all possible inputs sets will be generated and all state changes made by the user saved to a list. When the computer needs to change a state by its own, it'll look at the possible sets and choose either a property which is not on this list or prioritize keeping the state of the ones changed last.

Answer 1

Familiarity + clear state

While being an ingenious idea, the left/right click is really not a familiar behavior, which is often desirable unless the benefits that the new interaction brings in worth it. In this case I think the main problem would be the lack of a clear indication of the editing state, which is not easy to convey just with visual artifacts like color or other not so explicit clues.

I'd suggest an explicit control for editing/locking. I think a simple solution is to use a toggle switch or checkboxes plus visual indications. As you mentioned any other grouping, over-categorization, etc will likely confuse users more than help them. Examples:

Additionally:

• Use bold text when text is editable and regular when it's read only.
• Unless they tell you otherwise, use alphabetical order for the properties list.
• A great addition would be to highlight fields that depend on the current active input, so the user knows what parameters are impacted with each change.
• Aside from your question, other idea could be to let them filter for all the properties. If you have 20 properties maybe you care about 5 or 6, not all 20. If you think users would care about this functionality, you could even go as far as letting them save different set of filters, so they don't have to do it all over time, for each set of properties.

Answer 2

I would not do it with left click - this blocks selecting the value if a user wants to copy it.

Depending on the amount of combinations a drop-down list might work.

Or group the parameters by how they exclude each other (ie, radius, volume and surface area in one group and mass and density in another) and add radio buttons.

Answer 3

You want to make the difficult step as easy as possible. In this case, that means make it as easy as possible for the user to choose a valid set of inputs. If you make it easy, the user won't mind choosing a valid set of inputs every time they try to change the set of inputs. They also won't mind not being able to set any inputs in between starting to change the set of inputs and choosing a valid set of inputs.

If the user can easily get any set of inputs by swapping one for another, one at a time, the switches idea is a good one. However, any time the user presses a switch, I would change to a mode where the user can't edit any inputs or use any switches that don't lead to a valid set of inputs, highlight all the switches which would lead to a valid set of inputs, and put up message saying "Choose an input to remove" or "Choose an input to add". I would also grey the section out, and put a big "Cancel" button or X in the top-right, and set up the Esc button should cancel the change. This would make it easy to learn the system and choose a valid set of inputs.

If choosing valid input sets is more complicated, you could separate the section for choosing a set of inputs from the section for displaying/inputting the properties. The user could choose inputs using a click-and-drag list. You could also put a space for suggestions to appear whenever the user chooses an invalid set of inputs. Again, the goal is to make it easy for the user to see what sets of inputs are legal. I can't give very concrete advice without knowing what makes your rule sets complicated, but here are some guidelines.

• Make the instructions as simple as possible
• Break them into independent instructions nested as shallowly as possible
• Use whitespace to group your suggestions and minimise punctuation
• Use vertical stacks of tags to avoid multi-line instructions

Answer 4

I'm a bit late but I'd like to share some of my considerations.

When thinking about the potential use cases your users may encounter. I can image users initially entering their data and then wanting to tweak certain parameters.

For the sphere example they may ask

• "Will this be too heavy I change the material to something denser?"
• "How much paint will I need if I make the radius twice as big?"
• "How much material can I save by making this slightly smaller?"

In all of these cases there's a relationship between some parameters. The relationships between these properties form a constraints system. Radius, volume and surface area are all properties of size and scale proportionally. Material density and mass also scale proportionally.

Give users a way to choose how to satisfy the constraint. Should altering the mass change the density or the size? Solutions based on input level toggles are problematic because of "illegal" scenarios. Size can't be edited without affecting mass or density.

It's hard to give an exact answer without knowing your actual system and actual constraints.

Adobe has solved similar problems in their resize image dialog. See this example from CS6 (it was redesigned a little in CC).

The Resample Image checkbox controls fulfilling the constraint between pixel dimensions, physical dimensions and pixel density (labeled Resolution). When checked pixel pixel dimension adjustments affect physical size rather than density (and vise versa). When unchecked pixel dimensions are locked and the Resolution parameter can be adjusted.

Because aspect ratios are variable, users can lock the scaling of width and height toggles together. This sort of scenario doesn't exist for a sphere (we can't change the value of π!).

I hope my recollection of the Photoshop dialog is accurate. It has been a little while since I last used it but I wanted to include it as an example of prior art.

Answer 5

I would set all the fields as input.

The user inputs the data they have, and leaves the other fields blank.
A blank field means output, and a value in a field means input.

The program can then calculate the missing fields, or show an error message if the data is insufficient or conflicting.

Also, in the output, I would grey out the user-entered parameters and the let the calculated parameters be white.
This is because the user wants the calculated parameters, and highlighting them will make them easier to spot.

Answer 6

Let all fields remain input fields. Track user input order and calculate result by last inputs - use minimum possible values. Separate erroneus, user entered and calculated values by style (font or color or some similar visual cue).

To illustrate my idea: assume you have three fields - W (width), H (height) and S (area).

• Step 1: user changes W - you have not enough data to calculate
• Step 2: user changes H, you see that previous input was for W - you multiply these and display result in S box (and change styles)
• Step 3: user changes S, you see that previous input was H - you calculate W, display it (and change styles)
• Step 4: continue :)