How should I display two user inputs that depend on each other?

by Fidel90   Last Updated March 12, 2018 18:16 PM

I'm writing a web application with HTML5/JS. On one page there are two numeric inputs (A and B) where input B must always be equal or higher than input A. So if the user enters 500 in A, B must be 500 or higher. The absolute maximum of B is double as high as the absolute maximum from A.

So, these are the requirements in short:

  • A may be 100 max.
  • B may be 50 max.
  • B must always be equal or higher than A

How could I display the dependencies to the user and how should I avoid wrong user input? I thought of something like a slider with two knobs, as the user wont be able to move knob A beyond knob B. I'm not sure about this as I don't know how good such an element could be handled on a mobile device. What could be other solutions? Thanks :)

Answers 2

You can see examples of this type of interaction on airline ticketing sites. When specifying going and returning dates, they need to ensure that the travel to the destination is before the return date.

They way they handle this is by placing the controls in a particular order. They always ask the user to specify the depart on date before asking them to declare the date of return. This can of course work only if there is a sequence that you would like to promote through the UI, i.e. ensure that in most cases users enter A before entering B. In case the user enters B before A then you let the user enter A, validate whether that falls within the acceptable limit. If not then show an error when the form is submitted OR immediately indicate an issue the entry. (Much like what happens when creating new accounts and username is already taken)

You could also reduce chances of these errors by placing appropriate help text to explain the dependency to the users.

Another related interaction I can think of is when changing or creating password users are expecting to enter the identical values in both the fields.

September 11, 2015 12:42 PM

There could be two solutions to this problem

1) Use a range slider with limitations, check out this Ion RangeSlider with limitation demo

below is the image for Ion Range Slider

2) Second Option or way to reach the same objective is mixing Input field with a slider control. Enable/Show B after user enters into the Input A

second option

Ahsan Idrisi
Ahsan Idrisi
September 12, 2015 11:42 AM

Related Questions

What are the alternatives to close tabs in mobile?

Updated November 04, 2016 09:06 AM