I've a three digit input field which has a predefined upper and a lower bound, all within a table. The field also has an optimal (requested) value. So there is a min. an opt. and a max.

What is a fine method to convey these values to the user, without wasting much space.

  • 1
    Would it suffice to have a simple pop-up when focusing on the field? Words to the effect of "enter a value between xxx and xxx"
    – Alex
    Mar 16, 2012 at 12:35
  • It's unclear what the user is inputing: a value or the limits.
    – dnbrv
    Mar 16, 2012 at 18:44
  • Are these the same values for the entire column, or do they change for each row? Mar 17, 2012 at 7:54
  • The pop-up indeed is a nice idea. Mar 19, 2012 at 8:24

3 Answers 3


Assuming that the user can't change the minimum and maximum values then a spinner control with the limits set to the bounds and the initial value set to the optimal value would seem to be the ideal solution.

This would only take up the space of one numeric input box:

enter image description here

(Image from UXMagic)

The exact design will depend on your toolkit and application. The only thing this "standard" design doesn't do is give any indication of what the limits are, which is a potential drawback. Adding the values directly to the UI takes up space (which I assume is at a premium), so assuming that's a non starter, tooltips or an information icon would be the next best solutions to displaying this information. Greying out the arrows when the limits are reached is another useful visual cue.

Jon W has pointed out that for this design you'd potentially need to be quite accurate with the cursor to hit the up and down arrows. As well as thinking about different designs, you could make sure that the spinner accepted the up and down arrow keys (say) as input to increment or decrement the value. Of course, the user should be able to type a value directly into the content area.

(Obviously you need to remember the value the user last selected.)

  • 2
    Looks like a reasonable use of space, although the arrows are a bit small so the target area would require some precise cursoring. Perhaps have the Up value on the left of the field and the Down on the right (or vice-versa) so they are both the full height of the box. Also, I would assume that either the Increment or Decrement arrows would grey-out when the figure reaches the max / min value as an extra bit of feedback.
    – JonW
    Mar 16, 2012 at 11:29
  • @JonW - Good ideas there.
    – ChrisF
    Mar 16, 2012 at 11:31

If typing is a preferred method, this is another direction that can be further elaborated.


download bmml source – Wireframes created with Balsamiq Mockups


Iconfinder handles this requirement quite well

enter image description here

However I would slightly modify this by adding this as well


download bmml source – Wireframes created with Balsamiq Mockups

The slider can allow the user to find the optimal value while the max and min text boxes allow for finer granularity.

Here is another approach I found

enter image description here

  • Nice sollution, but in my case, there is only one input field and the max. / min. values are predefined Mar 19, 2012 at 8:26

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.