The Psychology of Web Design

R Proffitt
by Richard Proffitt
iopan design

There are many, many aspects of psychology in relation to web design, far too many for this short article so I'd like to focus on just a few. Since I have previously covered the psychology of colour (Colour Theory №4: Colour & Psychology) and the psychology of shape (The Psychology of Shape) and a little about Gestalt theory (Gestalt Theory & Design) I would like to consider the way people see and look at design; How people respond to ‘Persuation Triggers’ and finally consider some feedback by examining people's use of design; ending with a brief description of the Fogg Behavior Model.

Principles of Aesthetic Experience


The mind groups together things like shapes or colors as a natural tendency to try and find connections in elements. The neural mechanisms that we are tapping into are the same as those that evolved as a survival trait in the brain to protect us from predators and defeat their camouflage. There are a set of design principles known as Gestalt Theory which breakdown the various types of grouping into specific categories. These can be explored for further understanding of grouping. Have a look at the article: “Gestalt Theory & Design”.


A symmetrical object taps into the same neural machinery made to help the mind detect other people or predators. The more symmetrical and balanced something like a human face is, the more perceived beauty that is interpreted by the mind. No human face is perfectly symmetrical, however when the two sides are nearly equal, they are seen at a metacognitive level as more beautiful. Some scientists have argued this is because asymmetrical organisms are suffering from disease and the mind has evolved to recognize that.


Peak shift is how the mind reacts to differences between elements. The more you exaggerate those differences the more you are drawn to them.

We notice this done in many designs with lighting for example. The shadows and reflections, or soft spotlights behind elements is an exaggerated version of what occurs with natural lighting. By pumping up these effects we are creating a more aesthetically appealing lighting in our compositions.


As designers we learn to create focus on the essential elements of a layout and simplify the message that we are trying to communicate. In art, a drawing that is merely a minimal outline of the subject can be much more powerful than a 3D rendition of the same thing. This is why a sketch is more effective as art than a full color photo.

The principle of isolation is removing the gratuitous visual information that might clutter the design and concentrating on the essentials. It directs attention to what matters. By extracting what is critical and only showing that, the mind reacts strongly to this.


Perceptual Problem Solving is forcing the mind to try and figure out, or imagine, what the object looks like. The struggle almost introduces pleasure and forces the mind to figure out the image. This stimulates the mind more than just being literal with something, but rather teasing the mind with pieces of it and building up to a big reveal.


We know contrast well as a graphic design principle in relation to light versus dark, curves versus angles, and dynamic versus static. This contrast is in how the human retina and brain respond more to the edges and sharp stepped changes in color or gradation. The visual information mainly is in the area of change like the outline/edge of a person and the color wash background. Therefore, this becomes a more interesting and attention grabbing area for the eye and brain to focus.

By adding other dimensions of contrast to the design, like texture or color, the design attracts the cells and holds their attention. Contrast can also exist as repetitive elements like black and white lines that create a sort of visual rhythm for the eye to follow. Creating areas that contrast each other is vital to a dynamic and well-composed design.


When given an object to view the mind prefers a less complex vantage point. Take for example the cubes in the image to the right. The one on the left looks to us like what a cube should look like, because it is from a generic viewpoint. The cube on the right appears to be a flat hexagon to most people because it is from a very specific viewpoint. With the sides filled in with color we can finally see the cube. So although there are exceptions to this rule, this more generic viewpoint is usually more aesthetically pleasing.

Generic Viewpoint for the cube on the left

Designers understand the use of metaphor very well. It is used in creating a familiar user experience by tapping into real objects that people already understand. In this case the understanding of metaphor is a bit different. The metaphor is a sort of mental tunnel between two objects that at first seem unrelated. On an unconscious level though, the mind has already made the association.

Good metaphors are easy to grasp and universal. Some design or imagery is compelling — because of the use of metaphor — the moment we see it. That is because before we even understand why, our mind has already deciphered it.

Add to Cart Buttons

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos

Persuasion Triggers In Web Design

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae.

  • Reciprocation
  • Commitment
  • Social Proof
  • Authority
  • Scarcity
  • Framing
  • Salience


“One good turn deserves another”

This principle tells us that if we feel we have been done a favour, we will want to return it. If somebody gives you a gift, invites you to a party or does you a good turn, you feel obliged to do the same at some future date.

Persuasion architects exploit this principle by giving users small gifts — a sample chapter from a book, a regular newsletter or just useful information — in the knowledge that users will feel a commitment to offer something in return.


“I do what I say I'll do”

This principle tells us that we like to believe that our behaviour is consistent with our beliefs. Once you take a stand on something that is visible to other people, you suddenly feel a drive to maintain that point of view to appear reliable and constant.

A familiar example of this in action is when comments on a blog degrade into a flame war. Commentators are driven to justify their earlier comments and often become even more polarised in their positions.

Social Proof

“I'll go with the flow”

This principle tells us that we like to observe other people’s behaviour to judge what’s normal, and then we copy it. Persuasion architects apply this principle by showing us what other people are doing on their web sites. For example, researchers at Columbia University set up a web site that asked people to listen to, rate and download songs by unsigned bands. Some people just saw the names of the songs and bands, while others — the “social influence” group — also saw how many times the songs had been downloaded by other people.

In this second group, the most popular songs were much more popular (and the least popular songs were less popular) than in the independent condition, showing that people’s behaviour was influenced by the crowd. Even more surprisingly, when they ran the experiment again, the particular songs that became “hits” were different, showing that social influence didn’t just make the hits bigger but also made them more unpredictable.


“I trust the experts”

This principle is about influencing behaviour through credibility. People are more likely to take action if the message comes from a credible and authoritative source.

For design guidance, we can turn to the Stanford Persuasive Technology Lab (founded by B.J. Fogg) as they have developed a number of guidelines for the credibility of web sites. These guidelines are based on research with over 4,500 people and are based on peer-reviewed, scientific research. Thanks to their research, we know that you should highlight the expertise in your organisation and in the content and services you provide; show that honest and trustworthy people stand behind your site; and avoid errors of all types, no matter how small they seem.

Persuasion architects exploit this principle by providing glowing testimonials on their web site. If it’s an e-commerce site they will have highly visible icons showing the site is secure and can be trusted. If the site includes a forum, they’ll give people the opportunity to rate their peers: for example, some web forums (like Yahoo! Answers) let users vote up (or down) answers to posted questions. The top ranked answer is then perceived to be the most authoritative.


“Rare things are more valuable to me”

This principle tells us that people are more likely to want something if they think it is available only for a limited time or if it is in short supply. Intriguingly, this isn’t just about the fear of missing out (a kind of reverse social proof). Scarcity actually makes stuff appear more valuable. For example, psychologists have shown that if you give people a chocolate biscuit from a jar, they rate the biscuit as more enjoyable if it comes from a jar with just 2 biscuits than from a jar with 10.

Persuasion architects exploit this by revealing scarcity in the design of the interface. This could be an item of clothing that is running short in your size, theatre tickets that are running out, or invitations to a beta launch. They know that perceived scarcity will generate demand.

Related to this is the ‘closing down’ sale. One of the artists at my friend’s art co-op recently decided to quit the co-op and announced this with a sign in-store. She had a big rush on sales of her art. Then she decided not to quit after all. So pretending to go out of business might be a ploy!


“The way things look is important”

This principle acknowledges that people aren’t very good at estimating the absolute value of what they are buying. People make comparisons, either against the alternatives you show them or some external benchmark.

One example is the way a restaurant uses an “anchor” dish on its menu: this is an overpriced dish whose sole aim is to make everything else near it look like a relative bargain. Another example is the Goldilocks effect where you provide users with three alternative choices. However, two of the choices are decoys: one is an overpriced, gold plated version of your product; another is a barely functional base version. The third choice — the one you want people to choose — sits midway between the other two and so feels “just right.”


“I focus on what is important right now”

This principle tells us that people are more likely to pay attention to elements in your user interface that are novel (such as a coloured ‘submit’ button) and that are relevant to where there are in their task. For example, there are specific times during a purchase when shoppers are more likely to investigate a promotion or a special offer. By identifying these seducible moments you’ll learn when to offer a customer an accessory for a product they have bought.


The Fogg Behavior Model

The Fogg Behavior Model shows that three elements must converge at the same moment for a behavior to occur: Motivation, Ability, and a Prompt (Trigger). When a behavior does not occur, at least one of those three elements is missing.

Many other people have proposed ways to understand persuasion and behavior change, dating back to Aristotle in ancient Greece. What makes the FBM different from previous work? First, the FBM shows how behavior is the result of three specific elements coming together at one moment. Next, the FBM explains the subcomponents of each element. In addition, the FBM shows that Motivation and Ability can be traded off (e.g., if motivation is very high, ability can be low). In other words, Motivation and Ability have a compensatory relationship to each other. Finally, the FBM applies most directly to practical issues of designing for behavior change.

My Behavior Model shows that three elements must converge at the same moment for a behavior to occur: Motivation, Ability, and Trigger. When a behavior does not occur, at least one of those three elements is missing.

BJ Fogg

Nullam vel tellus

Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit. Aliquam et metus sed tortor eleifend pretium non id urna. Fusce in augue leo, sed cursus nisl. Nullam vel tellus massa. Vivamus porttitor rutrum libero ac mattis. Aliquam congue malesuada mauris vitae dignissim. ❧