Add "required" text for required fields in Questionaire

[Manikant25]

Is your feature request related to a problem? Please describe.
No this is just an enhancement.

Describe the solution you'd like
Asterisks symbol can be added for the fields which have an attribute "required": "true".
* indicates required fields as seen in the sample below.

Describe alternatives you've considered
NA

Additional context
NA.

Would you like to work on the issue?
Yes

[Manikant25]

@jingtang10 If you like the feature, then may I start with it.

[epicadk]

#470 ?

[Manikant25]

#470 ?

#470 does not show an asterisk for required fields.

[jingtang10]

@Manikant25 thanks for raising this - this is now an urgent need from two implementers.

@Manikant25 please feel free to send a pr asap - if you don't have time @santosh-pingle will work on this.

[Manikant25]

sure, I will try to send the PR by the end of this weekend.

[jingtang10]

@shelaghm can you please comment on the UX design of this issue?

[shelaghm]

This makes sense to me. I assume it will also be important to pair the astericks * with instructions that say required question. We are planning to test this in an upcoming usability study to learn if people are familiar with what * means.

From a UX perspective I recommend making the * the same color as the question text. In an error state it can be red to indicate that a response is missing to a required question.

[santosh-pingle]

@Manikant25 Any updates would you like to share on it?

[santosh-pingle]

Looking into it.

[santosh-pingle]

This makes sense to me. I assume it will also be important to pair the astericks * with instructions that say required question. We are planning to test this in an upcoming usability study to learn if people are familiar with what * means.

From a UX perspective I recommend making the * the same color as the question text. In an error state it can be red to indicate that a response is missing to a required question.

@shelaghm
Does it require to show * in instructions if required field is true, as it is already being shown in question text?
if yes, also is it (* in instructions) required to show in red color if it's in error state?

[shelaghm]

I suggest we use words to explain what * means by addingrequired question in the instructions text field.

Error state should look something like this screenshot. I don't think the asterisk needs to be red in error state, only the instructions text. What do you think?

[santosh-pingle]

I suggest we use words to explain what * means by addingrequired question in the instructions text field.

Error state should look something like this screenshot. I don't think the asterisk needs to be red in error state, only the instructions text. What do you think?

@shelaghm
what about instructions which get defined in questionnaire form? currently existing implementation only shows instructions if it is defined in questionnaire form.

[shelaghm]

@jingtang10 This is a good point. Hadn't considered removing the * until now. My only hesitancy is that many people are familiar with what * means and would expect to see it? But maybe it doesn't matter as it will reduce visual clutter and using the word required is much more meaningful. I'm open to removing the * and only using required instead. @jingtang10 What do you think? Any risk in removing the asterisk?

Why only use required text?

• Reduce the # of elements in the form. Having both * and required is redundant and makes the form look more cluttered.
• The explanation required is more helpful and meaningful to people than just an *
• * is meaningless to many people without the explanation, so why include to begin with

Why both * and required text?

• Even though we tested this with new or some experience internet users in Nigeria, other people might be more familiar with the * as a pattern to indicate required than those we tested it with
• The * is a common pattern across web forms and many expect it
• Having the * symbol is a quick way to notice if it is required

[jingtang10]

Thanks @shelaghm for the writeup!

First of all let me say, if (and I'm not saying that I necessarily think this is the right approach) we do add * and required, I don't think * needs to appear twice. At the moment it's added after the question text e.g Name * and then before required i.e. *required just below the question. This doesn't make sense to me. Having * required is an explanation of what * means at the beginning of the form like a graph legend. I think if we add the text required each time the * is present we should just do required and that's enough.

So now, the question becomes, do we add * after the question text. I think I'm much more open to having it if it's not repeated twice. Let's just do this?

[shelaghm]

Ahh, got it. @jingtang10 I think this is a good approach.

In conclusion:
Keep * after the question text . But in hint text remove *required and just say Required

@santosh-pingle we've made a decision on this issue so you can continue the implementation.

[jingtang10]

also just confirming that we don't want to show the asterisk in red anywhere right? just following the question text color.

[shelaghm]

@jingtang10 Yes, that's right. A few participants in the usability study were confused and thought since it was red that it meant there was an error. So I recommend changing it to same color as the text string to reduce confusion and not associate it with the error color.

[jingtang10]

cool thanks for confirming @shelaghm
@santosh-pingle fyi

[jingtang10]

talked with @shelaghm on wednesday, i think we're thinking of jsut not showing the asterisk at all, and just use the required string.

[dubdabasoduba]

@rowo What are your thoughts on this?

[HenryRae]

@dubdabasoduba required questions should have no special treatment i.e *
Only optional questions should have special treatment i.e have the tag "optional"

Ideally, 90% of the questions will be required, and we don't want to have these repetitive symbols(worse if they are colored) allover the screen.

@shelaghm any thoughts on this?

[HenryRae]

Adding this here as well.

No, we shouldn't do "*" on very required question. We should only show "(optional)" for questions that are optional.
In summary: only questions that are optional will be treated different thus will have optional tag. Required questions shouldn't have anything to show they are required. They should return an error if user tries to submit a form with none optional fields not filled
See attached example for all required fields. Only return errors that they need to be filled when user submits a form with one of the fields empty

Only optional questions should have a tag. And that tag is "(optional)" as shown in the screenshot. When these are not filled(fields with optional), we should allow user to submit the form if there are no other errors

[shelaghm]

Thanks @HenryRae for adding your thoughts and raising that Optional might be a better pattern to follow.
I agree that showing (Optional) is more helpful than required in the scenario where almost all the questions are required and only a few questions are optional. We have this guidance in (our soon to be shared) design guidelines, where we mention using optional instead of required when that is the case.

Required label makes sense in the inverse scenario where most questions are optional and only a few are required. I'm not sure how common this is in these types of questionnaires and if we should support both options (required and optional)?

My question for the group is if there's still value in having the opportunity to mark questions as required?

[rowo]

As a principle for form content, I think (and try to convince health teams) that anything optional should just be removed for CHWs. And it's the case that there are only a few optional questions most of the time I've seen.

Though, it is safer to have an option for marking required questions to cover of all the bases and I guess I could think of times where people would want to use it. Maybe in forms that aren't done often and maybe more for settings/options or communication preferences?

I wonder how much complexity it adds to people trying to configure the app. Are we able to default with the guideline approach? Is this a per form configuration (rather than entire app)?

[shelaghm]

@rowo
+1 to

As a principle for form content, I think (and try to convince health teams) that anything optional should just be removed for CHWs. And it's the case that there are only a few optional questions most of the time I've seen.

Thanks for chiming in with your experience and reflections.

From a questionnaire authoring perspective, questions are indicated as required in the code, so that we can show the appropriate error messages if they are incomplete. So for me, the key takeaway is that showing an error message is more helpful than displaying *, required, or optional if someone hasn't completed a required question. Error messages are helpful because it helps people know how to fix the error.

I'm weary of that the FHIR SDK needs to work across different country contexts, use cases and users, so I don't want to hastily remove functionality that's critical for some developers.

Seeing required everywhere gets very repetitive for a form that people are completing several times a day. Which is a bit different from a consumer form where they are completing it only once and then knowing what's required or not is likely more helpful.

I'm leaning towards that the default should be to not show anything additional for required questions (eg no *or required) and instead rely on error messages if something is incomplete.

Will discuss with @jingtang10 when he's back to make a decision on next steps.

[shelaghm]

Aligned with @jingtang10
Our proposal is that this needs to be configurable, so that developers can select if they'd prefer to display required or optional. Default display should be required. Configurable setting for optional.

[jingtang10]

Let me just add that FHIR by default assumes questions are not required unless stated otherwise. So that is at odds with the pattern Roger described which is that questions should be required by default and there should be as few optional questions as possible.

So I think we probably would have to be a bit neutral here - as in not assuming most questions are required by default, or optional by default. And if we want to do anything, as Shelagh said, we'd probably make it configurable.

[shelaghm]

@HenryRae shared with me that at Ona they would like to add the required asterisk within the placeholder of textfield (not at the end of the question title.) I know we had discussed that if there is no question title that the required label would be displayed as part of the text field placeholder. When thinking about making this component configurable, this would be another aspect to consider where the required label would be placed.

@santosh-pingle Would this be possible in our existing/current approach?

Attaching screenshot below

[santosh-pingle]

Looking into it.

[santosh-pingle]

@shelaghm

• Can you please confirm whether '*' will not be shown for mandatory (required = true) questions, and instead, the required text will be displayed just below the view?
• If the configuration is not present, the default behavior is to display the required question?

[santosh-pingle]

@jingtang10
Considering the approach below, the application will update the bundle with the following value to the questionnaire fragment :

Pass a boolean value of 'true' as an argument in the bundle to differentiate the optional questions.
Also, include the optional text as a string value in the bundle (e.g., 'Not required'), if the value is not present, use 'optional' as the default text.

e.g
Q.1 National Id (optional)

[santosh-pingle]

@HenryRae shared with me that at Ona they would like to add the required asterisk within the placeholder of textfield (not at the end of the question title.) I know we had discussed that if there is no question title that the required label would be displayed as part of the text field placeholder. When thinking about making this component configurable, this would be another aspect to consider where the required label would be placed.

@santosh-pingle Would this be possible in our existing/current approach?

Attaching screenshot below

One approach is to pass 'true' as the value to the 'labelPlaceholder' argument in the bundle for the QuestionnaireFragment. If the value is not present, it will be shown next to the question text.

[santosh-pingle]

Closing this issue as I have opened issue #1954. thanks!