Seven ways the human brain is breaking your web UX (and what to do about it)

MPB

Published in

MPB Tech

8 min readJan 14, 2022

By Evian Davies

The brain is a breathtakingly brilliant meat computer that has created both the web and web usability problems.

Were we designing brains today, we might call for a major refresh. But here we are, saddled with inadequate memory, buggy logic and legacy business rules that haven’t really worked since the Stone Age.

This is bad news for web designers and UX specialists. In this post, I’ll discuss some of the bigger issues of psychology that can thwart our work, and suggest some ways to overcome them.

1. Confirmation bias

People tend to give more weight to information that supports what they already know or think.

Before you get too down on them — us — consider the poor human brain, building its biological prediction engine over years and decades, all just to keep us alive.

It’s not feasible to break everything down and reboot every time we receive disruptive information. Without weighting, without shortcuts, we’re neonates adrift in an ocean of equally confusing impulses.

And so we rely heavily on what we’ve already learnt. A million times zero is always zero, the sky is blue on either side, walking into a lamppost hurts way more than a paper cut (but the paper cut might hurt longer).

We seem to prefer information received earlier, to make illusory connections between events, even to cling to beliefs in the face of contradictory evidence. It helps to know your science, but you’ll never be entirely free from confirmation bias. Just ask Einstein.

What does this mean for web UX?

Clearly, you don’t want to make major changes to your core functionality too often. If people expect things to work one way, it takes mental energy to adjust and relearn. Nobody wants to fatigue their customers enough that they start looking elsewhere.

But of course, you have to change sometimes. That’s why it’s so important to user-test comprehensively before baking in your solutions. And start out small — test on a few individuals, then small groups and you won’t waste time and money later testing major flaws on your customers. And of course, don’t cling to your own beliefs about the ‘best’ interface design.

The saga of Wikipedia’s search box is apt here. It used to sit at top left below the navigation box — contrary to almost every other website. So after multiple usability studies and copious research, in 2010 Wikipedia’s UX team moved it to the more usual position at top right.

Were the audience immediately won over? Not entirely — “If it ain’t broke, don’t fix it” was a common response. At least one user claimed to “hate” the new search box.

But as Wikipedia’s Eric Moeller put it, “Do we know [the move] to be the correct decision? No, but the fact that existing users are temporarily inconvenienced by it is not at all indicative that it is not.”

2. Aesthetic-usability effect

If something looks attractive, people are more inclined to think that it’s also user-friendly. In fact, they’re far more tolerant of usability issues if your site looks good.

So what’s the problem? Surely this halo effect is great news for web designers?

Yes, to a point. Unfortunately, this form-over-function effect doesn’t survive once people hit difficulties.

When users struggle to find a product, or complete a transaction, love turns to contempt. The dark side of the aesthetic-usability effect is to skew usability testing and even produce interfaces that undermine profitability.

An oft-quoted example is the Juicero, a “smart” juicer controlled via a smartphone app. All brushed metal and minimalist design, it looked great. Alas, it’s now best known as an epic usability fail.

Juicero didn’t juice if your Wi-Fi went down. You needed the right kind of phone to use it at all, and it refused to juice if you tried to use the consumables past their sell-by date. Worst of all, it was quicker to squeeze the consumables into juice by hand than to use Juicero. As one UX practitioner put it: “What problem were they trying to solve? Juice is not complicated enough?”

The company folded after 16 months, thus annoying even those who did buy one.

On the other hand, Apple is a company that leverages aesthetic-usability to the max. Its products may not always “just work” — nothing does — but the design, packaging and marketing theatre are enough to convince customers.

What have we learned? That there are two sides to The Force and we must shun the dark side.

Aesthetics have a tangible value that can sometimes outweigh performance and function. A brand’s non-digital touchpoints can be equally important (anyone for an unboxing video?).

But to avoid internet mockery and commercial doom, do your usability testing with low-fi wireframes. Because high-fidelity designs can cause bias and you’ll probably want to test the visual scheme separately.

3. The peak-end rule

People judge an experience largely based on how they felt at its peak and at its end. Those are the parts they remember best. A positive ending can detract from an overall negative experience, and vice-versa.

In a 1993 study (outlined here), this effect caused people to prefer more pain — placing their hand for a minute in water at 14°C, followed by 30 seconds at 15°C — to less (enduring only a minute at 14°C).

Clearly, we want our web users to remember their experience of our site fondly, but can we really use this effect in UX design?

Uber did. The biggest pain point for users was waiting for their ride. So Uber’s designers came up with a real-time tracking map, putting customers back in control of their time. You can even see how the ETA is calculated.

If we analyse pain-points from our processes, paying particular attention to the last step and the biggest pain point, we can potentially change the way people feel about our products or services.

Customer journey-mapping is a great tool for discovering these points. We can also look at using customer aftercare to extend that warm, fuzzy glow.

4. Don’t make me wait 0.4s: the Doherty Threshold

If you want to keep users engaged, don’t make them wait. In 1979 IBM’s Walter J. Doherty determined precisely what that meant: productivity rockets when the delay in a human-computer interaction is less than 400 milliseconds.

Doherty attributed this effect to the limits of human memory. Users, he said, store in their working memory the series of steps they plan to take; long system response times interrupt that flow, causing a disproportionately large drop in productivity.

It would be lovely if every web page obeyed this rule on every device and network connection, but you don’t actually need to wait for quantum servers and universal hyperfast broadband. What is important is ensuring that your site’s mission-critical bits meet the threshold.

Remember, too, the Uber example; giving the user proper feedback can offset the delay when it’s inevitable. When you post images or video on Instagram, the upload happens while you’re still adding effects, captions and hashtags — no faster in real terms but the user perceives it as instantaneous.

Animations may have their place, though nobody loves the Spinning Beachball of Death and large animations can become part of the problem.

5. Miller’s Law and cognitive load

It’s not simple chance that this is a “seven things” blog post.

There’s a limit to the amount of concurrent ‘stuff’ we can hold in our working memory, and according to George Miller’s 1956 study that limit is seven (±2) items.

For interface designers, that’s a warning not to ask too much of our users. Seven isn’t actually a magic number — five items might be too many for a links list in a particular context, while more might be merrier for product listings. You can bet your house that Google tests and retests the item count on its search results pages.

But the principle holds. Don’t force users to read a paragraph if you can use microcopy instead. Minimise the input needed to fill forms. Avoid visual clutter and extraneous information. Let users keep their mental resources for tasks where they really need them.

(Unless you’re Ling’s Cars, of course …)

We can use personas to ensure we don’t overwhelm particular user groups and web analytics to understand where and how people use a site — if they tend to research on their phone but make purchases at a desktop, that should inform our designs.

6. Mental models

When we figure out how to do things, we create mental models — internal representations of a system that aid understanding and task completion.

They aren’t always accurate — the Melanesian cargo cults are a classic example, and anthropologists’ own mental models of the cults may be no less wrong. Peep Show fans might remember Jez’s attempt to “trick” a new central heating boiler.

But right or wrong, when we encounter something new to us, we often use mental models from other scenarios to help interpret it.

In terms of web usability, Jakob’s Law of internet user experience states that users spend most of their time on other websites, and so they expect yours to work the same way. Reinventing the wheel is a bad idea. Search boxes go at top right.

It’s well worth exploring the mental models your critical user journeys require. Might they be helpfully combined?

7. Hick’s Law and choice overload

Picture two jam stalls at a farmers’ market. One has 24 gourmet jams on display and generates plenty of interest; the other stocks only six flavours and attracts less attention. If you weren’t reading a usability blog right now, which would you expect to sell the most jam?

The heading has given it away, of course. When Columbia University researchers ran this study, less choice made more sales. Offered more products, potential customers faced decision overload, overwhelmed by the 24-way comparison.

In fact, many companies find that three is a magic number, hence many supermarkets’ triple-tier approach to own-brand products (budget, premium and luxury sub-brands).

Hick’s Law states that the more choices you offer, the longer your users will take to reach a decision. Limiting choices — by paginating checkout forms, perhaps, or refactoring site navigation — can absolutely boost your bottom line.

A key idea here is “chunking” — compressing and grouping content in a way that not only fits with users’ mental models, but also helps them sidestep complexity. You can use Design Systems to create a consistent UI that’s quicker to learn. Even for longer content pieces like blog posts, bullet points and sub-headings make for a more comfortable read.