Form layout with fields which are sometimes input and sometimes output
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.
