Form design for editing 3 co-dependent values

Question

I have 3 values that depend on each other. For example: pace, distance, time, and pace = time/distance (note: pace is speed inverted). The user can edit any of them and one of the values should be updated based on the two others.

The user might prefer to say run 10km in 1 hour and pace would be updated. Or he would like to say run 1 hour at 6:00 min / km pace. Or he could say run 10 km at 6:00 min /km pace. All these three options make sense in different situations and the user preference can change between different data entries.

Now, when the user enters two values the first time (say pace and distance), it is easy to update third value (time). However, when he later on edits third value (time), it is non-obvious, which one of the two values (pace or distance) should be updated and without good UI it can create a confusing situation for a user.

What are good UI designs for situations like this? How to make it understandable for the user, which one of the values will be updated? Any nice designs that allow user intuitively to select the dependant value without putting too much though on it. Any good examples on the web? Or pointers to books where this is discussed?

Answer 1

Three dependent values got me thinking about electricity and the rules of thumb for calculating power, current and voltage or current, voltage and resistance.

In this Ohm's law calculator (at the end of the page) user has to enter two and only two values and click "Calculate" to get the third one. It's easy to click reset and to enter new values but if the values has a lot of digits and you don't want to copy/paste them every time it's preferable to be able to just edit values without the need to delete any of them.

You should let the user select which value is to be calculated. In that way she won't be surprised when something happens (Principle of Least Astonishment).

Showing that all values are dependent, I'd take cues from above mentioned rules of thumb, namely the magic triangles:

(http://www.sengpielaudio.com/calculator-ohmslaw.htm)

With one "Calculate" button:

^{download bmml source – Wireframes created with Balsamiq Mockups}

With multiple "Calculate" buttons:

^{download bmml source}

You should probably prevent user from calculating a value if other two are not available. Best way might be to grey out all buttons/radio buttons until the user has entered at least two values and even then only make clickable the one next to a field without data.

Or you could prefill every value (and preselect one radio button).

Answer 2

Design for the primary use case, then take care of secondaries

I would guess that most users will know what they want to calculate, so they will come in, fill out two fields, then calculate the third. So this is the primary use case.

Sometimes, users will change their minds or want to explore other variations, so they will switch fields or recalculate. This is the secondary use case.

Here is an interface which uses animation and color to provide feedback to users around what is happening:

---

---

Notes:

• Calculate button placed next to the field, to promote affordance and to save space.
• When a field is calculated, the existing value fades out quickly and is replaced by a result that fades into blue and then back into gray (the opacity fade helps with color blind users).
• This animation style drives consistent feedback around which field is calculated (the one next to the button), and works with both filled and unfilled fields.