New answers tagged forms
1
This pattern is often called friction. Below is an excerpt from the article Friction in UX design can be benificial, by Mia Sheffields:
Friction in UX design is when something in the design slows the user down or makes it hard for them to accomplish their task. This can be a pop-up advising a user to sign up for a newsletter, an empty state page, or an “...
2
Instructions can often be embedded within how the interface and taskflow is designed. In this case, an intermediate state could be introduced where the question transitions from a "test" phase to a "learning" phase. During the "learning" phase, the user has the choice to explore the official explanation for each right or wrong choice.
1
I'll be saying something that won't be popular. Like most answers here we have deployed our iPhone app without a second confirmation email field.
But know we are seeing many email bounces. Users write Gamil, instead of gmail. Or Yaoo instead of yahoo.
We are using Amazon SES and our bounce rate is already at 1.25%. This is what Amazon says about it:
...
2
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 ...
3
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?
https://inclusive-components.design/tooltips-...
4
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 / ...
0
Have a 3rd radio button at the bottom
SMS / Whatsapp / I will watch the Collection Counter
7
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 ...
1
I think designing a "better way" is too subjective at this point. Should your users know the field is optional? Sure, but as you have it now there will be some users trying to skip that field anyway. If you really want to highlight that it's optional here's a couple options:
Just add the text (optional) to the field heading
Change the notification options ...
1
Zoom doesn't really work like that. The only Zoom IDs are meeting IDs. If you have a pro account you can have a standing meeting ID# but that's not the only meeting ID you'd join meetings for and you definitely wouldn't have people booking meetings with you using your meeting ID. Zooms contact directory is based around email so you could just ask what email ...
0
I think "Enter your Personal Meeting ID" might be the best option.
After watching this video https://youtu.be/3ZLj5GRB6PQ (at 3:50) it seems to be right.
0
I think Adam Silver made a good point but it wasn't researched (I think). It came out of creativity. Shouldn't someone research why phone numbers are 7 numbers?
I'll tell you the answer via a hopefully, not-so-boring story and you, guys can consider what to do with the info.
When the telephone was first invented, phone numbers started with 4 numbers (...
6
Adam Silver has recently written an excellent article regarding multiple inputs versus one input.
Short summary:
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 ...
3
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.
0
Disclaimer: I am not a UX/UI designer, but I am a user who knows what he wants.
I will repeat a few points that I think are very important:
This is a form, users hate forms
If forms are unavoidable, you should do everything to streamline the process to make them as quick and effortless as possible. This is especially true for forms that will be completed ...
0
I see this sort of design a lot, and frankly I find it annoying.
I think it can be tidied up quite easily though. These would be my steps:
Get rid of the empty grey space between each portion, maybe leave a tiny line.
Have each question except the top one collapsed, so you can only see the question but not the answer options.
Once the data is filled in the ...
23
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 ...
3
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 ...
2
+1 what the previous answers said,
I'd also like to add a little note about the consistency of the selections. In the "how should we notify you" section, deselected elements are grey. If that's the intended effect, that should be consistent with the rest of the selections as well.
7
I agree mostly with what @Steve O'Connor has said, but there are two things I think we can discuss further:
Hint text should be useful. Meaning that if you're going to use it, write examples instead, like: "e.g. john@smith.com" in the email field.
Hint texts are extremely helpful especially when the field itself doesn't exactly explain what should be ...
3
I don't think I fully understand the question here but I'll try my best to answer, and please correct me if I misunderstood or said something false.
Case 1:
User has all the fields available from the start and has the option to not fill all of them (such as uploading the files). So we have the required/non-required fields and the user can "skip" the file ...
26
I feel you might be coming at this from the wrong angle. A form shouldn't excite you (or a user), it should get the job done quickly and painlessly.
Boring can sometimes (usually!) be best.
You mention that this form can be accessed on mobile - can we see that?
There are some issues with your form that I can see from the screenshot, many of which are ...
2
Well I guess you can show the uploaded file as a list, which will allow user to upload multiple files that they can remove if they want. Maybe something like below images.
1
Simply place helper text around input field "leave blank to remain unchanged".
It is better to define separate user journey for update password functionality for simplicity.
Even with the security concern passwords are kept separately in database.
I will suggest to separate password-update from the modal.
1
we can try this.
Initially Layout will be same as yours.
When user clicks on view document, related document will slide in from right edge. Side navbar will slide out to generate more space for document. when user click on close document, document will slide out and side navbar will slide in.
Refer this for more page-slide-stay-on-the-page-pattern
1
This can be called multi-select from a dropdown list. The chosen items could also function as a filter in some use cases. An alternative to lozenges is to show the items in a list under the dropdown menu, with a remove action. Another could be to have a different visual treatment of the lozenges as shown below.
Step 1:
Step 2:
Image credits: Daniel ...
3
It depends on what the purpose of the pre-fill is. Is it a placeholder ? Does it hold information on how the input should be filled ? What is the supported text length on it ? If it is pre-filled is it editable ?
In my opinion you should remove placeholders all together, have labels and add info text underneath the input if it shows conditions of how the ...
0
My answer would be: it depends.
I don't see an obvious choice between the three. It depends on what your users do and how they do it. So the simple answer is: have your users try it and see what works better! In other words, it's work.
Now let's think about constraints and tradeoffs here:
A has three tables visible. The page might be longer.
B cuts down ...
1
I feel like this is a choice informed by my own habits/preferences rather than anything else.
Yes, I have rarely if ever met people that use keyboard tabs for navigation, at least for people without the need of an assistive technology.
My suggestion:
Don't do any changes, keep them in their sequential order: Input, Eye, Input, Eye, etc. Your users with ...
3
You are faced with a conundrum of wanting something that is counter to user expectation. Your choices, as you quite rightly stated, are
manipulating the tabindex
placing the "eyes" after input boxes.
Manipulating the tabindex will make it a horrible experience for those with screen readers. Placing the eyes at the bottom will ... be interesting. I would ...
1
Short answer:
Do research. Don't do what the customer wants, try to understand why he/she needs that and map the flow. Check the pain points, reiterate wireframes and test it again. Don't listen only to one customer/user, I encourage you to explore more the problem with at least 10 customers/users.
Why:
I think there are some questions you need to answer ...
Top 50 recent answers are included
