Mandatory fields and CTAs

design

#1

I am thinking through not allowing a user to proceed until mandatory fields have been populated. I do not want to add an asterisk to the mandatory field labels.

scenario 1 - show the CTA but it is only active when mandatory fields are completed

scenario 2 - don’t show the CTA until mandatory fields are complete

Are there any innovative approaches or reasons why this approach is not a good idea?


#2

Quick answer: it is best practice to visually display to the user what is a required field. You can do this in 2 ways, indicate the required fields or indicate the optional fields.

This is quite a useful website for general rules of thumb with forms

Long answer:

Are you using any other indicator other than showing the CTA as active? Are error messages displayed etc?

I have a few concerns with scenario 1:

  1. a user may think there is another problem (possibly technical) for the CTA not being active and so abandon the process,
  2. A colour blind user may not be able to differentiate between an active or inactive button dependant on how you display this

Scenario 2 has slightly different concerns:

  1. Again, a user may think there is a technical issue - button hasn’t loaded on page, error on page, etc and therefore abandon the process
  2. A user may not notice a button appearing later when filling data. They may look over the form to start with, decide they don’t know how to submit, and therefore abandon the process

What about indicating optional fields instead by adding (optional) in smaller text next to the field name? (I always use this if there are more mandatory fields than optional as it stops the form looking too cluttered)

Or could you add validation if the user passes a mandatory field - technically not fun to implement and also relies on the user clicking in each form field in a set order. Also heuristics state that:

“Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action”

If all of the fields are mandatory you could add this to the form legend in smaller text?

Something else to add - there has been research done that indicates if you highlight required fields users will give less information. If you indicate optional fields they are more likely to provide more information. To prompt a user to give even further you could tell them why you need it (e.g. Telephone (we will contact you by phone if there is a problem with your order) Also, make it clear you won’t sell their data and they are more likely to give you more information.


#3

@lorraineboothe101
In my experience, if a field is not mandatory, it will be not filled in.

Providing content on the go decreases user effort and help her/him to accomplish the task.
In a nutshell, if is not mandatory, do not display it in the main user task!

You can always provide an extended version of the web form, according another user journey, for example:

Scenario - registration process
Step #1
2 fields, username (with server side validation), email (with server side validation)
1 CTA as Register button

A message from the system will be sent to the registered email providing an activation link

Step #2
Users receive the link and clicks on it. They will land on the setting page (always available) with:
Fieldset 1 - one field for the custom password with a self-explanatory palceholder and highlighted
Fieldset 2 - additional information
1 CTA as Update Profile

Another hook could be to send an email inviting users to complete the profile

I don’t know the scenario you are working on and I hope my example is self-explanatory about the UX approach


#4

Great shout! Reducing the amount of information the user needs to fill in to just the mandatory forms (and indicating all fields must be filled in), then do something like a profile completion indicator for the optional fields (like paypal)


#5

@jacquidow
Yes exactly!
We did an A/B test for the re-design of the registration form.
We deployed the short registration form for one month against the “traditional” registration form.
In terms of user registration, the short version outperformed the extended version by approximately 16% (25% more on mobile)


#6

Wow! That’s a huge improvement.