26

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.

Enter image description here


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.

enter image description here

6
  • Looks fine to me, except I'd use left click to toggle instead of right click.
    – Bergi
    Apr 20 '20 at 8:44
  • @Gypaets the "object" and its properties are created by the users or by the company? same question for the relationship between the properties of an object. could you expand on that? Apr 20 '20 at 13:26
  • @AlejandroVeltri The end user cannot create any objects, just use the form of the question to rapidly get information about the properties. In most cases the relationship between the objects is very simple (several equations of the form $x_m=c_m \prod x_i^c_i$ with $x_i$ strictly positive). It'll end up being some kind of library, so I expect that many new forms of the same style will be added
    – Gypaets
    Apr 20 '20 at 19:31
  • @Gypaets Understood. Do users usually know the name of the property their looking for and just need to find where it is located in the form? or in the contrary, it's common that they don't know the name of the properties or don't know they want to use them until they see them? Apr 20 '20 at 20:36
  • Please note that this UI pattern has an extensive corpus, going back to dedicated desk machines, for "time value of money" calculators. Apr 21 '20 at 1:42
12

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:

enter image description here enter image description here

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.
8
  • 2
    This won't work if you have combinations of inputs that differ by more than 1 field, with the intermediate situation being invalid. Meaning the user needs to flip 2 edit switches to get to the desired state, but flipping one (either one) leads to an invalid combination. The more fields the messier the validation of the user-input will get and the more confusing it will be for the user. Simply use each valid combination as a preset (or filter) and let the user cycle through the choices. Effectively that is what Jan Dorniak already suggested as an answer.
    – Tonny
    Apr 20 '20 at 9:35
  • 1
    @Tonny: Another option would be to allow the “on/off” toggles to be set to invalid states, but while in such a state, disable the “done” button and signal the situation clearly: e.g. gray out the sliders and overlay a text like “Too many input variables currently selected” / “Too few…” until the toggles are back to a valid state. (And perhaps with further details, if it may not be obvious to users which combinations of variables are causing the under/over-specification.)
    – PLL
    Apr 20 '20 at 10:22
  • 1
    @PLL That is a possibility, but does it add clarity to the user? Makes the user-interface even more crowded I think. And it needs a serious amount of coding to handle all combinations and possible errors. Just for the validation alone you would probably have to implement the sets of valid combinations in the backend anyway, so in my view you might just as well use them to present the user with valid options in the UI.
    – Tonny
    Apr 20 '20 at 11:03
  • @Tonny There might be thousands of valid combinations (for example select any 5 of 20 would be 15504)
    – Rick
    Apr 20 '20 at 17:45
  • 1
    @gypaets I've looked at your addition and it seems you have come up with a sort of in between solution. You are effectively cycling through a set of pre-defined valid combos and using the UI as a filter that lets the use narrow down to which combo is desired, without giving the user the feeling it is filtering anything. To the user it just looks as if the UI automatically adapts to his/her wishes. I like it. Elegant solution.
    – Tonny
    Apr 20 '20 at 21:41
4

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.

3
  • 2
    One might input both mass and density though, and get the dimensions as an output.
    – Bergi
    Apr 20 '20 at 8:45
  • True, there are more combinations that I thought of, so grouping won't work. Apr 20 '20 at 8:46
  • Pre-sets (or edit mask filters, whatever you want to call them) and letting the user select one from a drop-down or cycler-carroussel is I think the only valid option. See my comment under Alejandro's answer as well.
    – Tonny
    Apr 20 '20 at 9:38
1

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
1
  • While the idea sounds interesting (+1) I think the approach would require the user to do a lot of unnecessary mouse-clicking. For every variable he changes he'd need to move the pointer to another property and switch its status (2x mouse clicks + a lot of cursor movement)
    – Gypaets
    Apr 23 '20 at 16:14
1

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).

Photoshop CS6 image resize dialog

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.

0

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.

6
  • 3
    What happens if you change density which of volume or masses changes?
    – mmmmmm
    Apr 21 '20 at 9:58
  • @user151019 Well, it depends on what other fields are filled. I am assuming that there is only one valid solution for each set of inputs. In the sphere example, if the radius, surface area or volume is given, then mass changes. If mass is given, then volume changes. Apr 21 '20 at 11:19
  • In the examples given all fields have values so your assumption is false. You need to show how to make your assumption true
    – mmmmmm
    Apr 21 '20 at 12:34
  • @user151019 I am not sure that I follow. A sphere has only two fundamental properties (radius and mass), and there is one, and only one pair of (r, m) value that will satisfy all the constraints. In the first (leftmost) example, the bold fields (Surface Area, Volume and Density) are OUTPUT fields. Their value is not entered by the user, instead the program calculates them based on the inputs (Radius, Mass). What I am suggesting is that the user can enter the Radius and Mass values, leaving Surface Area, Volume, Density blank. Apr 21 '20 at 13:37
  • But that us not what the op is showing. All the fields have values.
    – mmmmmm
    Apr 23 '20 at 17:28
0

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 :)
2
  • 2
    This is bad because 1) it has hysteresis: the internal state of the form depends not just on what's displayed in it but also on the order the fields were filled in; 2) it thus has internal state which the user can't see. This makes it needlessly hard for the user to go from whatever state the form is in, to a desired state.
    – Rosie F
    Apr 21 '20 at 20:54
  • @RosieF It may be so, but it depends on user habits and on page purpose - if for single usage session you usually need to perform only one kind of calculation, then my approach is very simple and straightforward to use. Actually I have seen such kind of 'cross calculators' somewhere and I personally like these very much.
    – Arvo
    Apr 22 '20 at 9:33

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.