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

Completing the city/postal code first would allow your UI to propose a narrower selection but, in your context, this would go against the user's mental model of how an address works. Even in a world where letter-writing is a dying art, people in the Americas and Europe learn that addresses start by smallest unit to largest. Generally something like this: ...


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

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


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


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 fields should be configured in a way that directly relates to what data goes into it. So, in this case, while it might be slightly easier to input the numbers with the tel format, that's not what the data actually is. You're breaking syntax rules. This has implications on accessibility, among other things. You don't want a screenreader user being ...


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


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


4

Giving a user an error message for something they didn't do wrong is always considered bad in my opinion. Preferably make the system take any spaces at the end away automatically without the user noticing it. It's up to the developers to see how they can best do this.


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

Yes, you can change the order of address fields on forms to improve completion. Many services on Brazil have done it and people adapted just fine. The following picture illustrates the address form in the registration of a big online store used on brazil that starts from the postal code. The site requires the postal code (CEP) to start. Many sites provide ...


3

You have made some valid points. However, option C makes the most sense. Many organizations have a practice where bulk emails are sent, and it may inlvolve users copy pastying more than 100-200 email addresses in one go. In that case, option A is a big NO-NO. You don't want the user to individually search for the wrong addresses and sit and fix them. Also,...


3

It depends on the users. Is it a form, that a user uses very often? in this case one field with the input like "6 m" or "6 h" would be a possibility. This is very fast but has to be learned. Therefore only an option if the users are powerusers. If this is not the case, two fields could be a solution. Let the user input the duration in either a hour and a ...


3

One possibility is that if a Zip code is incorrect and the post re-directed, an operator can look at the rest of the address ie city and get it on its way...


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


2

Note: This is for the USA. Other countries may be different. A city may include multiple Zip Codes and a Zip Code may include multiple cities. Multiple zip codes: New York, NY has a LOT of zip codes. Send mail to any of them with the city listed as New York, NY and it will get to the right place. Multiple cities: 80241 lists preferred: Thornton, CO, ...


2

Google material design states error text should replace helper text until the issue is fixed


2

You can minimize the form for each source once it has been completed. This way, the user will only see the list of all sources (type of sources) already contributed and one form for a new source. The user can go back and edit previous sources by clicking on their type / name.


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


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