Material Design Shows the Locked State by a greyed-out version like this:
But the problem here is the accessibility. Users with vision-related disabilities won't be able to differentiate these two.
What you can do instead is add a lock symbol inside the toggle along with a less opacity color and If the user tries to interact with it, provide a tooltip that ...
Validation should not start before input is complete
When the user starts entering a correct value, no errors should appear while typing. The input is considered to be complete when
the input focus is lost (navigating to another field) or
the form is submitted (e.g. autosubmit when pressing enter) or even
after not receiving input for some time (e.g. 3sec ...
I'll start by saying this will probably be an unpopular opinion because, for reasons I can't comprehend, what you've done is done a lot. My complaint is that you've made 5 text fields and 3 multiple choice questions around 2800 pixels tall.
"In reality you'd scroll the page"
I swear in a decade we'll all have 8k monitors and still be endlessly scrolling ...
While having a "faded" style for disabled controls is quite standard, the problem here is that the difference is too subtle for the user to clearly see.
You could change the colour from green to grey (for example), however that might risk losing the clarity that it actually means "enabled" (which is the whole purpose of the green colour ...
The problem with your first option is that having the attachment control appear between options will cause the subsequent options to jump around the page. In some instances this may even cause some options to be out of sight (off the bottom of the display). Overall, this can contribute to a confusing experience for the user, and is best avoid whenever ...
Rather than continuously display a red validation message when the user has not met a field's requirements, a nice alternative is to (1) display a tip that tells the user what is expected, and (2) display a green "requirements met" message when the user has entered a valid value. You can go green as soon as the input is OK.
It depends on the type of Input Field.
For the Email Field:
You don't wanna be too jumpy. Let the user finish typing the email address.
If the input field turns red with an error-text at the moment the user starts typing, it will annoy the user.
The right approach would be to let the user finish typing and when the user shifts the focus away from that ...
One possibility is to arrange them as in your Example 1, but instead of hiding the “choose attachment” menu+button when other radio buttons are selected, you keep the menu+button visible but disabled/grayed out.
This combines the main advantages of your examples 1 and 2 — natural ordering, but no content jumping around. It also makes the whole interaction ...
My intuition here is to show the file name (like in your example) and give the user a chance to confirm that it is the file they want to import. Giving the user (a sense of) control is a basic principle of user experience. I would expect that it will surprise users when the import starts immediately when they select a file. There is no indication it does, ...
It is recommended to select a default. It is also very helpful that you already know the most popular choice, which you would obviously put first in the list and preselect.
Marking mandatory input is common practice, even for a radio selection where a default is selected and where de-selecting is not provided, and even more so if for consistency reasons if ...
Try putting it in proximity to the label, not the input.
This allows a user to read the label, and get more information right next to it.
This separates it from the interactivity associated with entering the value in the input field. This also gives you a longer input field, and doesn't confuse an icon which represents an action (clear) with an tooltip.
Reduce the amount of choices the user has to make at the same time. The first step is to decide if the user wants a notification or not.
Change the label to make it more obvious: Send a notification to my phone when the order is ready
Only show the mobile phone input if the user wants to get a notification
At this point, you can make it mandatory to fill ...
Adam Silver has recently written an excellent article regarding multiple inputs versus one input.
While using multiple inputs can be helpful, most of the time it’s completely unnecessary and it has a number of drawbacks.
They stop users from pasting easily
They require more effort to use
They can be difficult to label ...
First you have to be clear, wether your switch should be readonly or disabled.
Here is a good article about that: https://vaadin.com/docs/v8/framework/articles/ReadOnlyVsDisabledFields.html
In my last project, I used these styles to differ the states of a toggle switch.
The switches are "active and selected", "active", "disabled"...
I agree confirmation/discard dialog should not be overused. A good practise which I follow is to use such dialog in case of any loss of data. In your case I would suggest any action that closes the page with uncommitted changes should show the dialog box and discard should clear any changes made.
I would not recommend having uncommitted changed state since ...
Most applications/websites either have an icon (often a question mark) to indicate you can hover over it (but then the hover only works on the icon, not the label) or no special formatting at all. The answer here suggests using a dotted line as well; I vaguely remember old Windows (3.x) help files working the same way.
Stack Exchange has a lot of labels / ...
I can think of some things to make it more obvious that the search has been triggered:
Flash the search results
Flash a light yellow background behind the search
Add a label on top of the results "Search results for 'ux stackexchange'"
Add a timestamp label "Last search: 2 seconds ago"
I don't think it is interesting for the user to ...
With the checkbox you basically break it up into two questions:
Are there any extracurricular activities involved?
If yes; What extracurricular activities are involved?
But you have already simplified it to one question:
(What) Extracurricular activities (are) involved(?)
The answer might as well be "None", just like any other option in the ...
The rule that radio buttons require a single selection applies to a list of radio buttons, not the whole form. Your form has multiple lists (some as short as two items), so each list is a group of mutually exclusive radio buttons. Within each group of radio buttons, the user can only choose one. When the form is completed, multiple radio buttons are selected ...
But that could be problematic as user would not get any indication.
I think that is the main problem here. Redirecting the user would be fine, most users have come to expect it now that software validates their input. It's only a problem if they don't understand what's happening.
As the very popular 10 Usability Heuristics for User Interface Design by NN ...
I far prefer encountering 2 to 1. StackExchange is a great example of work being saved when a New Post page is exited, and I am very grateful for it. I wish more sites adopted it, then I wouldn't have to deal with the frustratingly common situation of losing hours' worth of work to a session timeout or accidental quit.
I don't have research to support this, ...
Yes, don‘t prevent users from typing certain characters in fields because it makes the input (or the user's keyboard) appear broken.
Users don‘t always look at the screen while typing, so it would be especially frustrating if they typed a thing, to look up and find that what they typed doesn't appear.
Better to let the user input what they want, forgive as ...
The only thing that could be considered a standard really is the question mark in a circle icon, as @Glorfindel mentioned. Apart from that, it's what fits well with the rest of your content and UI design. As long as people can see that something is interactive.
Can I ask you to look into making them accessible?
First one is simple use that.
Using the schemes that already exist we reduce cognitive load.
Developers needs less coding on designing and validation part.
50% Less DOM interactions.
If planning to use 2nd pattern make sure you are adding helper text saying 9 digit are optional.
Great answers so far! I would just like to add a few points:
Check those tiny grammar details: Instead of 'Lets' > 'Let's', instead of 'Create A New Task' > 'Create a new task' or 'Create a new Task' it is not a big deal but those small details could matter for some users who would not take your form too seriously. As your site gets bigger those mistakes ...
Comment on Approach #3: The pattern of adding information inline is good, and for inline validation, typically, the row can become a bit bigger to fit it in. A pattern followed by VSCode looks like this:
Another pattern which is followed by JIRA (Atlassian) is that hovering on a table cell brings up a small dropdown triggered by an arrow, and a new table ...
Real-time validation works if you properly handle incomplete responses.
The example given is bad UI because "reara" is a valid way to start an email address. An example where real-time validation can reject an incomplete response is "reara@@". In that case the real-time validation can reject it without waiting for completion.
In general, ...
You could just utilize a paired checkbox with the field. Checking the box indicates that the user acknowledged the field and intentionally wanted to leave it blank.
This way a user cannot submit the form unless they either input data or check the box. May need to include some helper text so that the user isn't confused.