nl-design-system / backlog

Central product backlog of the NL Design System.
European Union Public License 1.2
7 stars 1 forks source link

Documentation: marking required and optional fields #142

Closed FluxxieNL closed 5 months ago

FluxxieNL commented 2 years ago

I would like to suggest to change the text & guidelines in 'Required vs optional fields'. Currently it mentions 'if not all fields are required, make clear which fields are' and 'Are most fields required in a form? Then only show an indication for the optional fields. '

What I have against this is that you now require users to magically know what form fields are required. Users scan content, they might not read the text line 'all fields are required' if it is even referenced above the form.

For instance on mobile screens (and desktops) you might not see all information at once. In this example the page fold is just where the first field that is 'optional' is placed. Because it is outside the initial fold, the information is not provided to the user. With just this amount of information it is not clear that all fields are required.

voorbeeld-form

As mentioned in https://www.nngroup.com/articles/required-fields/ it is better to make clear what fields are required and optional.

So I suggest it is changed to: Always make clear what fields are required and those that are not. Marking both the required and optional fields will ease the cognitive load for users. By marking both the required fields and optional fields the user will not have to infer it by themselves.

The text written by me can be used under the EUPL license.

usethetics commented 2 years ago

@FluxxieNL Good point, thanks!

Unfortunately the form guidelines in the Storybook environment were more of a placeholder text and as such outdated.

In the meantime we have had a couple of sessions which included form specialists to come up with a new set of form guidelines which are open for discussion and contribution. Those guidelines are available here: https://github.com/nl-design-system/documentatie/tree/main/patronen.