What cognitive science taught me about design

I graduated from the University of Virginia with a B.A. in Cognitive Science. Everytime I tell someone that, their immediate reply is, “What’s that?”

Well, the University of Virginia is a 200-year old academic institution founded by Thomas Jefferson in Charlottesville, Virginia. Kidding. (But if that’s where you were confused, you can read about UVA here, here, and here).

I didn’t know what cognitive science was before seeing it on the list of majors I could choose from. It’s kind of an obscure, mildly intimidating term. That’s why I like to reference it as often as possible (only half-kidding).

So what is it? Cognitive science is the interdisciplinary study of mind and intelligence, heavily focusing on psychology and neuroscience. My studies taught me all about human behavior: why we do the things we do and think the way we think, what biases we bring to the table, and how we perceive the world around us.

Despite my science major, I knew I wanted to work in a creative role, but I wasn’t sure how my major would get me there, or if it would even apply.

Related: Hacking usability with psychological principles

Fast-forward to today. I’m sitting at my desk, writing this post because, well, it’s my job as a content strategist at Clique Studios. While I’m in a creative role, I rely on my cognitive science background constantly in my day-to-day work. It allows me to think through how a user might interact with something or what their tendencies are and how to cater to them when I write for the web. It also helps me understand fundamental principles about design.

I’m not a designer, but my role demands I work alongside and in tandem with our design team on a daily basis, and the work I create directly influences theirs and vice-versa. Having strong design insights helps me do my job better, and cognitive science helped me get here.

What exactly did I learn in school that helps me succeed at my job now? I’ll spare you the nitty-gritty of neuroanatomy, and instead focus on one important aspect of cognitive science that taught me a lot about design: human perception.

Perception

“Perception is the process of recognizing and interpreting sensory stimuli.” It’s how we make sense of the world around us—what we see, what we feel, what we hear—and it’s pivotal to the world of design.

How do we perceive a design (or anything, really)?

First, a stimulus grabs your attention. Let’s say a cute puppy walks around the corner—he clearly has your attention.

Then, you perceive what it is—and depending on what the stimulus is, you’ll use different parts of your brain to recognize it. For example, your occipital lobe does most of the processing to understand visual information. It processes that it is a dog, specifically a golden retriever, specifically a very cute, young puppy.

Once it’s recognized, the stimulus gets encoded into your short-term (or working) memory.

Then you decide how to proceed—either act on the stimulus, forget it, or store it in long-term memory—probably pet it in this case.

Attention, however, is a limited resource. This is why it’s hard to multitask and it’s good to take breaks.

Our short-term memory (STM) is also limited. We can only hold onto a few stimuli at once in our STM, and if we max out that capacity, we lose information. This is called cognitive overload.

It’s a commonly held belief that we can process 7 +/- 2 stimuli at once in our working memory, but there’s plenty of competing research that suggest it’s more like 4 +/- 1, or that we can group pieces of information together and thus, actually store more.

It’s also subject to the individual and their unique brain. Maybe you have a fantastic short-term memory, and holding seven stimuli in there at once is a piece of cake (is that why most phone numbers have seven digits?). I won’t make a case for either number, but it’s a limited amount.

Attention

Let’s back up a bit.

Attention, closely related to perception, is “the concentration of awareness on some phenomenon to the exclusion of other stimuli.” It’s the stimuli you’re focusing on in this moment, not the background noise.

We’re all capable of focusing on one stimuli and tuning everything out—this is called the cocktail party effect. You might hear all the other voices and noises at a party, but you can tune into the voice of the person talking to you and just attend to that person (or, if they’re boring, you can tune in to the music and tune the person out).

Right now, I’m listening to music as I write. I’m attending to the writing, and the music is just background noise. Well, now I’m paying attention to the music because I’m talking about it. Now I switched back again. This is a conscious shift in attention. It’s minorly damaging to my productivity because it requires cognitive effort.

“We’re programmed to notice things that are different or novel, and we should use this to direct users’ attention accordingly.”

There are also unconscious shifts. You might hear a loud clatter at the cocktail party from a waiter who dropped a tray of glasses. Your brain unconsciously shifts attention to that noise and away from the person telling you that story about their mother-in-law at dinner last night, and you’ll have to consciously shift it back. Or not…

This translates to the world of digital design in what is being called the web party effect. Users will tune into digital elements that are relevant to the achievement of their navigation goals, and tune out all others.

We don’t want to put a huge strain on their cognitive load by peppering in distracting elements that require conscious shifts in attention to find the content they’re looking for or achieve their goals.

Related: UX design trends for 2018

On the flip side, we can introduce unique, surprising features to capture attention unconsciously, like the broken glass at the party, and show users something they maybe weren’t expecting or wouldn’t have known to look for. But we must do so in a way that they can easily shift their attention back to achieving their goals.

As a content strategist, I’m biased to the belief that content comes first, then design (or, really, content is design). Users should immediately understand the purpose of a website or a product, and what action they’re supposed to take.

Some design is just plain awesome for design’s sake, and that’s great! But it’s easy to get distracted by too much design and find yourself unable to tune out the noise to achieve your goals. For example, Snapchat’s new design has users outraged—over one million have signed a petition to transition the app back to its old design.

What’s all the fuss about?

The new Snapchat update is more complicated than trying to turn on your friends shower.

— Amber Frank (@ItsAmberFrank) February 7, 2018

In the new version, stories and direct snaps are on one feed so you can’t filter or really find the ones you’re looking for. And it puts way more emphasis on advertisements through a more prominent Discover feed. This makes it more difficult to tune out the noise and just find the snap your friend sent you this morning so you can continue your streak. I blame the design for crushing my dreams of getting to a 100-day streak because I couldn’t even find the direct snap amidst all the clutter.

Short-term memory

Short-term memory, or working memory, is what your brain is currently using right now. As you’re reading this post, you’re perceiving the words and transferring them into short-term memory where you can act on them. They’re either acted on, forgotten (gasp!), or rehearsed and coded into long term memory—which is what we typically think of when we hear the word “memory.”

Remember: Your working memory is limited, so it’s easy to lose information if you aren’t consciously making an effort to store it.

via GIPHY

Why does this matter for design? Putting too much of a strain on the user (cognitive overload) by presenting too many stimuli causes them to miss information or not understand how something is supposed to function, and it may even cause them to stop paying attention to the design all together.

This isn’t to say that simple is always better. We can make things more complex by incorporating conventions with new ideas. Our brains easily recognize established schema, and they put little (if any) strain on our cognitive load.

For example, a hamburger menu has become an established schema, so seeing this stimuli doesn’t take up one of the ~4–7 cognitive “slots” in our short-term memory. We easily recognize it and know how to interact with it, so instead we can devote the slots to, say, understanding what the menu items are. So it would make sense that somewhere between four and seven menu items are the ideal amount for our brains to process at once.

Reducing cognitive overload through design

There are other “laws” or tendencies our brains have to reduce cognitive overload, and good designers know how to use them. All of the following are cognitive science principles I learned in school, now applied to the world of design.

Leverage pop-out effect
“Faster search time for a unique target among unlike distractors.” We are programmed to notice things that are different or novel, and we should use this to direct users’ attention accordingly. Use design elements to allow users to tune into one thing and tune out the rest without added effort.

Abide by Hick’s law
“Increasing the number of choices will increase the decision time logarithmically.” More choices = more cognitive load, so limit the amount of decisions a user has to make to get to what they’re looking for.

Pay attention to affordances
Affordances are properties of a stimuli that imply how they could be used or interacted with. If something looks clickable, make sure it’s clickable.

Learn to love Gestalt Psychology
Gestalt principles about perceptual organization help us understand how we group stimuli, and the human tendency to find patterns. In design, we use grouping to understand information and to help focus where we’re supposed to. Here are a few commonly used ones:

Simplicity
People will perceive ambiguous or complex stimuli as the simplest form (requiring the least cognitive effort).

Proximity
Things that are close together are believed to go together.

Similarity
Elements that are similar are grouped together (i.e. color, shape).

Good continuation
Two (or more) stimuli remain distinct even if they appear to overlap. We tend to perceive the objects as two uninterrupted entities.

Closure
We perceive objects as being whole even when they are not complete (our brains fill in the visual gaps).

Common fate

Stimuli that move at the same speed and/or direction are perceived as parts of a whole (i.e. flock of birds).

Change blindness
There’s a caveat to the cocktail party effect. Yep, back to that metaphor (hope you stored it in your memory!).

Using all of these techniques to help users pay attention to desired content and achieve their goals while tuning out all other stimuli results in change blindness: When people are focused on one thing, they don’t notice others.

This probably seems obvious. But depending on what we’re focusing on, our brains can be completely blind to important changes going on around us.

Here are some funny videos to demonstrate my point:

In the last one, half of the study’s participants didn’t notice the gorilla, as if it were invisible. The viewers were so focused on counting the passes that they were oblivious to a dancing gorilla in the middle of the screen!

On one hand, it’s great to think we can be so focused on a task we wouldn’t see a dancing gorilla. On the other hand, we can clearly miss some important information.

This is all to say that we should use principles of human perception to guide our users through design. If we want them to notice something or take an action, make it impossible to miss.

If we want them to process a lot of information, break it down into smaller pieces so they can handle it in working memory.

If we want people to see a dancing gorilla in the background, don’t place all the focus elsewhere. Abide by common tendencies and schema to alleviate cognitive load, but use “pop-out” design elements to help users easily find and achieve their goals.

Some design is just for design’s sake. But designing for usability relies heavily on an understanding of cognitive science. I didn’t think my undergraduate major would influence my career much, but I’m a better writer, teammate, and strategic thinker because of it.

A great resources on more “laws”: https://lawsofux.com/