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.

The application interface I am working on has an slider to select a number, but offers a text input field next to it. This allows reading the currently selected value, but also supports keyboard input, alternatively. The sliders have range limitations that get enforced by the slider range when dragging the slider, but separately validated once the user blurs the input field, if they use keyboard input.

The thing I am struggling with is a feature to automatically correct the number input while the user types. This is not absolutely necessary, but with the slider interactively changing some results, it would be nice to constantly have a valid value.

With numbers greater than the maximum limit, it is quite easy to make the number simply reset to the maximum. However, when there is a minimum limit, this auto-correcting becomes harder to handle:

Imagine the limit would be 0-145. The user starts typing 2, then 1. So far so good. Then follows input 5 and the number 215 being greater than 145 means the input and slider get reset to 145.

But if the limit would be 15-145: Any number the user types will start with a single digit and thus be smaller than the minimum limit of 15. What are possible options to deal with this?

share|improve this question
    
How do you handle invalid entry in other fields, or required fields which are blank? –  Erics Dec 16 '12 at 5:11
add comment

2 Answers 2

up vote 4 down vote accepted

If you automatically change some text input, the user may not notice that it has been changed. That will lead to a mismatch between what they expect and what happens.

I can see two possible solutions to this:

  1. Only allow the value to be changed with the slider, and make the input field a read only field. This is the simplest to do, and I believe the simplest for users.
  2. If you really need text input, you should validate it, and if it is not a valid number, you should notify the user in some way, and explain what valid values are. If there is some submit or similar button, then validate when that is selected. If not, then validate when there is:
    a) a change in focus
    b) no activity for an amount of time (usually 0.5 - 1.0 seconds is enough)
share|improve this answer
1  
+1 Option #2 is pretty much what Photoshop does, and they've been using slider+text entry for a while now. When the numeric text field loses focus and is out of bounds it sets the value to the closest in bounds number and puts up a modal telling you "An integer between n and n2 is required. Closest value inserted." –  obelia Dec 16 '12 at 17:50
add comment

You can validate user input as soon as the user leaves focus from the text input field..

If it is less than your minimum limit then you can auto correct the same to the minimum limit and convey the same to user via some highlighted text or alert box..

share|improve this answer
    
This is what I allready do, my question is about additonal validation on key up. ("The sliders have range limitations ... but [get] separately validated once the user blurs the input field") –  kontur Dec 21 '12 at 8:29
    
you need to validate only when user has done with typing..validating and prompting user in-between may be annoying..and if you are not prompting while validating as the user types then there is no point validating as you are validating on blur..additionally, what i feel like more appropriate is validating data on submit rather than validating as the user types or on blur.. –  Rishi Kalia Dec 21 '12 at 8:44
add comment

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.