Entering any two of four inter-dependent values

Question

While designing a garden landscape, I want users to be able to define a slope of the terrain.

There are four values users can enter:

• Run - the horizontal distance along the depth of the slope
• Rise - the amount by which the slope rises along its length
• Angle - the inclination of the slope
• Grade - a percentage inclination of the slope

Different users will use a different primary measurement.

Example 1: they know the grade will be 4% which means they can either define the run or the rise to completely define the slope.

Example 2: they know the rise needs to be 2m which means they need to define either the run or the grade / angle.

Example 3: they know the run needs to be 50m which means they need to define either the rise or the grade / angle.

In each case, it seems there needs to be a way to fix or lock one (primary) measurement allowing the others to be entered.

In what way might you best layout the inputs and guide the user to define a slope? Would an interactive visual representation work best? Space is limited to about 250px width.

Answer 1

One intuitive approach seems to be to allow direct manipulation. The circle in the example below is the handle - best for touch UI but also good for the mouse. The user drags it and it positions the end of the slope at the desired point, setting all the measurements in real time. Then you can fine-tune the measurements using the UI under the preview.

Another approach could be using sliders which can be locked and unlocked to make sure that only the right measurements change when you update a specific slider, aided by a preview similar to the one described above.

And of course they can be combined by using the direct manipulation with the sliders instead of the +/- buttons, or sliders + the input boxes.

Answer 2

I'd try a design with four different input boxes, which are empty at first. Before the interactive design (imagine the image to be interactive) starts to draw slopes, and calculate all other values, a minimum of two values, would have to be entered. One of each groupe (angle, grade) and (rise, run).

There would be options to lock each individual value and a maximum of two fixed values, to explore with othe values to see what happens with the interactive image and other values.

Edit grade and angle

Grade and angle represent the same context, measured differentely. They are dependent on the same values, but the outcome is different: percentage vs degrees. Now if one where fixed, the other would be fixed as well, ene though implied. You'd represent that with a disable state and have the one chosen for fixed value looking the same but with it's fixed checkbox checked.

This would be my primary choise, but if the customer didn't like the idea I have to display this differently.

Answer 3

Taking a little inspiration from a similar problem (GuideGuide for Photoshop), I would suggest the following (see the illustration for details):

Layout

Group the measurements by similarity (Run & Rise, Angle & Grade) into 2 lines, perhaps using little icons to help visualise the terms. Followed by a 'Create/Confirm' button to generate the slope. Also make sure to include the units which are being entered (i.e. meters, %, and degrees)

Behaviour

1. Allow the input of any of the four values as a starting point, but keep the 'Create/Confirm' button disabled until at least two values have been entered.

2. After the input of the first value, highlight the remaining fields that can be used to complete the slope definition.

3. Where possible, calculate the remaining values, but visually differentiate them from the user inputed values.
4. Calculate all remaining values. This will help the user visualise/check the desired slope and show if any measurement is unrealistic (i.e. 500m rise or 90 angle).
5. Enable the 'Create/Confirm' button once the minimum values to define the slope have been entered.

It might also be useful to have a preview ability to check the desired slope before adding it to the landscape.

Answer 4

In light and sound enginering, you see these large sliders where sometimes a couple of them are connected. This analogy could help you. If one of the four dimensions is given, the other three are always connected. You could show that connection literally, by creating sliders with the knobs 'taped' or barred together.

The user should be allowed to enter the values manually and we should be so kind to provide them with a quick schematic as suggested by Vitaly Mijritsky

Answer 5

Allow only 1 to be locked at a time

Essentially make them radio buttons. It looks like the three variables (rise, run, grade/angle) are one of three things to the user:

• I know this value
• I'm trying to find out this value
• I'm experimenting with this value

If any two of them are the first, allow the user to put them in directly (just have four number input controls) and trigger the calculation of the third when two have been determined. This only gets tricky if they then want to experiment by changing one of the values. To deal with this, I'd suggest having the program automatically consider the first variable set to be 'locked', and show the user in the GUI with an icon/button. If the user wants a different value locked, they can simply click on a different lock icon, and the previous one will be unlocked.

Alternatively the program could respond to adjustment of the locked variable by unlocking it and making the variable most recently set by the user the locked variable.

Ideally you could have a visual/manual representation with the locked value locked there too, so if Run is locked, manual adjustments are restricted to vertical ones, if Rise is locked, adjustments are locked to horizontal, and if Grade/Angle is locked, manual adjustment is locked to that plane. You'd probably need to allow the user to adjust the scale for those cases where the gradient is especially large or small, too.