android-fhir
android-fhir copied to clipboard
google
Add asterisks symbol for Required fields in Questionaire
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 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.
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.
This makes sense to me. I assume it will also be important to pair the astericks
*with instructions that sayrequired 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?
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?
I suggest we use words to explain what * means by adding
required questionin 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.
yeah agreeing with santosh we need to resolve this question: if there's already an instruction do we override it? or do we show both?
late to the party, but my experience as a user (i think mostly with html web forms) has been that the asterisk is always red. i think this is consistent with google forms too:
- I'm convinced, let's make the asterisk red
- If there's already an instruction, I think we should show original instructions and display the error message below.
Rationale for 2 is an assumption that it will make it easier for users to know how to complete the question by showing the instructions and that we cannot rely on that the questionnaire builder to write an error message that will include comprehensive enough info. Do you agree with this assumption or have a different perspective? @santosh-pingle @jingtang10
Examples
Example that instruction text can be used for more than just basic instructions
@jingtang10 @shelaghm @santosh-pingle I would advocate for the asterisk to also be in red. Most web forms and mobile forms use the red asterisk to denote required fields.
This would be easy to use for users since they are already used to it in the different apps and web forms they interact with.
@dubdabasoduba Thanks for your feedback, helpful to hear your experience! Red asterisk it is!
@aditya-07 commented that when there's no question text, having an asterisk is very strange. i think @shelaghm and @santosh-pingle agree.
@shelaghm please advise how to proceed - we could either use flyover when there's no question text. or we can just add another line (maybe similar to the instructions) to explicitly say "Required".
I recommend using the flyover/ label text field to display the asterisk. Ideally also include *required in the help field/entry format field below the text box. This follows the Material design recommendations.
@shelaghm Some views does not have flyover attribute to show * in the view e.g boolean choice, single choice, multiple choice... Any thought how can we show asterisk in those views? may be instructions text or separate text line?
@santosh-pingle For all of these (boolean choice, single choice, multiple choice) I think there's a much higher likelihood that they will have a question title as it will be hard for people to know what they are answering without a question title.
My recommendation would be to use instructions text field to show required question
Mocking it up, it looks a bit strange with no title, but with instructions showing required question My perspective is that this is an edge case I think developers should avoid and we should encourage the use of question titles :)
@shelaghm @jingtang10
Are we still going to show *required just below the view like
I recommend using the
flyover/ label textfield to display the asterisk. Ideally also include *required in thehelp field/entry formatfield below the text box. This follows the Material design recommendations.
@shelaghm @jingtang10
We had offline discussion in one of the internal developer call, where Jing, Omar and other internal developers discussed whether it is required to show *required text when * is shown in the flyover text, we did not have concrete conclusion yet, but you can help us to conclude on it.
@santosh-pingle Yes, show *required below.
In our usability testing we found that most participants either didn't notice or didn't know what the * means. So I recommend always showing *required when there is a *
This is also consistent with material.io guidance
can we just say required then without using *?
i feel asterisk is a shorthand for required when explained at the beginning of the questionnaire, if people don't understand it and we have to explain it every time, we might as well just simply say required every time without using asterisk.
@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
*andrequiredis redundant and makes the form look more cluttered. - The explanation
requiredis 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
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?
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.
also just confirming that we don't want to show the asterisk in red anywhere right? just following the question text color.
@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.