Using asterisk (*) vs required [duplicate]

Question

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 1

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.

Answer 2

Aside from the aesthetic and usability improvements, one of the reason (if not most important) for the change is accessibility issues.

The screen reader, doesn’t read (hardly) any typographical symbols in its default configuration. Symbols like asterisks and plus symbols are essentially useless to handicapped or low vision users. Designers usually have to supplement the asterisk with a note to indicate that the fields are required.

Answer 3

My opinion is that you should combine them like that: Required*.

Using only asterisk will leave a big portion of users wondering what this means and will look somewhere on the page to see more information because of the asterisk. In books if there is asterisk on some of the words, on the bottom of the page there is additional explanation. My opinion is to avoid using asterisk only!

A better solution

Why not show only optional fields rather than required. In the majority of cases there are more required fields than optional, therefore it will be more efficient to label only the optional fields because there will be less repetitions of the same word *required.

Image credit uxmovement.com

This way we can decrease visual clutter and according to a study on voluntary over-disclosure users will be more likely to fill the optional fields because they see it as a voluntary and not forced action. When people are forced to do something they usually do the minimum while when doing voluntary work that's not always the case. Human Psychology. For more information read this uxmovement article on required fields.

Answer 4

The reason behind is the same as many things which have changed in the UI practice over last decade. Instead of using implicit assumptions on what symbols mean UI designers tried to become more explicit in their work. Just consider this, when the "*" symbol first appeared to designate required fields it was frequently accompanied by a red-color note "Fields marked with * are required" or, worse, user was given an error when they missed *-marked fields.

At some point designers realized that this is a bad practice. Instead of making an implicit indication what is required and what is not, they were forcing people to be careful to notice that "*" and don't miss a field.

BTW, in such forms, like those in your question, I prefer to not have required indication at all. If something is optional, don't collect it on registration. If you still need it - encourage the user to provide it later. For instance, with the help of profile completeness indicator.

Thus, remove "required"/* from all fields and keep your screen cleaner. User will assume that all fields are required (otherwise, why they are there?) and fill them in with data.

Edit

Responding to the great feedback I received in the comment section, I would like to clarify my point. There are three categories of fields: Required, Optional and Conditionally Required. Conditionally Required fields are required when the data are present. The difference with optional fields is that skipping the latter will not prevent the application from doing its primary function, but skipping the former will be a blocker. For instance, Address 2 field is a conditionally required field because if a user lives in an apartment and Address 2 is not provided the system will not be able to work. However, if user lives in a house Address 2 is not needed => condition is it a house or an apartment. Conditionally required fields appear along with required, optional fields maybe skipped.

I'm a proponent of designs where there is no indication if a field is required, as it encourages the user to complete all fields. This also curbs the phantasy of designers who enjoy adding optional fields -> clutter the screen. Users should provide only the data needed to get from the system what it's designed for. If we need something else, let's think how to turn our goals into users' goals and collect the data.

Answer 5

It is not actually the asteriks itself that creates the attention IMO, it is the red color. If it wasn't red, i would personally think that it leads me to a footnote that is related to that field.

For the question, i think putting a "Required" text looks better, but not in that shape. It should be red (or any other color that draws attention) and more visible.

Answer 6

As a designer, the onus is ALWAYS on you to be empathetic. That is, to put yourself in the shoes of your users in order to make their life easier.

In my opinion, using the word "Required" in a field demonstrates consideration, is supportive and most importantly, does not assume a level of user knowledge.

More and more design 'assumes' and over time this is a dangerous construct. Whilst many have been exposed to the instruction addendum talked about "*=mandatory field" many sites have stopped putting it in which means we can no longer assume everyone will know what it means!

KISS (Keep it simple stupid) is the way to go. Tell people what you want and make it unambiguous and friendly.