New answers tagged forms
0
Is there any option to allow the form to automatically Submit changes on exit?
You could then have the option for the end user to reset the form/field to the previous state if they choose. My guess is that the reset button would rarely be used and it would be more convenient for the user to not have to submit the form themselves. Allow the program to submit ...
1
Now that the forms are organized into cards, why not have a submit button for each card? This way, the submit button will always be located close to the user input.
As the typical use case is that the user will only modify a few elements at a time (hopefully all in the same card?), they won't need to click 3 times.
The button would be visible only once a ...
2
As I was reading the other comments,
• Position of the Submit Button at the bottom:
The problem with this is that every time user edits the form he might try to find submit
button, and for that he has to scroll at the bottom of the form.
• Floating Submit Button at the bottom left corner:
Floating position of the submit button on the lower left ...
1
I would go with bottom left alignment on the button.
https://adamsilver.io/articles/where-to-put-buttons-in-forms/
0
If you have inline validation for string password and password be same, It's OK to disable button until fields are valid. But if you haven't done that, it's good to not disable CTA button. Good luck!
1
Both are good. But keeping the button active and providing an error message pointing to the error made is better.
This way the user also knows what is keeping them from changing the password when the error message pops.
0
It depends on how your company handles old forms without validation.
If a form previously edited is valid till a new change, then provide a page notification reminding the user of this change when a user tries to edit the form. When the user starts to edit, show that the field is not validated (with the style, red border, etc.). If the user doesn't give ...
0
The design Patterns I could relate to your requirement is any app the manages contacts. In such requirements look at design patterns that meet these criteria.
0
You can get some ideas from mail functionality, it gives pretty much all features that you are asking,
Swipe and long press gesture for delete and other operations is quite popular in mobile apps.
3
Make sure that all the fields in your accordion are closed upon error check (on SAVE button press I assume)
Display a contextual error message next to the SAVE button
[OPTIONAL] Disable the SAVE button unless all the errors are fixed
2
I think it would be more intuitive to just scroll to the area/tab that needs correction.
Since it is for mobile and the users would want to complete filling the form as soon as they can, they would want to just fix the errors as preferred to seeing a list of errors first.
If there are multiple errors and there is a 'complete action' for each information the ...
0
You can use toast notifications for smaller screens. Bootstrap has some amazing examples,
https://getbootstrap.com/docs/4.2/components/toasts/
0
Well, you could see it from another perspective. Of course the message is the main point of the interaction, but here are a few thoughts on why that doesn't automatically mean it should be placed first:
The first argument would be habit. Most internet users (at least in the west) are used to a form as on the right. Reordering it might throw them off. (...
1
I think of something like this:
Pro:
Understandability of the entering mode: either Parent, or Children
Eliminate undefined state and possible confuse, when there are some values in the Children nodes, and the user enters Parent value
Clear UI due to hiding non-relevant input fields
Con:
Jumpy behavior of the switch control. The effect should be ...
0
I think the torrent app flud is a great example for your case. 1. there is search. 2 & 5 are for adding torrents, in this case you can add 2 different type of sources. When you press and hold one of the items in the list it pops up a checkbox left from every list item; you can delete one or multiple items using the "options" button and click remove item.
1
There are different perspectives to answering this question, and they have been addressed in previous questions separately that you can consider:
Internal Consistency vs. Consistency across the Industry, which is based on balancing what is considered best practice and consistency with your own product and users. If you have a new product and new users this ...
1
I would do it with this priority:
Message > Full Name > Email. Look at it from the mental model of people have a message and they type it then they sign their name.
I hope this helps.
2
Implement a general "browse" feature.
One social media-style app that impressed me with its new user experience is an app called Yonder. It's a photo sharing platform focused on outdoor adventure.
I, being a brand new user, obviously was not following anyone on this new platform, but instead of presenting me with an empty feed, it defaulted my experience ...
0
To paraphrase, the point is that in the new solution there is an initial variability, while in the previous ones it is not?
In order to make the whole application more consistent, you can add an initial value to all sorts (all option by default) - but this is definitely more work :O
What if the proposed language label is identical to the previous one after ...
0
Think about what the end result of filling out the form is. Action A results in the form being inserted/saved/stored in the database, action B results in the form being inserted/saved/stored in the database, but also locked for further editing. How is this clear for me as a user? Simple:
Save
Submit
A message confirming my action might give me more details:...
0
This article has a nice recommendation especially for country options. Most mobile devices and browsers can provide geo location helping to narrow down the user's choices of location. If their location is not in there or they are using a proxy and the location is invalid, you can default back to the entire list. I would bet with some google searching, you ...
0
when creating a new company avoid having another modal, rather have it's own page to edit the company's details otherwise the users will be easily confused with your flow. And about the logo, have a settings page where users can create companies in there and edit existing ones. this way they can add logos to those companies and avoid having to add it while ...
1
I would suggest that if the information on the form is the same, you can stick with a consistent form of displaying it (I'll pick displaying within a modal too). If the content would be different that your approach is perfect.
In any ways, being consistent would cater for a better user experience and if you must make a trade off, you should probably think ...
0
I think you have already thought this through very well.
I thought about the possibility to have this button appear only on hover
I think this suggestion can work if you make sure that no content jumps around if the menu icon appears. This pattern is pretty common. The icon should also appear if the field is focused (e.g. for power users that do not use ...
0
I see full screen modal in most google product these days. It's mobile and desktop responsive and a lot of UI frameworks support this new element. what do you think about it?
1
Most of the answers here are already on the good track. IMO,
You should have normal dropdown field, without + button / icon. Placeholder for that field should be "Select or create company"
Once clicked, first option in dropdown should be "Create new company" with appropriate icon
Once clicked, new overlay should come. On top left of this overlay you ...
1
Instead of opening a new modal at the opened modal, you can try a modal form with a slider input for such special cases:
1
The first thing comes to mind is that if user chose 'add new company' a required field add to form and tell user to enter company name. I showed that in pictures. In this solution we are preventing 'modal over modal:D'. But be sure user will understand that additional form. I colored red, you can do everything you want!
0
I agree with first answer! '+' button does not do what you expected. I prefer something like this:
I think in most cases after a while, user can select company from list. If is not in the list he choose 'add new company' option and enter the company in a pop-up modal form (It's a tiny form with just a text field input!).
Third solution you mentioned also ...
1
Kristin, what are the typical years that users would enter into this field due its intended use? Based on that, you could come up with an algorithm that would automatically create a four-digit year when a user enters fewer than four digits.
As an ad-hoc example, of these were years of birth, than you can safely assume that any year would be less than, or ...
0
There's a lot of ways to accomplish this and this is one of them. Here the user can edit each product, unit value, and quantity and also remove it easily if needed and add another product.
Note: The CTA at the bottom - I would encourage you to either change the text color to something dark or use a darker background as it is not WCAG compliant.
2
It's quite an in interesting title that NNGroup decided to pick for this.
Placeholders by themselves are never the issue
If you scan the internet, most studies talk about the following things that make placeholder "harmful":
Using them as replacements for labels
This phenomenon became a common occurrence in the early days of minimalist approach in ...
0
I think placeholder attribute are used to represents a short hint (a word or short phrase) intended to aid the user with data entry.
According to w3c on placeholder
The placeholder attribute should not be used as a replacement for a label. For a longer hint or other advisory text, place the text next to the control.
Use of the placeholder ...
Top 50 recent answers are included
