Better Websites Through Psychology

In a previous newsletter, we explored the psychology of color perception. Today we’ll examine how web designers adopt other fundamental psychological principles to create professional-looking websites.

A web designer without a working knowledge of psychology is like Billy the (Designer) Kid with a water pistol. Put some of the ideas below to work, and you'll be like Billy the (Designer) Kid with a Dirty Harry style .44 Magnum. I know which one I prefer.

Some ideas you'll know already, others won't be so familiar. All have something to offer. When we discussed color, we learned that the skilled application of color to a website could be transformative. Consider the recent spate of colorized film footage available online nowadays. A black-and-white image of downtown Chicago in the 1930s comes magically to life with color. Whereas clapping your eyes on a badly colored webpage can double you over at the midriff like a sudden attack of colic.

Applying psychological principles beyond color can similarly transform the effectiveness of your web pages. Let's take a look at some of the most interesting.

Laws

Some long-standing psychological ideas are considered laws. Two, in particular, apply to web design: Hick's Law and Miller's law.

Hick’s Law

Hick's law states that the more choice afforded, the more complex decision-making becomes. Common sense, really. The ice cream franchise, Baskin Robbins, has created over a thousand flavors. If your average Joe Schmo visited an ice cream parlor offering one thousand flavors, he would most likely pass out from the enormity of the choice facing him and have to be carried from the store on a stretcher. Some decisions are just too hard to bear.

How often have you logged on to Amazon looking for a pencil sharpener, for example, and head spinning from the gazillion models on offer, you exit after purchasing 5 Kg of chicken manure by mistake?

And which of us hasn't experienced daily the overwhelm emanating from those dreadful automatic switchboards.' Press one if your head is only halfway up your ass. Press two if your head is entirely up your ass and you'd like someone to help you extract it. Press three for all other queries. Your call is important to us — you are one hundred and seventy-fifth in line.' We insist on choice, but we dislike too much of it.

Webflow recently remodeled their entire pricing structure due to many user complaints of confusion over too many options. Their current offerings still lend confusion with 4 to 5 options among 4 categories: general (site), e-commerce (site), agencies (workspace), freelancers (workspace). I could probably levy a consulting fee to answer the question, “What do I need to buy in Webflow?”

Miller's law

Try to offer only a few menu choices on the same webpage to minimize the cognitive load you put on visitors. How many are too many? That's where Miller's Law kicks in. Miller's law states that we can handle no more than seven pieces of information simultaneously (plus or minus two.) It can be argued that Honey-Do lists are an exception to this rule. Men can hold in memory only two items from a Honey-Do list at a time — these are usually the easiest chores on the list. Any others slip from memory.

Other psychological findings, not entirely clearing the bar as fully-fledged laws, stem from how the mind works. From the stuff we can't help doing. Next time you open the local rag and find a photo of some schmuck's pizza featuring Geronimo's face, know that you are witnessing proof that a brain is a pattern-seeking machine. It will always try to make sense of even random stimuli — whether we like it or not! Here are a bunch of other things we can't help doing. Understanding how these things work can greatly assist web designers everywhere.

Gestalt principles

Of the six main aspects of the Gestalt approach to psychology, two are particularly pertinent to web design: closure and the concept of figure and ground.

Closure

The type of closure we're thinking about here should not be confused with the other sort of psychological closure, which features the guy who bullied you in Junior High by holding your head down the John and repeatedly flushing. The guy that you randomly bumped into thirty years later, presenting the opportunity to creep up behind him and smack a long-necked banjo around his medulla oblongata like Mike Trout thrashing a home run out of the stadium. That's a different kind of closure altogether.

This kind of closure applies to website design. It's about the capacity of the brain to 'fill in' details where they don't exist. For example, can you see a dog in this image (left)? Caution: once you see it, you'll not be able to un-see it. When designing graphic elements and logos, bear closure in mind.

Figure and Ground

Distinguishing between foreground and background in an image. What do you see?

A. Pacman sprites reminiscing about the early days of video games

B. Four circles partly eclipsed by a square

C. All of the above

Confirmation bias

The phrase 'confirmation bias' refers to our tendency to seek out and recall information that confirms pre-existing beliefs.

We all display confirmation bias from time to time. Here's how it works. When some slavering Victorian fiend is apprehended as a serial killer in one of those old black-and-white whodunit movies featuring Sherlock Holmes swirling in and out of the London fog in his deerstalker hat, many will claim that they knew the felon all along. His eyes were too close together; or too far apart. Or they displayed the classic physiognomy of the feckless working-class — therefore, on that score alone, guilty as charged.

It's only when a last-minute twist in the plot reveals the suspect to be pastor John Do-goody, who was five hundred miles away at the time of the murders, that you and all the conclusions you jumped to end up with egg on your face.

If you're making a sales pitch on a web page, ensure that your pre-amble is pitched to chime with how your target audience sees the world. So, if you want to sell in-car satellite navigation kits to flat-earthers, try something like this:

'Yesterday, I swung a left a block too soon and nearly drove off the world's edge to be eaten by dragons. Luckily I had installed a V-5000 Tomahawk satellite guidance system in my Chevy. You can install this dragon-proof device in your car for only $499 plus sales tax.'

Anchoring bias

Anchoring bias is the tendency for an individual to rely too heavily on the first piece of information given on a subject. A friend of mine -- Let's call him Chuffer, asked a flashy kitchen specialist to remodel his dining area. Chuffer took great delight in boasting that he had brow-beaten the kitchen rep from his opening quote of $25,000 to $15,000 (including a free microwave oven.) A saving of $10k.

In fact, the salesman probably laughed all the way up the gangway of his forty-foot schooner on the Florida keys because he'd actually sold Chuffer a $5,000 kitchen for a markup of ten grand.

You can use anchoring bias in web design by ensuring that the first piece of data you provide on a product makes a favorable impression. Remember the old advertising cliche — you never get a second chance to make a first impression. This is part of why high-quality brand and web design is so valuable. A premium-priced model won't feel unexpected to your customers if a brand is initially perceived as premium.

Visual hierarchy

Visual hierarchy concerns how designers arrange design elements on a page — a crucial part of creating a memorable user experience. Essentially, the goal of a visual hierarchy is to guide the user's eye through a design in a meaningful sequence. Without a visual hierarchy, your designs will look haphazard and disorientated — a bit like peering into a kaleidoscope after chewing peyote (allegedly.)

Now that we have learned a little about those aspects of our perception over which we have little or no control, we need to ask how we use this information to design more effective websites. But you can learn as many techniques as you like; there are hundreds. You have to use these techniques in the marketplace to sell your wares. How? By using methods well known in sales psychology, that's how.

Social proof

As a psychological principle, social proof is about why we give weight to other people's actions to inform what we do. The application of social proof is excellent for businesses. Social proof is visible across all types of print and digital design in promoting a service or product. Social proof takes many forms, including

•     Reviews on platforms like Google

•     Use of logos to signal partnership or related media outlets

•     Likes and shares on social media

•     Testimonials

Social proof provides a security blanket for potential customers, a sense of trust and security before committing to a purchase. Web designers would benefit from learning how to build social proof into their designs.

However, tread lightly; there are some banana skins to avoid. Because it is possible to end up flat on your face if you're not careful. For one thing, our psychological reliance on social proof leaves us open to the perils of fake reviews.

Some fake reviews are unintentionally funny. Many work hand in glove with clickbait principles in the following format:

'Senior citizens in Wabash Creek can't get enough of this miracle hair restorer. The National Guard had to be deployed to the general store in Wabash Creek to quell riots when mom-and-pop Everglade temporality ran out of product on Groundhog Day. Click here now for further details! Hurry while stocks last!'

Psychologically, we don't care who does the recommending. Somebody is, and that seems to be good enough for most of us.

If you started reading this blog as the web-designer equivalent of Billy the Kid with a water pistol, you should now be like Billy the Kid with a .44 Magnum. Go get 'em, cowboy!