-1

I have a form in steps, The user should fill the required data in each step to be able to go to the next step and this is working fine.

But there is a step that some users don't know what to do in this step, There are 3 checkboxes the user should at least check one of them, Then enter the related data to go to the next step.

The user could choose all the 3 checkboxes, But he has to enter all the 3 related data, So whenever a checkbox is checked the related data should be filed to go to the next step.

enter image description here

So what text/hints/images/styling should I use to let the user know what to do?

  • Progressive disclosure is the term you're looking for. – Levano Jan 30 at 12:05
1

i suggest you arrange the checkboxes one under the other and not on one line, AND by default the extra fields (for the relevant data) should be hidden. This way, when the user check any of the checkboxes, the field with the relevant data can appear near the checkbox, and there wont be any confusion about what he should fill up

  • As I mentioned the user can check more than one checkbox and fill the related data, The user could uncheck/check any of the checkboxes – Jonathan Feb 1 at 2:53
  • Here is the form, You will find the checkobxes in the 2nd step, The code is working there, So you could see how it's working now mdev.cloudaccess.host/admission2/admission.php – Jonathan Feb 1 at 3:21
0

I'm ignoring the code examples as they are not needed to answer the UX side of things here.

You have a multi-step form, like a wizard. I would suggest using that as a pattern as I'm assuming your users are not familiar with your form, given that they don't already know how to use it. If they are untrained a wizard is a good option (this is a great Medium article on Wizards and when to use them).

That being said you need to convey that once they have chosen options that the linked fields are required.

Your example fails because once I click on A and B, section A disappears. Your real solution might not be like this, however.

Option 1: A clearer grouping, like accordions.

  1. So if the Section A option was selected it would expand to show the required fields below. Animation showing where these fields are coming from would be helpful, so the sliding down animation helps with this.
  2. Each should clearly show they are required with helper text. Entering a field and leaving without entering data should make it red.
  3. Colouring each field red immediately is not ideal as this can make the user feel like they have failed before they have even started.
  4. Submitting without completing should let the user know which fields are missing and that they are required. Scrolling to that field is very helpful.
  5. By the same token making things green when they are filled and then the whole section header green or adding a tick can be helpful. Aim for clear but not loud visual communication. Otherwise, it can be overpowering and visually noisy.
  6. Definitely include instructional text that is brief but explains that they can select more than one option, but each selection has related required fields.
  7. It's generally a good rule to tell users things more than once. So the instructions are once, the helper text per field is twice, the validation colours three times. If you had coding hours to spare (haha!) you could have a decreasing counter as each field validates.

Option 2: Adding more pages in the sequence.

  1. First page shows the Checkboxes
  2. Then if the user chooses A and C those pages are added into the form flow. Or Section B is removed depending on how you look at it.
  3. Checkbox Page (Chooses A & C) > Section A questions page (All required) > Section C questions page (all required)
  4. The user cannot move forward without completing all the fields.
  5. Provide a back arrow so that the user could change their checkbox selection.
  6. Don't clear fields if the user goes backwards then forwards again (not easy dev wise but a really poor experience if a user must fill things out more than once).
  7. This sort of chunking is better for simpler form completion (even though it is longer. It can also prove to be more mobile friendly as well. There are possible dev/functionality benefits if you save on each Next button progression.

The reason I suggest this is accordions can be confusing and hide things if the related questions are long and people have to scroll a lot. This good article on Smashing Mag talks about it.

Regardless of the option you use - Test your solution.

  • You have feedback on the first version
  • test the improved section or chunked version to make sure it improves the experience.
  • Make any follow up changes based on test data or suggestions.
  • It's a good idea to test after small iterative changes.
  • You might solve the problems with less work :)
  • Have a success metric (e.g completion rate or conversion rate) to show the before and after effects of your UX changes with hard data.
0

"Please select at least one option"

You answered your own question, if you re-read it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.