Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question

4 Answers 4

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

share|improve this answer
    
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. –  Roger Attrill Jan 18 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. –  Marjan Venema Jan 18 at 17:05
    
@MarjanVenema That's true. You could have them as boolean! You can have one, but not both! –  Benny MCSA Office365 Jan 18 at 21:41
    
@RogerAttrill Edited my answer accordingly! –  Benny MCSA Office365 Jan 18 at 21:48

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.

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.

share|improve this answer
    
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. –  Roger Attrill Jan 18 at 15:47

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.

share|improve this answer
    
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. –  Roger Attrill Jan 18 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. –  Vitaly Mijiritsky Jan 19 at 6:26

In light and sound enginering, you see these large sliders where somethimes 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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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