0

Background

I work with web forms for users that have trouble getting employed because of e.g. disabilities, being new to the country and language, etc. We have to ask them questions to learn about their eligibility to programs and to learn how to best help them. Because of this it is very important to keep the entire form very easy to understand and complete.

Example

In the following (hastily translated for your convenience) example we have a set of input fields asking the user for multiple dates. Let's assume we already asked a question confirming that there has been a period of time where the user has been at home taking care of their child(ren).

If the user has been taking care of their child for multiple periods (or multiple children), we give them the option to add more periods (input fields) to input this information.

When adding new input fields relating to the same type of information, we end up with the same labels, unless we add some way to differentiate them. How?

Example image: A set of 3 form fields are increased to another identical set of fields by the user

Alternatives

  1. The newly added input fields gain an addition to their labels. For example "Birthday of the child (period 2)" or a sub-label simply containing "period 2". This could start looking messy, but it has the bonus of being very clear. A user with a screenreader would immediately be able to tell the periods apart. But the first default set of fields doesn't say "period 1", which may be expected since the "2" from the new fields imply a "1".
  2. We wrap each set of fields in a fieldset and give those a legends-element with "Period 1" and "Period 2", etc. The fieldset+legend approach looks structurally sound and has the added bonus of working well with screenreaders. I do, however, worry that the default set of fields having the legends "Period 1" when there is no "Period 2" yet, may seem out of place.
  3. We ask the user beforehand how many periods they have been at home taking care of their child(ren). Thus enabling us to show the exact amount of fields necessary and labelling them appropriately. This removes or at least mitigates the unpredictability of dynamic forms. But it does add complexity to the user flow. They have to answer an extra question and if the user suddenly remembers another period they want to add, it may be less clear how to do so. The correlation between the amount of input fields and the amount of periods they declared in a previous question may not be apparent. It goes without saying that when working with users that have a weak grasp of the language or disabilities, added complexity may hinder them from completing the form.
  4. ???

2 Answers 2

0

A combination of opt 2 and your current design should work fine. User is asked if they had child care period. He checks it and the first 3 input fields appear wrapped with a section title like 1st child period.

At the end there is the button to add more periods.

0

If the user is creating a form that can be saved and reused or shared, a fieldset with appropriate legend is the most user friendly and accessible way. Screen readers can automatically or manually repeat the legend to make the context of the focused field clear.

But this is a form that must be completed immediately, with additional information added, isn't it? Keep it simple for your users by providing only a single form to add or edit periods. Hidden inputs can be used to store the form data. I used your image to show what I mean, but it will take some trial and testing to know how best to design this:

enter image description here

Edit a period: enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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