5-minute cognitive ergonomics: the signal detection theory

Cognitive ergonomics isn’t so scary after all.

Photo by Jonathan Borba on Unsplash

First of all, what is Cognitive Ergonomics?

First of all, cognitive ergonomics may be unfamiliar to some. It is a field which “studies cognition in work and operational settings, in order to optimize human well-being and system performance” according to Wikipedia. Here’s how I would describe it:

Cognitive ergonomics tries to explain how humans receive, process, and react to information using concepts from both psychology and science.

It sounds pretty complicated, but some of the concepts from the field has many applications in UX design. An example is signal detection theory.

What is the signal detection theory?

Have you ever:

• Looked for the “perfectly ripe” bananas?
• Sorted through your inbox for an important email?
• Clicked on a fake download link on an ad-filled website?

Congratulations, you’ve already applied signal detection theory in your daily life. Essentially, signal detection theory (SDT) is about:

How an operator can tell the difference between a signal (what they’re looking for) or noise (anything that’s not a signal)

There are four main outcomes in a signal detection task:

The signal detection paradigm

1. Hit, operator responds to a signal (second quadrant)
2. Miss, operator does not respond to a signal (third quadrant)
3. False Alarm, operator responds to a noise (fourth quadrant)
4. Correct Rejection, operator does not respond to a noise (first quadrant)

Example

You go to download something but the website seems to be plagued with fake buttons.

Goal: find and click on the correct button

The four outcomes of this signal detection task are:

1. Hit, you click on the correct button.
2. Miss, you scroll past the correct button.
3. False Alarm, you click on the wrong button.
4. Correct Rejection, scroll past the wrong buttons.

Different outcomes in a signal detection scenario: hit, miss, false alarm, and correct rejection

This example can be extended to pretty much any situation that requires you to make a decision based on the given information:

• A doctor looking at an x-ray (Is this tumor benign or malignant?)
• Pilots during WWII (Is that an enemy plane or a something else?)

How do I design using SDT?

Salience is how much something stands out from the background. It helps the operator become better at a signal detection task by “highlighting” the important stuff. This should be the priority when trying to design with SDT in mind.

Let users know what to expect

If the users know what they are searching for, they are more likely to find it. This is why it is important to follow common design patterns: if they have seen it before, they are more likely to recognize it.

NNGroup’s article for visualizing links. Notice how links are underlined and in blue. [NNGroup]

For example, links are usually underlined & in different colour than body text. If you are looking for a link, these characteristics are probably what you are searching for. This helps links stand out against the background, improving the salience.

Bigger importance = bigger visual weight

Let’s take a look at what Material Design Guidelines says about visual hierarchy:

Hierarchy is communicated through differences in font weight (Light, Medium, Regular), size, letter spacing, and case.

The more important the information, the more it should stand out. The Material Design typography is organized from biggest visual weight to lowest visual weight, from the most important to least important.

Material Design’s type scale [Material Design guidelines]

Another example is using contrast. A good Call To Action (CTA) must stand out compared to other design patterns. Multiple A/B tests showed salience (high contrast) was what mattered most when comparing click rates with CTAs [CXL]. No wonder accessible design with good contrast is considered good design!

Reduce number of distractors

Let’s talk about when you have too much noise going on, like when there’s a lot of fake buttons on a website. Having too much information can cause cognitive overload, which is generally bad for decision making tasks.

So if you have something within your design that needs to stand out, try keeping your screen simple, making the important action more salient.

I hope you enjoyed the read! If you want to learn more about signal detection theory and its related contents, please check out these resources:

• Wikipedia article on detection theory
• NNGroup’s article on signal-to-noise ratio
• Thomas Wicken’s book on Elementary Signal Detection Theory

You can find me at ndpark.ca

The UX Collective donates US$1 for each article published in our platform. This story contributed to UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.