75

The user is entering a number. That some values are invalid for technical reasons does not change the nature of the user interaction. I would go with an option that is the most natural to enter a number Perhaps keep a regular number field, but when the user finishes their input, nudge the number to the closest valid option with a minor message to go with it?...


63

I think a horizontal slider with: Graduations (tick marks) showing the possible values A handle with a triangle end pointing to those tick marks Snapping to the closest possible value when you drop the handle A feedback of the actual value Of course, the ability to manipulate with the keyboard Optionally, the ability to use arrows or +/- to move to the next/...


39

The correct terminology is Greyout. It indicates less importance, relevance or priority or a change of status such as something being disabled or inaccessible. Definition by Oxford Dictionary: noun Partial or incipient blackout experienced by a person subjected to strong accelerative forces, especially during flying; (more generally) momentary ...


26

If you're using a framework, it should have the pattern defined by default. It's common to use gray, often dimming both the background and text. Even if you're not implementing a framework, you can incorporate its patterns into your application. Bootstrap Their forms section shows disabled elements: Material design They have a couple different styles of ...


16

There is a difference in the understanding at the level of the concept (label) vs. the available choices. You may need a couple of patterns for flexibility. If you are trying to impart understanding regarding the label and it's choices, you can put the i close to the label, and give some info on hover, with some links to documentation for further ...


12

Think of a logical order and good placement Instead you may use this: UPDATE Based on the comments from the OP (Original Poster): "So I am limited to the options that I have provided. It's standard in our system to have the controls go to the right of the label, not beneath it" Two Scenarios: 1- You are NOT limited on horizontal space: 2- You ...


10

It's not my words but NNGroup's: Simplicity Wins over Abundance of Choice Adding features that have little to no value to most users undermines people’s innate abilities to collect and process information efficiently. "Simplicity Usually Wins" I would strongly suggest solutions like the following for this situation. A simple Hint + Button named ...


8

While I'd agree with pretty much everyone else, you can do some interesting things not just with color, but with contrast: A lower level of contrast will cause elements to appear faded away, much like graying out would do with black on white backgrounds. In my opinion, this makes the UI element appear out of focus. Bear in mind this solution may not be the ...


8

Disabled input fields are usually gray (gray text and gray background). But you have to be careful with the contrast ratio and other accessibility issues, like working with screen readers. The article Disabled buttons don’t have to suck!, although it is about buttons, has some nice tips that can be applied to improve disabled fields (I altered them to apply ...


7

The easiest way might be to provide the help text next to the label, and provide simple validation for when a user fails to input the required pattern. I don't believe "4 digits" is necessary or common in forms requesting a full year be entered. I have commonly seen "YYYY" used in the context of years, so that should not be an unexpected use here. This ...


6

The error message should stay. There is a design principle 'recognition rather than recall'. Meaning the user should not be forced to remember things but rather give the information (or options) needed to complete the task. Someone could argue that often the error is quite easy to understand like 'insert a valid email address' or the like. But it can also ...


6

Elementary factor seems to be fixing the error. You need some intelligent code that will loop after the collection from * and if it encounters a hole, enter a value less than (index - 1) and greater than (index + 1). Also: Dropdown with 50 options is too mundane(but it's possible to implement search inside) DatePicker - sounds reasonably, 2 interactions ...


5

The most appropriate answer is "it depends", I reckon. First of all, I'd say there isn't one most appropriate date for the events like graduation (which can be anywhere between this year and past centuries if we take the deceased into consideration) or birth date (idem). I'd rather ask - can you afford setting a default year for each instance of the date ...


5

Provide immediate, polite feedback when the user has entered an invalid number. Immediately validate if the number entered is within the allowable range. If not, show a small, unobtrusive message next to the input. Additionally, do not disable any buttons or ignore any inputs, as this will always be unexpected. If I know I pressed a wrong key but you ...


5

Placeholder text should only ever be used to hold a placeholder value which provides an example of the data to provide. If you need to provide helper text, position it either above the field under the label or below the field. I tend to prefer placing it below the field and then replace it with error text when validating the field. In your second example, ...


4

You can simply add the label of the input for context, for example "Clear First name". This is particularly useful if this type of button exists on multiple fields on the page, otherwise it could be unclear what field this button is clearing, especially if users navigate by button or show a list of form items. Just two unrelated notes on the markup you are ...


4

I would allow setting a quantity 0 to remove an item because it is the obvious intent of having a quantity of 0. It seems that disallowing 0 could be an implementation issue where enforcing a minimum quantity could be easier than calling a deletion function for 0. It might also be a ploy to attempt to force customers to keep items in their carts for later ...


3

What is the most common color I would say the most common is the standard browser default: Chrome v73 Firefox v66 using the following html: <!DOCTYPE html> <html lang="en"> <body> <input type="text" value="normal"> <input disabled type="text" value="disabled"> </body> </html> Older browsers This ...


3

Here is an article from Baymard Institute: Shopping Cart: Auto-Update User’s Quantity Changes and Allow ‘Quantity 0’ (86% Don’t) “I tried minus because I thought you could get it down to zero.” A test subject tried to remove a product by subtracting from the quantity in an attempt to set it to 0. Many users have the expectation that setting a product’s ...


3

Looking more at the UI aspect of this... Like other answers, I would allow setting a quantity of zero (either through clicking up/down buttons, or explicitly typing 0) to mean "remove from my cart", but I wouldn't immediately remove the actual item-line (whereas you might immediately remove the item line if an explicit Remove from cart button was used1). ...


3

Fixed Decimal Benefits Reduced Input Errors Requiring no decimal reduces syntax error handling. The input is limited to 0-9 numeric characters and delete/backspace. So you help avoid cases like “54.2.89” (multi-decimal) or mistype of decimals. Requires No Decimal (or Comma) Sticking to digits 0-9 means you only need to use the top row of the keyboard. ...


3

I would use the first one. It shows the example which the user can easily relate to and it also shows the format in which the data is anticipated. The 2nd example has multiple redundant data.


2

I am debating the same thing as we speak--it is a much better use of space to have labels that are NOT top-aligned as is suggested by Material UI for mobile in my context where we are trying to keep things as much above the fold as possible. I would look at Luke Wroblewski's Web Form Design guidelines. Though the book is getting older, I think a lot of the ...


2

This is an unusual question since most people are trying to capture more and not less information, and I think it is useful because some names can be both male or female names and you need some other information to help you determine the gender (unless you already capture this information elsewhere). I would say that using a field for honorifics is probably ...


2

Treat this like any other destructive/permeant act a user could take against data. Because this is an unchangeable option present a confirmation of choice. This could be a secondary check box like agreeing to terms before submitting a payment, or a popup seeking a secondary yes. Any text you put on the page no matter color will be skipped by some unless "...


2

I would use the info at the right centered in the label. Why? The wrist tends to the right so, It will be easier for the user to click and it doesnt break the layout of the questions. Radio buttons works best if they are vertically align because the eye can scan from top to bottom than going from left to right, going down and to the left and continuing ...


2

If you can't deliver autopopulated results outside of Belgium, you can scope the search functionality, or be explicit in what's populating. I hope I understand the question. This seems a matter of setting expectations. One approach is to use a filter to start the search, where you have a dropdown showing Belgium vs. 'Anywhere' (I'm not sure of the best ...


2

Put the current date as the default in the date picker as it is not going to increase the cognitive load and based on the recognition, the user can navigate to any point.


2

In my experience, I've seen forms like this where the discount is another added line item (as if it were another product). So the product would say "Discount" and the price would be some negative value "-10%" or "-$10". Therefore the only manual field would be the discount "price" and everything else would auto-calculate.


2

Depending on what information you have about each person, you can help the user differentiate between people with the same name. The "Nobody in the household" option makes me think that the names belong to family members. If that's the case, show the relation of the different names. Like so - Sarah (Mother) Sarah (Daughter) If that's not the case, try ...


Only top voted, non community-wiki answers of a minimum length are eligible