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.

5 Answers 5


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.

enter image description here

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.

enter image description here

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

  • I'm glad someone mentioned direct manipulation. I'd considered this too, and while direct manipulation works great for the angle, my concern was catering for short and long slopes - eg a 1m long slope and a 100m long slope. Having said that - I think the interactive preview definitely seems important to guide the user as to the expected outcome. Commented Jan 18, 2014 at 23:29
  • Well, it's worthwhile to check how commonplace these extra short and extra long runs slopes are. Maybe they need to be treated as edge cases. Even if they aren't, it can be fairly easily to solve - you set "barriers" at the near and far ends of the X axis, and as long as they keep "pushing" the handle against the barrier, you decrease/increase the measurement. Basically similar to scrolling by middle-click. Commented Jan 19, 2014 at 6:26
  • Or just have a scale selection like that in google maps - a few set scales the user can click through. Commented Jan 15, 2020 at 7:05

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.

enter image description here

  • Yes, this was my first thought, but I didn't feel happy with the need to mark an input as fixed. I was hoping to avoid that if possible. There's the slight complication that a fixed grade also means a fixed angle and vice versa, so the inter-dependency and the user's understanding of what needs to be fixed is not immediately clear. Commented Jan 18, 2014 at 15:42
  • @RogerAttrill: that should be easy to solve. Just treat them as one measurement. Sounds like one dictates the value of the other anyway (as in a 3 degree angle is alway a 7% grade) and either would dictate the value of run if rise is given or rise if run is given. Commented Jan 18, 2014 at 17:05
  • @MarjanVenema That's true. You could have them as boolean! You can have one, but not both! Commented Jan 18, 2014 at 21:41
  • @RogerAttrill Edited my answer accordingly! Commented Jan 18, 2014 at 21:48

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


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)


  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.

Illustration of Layout and Interactions - Using Examples 1-3 from the question

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

  • Assuming the calculated inputs won't really look disabled that sounds reasonable. The inputs will have some default values already entered, but it could still revert to the above as soon as the user changes any one of the default values. Also the user might come back to edit these values later and this mechanism could also let the user see which values they entered themselves and which ones were calculated. I'll run through some scenarios and see if this pans out. The preview will be a definite aid. Commented Jan 18, 2014 at 15:47

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.GUI mockup of connected sliders

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

  • If you're going to use sliders, why not slide in 2 dimensions so you can render the slope at the same time? Commented Jan 15, 2020 at 5:52

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.


  • Now I want to make that as a html excercise... Commented Jan 15, 2020 at 7:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.