How the colors, words, and photos greatly impact your user experience
The psychology of the web is now a thing whether we like it or not. It influences how much or little we interact with a website, our likelihood of return, and even our emotion associated with a particular page. It’s no longer pseudoscience. There are hard science and studies that back up these findings. So what exactly is the psychology of the web and how can you use it on your website?
You might have heard this story about an elephant:
A king takes his most trusted advisors and puts a blindfold on each one. He then brings them into a dark room. They cannot see anything. The king says to them, “I have been to a faraway land, and I have brought back with me something this is unlike anything you have ever known. It is an elephant.” “What is an elephant?” the advisors ask. The king says, “Feel the elephant and describe it to me.”
The first advisor feels a leg and says, “The elephant is a pillar.” Another advisor feels the tail and says, “The elephant is a rope.” The third advisor feels the belly and declares, “The elephant is a wall.” And the last advisor feels the tusk and announces, “The elephant is a solid pipe.” “You are all wrong and all correct at the same time,” says the king, “for you are each feeling just a part of the elephant.”
The story reminds me of the different views of design that are held by people with different backgrounds, levels of education, and experience. A visual designer approaches design from one point of view, an interaction designer from another, and a programmer from yet another. Then there is the business owner, the information architect and on and on. Each person’s own experience, education, and background influence their perception and determine which part of the elephant they focus on. Usually, experiencing a different part of the elephant is helpful.
Unvetica’s take on the elephant
We (Unvetica) consider the psychology of the web and design in the context of the mental model of the user. Whether the design is of software, a website, a medical device, online instructions, or product packaging, we can’t help but see it from a psychologist’s point of view – and so should you. We enjoy applying what psychological research tells us about how people think, learn, play, and work to design challenges. We take research and insight into the brain, the visual systems, memory, and motivation and extrapolate design principles from them.
People Are Social Animals
People are always surprised when someone comes up with a new way to use technology to interact with one another.
MySpace and Facebook were a surprise when they came out, as were Reddit and Twitter. We asked ourselves, “What is this for? Why would people want to use this?” These technologies and applications were new and unexpected when they first appeared, but adoption of them was fast and broad. They became well used and a huge part of millions of people’s daily lives in an amazingly short span of time.
We underestimate how important it is for people to be social and forget that they are, at their core, social animals. People will use whatever is around them to be social, including technology. If you can think up a new way for people to be social using technology, then put that idea into action, because it could very well turn out to be the next big thing and earn you millions of dollars.
All Interactions Online Are Social Interactions according to the the psychology of the web
When people interact with each other in person, they follow rules and guidelines for that social interaction. We have expectations of how social interactions will go, and when someone violates those expectations, we get uncomfortable. The same is true of online interaction. When we go to a website or use an application, we have assumptions about how it will respond to us and what the interaction will be like. Many of these expectations mirror the expectations we have of face to face interaction.
If a website is not responsive or takes too long to load, it is like the person we are speaking to is not making eye contact or is ignoring us. When website asks for personal information too soon in the flow of the interaction, it’s like someone asking personal questions off the bat. If the website does not save our information from session to session, it’s like the person does not remember that we have met.
When you (or we) design an interface, think of the interactions you are building. Think about how they mirror interpersonal interaction and be sure not to violate any rules of social interaction.
Most Decisions Are Made Unconsciously
We like to think that we are rational beings and that we make decisions (such as which website to visit or which product to buy) based on a logical thought process. However, latest research shows that we make decisions largely unconsciously. Over the last 10 to 15 years, vast research has been done on unconscious mental processing. Functional magnetic resonance imaging (fMRI), giving us the ability to look at the active parts of the brain when a decision is made.
Humans have developed an efficient way of dealing with the millions of pieces of sensory information that we are bombarded with every second. Our eyes, ears, nose, sense of touch, and taste buds take in huge amounts of data – the latest estimate is 40 million sensory inputs each second. But we can consciously process only about 40 of those at any one time. Most of the information we take in is processed efficiently and quickly – unconsciously. Our brain processes the data and makes decisions. Is this good or bad? Dangerous or harmless? Is the person threatening me? Is that thing over there a snake? We are not even aware of this processing, but it affects our decision to click a “Buy Now” button, follow a link, read a paragraph, or abandon a transaction, all thanks to the the psychology of the web.
If you want to create a website that is engaging, that grabs the visitor’s attention, encourages them to continue interacting, and persuades them to take a particular action, then you have to communicate with more than just the logical part of the brain (the pre-frontal cortex). You have to also engage the midbrain (or emotional brain), where emotions are processed, and the old (or reptilian) brain, where danger, sex, and food messages are processed.
Consider these when designing an engaging website:
- The old brain is constantly scanning the environment for food, sex, and danger – so any images of food, attractive people, or scary scenes will grab their attention, as will animation or movement.
- To hold attention for more than a few seconds, you need to engage the midbrain. You can do this with stories and pictures of people’s faces, especially ones that show some kind of emotion.
- People process information best through stories, so use as many as you can, even short ones.
- People are naturally drawn to pictures of other people, especially people who are attractive or appear similar in dress, age, and other physical characteristics.
- The best pictures to use are of people looking right into the camera. The picture should be large enough so that you can really see the faces.
- Although people make decisions unconsciously, they still need rational reasons to explain to themselves and others why they made the decisions they made. These rational reasons are probably not their real reasons, but having them is important, so make sure to provide compelling arguments for why they should choose your service, tool, or resource.
People Look to Others When Uncertain What to Decide
The tendency to look to others to decide what to do is called “social validation.” Many studies have been done on the phenomenon. Latane and Darley conducted a series of studies in which they set up ambiguous situations to see whether people were affected by what others around them did.
For example, they would bring someone into a room supposedly to fill out a survey on creativity. One or more actors would be in the room pretending they were also participants. Sometimes one actor would be in the room, sometimes two or more. As everyone was filling out the survey, smoke would seep into the room through an air vent. The researches were interested in seeing whether the participant would leave the room, tell someone about the smoke, or just ignore it. It wasn’t clear what the smoke was or whether it was dangerous, so the situation was ambiguous.
The participant’s response depended on the behavior and number of other people in the room. If others were in the room but not reacting, then the participant typically would not take action either. The more people in the room who ignored the smoke, the more likely that the participant would also. If the participant was alone, then he or she would leave the room to notify someone.
Online, social validation is most evident in ratings and reviews. When we are unsure what to do, we look to testimonials, ratings, and reviews.
The most powerful ratings and reviews share a couple of key characteristics:
- They provide more information than just a score. The more information that is available, the more people will trust and believe the review.
- They tell a story about the product or service. Stories are powerful because they speak to our midbrain.
The takeaway: f you want to persuade people to take action, make sure include ratings, reviews, and testimonials.
People Decide in a Split Second Whether They Trust Your Website
When a visitor comes to your website, they make decisions about what the website is about, if they like it, whether they will stay, and whether or not they trust the information. These decisions are made very quickly, in some cases in less than a second. The decisions are also made largely unconsciously. B.J. Fogg’s theory of trust and websites posits that decisions about whether to trust a website are based heavily on superficial aspects of the user interface. Here are some factors that lead to mistrust:
- The text is not aligned or orderly. The text is centered rather than left-aligned, and the screen has many distinct margins.
- Too many fonts and font sizes are used, and too much text is colored.
- The page has too much information and looks cluttered.
- The page has too many animations, especially dated and/or amateurish ones.
- There are too many areas of color on the screen, and they are not coordinated into one color scheme.
Bottom line: if you want to appear trustworthy, then pay attention to basic principles of interface design. Avoid inconsistencies that would make users feel awkward or not take you seriously. You don’t have many opportunities to gain a user’s trust, so you’re best to get it right the first time.
People Are Motivated by Mastery
In his book Drive, Daniel Pink talks about how motivating it is to have a sense of mastery. People want to feel that they are growing and acquiring knowledge in a field or gaining skill in a task. In order for people to gain a sense of mastery, they need to feel that they are making progress.
Ran Kivetz, Oleg Urminsky, and Yuhuang Zheng have conducted experiments on human motivation, including research on what most motivates people on websites. In one of their studies involving a website for rating songs, they found that people would visit the website more frequently and rate songs on each visit as they got closer to the reward goal on the website. This is called a “goal-gradient” effect.
This effect was first studied by Hull in 1934 using rats. He found that rats that were trained to run a maze to find a food reward would run faster as they got closer to the end of the maze.
The goal-gradient effect states that you will accelerate your activity as you move closer to your goal.
Here are some things to keep in mind about this behavioral pattern:
- The shorter the distance to the goal, the more motivated people will be to reach it.
- You can trigger this boost of motivation with even the illusion of progress.
- Motivation plummets right after the goal is reached. You are most at risk of losing a customer immediately after the reward is attained.
Mastery is one reason why gaming is so powerful. People become addicted to trying to master a level. While your website might not be a game, look for ways to build the concept of mastery into it. Enabling visitors to set goals and chart their progress keeps them engaged and motivated to use your website.
People Are Easily Distracted
Even when performing an important task, we tend to easily get distracted and end up clicking to various websites instead of following the linear path to our objective. In general, we get easily distracted on websites for three reasons:
The old brain. Because our old brain is constantly scanning the environment for food, sex, and danger, we can get distracted when any of those things show up.
Peripheral vision. Basically, we have two types of vision: central and peripheral. Central vision is the one we use when we look directly at something and see the details. Peripheral vision is the rest of the visual field – what we do not directly look at. The evolutionary theory concludes that thousands of years ago, the people who were able to see the lion coming as they were sharpening their flint or gazing at the clouds survived at a higher rate, and thus got to pass on their genes. So, peripheral vision has always been important.
Multi-tasking is a myth.
Many people believe that they’re able to multi-task, but the research is clear that we actually can’t. Many years of psychology research shows that people can attend to only one task at a time. We can alternately talk, read, type, and listen; and we are adept at switching between them quickly, so we are under the illusion that we are multi-tasking.
A study by Ira Hyman and others shows that people who talk on their cell phones while talking run into people more often and notice less of what is around them. The researchers planted an actor in a clown suit riding a unicycle. The people talking on their cell phones were much less likely to remember or even notice the clown. The fact that we are so easily distracted can be both good and bad. If you want to draw attention to a certain part of a web page, that is an easy feat since it is relatively simple to distract people.
But getting people to concentrate on one part of the page can be hard. Also, drawing people’s attention to your website is easy, but having them focus on one section of the page and keeping them from getting distracted while they’re there is hard.
Keep these points in mind:
- Anything that moves will grab attention, including video, animations and scrolling banners – not that you should use scrolling banners much (and starting them automatically is an especially bad practice), but it’s worth noting nonetheless.
- Photos of people, food, sex, and dangerous scenes are distracting.
- Anything that blinks is bothersome because it constantly catches the peripheral vision.
Use distractions to grab attention, but eliminate them when you want people to stay focused.
People Are Inherently Lazy
People do the least amount of work possible to get a task done. Over eons of evolution, humans have learned that they survive longer and live better if they conserve energy. We’ve learned that we have to spend some energy to acquire certain resources, but beyond that, we know that we waste energy if we spend too much time running around trying to get stuff.
Satisfy + Suffice = Satisfice
For most activities, most of the time, humans operate on a principle called “satisficing.” Herber Simon coined the term. It was originally used to describe a decision-making strategy in which a person picks the option that is adequate rather than optimal. The rationale is that not only is the cost of completely analyzing all options not worth the investment, but such a thorough analysis might be impossible.
According to Simon, we often don’t possess the cognitive faculties necessary to weigh all possible options. So, deciding based on what’s good enough can be better than trying to find the optimal solution. What are the implications for those of us who design websites, software, products, or even surveys? Satisficing leads us to some interesting guidelines:
Design websites for scanning, not reading.
In his book Don’t Make Me Think, Steve Krug applies the idea of satisficing to the behavior of a website’s visitors. The owner hopes they read the whole page but knows that “what they actually do most of the time (if we’re lucky) is glance at each new page, scan some of the text, and click on the first link that catches their interest or vaguely resembles the thing they’re looking for. There are usually large parts of the page that they don’t even look at.
Assume that people look for shortcuts.
People look for ways to do things faster and in fewer steps, especially repetitive tasks. But if a shortcut is too hard to figure out, then they will keep doing it the old way. As odd as this seems, it comes down to perceived effort. If finding a shortcut seems like too much work, then people will stick with their old habits (being satisfied with their satisficing).
Defaults reduce the amount of effort required of visitors. Automatically filling in the name and address fields on a Web form, for example, means less work for the user. The risk is that people often don’t notice defaults and so might unwittingly confirm a wrong one. Again, it comes down to the effort required. If changing a default would take considerable effort, then you might want to reconsider providing it.
People are wired to get things done with as little work as possible, but yet don’t want to be bored. Accounting for both of these impulses is the key to creating an engaging website.
People Have Mental Models About How Things Work
Imagine that you’ve never seen a Kindle, and I’ve just handed you one and told you that you can read books on it. Before you turn it on to use it, you have a model in your head of what reading a book on the Kindle is like.
You have assumptions about what the book will look like on the screen, what things you will be able to do and how you will do them – things like turning pages or adding a bookmark. You have a mental model of reading a book on the Kindle, even if you’ve never done it before.
That mental model is determined by a lot of things. Someone who has used a Kindle before, someone else who hasn’t, and yet another who has never even heard of it will all have different mental models of the experience.
If you’ve been reading books on the iPad for years, then your mental model will be different from that of someone who has never read an eBook. And once you do get a Kindle and have begun to read on it, your mental model will adjust to the experience.
Mental Models Are Not New
Mental models have been defined in many ways for at least 25 years. In her 1986 study, Susan Carey defines mental models as such:
“A mental model represents a person’s thought process for how something works (i.e. a person’s understanding of the surrounding world). Mental models are based on incomplete facts, past experiences, and even intuitive perceptions. They help shape actions and behavior, influence what people pay attention to in complicated situations, and define how people approach and solve problems.”
In the context of user interface design, a mental model is a representation that a user has in their mind of a product. Here’s what we know about mental models:
- Users create mental models very quickly, often before even using the product.
- Mental models are subject to change.
- Users base their mental models on prior experience with similar products, their assumptions, other people’s observations, and direct experience with the product.
- People use mental models to predict what a product will do or what they should do with it.
Mental Models vs. Conceptual Models
To understand why mental models are so important to designing user interfaces and the psychology of the web, we have to also understand conceptual models. A conceptual model is the actual model of a user interface itself.
Going back to the iPad, you have a mental model of what reading a book on it will be like, how it will work and what you can do with it. But when you sit down with the iPad, the device presents the conceptual model of the book app. There will be screens and buttons, and things will move around. The conceptual model is the interface itself, and you are interacting with it by using the product.
So, why should we bother distinguishing between mental models and conceptual models? Here’s why: every choice you make with the user experience constitutes either a match or mismatch between the user’s mental model and the product’s conceptual model.
Here are some examples:
- If the product’s conceptual model doesn’t match the user’s mental model, then the user will find the product difficult to learn and use.
- A product may have multiple user groups (e.g. people who have used a Kindle before, people who haven’t read an eBook, etc.). If the conceptual model is designed to match just one mental model, other groups may find the device hard to adapt to.
- If the conceptual model is not deliberate but merely reflects the underlying hardware of software or database, then it will not match the users’ mental model very well, and the users will find the device hard to learn and use.
What to Do If You Need to Change the Mental Model
Taking a deeper look into the psychology of the web, sometimes you don’t want to match the user’s mental model. You might be designing something really different, a breakthrough product. In this case you may decide that you want the user to alter their mental model to fit your new conceptual model rather than the other way around. You know, for example, that people who have read only paper books will not have an accurate mental model of reading books on the Kindle.
In this case, you will still need to understand the user’s mental model so that you know how it diverges, and then train the user on the model itself (not just on the product). Training is crucial because it sets (or resets) the user’s mental model before they start using the product. It doesn’t have to be a laborious multi-day training experience. You can alter a mental model in a few minutes. For example, you could present a short video before the Kindle arrives at their door. The goal is to alter the user’s mental model to fit the conceptual model of the product.
It’s All About Mental and Conceptual Models
Mental models and conceptual models are powerful for the work that interface designers do. You could even go so far as to say that almost everything we do in a user-centered design process has to do with understanding the user’s mental model (through task analysis, observation, interviews, etc.) and designing a conceptual model to fit the user’s mental model (through interface design, iteration, validation testing, etc.).
The secret to designing an intuitive user experience is to match the conceptual model of your product as closely as possible to the mental model of your users. If you get that right, then you will have created a positive and useful user experience.
People Make Mistakes
People are wrong a lot, and they don’t like being wrong. How a website handles errors determines whether people stay and come back. Leveraging the psychology of the web helps you to recognize that people do make errors. You can then anticipate what those errors might be and how best to deal with them. Avoid giving error messages that make no sense.
Creating error messages probably requires the least time and energy of all sections of a website, and maybe that is appropriate. After all, the best error message is no error message. A good system is designed so that no one can take a wrong step. But when something does go wrong, it is important that people know what to do and how to find a resolution.
The reality is that something always goes wrong. Everyone makes mistakes; users make mistakes when typing, companies make mistakes by releasing buggy software, and designers create unusable websites because they don’t understand what users need.
You can mitigate errors by following these tips:
- Think ahead about what mistakes will likely occur. Figure out as accurately as possible what kinds of mistakes people will probably make, and adjust your design accordingly before releasing it.
- Create a prototype, and then get real people to use it so that you see what errors they make. In other words, perform usability testing.
- Write error messages in plain language. They should communicate the following: 1. That an error has been made. 2. What the error is. 3. How the user can correct it. 4. Where to go for more help.
- Use the active voice, and be direct. Weak: “Before the invoice can be paid, it is necessary that the payment date be set earlier than the invoice creation date”. Better: “Enter an invoice payment date that falls before the invoice creation date”.
Creating a system that guarantees that no errors will be made is difficult…in fact, impossible. Look at Three Mile Island, Chernobyl, and British Petroleum. The more costly the potential errors, the more steps you need to take to avoid them. The more you need to do to avoid them, the more expensive the system will be. If it is critical that people not make mistakes (for example, if you’re dealing with a nuclear power plant, oil rig, or medical device), then be prepared: you will have to test two to three times more than usual, and training will have to be two to three times more intensive. Trying to design a fail-safe system is expensive. And you’ll never fully succeed. It’s just the way humans are built. We make mistakes.
Looking Is Not Necessarily Seeing
When we design a website, we pay a lot of attention to what people will be looking at. The Web is, ultimately, a visual medium. We assume that visitors will spend time looking at various elements of the website, and we make a lot of assumptions about what that entails. One common assumption turns out to be unfounded: that someone actually “sees” what they’re looking at.
Two interesting lines of research point out the fallacy in assuming that people see what they look at. One compares peripheral and central vision and the other addresses “inattentional blindness.”
Central vs. Peripheral Vision
We’ve gone over our two types of vision, central and peripheral, and how they relate to the web psychology. Researchers from Kansas State University have shown we rely on peripheral vision to understand the world more than we previously thought. We seem to get the “gist” of the scene before us from our peripheral vision. The researchers showed people photographs from common scenes; for example, a kitchen or living room. Some photographs were obscured around the periphery, others obscured in the center. The images were shown rapidly, and then the participants were asked to describe what they saw. They found that if the center of the photo was obscured, people could still identify the scene. But when the periphery was obscured, they couldn’t tell whether it was a living room or kitchen.
Chabris and Simons present their research on what is called inattentional blindness in their book, The Invisible Gorilla. Through many studies, they show that people often don’t see what is right in front of them. We are so bombarded with visual stimuli that our brains have developed the capacity to automatically and unconsciously decide what we need to pay attention to. The eye takes in much more than the brain brings to the level of awareness.
If peripheral vision is in some ways more important than central vision, and if we are able to look at objects without really registering them, what are the implications for website design? Here are some:
- Just because someone has looked at a page element, doesn’t mean they paid attention to it.
- Just because it is on the page, doesn’t mean everyone sees it.
- Although eye-tracking technology provides interesting data, it tells you primarily where people looked with their central vision. Because it does not track peripheral vision, don’t make crucial design decisions based on eye-tracking data alone.
Whatever type of website you are designing, someone unlike you will eventually use it. You have your own perception of the elephant. If you want the website to be useful, interesting, and relevant to other people, then broaden your view of the elephant and incorporate the psychology of the web into your decisions. Here are 10 principles about people to remember:
- People are social animals.
- Most decisions are made unconsciously.
- Individuals look to others when they are uncertain what to do.
- People decide in a split second whether they trust your website.
- Humans are motivated by a desire for mastery.
- People are easily distracted.
- People are inherently lazy.
- Everyone has a mental model of how something works.
- People make mistakes
- Looking is not the same as seeing.
Additional Helpful Resources
By being aware of and leveraging the psychology of the web, you’ll greatly improve overall professionalism, conversion rates, and sales. If you still need help to implement and optimize, contact us to schedule a consultation.
We also highly recommend reading up on the General Data Protection Regulation and how it relates to your website and users.
A believer in the pursuit of genuine ideas, the power of numbers and all that is the internet. Michael has been a full stack web systems engineer for 10 years. Focusing specifically on WordPress based systems, usability, UX/UI, and delivering Human Solutions in a digital world.