Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 2 down vote favorite

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.

share|improve this question
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 '12 at 12:35
It's unclear what the user is inputing: a value or the limits. – dnbrv Mar 16 '12 at 18:44
Are these the same values for the entire column, or do they change for each row? – Vitaly Mijiritsky Mar 17 '12 at 7:54
The pop-up indeed is a nice idea. – ChrisQuignon Mar 19 '12 at 8:24

3 Answers

up vote 3 down vote accepted

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.)

share|improve this answer
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 '12 at 11:29
@JonW - Good ideas there. – ChrisF Mar 16 '12 at 11:31
up vote 1 down vote

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

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
up vote 1 down vote

Iconfinder handles this requirement quite well

enter image description here

However I would slightly modify this by adding this as well

mockup

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

share|improve this answer
Nice sollution, but in my case, there is only one input field and the max. / min. values are predefined – ChrisQuignon Mar 19 '12 at 8:26

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.