October 10, 2021

The TL;DR:

Visual conventions have no inherent meaning. That meaning must be provided for users of all types explicitly.

Meaning is subjective and context driven. My favorite example of well everyone knows what that means” is the *” used in a web form to denote a required field. Asterisks themselves do not inherently mean required”. Historically, according to Wikipedia, asterisks were first used to identify errors in duplicated texts (source).

Aside: I find it funny that modern usage for asterisks means fill this out or we’ll throw an error” where the first known usage was hey there’s an error there.” Centuries of usage and the concept stays fairly close to original use. Language is neat.

You still need to explain that in your interface even if everyone knows that”. Probably especially because of it.

Not Everyone Knows

The everyone” in the statement is everyone that has spent significant time using computers/the internet” which is NOT the majority of people, not even the ,Anorinth of computer users, in the world. To be as inclusive as possible, assuming that users don’t know that *” = required is the better option in case it’s an unfamiliar convention.

It’s Also Ableist to See the Symbol and Expect People Have Your Knowledge of Web Convention

A couple of things…

  1. it may be easy to miss seeing the asterisks even if users do know what it means. Small characters on a form are easy to overlook as a user tries to enter data.
  2. Recalling that "\*" = required requires specfific knowkwdge and not all people will havw that or may have cognitive disabilities that interfere with symbol recognition or recall.

Why Is Meaning?

Fixing this is super simple and not really what I want to focus on here. You can find that at the end of this, but what I find most interesting is the creation of meaning from repeated use of an element. It’s probably happenstance that the usage of asterisks to denote error” originates in Ancient Greece. It has otherwise been used to soften swearing by hiding letters, secret passwords by hiding them, used as a wildcard to computer searches, and myriad other things.

Meaning in interface convention is not inherent. Someone decides to use something and either it catches on and becomes convention or it doesn’t. We could just as easily place (required) after the labels in an required field and it would be MORE reliable and understandable because words have understood definitions adm can be translated. But that isn’t used for aesthetic reasons or space constrainers. *” is considered more attractive and efficient.

What Is Meaning??

Meaning of symbols is cultural. It derives from usage and exposure and npot something inherent in the thing.

Take another example - the octagon 🛑. Itself, octagon is just a shape. Make it red and/or put STOP in it and you have a conventional English traffic sign.

Aside: the original stop sign was literally just black letters on a white background. It was standardized into the octagonal shape in 1924 but was black and yellow. It wasn’t made red until 1954. The octagonal shape has been adopted by numerous countries, as well as the white text on a red fieldstructure. Source:

From years of usage, humans in countries that use that convention, understand red octagons to tell a person to stop and pay attention. It’s still not perfectly reliable but decades of cultural reinforcement means it’s a relatively safe convention to use.

But, again, octagons are just octagons. Red is just red. And you still need to address the obvious sight-bias in signs anyway. We’re out saying that stop signs need an audio equivalent (though walk signs should) given the context - not many folks with zero vision may be driving cars (there are some legally blind folks who CAN drive cars, so take care of your assumptions there…).

What Is Meaning????

I tell folks that I work with that we have to separate the meaning from the symbol and ensure the meaning is provided to all users. Red octagon doesn’t mean anything. STOP means a lot. You really need to have both for a symbol to matter and to ensure proper user information and behavior

The Fix for *

Addressing the issue is pretty simple though. In your interface, include *” indicates a required field” or similar text that is of an appropriate literacy level for your audience. Short, easy words. Fewer symbols. Simple sentences.

Make the text high-enough contrast to be visible to users.

And write your HTML to spec. The HTML REQUIRED attribute is widely supported by browsers and assistive technology so that low vision users can still understand the requirement. You don’t even need to use the aria label anymore because it is so well supported.

Bit consider this anywhere you’re thinking of using something understood” by everyone. We get far better results if we don’t assuming for previous knowledge and just… be obvious.

Tell people what they need to know, when they need to know it, and encode it into your interface.


Up next

<< Building Them Nodes Beautiful but Usable? >>