How do you think about disabling the submit-button until the user has completed the form or the required fields?
I find similar questions here on ux.se and somebody answered that the user will think that the form is broken or not immediately realize whats going on.
I think hiding is not that good but a disabling (e.g. grayscale, opacity, ...) plus a short text in the button would improve usability because the user realise that he still has to fill out something.
Is there anybody with experience or examples besides the usual error-messages/validation after submitting?
Answer
You should show the submit button in an enabled state, unless you can easily explain next to it what would enable it, like an Alert saying "You can submit the form after filling in field1, field2, etc". This explanation would have to be directly next to the button and obvious.
You shouldn't rely on the state of the submit button alone to tell the user whether they are done with the required stuff or not. Firstly you can help users by auto-focussing on the first required field and then providing success/error messages as the user goes through the form (See Form control states in Bootstrap for an example).
One idea that I've not seen implemented yet, but may work for you depending on your application, is to let the user submit at any point. Instead of returning them back to the same form (with or without page reload) to fill in what they've missed out, show them only the required fields that they haven't filled in:
download bmml source – Wireframes created with Balsamiq Mockups
The idea here is not to make the user feel bad by informing them that they failed to fill in everything that was required. Take it in a stride and just ask them for what you still need as if you're clarifying this with a person. Keep in mind that you never benefit from the user feeling stupid for not doing something correctly, so just forgive them and ask again - they never need to know it's because they've done something wrong in the first place!
No comments:
Post a Comment