Image of man with finger to his temple and text overlay which reads: "the mind matters web design psychology 101"

How the psychology behind web design can help you make a better website.

For today’s blog, we’re going to return with a different take on a much-beloved topic of ours: how to design a website that works. This time we’d like to explore some of the psychology behind functional design, and why your users’ interests are best served when you focus on usability.

Usability heuristics, and why you need to follow them in your web design.

Back in 1995, Jakob Nielson of the Nielson/Norman Group published a series of usability heuristics for user interface design. These are essentially some principles designers should follow to help create the intuitive user interfaces. We won’t go into all of them here, but a number of them are highly applicable to web design. They promote ideas that, because they’ve been in practice for over twenty years, seem common-sense enough that they hardly need explaining.

However, we sometimes see these guidelines flaunted in the name of creativity, so it’s worth reviewing why these principles exist and how they work to make your website better. The truth is that many of these patterns exist for important reasons. They are the result of years of usability testing, patterns formed not just because people are used to them—but because they work. And while note every behavior pattern is this way (sometimes they’re just an old habit waiting to die), many of them are actually the most efficient way for the user to accomplish the task they came to your website to complete.

So, before you bust these habits apart, it’s worth asking: Does this particular wheel need to be reinvented? If so, is our innovation better? Will our users know how to use it, or can they learn quickly?

Breaking the mold is a gamble—and not one that often pays off.

We don’t think about this much when it comes to web design psychology, but most of us crave familiarity and comfort in our online interactions. We want things to do what we expect, because that’s what feels intuitive.

When we talk about actions being intuitive, we’re referring to actions we can work out on our own without being taught. Your users aren’t going to come to you for a tutorial on how to navigate your site. In fact, the time you have for them to figure out whatever new thing you’ve put together comes down to mere seconds. If your visitors can’t figure out what your thing is doing by the second (if not the first) try, and if they don’t immediately grasp why it’s useful and it helps them, then you’re doing them a disservice. And if the new feature is confusing enough to cause your users to repeatedly make the same error, it’s probably not intuitive to be useful.

Most of the most recent innovations in user interfaces are ones most of us don’t even notice learning. Take, for instance, the “tap to like” feature on Instagram. Or pulling down to refresh a mobile feed. Did you have to learn to do this? Were you confused the first time it happened? Do you even remember the first time you saw it implemented? And yet, for many of us, “tap to like” and “pull to refresh” have become habits that we use across applications, to such an extent that we can become frustrated if a new app doesn’t work the same way.

How habits can work for or against you in web design.

In The Power of Habit, Charles Duhigg talks about a basic mechanism for learned behavior that we’re almost all familiar with. It’s the pattern of stimulus-behavior-reward (or as Duhigg puts it: cue-routine-reward). In brief, something in our environment triggers a habit. We respond to that stimulus through a routine, and the reward is the thing we get from having accomplished said routine. Most of this happens subconsciously, which is why it’s a habit. For instance, I wake up in the morning (cue), wander into my kitchen to brew a cup of coffee (routine), and then drink the coffee to feel awake (reward). I try hard not to think about any of this, because thinking in the morning is painful until after I’ve had my cup of coffee. I just do it, and this is such a set pattern than it doesn’t take any effort of will for me to accomplish it.

Most of us operate according to habit throughout our day, because habits are an efficient way of getting work done. When our websites work well, they take advantage of habits to help users navigate quickly and efficiently through a website. Usability in web design usually fails when a website fails to trigger these ingrained behaviors. In fact, a lot of poor usability can be classified according to which part of the habit cycle it breads:

Missed cues: Visitors miss an action they’re meant to take.

  • Hamburger Menus on non-mobile sites—the user doesn’t see the menu.
  • Buttons that don’t look like buttons—the user fails to click.

Wrong action: They see the cue, but follow the wrong behavior.

  • Straying from conventional menu labeling—the user sees the navigation, but doesn’t know where it leads.
  • External links that navigate away from a site—the user clicks expecting to stay on the site and has to navigate back.
  • Internal links the open in new tabs—the user clicks expecting to stay in the same tab, but another opens instead.

Failed reward: Users see the cue, but don’t get the reward they expected.

  • Things that look like buttons that aren’t—the user clicks and nothing happens.
  • Underlined text that isn’t a link—the user clicks and nothing happens.

Given this, if you want your users to follow a new pattern, you have to introduce a new habit routine, and test it rigorously to make sure it works. For it to stick, all three elements need to work together:

New cues = Visitors notice and respond to a new stimulus.

Correct action = The response to the cue is immediately obvious.

New reward = They get a thing they didn’t expect.

Stop making your users think.

Your visitors aren’t dumb. They just a lot on their minds, and if your website doesn’t work it’s just adding to their mental load. At the end of the day, if your website causes visitors to bounce it’s not because they’re too stupid to figure it out—it’s because figuring out your website is a task they have very little incentive to complete.

ain't nobody got time for that

This is a theme familiar to anyone who’s read Steve Krug’s influential book on web usability, Don’t Make Me Think. User-centric design puts your customers first. It makes interacting with your website smooth and painless, which in turn facilitates conversions and sales. Good for them is good for you, too!

“But I want to be different from everyone else!”

And you can be! But only if being different = being better. If your design adds complication without adding value, it’s not helping your user. Remember: your visitor’s attention is precious. They didn’t come to you to struggle through some overly-complicated design just to accomplish a basic objective. They came to you for a service. Serve them by making your design usable.

Does this post speak to you? Did you read this and think “Hell yeah! Give me a website like that!” If so, then we’re the web design company for you. Tell us about your project and we’ll be in touch.

Published 06/27/17 by Laura Lynch