H1.03.2asterisk required-field legenddesignresearch

An asterisk needs a legend

Aliases: required asterisk · form legend · star means required

What it is

A red star or * is widely used as a required mark, but it is not a word and not a globally shared sign. A legend has to say, before the first star is met, that “* means this must be filled.” Without that sentence the asterisk is decoration or a footnote flag. This entry is only about how the sign is decoded. It is not about which side to mark, and not about deleting optional fields when there are too many. Putting required state in an accessibility property does not replace comprehension for people who can see the star.

Why it happens

In print the asterisk has long meant a footnote; in mathematics it means multiplication or a wildcard. Web forms conscripted it for “required”—a convention that only holds for people who have seen it often enough. People new to that convention—first-time government-form fillers, people coming from paper, cultures that already occupy the sign—read * as “there is a note” or skip it. A second layer is a time window: the legend must appear before the first star enters the viewport. A legend beside submit, in the footer, or after the first error decodes the sign after a miss or after leaving. Color widens the hole: a red star with no words vanishes for color-vision deficiency and on a gray printout, so the sign cannot even claim “there is a mark here.” The legend answers “what this mark is called.” It does not answer which side should carry marks.

Studying it

Show people who have never used the product a starred form with the legend removed, then the same form with a short “* required” line. Record how they explain the star, not only whether they can submit.

Independent variables: legend present or absent, legend position (header / footer / beside first star / after submit), whether the star also uses color. Dependent variables: spoken definition of *, required items left blank on first submit, scroll distance to find the legend, whether the mark is still pointed out in print or grayscale.

Student samples in the lab overrate how common the convention is. Include people who rarely fill online forms. Eye tracking can show the legend was fixated; it cannot show it was understood. Pair it with “what does this sign mean.”

Where it stops holding

When several forms in one product share the same star and the legend already appeared on the first, later forms can shrink to a tiny header repeat—but not to zero, because a new session or a deep link can enter in the middle. Replacing the star with the word “required” drops the legend demand, because the text is the decode. Screen-reader users do not depend on seeing the star; they depend on required state on the field. A legend without that state does nothing for them. On interfaces for children or low literacy, star plus legend can still fail; use the full word.

Applying it

  • Place “ * means this must be filled” before the first asterisk enters the viewport, in the same glyph and color as the star so pairing is possible.
  • Do not put the legend only in the footer, a help center, or after the first failed submit; middle steps reached by deep link need the sentence too.
  • Pair the star with a non-color shape or word so the mark survives print and color-vision deficiency.
  • Verify by covering the legend and asking what the star means; footnote, decoration, or “don’t know” is failure. Uncover the legend, deep-link into the middle of an unfamiliar form, and check that people can name the meaning before filling the first required item. Print a grayscale page and check the star is still there.

Related

  • Within the group: H1.03.1 Mark whichever side is the smaller set · H1.03.3 Too many optional fields should be deleted, not marked
  • Adjacent: E2.06 Format hints and examples · J2.03 Information not by color alone · H1.15 Accessible form labeling
  • Search terms: required asterisk · form legend · convention

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/H1.03.2