43

In my current web project I have a textbox where the user can enter a bid for an auction. However, to prevent bidding of arbitrary sums, only certain values that match predetermined intervals are allowed.

For example, if the current bid is 240€, the user cannot bid 241€, he has to bid 260€, 280€ or 300€ (and so on). The bid can be as large as he wants however, it just has to fit the intervals.

To make life easier for the user, I show him the possible bid values that are close to what he enters into the textbox:

enter image description here

My problem is that this doesn't really stop anyone from entering and submitting invalid values. Users will see the values as a suggestion and still enter other values. All I can do is show an error when this happens and suggest another value that would be close to what he entered. This is cleaning up after the fact, but I would rather help the user in a preemptive manner.

Is there a better solution that makes it more clear to the user that he has to select one of the values I suggest to him and cannot submit anything? I thought about using logarithmic sliders instead of a textbox, but there is no maximum amount one can bid and my customer is somewhat favoring a textbox solution.

Improve this question
11
  • 2
    How is not really a UX question. Search on validate or validator for controls that only accept values that meet rules. For suggestions search on autocomplete.
    – paparazzo
    Dec 15, 2014 at 17:21
  • 1
    I know how to do validation with JS etc, that's not really my question. Sorry if that wasn't clear, I will edit the question. EDIT: Hope it's clearer now?
    – magnattic
    Dec 15, 2014 at 17:23
  • 3
    But the user doesn't have to use a predefined value. You haven't prevented that, so you can't treat it as a requirement, only a preference. You used a control state that a user expects to allow arbitrary input, because it is designed for that purpose, but you want them to arbitrarily ignore that functionality in this case. Your issue stems from poor programming practices (allowing an invalid value), not poor communication.
    – Superstringcheese
    Dec 16, 2014 at 14:22
  • 6
    @CodeMaverick Really, all questions including "How" are off-topic here? I must have missed that in the Help Center... I am asking how to improve the user experience, not how to implement the solution.
    – magnattic
    Dec 16, 2014 at 15:43
  • 2
    @CodeMaverick On StackOverflow, I'd just say <input type="number" min="260" step="20" /> and call it done. Perfectly functional, with built-in native validation. Not great on design though.
    – Niet the Dark Absol
    Dec 16, 2014 at 16:55

11 Answers 11

Reset to default
48

I came up with another way to handle this scenario which is more clear in cases with arbitrary jumps.

1. Show links below the text input to quickly convey how the bidding system works by listing valid choices which can be chosen with a single click right from the start.

step 1

2. Update valid choices as the user types or clicks The user can either type 68 or click the corresponding link and get the same result.

step 2

As long as the input is numeric then update the valid options around it but don't try and validate the input until focus is lost (i.e. the user tabs or clicks away)

step 3

3. On focus out, let the user know when the value isn't valid so that they can quickly remedy the situation.

step 4

step 5

Improve this answer
7
  • Pretty neat. But I think a visual indication that the first value on the link list is what will actually be submitted would be good. The fact it is the first value makes it obvious if you think about it, but making users think is not desirable. And if input is invalid the link list could be replaced with "Current input is invalid." in red.
    – Ville Niemi
    Dec 16, 2014 at 14:53
  • 5
    I agree, do not change the user's values especially in a financial form. Instead, do the usual things to indicate it's a bad field. Color it red, make a little flash, highlight it, put up an error flag, etc... but don't just change it out from under them.
    – Schwern
    Dec 16, 2014 at 19:53
  • yeah I did this pretty quickly - i'm going to update it to help the user see when their input is invalid and to choose a valid option without doing it for them.
    – DaveAlger
    Dec 16, 2014 at 20:20
  • Interesting solution. The only problem I see is that this will need dynamic space in the horizontal direction when the numbers grow larger. Probably could be solved by using dynamic font size.
    – magnattic
    Dec 17, 2014 at 18:12
  • 1
    Your latest edit really improved the whole thing imho. I like the version with the red warning and the arrow pointing to valid values. Good job!
    – magnattic
    Dec 17, 2014 at 23:49
29

I recently was playing around with a new type of pager control that only uses numbers and doesn't require any localization (next, previous, last, first, all function without any words required in the UI)

I modified it slightly to work in your case here. The idea is to be really clear to the user up front that they can't just type anything they want because there is no text input...

show current bid with options around it

This example expects both a minimum and maximum bid, however the maximum could be removed.

Large jumps between values can still be achieved by clicking on the ... and then typing.

show the user multiple of 10

You can show the user that regardless of the number entered it will display as a multiple of 10. When garbage is entered then no operation is performed and they are back to seeing the list of available options that they can click on.

Here is a link to the modified control to see if it works for you

Improve this answer
4
  • 2
    I like that textbox with a trailing 0 more than the pager, since the starting "middle" amount is totally arbitrary. Perhaps a combination of the textbox and a dynamically updating pager? The tricky thing about this question is we somehow need to convey multiples of 20, which is not intuitive at all.
    – Jessica Yang
    Dec 15, 2014 at 18:04
  • 1
    Multiples of 15 or 20 is going to be hard to convey regardless of the approach used so I would push really hard for not using random jumps from item to item. If arbitrary jumps are absolutely required then I think I would let the user enter any number they want and then automatically change it to a working value that is equal to or LOWER than what they entered.
    – DaveAlger
    Dec 15, 2014 at 18:09
  • 1
    I really like your solution, kudos for the work. I am not sure if I can use it in my specific case because of the additional space needed, but that's an issue with most solutions.
    – magnattic
    Dec 16, 2014 at 15:50
  • 1
    I would suggest not to require the user to click on ... to be able to type. As soon as the user types a number, bring up the textarea box. This allows the type tab type tab rhythm of rapid data entry without slow mouse clicks. Leave the ... option there though.
    – Schwern
    Dec 16, 2014 at 19:51
8

In HTML5, the input element supports the step attribute. Example: http://jsfiddle.net/yhffroa1/

However, not all browsers support it yet. IE in particular doesn't have spinner buttons for <input type="number">, and mobile browsers don't respect step at all.

There is also the pattern attribute that applies the :valid/:invalid pseudoclasses as necessary, but that only supports regular expressions. You can use JQuery or what have you to add or remove these classes as necessary.

But that doesn't answer your question, you want to communicate to the user what they did wrong! In that case, you want setCustomValidity(), which will tell the browser to display a custom message. It's not on caniuse.com yet, and I'm not sure how to use it so I can't test it, but I think it works on at least Firefox. There are plenty of questions about it on Stack Overflow.

Improve this answer
4

To make sure users only select and don't enter anything, you would need to remove entry form, because it's encouraging people to enter things into it.

Alternatively, I would

  1. set current bid as default and only let users choose from values like "$445 (+$15), $460 (+$30), etc".

  2. set current bid as a default and give user a list of options from +$10 (or whatever minimum is) to +$200 (or whatever maximum is)

  3. present a slider that starts off with current bid and has "magnetic" stoppers on each milestone (e.g. "sticks" on +10, +15, +20, +30 and so on), instead of the list.

Improve this answer
4

I personally am a fan of what Windows has been doing lately with numeric inputs: When you enter something invalid, it shows a "tooltip" type popup that tells you of the error.

enter image description here

Obviously, the message for your control would be something akin to "The bid must be a multiple of 20€"

Improve this answer
6
  • 7
    The error message seems to be off... why is a number unacceptable when you can only type a number?
    – Calimo
    Dec 16, 2014 at 14:40
  • 1
    @Calimo: The screenshot is from a windows control that only takes numbers, I didn't make a custom message for this particular question.
    – Mooing Duck
    Dec 16, 2014 at 17:02
  • 3
    @MooingDuck Calimo means the Windows error says "unacceptable character" while pointing at the perfectly valid number in the textbox (because the screen shot doesn't show the rejected character).
    – Mr Lister
    Dec 16, 2014 at 18:57
  • @MooingDuck Welcome to the internet, where a typo can ruin every honest man :P (+1 btw)
    – kaiser
    Dec 16, 2014 at 22:40
  • 2
    The problem with this is that we write numbers from left to right, so there is no way to tell from the first digits if the final number will be valid. At one point the textbox will have to be in an invalid state to enter a valid number. 12 (invalid) -> 120 (valid)
    – magnattic
    Dec 17, 2014 at 18:06
4

How about a design like this?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

You allow the user to enter any number he wants into the "ideal bid" textbox, but automatically display in the disabled "actual bid" textbox the nearest increment (rounding down so as not to make the user pay more than he intended).

Improve this answer
2

If you are not space constrained, allow user to enter whatever value they wish and then round it to the nearest allowed value. The reason this needs space is that you will need to not only show the actual allowed value, but show an explanation of what is going on. Something like:

Your bid

To prevent arbitrary bids with small increases prolonging auctions needlessly, only certain values are allowed. The value you enter below will automatically be rounded to the nearest allowed value and shown in the box labelled "Your bid". Please check that the adjusted sum is acceptable before you submit your bid.

Your bid : [clearly visible box ] Enter value here : [Normal number entry box ]

Obviously, you'll need to adjust the text and styling, but I'd try this first.

Improve this answer
6
  • Users are unlikely to read a bunch of text like that.
    – Ashley Strout
    Dec 18, 2014 at 4:54
  • @D.Strout You are absolutely right, but if you have a policy of only some prices being acceptable, you have to tell that to the users. After user has been to the site for the first time, there is no longer any need for them to read the text, if the UI is clear, but the explanation has to be right there. And that means "a bunch of text". Sadly people do not read FAQs or help pages, or other out of sight places.
    – Ville Niemi
    Dec 18, 2014 at 6:28
  • It's not just faq or help pages people don't read, it's most of the content on all pages they don't read. The more text on screen the less of it gets read.
    – JonW ♦
    Dec 18, 2014 at 10:12
  • @JonW But surely one paragraph of text that people need to read once to understand what the page does is not a problem. Basically, people see a form they do not understand, look for an explanation, and it is right there next to the form field. (But seriously, you are so right as a general observation it is sad...)
    – Ville Niemi
    Dec 18, 2014 at 10:36
  • The problem is, how does the user know that this is the text that needs to be read, vs. any other block?
    – Ashley Strout
    Dec 19, 2014 at 1:06
2

Rather than completely focus on input widget, in addition to widget an in process correction UI would be very strong.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
1
  • Yes, that's what I started doing now anyway. It's a good solution to prevent that users have to go back and change their input.
    – magnattic
    Dec 18, 2014 at 11:25
2

What you need is a searchable dropdown/select list. The distinction between your example is that the area you type for searching is NOT the data entry field, and only serves to present a list of options. If you click the dropdown to expand it, type in the search field, and then click away without selecting anything, then the selection does not change and what they typed is discarded. This makes it clear that they have to select one of the values you present to them. If they type the exact value and hit enter it auto selects the appropriate value.

Select2 dropdowns implement exactly this behavior. You can use the functions/events to generate the select list dynamically based on what is typed, so that no ajax request is needed and you will not need to create some dropdown that has all the possible values. This will be a bit of an advanced use case of select2, but it is very capable of this as it provides the query javascript function that you can override and present the values that are nearby.

enter image description here

Twitter's typeahead is also a well known implementation of this:

enter image description here

Improve this answer
2
  • The best answer to me is this simple one..
    – Prasanna Aarthi
    Dec 19, 2014 at 12:17
  • This is both the simplest to implement and the one that matches the current UI the best. It's also a fairly well understood concept.
    – icc97
    Nov 4, 2017 at 10:47
1

An autocomplete that is not editable
As you type it narrows down the choices (simply a filter)
If only numbers are valid then just throw out keystrokes that are not valid
If they type in a sequence that is not valid then you simply have no valid choices
An enter key is used to denote the user accepts the current selection
Tab key is next item from the valid selection list
Starting at the minimum bid is kind of problematic as if the bid is 110 and the want to bid 120 then the have to edit back
I would not fill in until the first number
Let them enter a 1,2, enter
So if they started with a 2 you would give them 200, 205, 210

A simple up down control

A simple slider control

Improve this answer
3
  • An up down control will be problematic if the user wants to enter a large value (it will take forever to click his way there). A slider will be better, but without a maximum value I'm not sure how this will work. Also it will be less fine grained control than users will probably want.
    – magnattic
    Dec 15, 2014 at 17:46
  • 1
    With the other solution you suggest I still will have invalid values, because I cannot know from the first numbers a user enters if this will be invalid. 1234 could be invalid, but 12340 could be valid.
    – magnattic
    Dec 15, 2014 at 17:48
  • No it will not present invalid values if you don't tell it to. Nothing is stopping the user from entering 12340. Or 1, tab, 0. Once you have a 12340 from the user then you present 12345, 12350 ... You asked for options - an up down control is an option. No you don't have to have no maximum - is an item in the auction really going to go for more than 1 trillion $.
    – paparazzo
    Dec 15, 2014 at 17:56
1

While digging around the site, I came across two other ideas in this question that allow input of only valid values:

Slider

A slider that can be dragged in different speeds (idea and image by JonW):

enter image description here

Benefits

  • flexible intervals possible (i.e. +20 between 200 and 500, +50 when value is over 500)
  • faster increase/decrease of the value by dragging further to the right
  • no max value necessary

Downside

  • might be unintuitive to use for certain users

Odometer

A control that lets you adjust each digit of the number (idea and image by Chase Sandmann)

https://i.stack.imgur.com/yIDHx.jpg

Benefits

  • If adjusting one digit would lead to an invalid number, the control could move another digit to fit the interval again. (or simply skip invalid digits altogether when adjusting)
  • Quick selection of high values possible

Downside

  • has a maximal possible value through the fixed number of digits

The advantage of both solutions is that they don't need much more space than a simple textbox.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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