May 20, 2016 | Melanie Chandler

Using Cognitive Fluency in Web Design

I'm sure you've heard me say it many times, but web design is about creating a blend of beautiful design and functionality. A website can be drop-dead gorgeous, but if it doesn’t do what customers need it to, the site loses credibility and value.

But how do you know exactly what visitors are expecting from a site? Not only what content they expect to find, but how they expect the site to behave? That's where cognitive fluency comes in to the web design process.

Simply put, cognitive fluency describes how easy it is to think about something. Our minds naturally favor things that are easy to process, so anything that takes extra mental effort gets flagged as undesirable.

Cognitive Fluency + Web Design

By default, our brains create a template of how things should look and feel. Every website visitor comes with a set of expectations, such as how the navigation will work and where to find the contact information. If important elements of your site aren't where people think they will be, potential customers can be confused and potentially frustrated.

Start with your buyer personas, but go above and beyond. Dig into your audience’s behavior patterns on your site and look at which sites they're coming from. Spend time exploring the UI/UX of websites they use for work, news, entertainment, and even shopping. The goal is to understand what they're expecting, but keep in mind that different types of sites have different standards of design and functionality. 

This research can help you map the layout of your site so that simple things like navigation, contact information, and product or service information are easy to find and use—in other words, that your visitors feel fluent in the language of your website.

As web designers, our job is to make sure people have an experience on the website that meets their basic expectations. That doesn't mean we can't be creative, but we do need to make websites that people understand how to use. 

Cognitive fluency is also a big part of why people tend to prefer things that are visually simple. We see complicated websites as being less beautiful because the more our eyes and brains have to take in, the harder they have to work to decode, store, and process that information.

When to Fight Cognitive Fluency

In web design, cognitive fluency is most important for the parts of the site that people will be looking for on purpose. But what about information they aren't looking for, but that you still need them to see, like special offers or new hours?

In those cases, you need to create contrast with their visual expectations to make their eyes (and brains) stop and take notice.

There are many things a designer can do to subtly disrupt the cognitive fluency of a site, causing the viewer’s mind to stop and analyze the situation. Some of these elements are the style and size of fonts, the color and size of calls-to-action, and the appearance of depth or texture.

When it comes to making your calls-to-action stand out, visual hierarchy matters. It’s not so much about what color you should make the CTA, but what you can do to make it stand from the rest of the page. You may have seen blog posts claiming that red buttons or certain fonts perform the best, but this isn’t necessarily true.

If red is a dominant color on your website, like it is on ours, a red button will blend in to the rest of the site and may not perform better than, say, a blue button. But if your site is mostly blue, then sure, go for the red button.

Proportions matter, too. Think about how large your CTA (or other important element) will be compared to the surrounding content. Why do you think headlines are so much larger than the body text? It creates an alarm in your brain that says, “Hey, this is important, so you should read it.”

Web design isn’t all about what designers like—hey, not every website needs touches of buttercup yellow and aqua! It’s about what visitors want and what will best achieve the client’s goals. There are lots of ways for designers to embrace their creativity and make beautiful, functional websites. The first step is to understand how the mind works, and how that applies to your buyer personas.

Not sure how "fluent" your website is? Let us take a look.

VIEO Design Free Website Assessment

Melanie Chandler

Melanie Chandler

As design director, Melanie Chandler leads the design team and works with them to create consistently compelling and engaging website designs, images for digital marketing, and other visual content to communicate corporate identity and drive traffic on websites and social media.

Related Post: