60
My web app has the same workflow and we show a disabled version of the Continue button which is enabled when all the form fields have been entered. If the user clicks on the Continue button without entering all the info, a user message is shown in the pop-up, so I think B is the best solution.
Option A can be frustrating for the user because they might ...
28
It is an anti-pattern to visually disable affordances, functionally disable affordances, or hide affordances. PLEASE don’t do it. I will make a case for all three.
Disabling or hiding affordances is one of my biggest pet peeves, especially since it is a case of over-engineering the solution:
It’s always extra engineering and design effort to hide or ...
22
In the end, both ways lead to the same result. Whether it's an inline error or maybe a bubble with feedback, the user gets to know why he can't proceed (which adheres to visibility of system status).
The point about disabled elements never having an action is understandable, but strictly clinging to this rule is not really of service to the user. If he ...
10
If this weren't mobile, I'd say it would be better to have a message shown next to the disabled button saying
Please fill in the remaining required fields (marked with *)
or some such (wordsmithing required).
But for mobile, where you don't have that real estate, having the button active (not disabled) and having it tell the user what fields they still ...
6
If the tasks are mandatory, and they should only be so for features that enhance the experience, like selecting the colour of a jacket before proceeding to purchase, then my advice would be to have the button visible, but disabled.
This combined with good use of tagging fields as optional, and messaging, should allow your users to complete the steps without ...
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
Frame challenge: most of the time, multi-step "wizard" workflow that won't let you continue to (or even see) what it's going to ask you next until you finish what it's asking you for right now is user-hostile and is a dark pattern. To the user, it feels like they're being asked to give information before they know whether doing so is going to be beneficial ...
5
This is how the Google sign-up process does it. It should be very similar to your process. Note that the primary button is always enabled, it only changes its function!
You are presented with a pretty self-explanatory form
The Next button has the primary color and can be clicked. Note that the secondary button takes you to a completely different process (...
4
4 pieces of survey design advice
Is your survey super short? Are you expecting most people who take it to be on a mobile device? Then include all questions on one page.
Is your survey long (but hopefully not too long)? Spread questions out onto a few pages. But! Don’t show only one question per page—you’ll end up with way too many pages.
Does your survey ...
4
Going by the concept of 'informed decisions', it is always better to provide users with enough directions so that they do not make any mistakes instead of letting them find out that what they did was all wrong. If the form fields have required marked on them with an asterisk * or in some other way along with the other design intentions, the form will be ...
2
To me, it looks like you haven't actually disabled the "next" button, just toggled its behavior. So instead of
enabled (action a) ↔︎ disabled (no action)
you now have
enabled (action a) ↔︎ enabled (action b)
That in itself isn't necessarily a problem unless you render it as actually disabled. If you do, your users will expect other "disabled" buttons ...
1
I'd like to suggest Option 1.and also you can show information without clicking the icon. Also, each and every field do not need information icon in my opinion. such as Genter, Birthday. Try to put an information icon where the user will get confused.
And these are my suggestions
1
At first: Use the feedback of the users! (not necessarily the stakeholders if they do not use the form by themselves).
I think both navigation Models are equal. The most important thing is, that the steps are clear to the users. In your example there are multiple steps per major step. This might be confusing. Also the major steps have quite long forms which ...
1
Great question, I partly agree with @BrunoH here.
The 'Recognition rather than recall' heuristic makes it easier for the users to remember what they did wrong. However, there is a 'bad' side to this. If the user is interrupted during the error correction process, for instance: They get a phone call, the doorbell rings etc. they might think the current input ...
1
Is it possible to combine the fields into one input, and figure out which they used server side? That way, you can eliminate half the fields, and the user doesn't have to make a decision or remember whether they login with their email or username.
1
That NN/g article is correct, and the answer to your question is, Yes! :)
As also stated in, say, the Switch section of the Material Design Guidelines, the key behavior of a switch is that "[w]hen a user toggles a switch, its corresponding action takes effect immediately."
Every time I've discussed this aspect with fellow Ix designers, we agreed that "...
1
Should a submit button be disabled by default for an inline form with only one input field? [closed]
Pragmatically this isn't a form that needs to be validated.
Technically, yes, but it's just one field and 1 simple issue: is there text entered? There's no check for date formatting, if an email works, if a password is safe enough or anything commonly done with a form. So there's not the same cognitive load.
As the other thread mentions, users have two ...
1
I recently worked on a similar multi-step wizard that helped medical practitioners find the right medical licences to apply for.
TL/DR: we went with deactivated button option.
Since we followed a progressive step-by-step approach where the response to each question guided the subsequent questions, the 'Continue' CTA needed to be after each response. ...
1
Where is option D? Show the button in enabled state and also show instructions that make clear that the form must be completed before you can continue. This way you let something to discover. The user could (and should) have read the instructions, but if he doesn’t, he can still click the button and get some feedback what to do next.
I advice not to shout ...
1
I think the second approach is the way to go. The user then already knows where he can continue and that there are more steps coming.
the third approach can work aswell, I would need to see some mockups for this. It can be really elegant, but the danger of confusing the user is there. I think the second one is save, reliable and user friendly.
Only top voted, non community-wiki answers of a minimum length are eligible
