For a long time, the norm was to put a red asterisk "*" after the field label if the field was required. Now I am observing a shift into replacing the asterisk symbol with the word "(required)" after the label.
Bootstrap:
vs
Foundation:
Angular Material:
I really like the Angular Material required style. I :)
I am asking about the differences between using an asterisk vs required.
What drove the shift and is that a better user experience? What are the pros and cons against the two?
EDIT: It was pointed out that this question might have been already asked (What's the best way to highlight a Required field on a web form before submission?), but that is not what my question is about.
- I am not asking how to label a required input as required.
- I am not asking if the asterisk is the norm or not.
- I am not asking if you should omit optional inputs or not.
If you are debating that, you are missing the point. :D
Answer
Asterisks (*):
- Pro: it doesn't take up much space
- Con: it doesn't mean anything
"Required":
- Con: it takes up more space
- Pro: it tells you exactly what it reads as meaning
The "norm" was never a red asterisks. While many early web pages used an asterisks, it wasn't necessarily red and always required a key someone near the top of the form telling you that "* = required". Some sites did something different. Eventually it did become common enough that most people could realize what it meant, but it was still effectively meaningless without prior knowledge.
Actually labeling something as "required", instead of "*", when it is required is absolutely better from a usability standpoint. In the same way as labeling something "dangerous" when it is dangerous, instead of providing iconography you think is meaningful... until someone interprets it differently and loses a finger to an angry primate.
No comments:
Post a Comment