Asking for at least one thing

[joelanman]

What

Sometimes you need to ask the user for at least one thing - most commonly at least one form of contact (email, phone number)

For example:

Why

This is used in Register to vote

[terrysimpson99]

This follows a slack discussion. We replaced a conditional radio button design (similar to the checkbox design above) with the target fields. We implemented:

Each phone number and each email field is neither wholly mandatory nor wholly optional. We decided saying 'Optional' was not appropriate. We decided not to explain the validation rule until it's broken but it's something we could consider.

[adamsilver]

I like the checkboxes option @joelanman but as an alternative pattern where the user has to fill out at least one field you could put those fields in a group like this:

[MalcolmVonMoJ]

We have a similar situation in one of the services here at the LAA.

Not including the above approaches, we have the following options.

1, Not repeat the error next to the question.
Problem: forces users to look at the top of the page for the error

2, Repeat the error next to both questions.
Problem: it refers to both Q1 and Q2 next to each question. This is similar to Terry Simpson's approach above, but the error summary doesn't duplicate the error.

3, Only repeat the error once, next to the first question.
Problem: Q2 doesn't have an error, although it is highlighted. We are relying on the user to look at the error next to Q1. There are probably accessibility issues here too. This differs from Adam's approach above in that we have two distinct questions, rather than one question with multiple answers.

4, Individual text for each box.
Problem: It might imply that both are mandatory, which isn't the case.

5, Enter something more bespoke which might be more helpful.

The other thing we are considering is how to word the error summary. The prevailing view is currently split the single error in two, linking to their respective questions, like this:

Discussions continue...

[joelanman]

@MalcolmVonMoJ what's the wider context to these two questions? Is there more content above them, or a previous page?

[MalcolmVonMoJ]

There is no previous page. Here is a screenshot of the whole question.

[MalcolmVonMoJ]

Our latest design thinking is to move the error message above both questions like this:

Regarding screen readers, we don't want the error to be read out and then the question, as this might confuse things when someone doesn't have the benefit of the red line.

So we have made the visible error aria-hidden:true whilst repeating the error in the usual places but using the govuk-visually-hidden class. A screen reader user will thus hear things in the tried and tested order.

Clicking on the error summary links will jump to the error message at the top so it remains visible, whilst focussing on the input box corresponding with the selected link.

[anevins12]

Sounds good, but worth considering that hiding the visible text may be unpredictable to people that have vision and are also using a screen reader. By unpredictable I mean that the visual experience is different from the hearing/ screen reading experience.

[MalcolmVonMoJ]

That is true, but we are only moving two lines around so hopefully anyone who is using the screen reader as an aide, who still has the benefit of the red line, will not be confused.

The risk of someone relying on the screen reader for all information hearing "enter A or B", followed by "enter A" might think the choice has been made for them.