6

In the web app I'm designing, The user will input a restricted value that is a multiple of 5,000 with a minimum of 5,000. The maximum could potentially go up to maybe 1,000,000. (In actuality there wouldn't be a limit)

Here are the ideas I have so far:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

In both versions #1 and #2, I'm not certain how to accommodate including more digits (#2) or more increments (#1). In version #3, it could be tedious for the user to keep pressing the "up" button if they need 1,000,000.

There must be a better way to do this than what I've come up with.

Any suggestions?

  • Were you looking for code? jsfiddle.net/bhm93w6a/3 – MonkeyZeus Aug 13 '14 at 20:33
  • 1
    Considering the fact that there would be no upper limit, I highly suggest avoiding the first idea because they work best with a finite number of choices. – MonkeyZeus Aug 13 '14 at 20:49
  • @MonkeyZeus, that jsfiddle is terrible UX. As soon as the user starts entering in information, she gets an error message. Even if she starts typing a legitimate value like 5000, she gets an error as soon as she presses the first keey. Good UX would mean constraining the input type to make bad input impossible in the first place. – Graham Herrli Aug 13 '14 at 20:52
  • @Pdxd, can you provide some more context? Would it be reasonable to cap it at 1,000,000? Or is there a requirement that there must actually be no upper bound? – Graham Herrli Aug 13 '14 at 20:55
  • 1
    The HR Block site comes to mind, where partial dollars are dropped automatically (e.g., entry of 1.15 changes to 1)... jsfiddle.net/b3pmobmx – bdimag Aug 13 '14 at 22:00
6

You could use a stepped value slider:


mockup

download bmml source – Wireframes created with Balsamiq Mockups

There is such a slider that snaps to increments in jQuery UI:
http://jqueryui.com/slider/#steps

If you need a range slider, you may want to check out jQRangeSlider:
http://ghusse.github.io/jQRangeSlider/

  • 1
    There's also <input type="range" min="5000" max="50000" step="5000"> – Ajedi32 Aug 20 '14 at 13:21
  • Yes, but not supported in Opera Mini and IE until 10, and in IE 10 and 11 there is a bug related to the step size: caniuse.com/#feat=input-range – CodeManX Aug 20 '14 at 14:36
  • I don't think this approach addresses the issues of scale the OP raises. What if instead of going to 50,000, the slider needs to go to 1,000,000? It would need 200 closely-spaced notches, which would make it very difficult to select the correct one by just clicking and dragging. – Graham Herrli Aug 28 '14 at 14:19
  • That's true. In this case, I would use a numeric input field + a label updated by JavaScript. The user could enter whatever she wants and the additional label would show the closest allowed value in 5k steps. There should also be a help text of course to explain what that label is showing. – CodeManX Aug 28 '14 at 17:25
5

Don't reinvent the wheel unless you need to.

If you wanted a text field, you'd start with <input type="text">, so since you want a field representing numbers, start with <input type="number">. You may need to polyfill the type for older browsers, but at least you're going to take advantage of native device rendering and accessibility hooks.

All you need for most modern browsers is:

<input type="number" step="5000" min="5000">

fiddle

This won't be flashy. This isn't a solution for most interesting way to render an open ended numeric range, it's the solution for a standardized accessible control that will be consistent with users expectations for the device they're using.

4

Perhaps a combination slider/spinner could work. Use the slider to get close and the incremental buttons to make fine adjustments.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

(This mockup uses a cap of 1,000,000. If there's no actual cap, you could perhaps add a button to increase the total width of the slider by a factor of 10, assuming that needing to go over 1,000,000 is a fringe case.)

2

Two Options

Option 1: Integer & multiplier

You create an integer input field [ 1], with a label to its right "x 5000 = followed by a dynamically-updated label showing the product "60,000".

A few examples:

   [    1] x $5000 = $5,000
   [    7] x $5000 = $35,000
   [   12] x $5000 = $60,000

Drawback: if the user has a specific amount they want to spend, e.g. "I want to purchase $60K worth", this approach forces them to do a division (likely in their heads).

Option 2: Simple rounding + explanatory message

Alternatively, offer a simple, normal numeric input field, and let the user plug in any value, but then round (down) to the nearest $5,000, with a clear indication of what happened.

For example, if the user types in:

   $[63,010] 

This gets dynamically converted to:

   $[60,000] 

with a clear note reading "Values must be in increments of $5,000 (minimum $5,000)."

1

My vote is 3 (a text box with up/down arrow buttons), but allow the text entry to be unconstrained (beyond being constrained to numeric input). If the input isn't an even multiple of 5k, a message could appear informing the user that their entry will be rounded to the nearest valid number.

I always like providing a free-form text box for users that find it easiest to type-and-tab through a form, and #3 is also one of the more compact solutions space wise. This is similar to what @bdimag was suggesting, but I think it's important to be more transparent to the user about how their input will be interpreted instead of silently rounding. It also avoids showing error messages or blocking invalid input up front, which could disrupt the user's workflow.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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