Table of Contents
Understanding psychology of design is a must for every designer. It doesn’t matter whether you design websites, magazines, apps or physical products. What matters is that your target audience are people and results of your work are going to be used by them. It is important for you as a designer to know how people think, make decisions and what motivates them. These and many other questions will be answered in this series about psychology of design. Today, you will learn everything you need about how we see.
Psychology of design and how we see the world around us
We humans have five senses: sight, hearing, taste, touch and smell. Sight is the most dominant of our senses. Half of our brain called visual cortex is dedicated purely for this sense and processing the information we see. The fact that our eyes physically perceive objects around us is only one piece of the puzzle. You may not know that it’s actually our brain that alters and interprets the world around us. As a result, it is our brain what allows us to see, not our eyes.
No.1: Our brain sees differently than our eyes
The common idea about how we see is that our eyes provide brain with information about the world around us. These information are then processed by our brain and the result is that pretty picture you “see” called reality. This is not exactly true. What our brain is trying to convince us that we see is not the same thing as our eyes see. There are many things our brain is interpreting although they don’t exist. Great demonstration of this interesting facet, and a chance to see psychology of design in action, is illusion called Kanizsa’s Triangle.
This illusion is composed of black triangle and partial black circles. You will probably also see one reversed white triangle. The problem is that there is no white or black triangle. There are only partial black circles and couple of lines. It is your brain that tells you there are some triangles. Your brain is creating these triangles from whitespace because our brain expects to see these triangles. You can try the same experiment with rearranging the partial circles and removing the line so you will “see” white square or any other geometric shape.
The cause of this illusion is that our brain is actively creating various shortcuts. There is incredible amount of information our brain is trying to process every second. Scientists estimate that our brain has to process and understand around four hundred billion bits of information every second. In order to make this process faster, your brain is using our past experiences to basically guess what do you see without the need to process every single bit of information.
The upside of this strategy our brain is using is that we are able to see the world around us without noticing any “delay”. Using this strategy also helps our brain to avoid being overwhelmed by sensory inputs. It is fair to say that, in most cases, this strategy works. Unfortunately, not always as you can see on the Kanizsa’s Triangle and similar illusions. How can you apply these facts from psychology of design in your work?
The takeaway
Remember that what you people will see on your website, in app, magazine or any other design may not be what they will see. Their perception can vary according to the color of the background, their knowledge and familiarity with the subject and also their expectations. It is safe to say that there will be moments when you will not be able to win against the psychology of design. Different people will have different experiences and expectations and you can’t take complete control over these factors. You can still adjust the presentation to nudge people to see things in a certain way.
No.2: There is a differences between peripheral and central vision
There are two ways we can see the world around us. The first way is through central vision. We use central vision when we look at objects directly and to distinguish their details. The second way is through peripheral vision. Our peripheral vision includes objects that are on the edges of our field of view. We look at these objects directly. There are couple studies that say that our peripheral vision may be more important for how we see and understand the world around us than we think.
For example, there was one study were participants were shown photos of different rooms. All of these photos were modified in one of two ways. One group of photos lacked the peripheral part of the picture and showed only the center. The second group of photos lacked the center and showed only peripheral part of the room. This study demonstrated that participants were still able to recognize the room when they were given photos containing only peripheral part of the room.
Something interesting happened when researchers gave participants photos featuring only the central part (without peripheral part). Participants were not able to recognize what room are they looking at, no matter how hard they tried. Researchers concluded that we use peripheral vision to understand the meaning of the scene (is it kitchen, is it bathroom, etc.). When we want to recognize specific object or observe it’s details, we will use central vision.
Knowing about central and peripheral vision is also important in psychology of design because it determines our ability to focus. Meaning, whether we like it or not, we are able to use our peripheral vision to recognize movement. Ability to recognize movement in our peripheral vision had much more important purpose in our history. It was not meant to help us use psychology of design to influence people. It was this ability what helped our ancestors to spot danger and survive while they paid attention to other activities.
There is one interesting study done by Dimitri J. Bayle and his team of researchers. This study focused on connection between peripheral vision and our limbic system. Researchers found that when scary object was in central vision of participant, it took amygdala from 140 to 190 milliseconds to react. When scary object was in peripheral vision, amygdala reacted only in just 80 milliseconds! In other words, participants were able to react almost in half the time.
One consequence of this ability is that it is much harder to focus on reading article if there is animated banner or any moving or blinking element in your peripheral vision. You will have a tendency to look at it. It is like a magnet for your attention. That is why banner ads are often placed on the sides of website. When banners are placed on the side of website, they are not directly distracting people from consuming the content. Yet, they still attract people’s attention.
The takeaway
We use our peripheral vision when we are looking at the screen. In most cases, we make decisions about the website and its content based on a quick glance. This means that, although the center is important, designers should never ignore other areas users see in their peripheral vision. As we discussed, information from peripheral vision travel much faster than information from central vision. Therefore, these areas have huge impact on users’ decision to stay on the website or leave.
Make sure that information in peripheral areas are congruent with the purpose of the page and whole website (or design). Basic elements in the layout should always be consistent. What if you want to convince user to do pay attention to specific area or object on the page? You should remove anything moving, animated or blinking in peripheral parts around this area. Otherwise, these elements will prevent users to fully concentrate.
No.3: Brain relies on pattern recognition
As we discussed, our brain has to handle incredible amount of information every second. Another strategy our brain uses to understand the world around us is pattern recognition. Our eyes and brain are constantly trying to create new patterns from objects and impressions we perceive. Our brain tries to find “see” patterns even if there are no patterns at all. This is also why we like to think that, in some situations, we can predict the future because we can “see” some patterns.
In last decades, there have been couple of theories focused on how we see and recognize objects around us. One of these theories assumes that our brain contain some kind of memory block. This block is a storage of all the objects we see thorough our life. When we see some new object, our brain will immediately compare it with objects in our memory block to find a match. If you are familiar with JavaScript loops you can imagine as some kind of a while or do/while loop.
More recent studies indicate that brain may actually work in different way. Our brain may not be looking for similar objects on our memory storage. Instead, our brain may be using basic shapes to identify objects around us. One theory says that we are able to discern about twenty-four basic shapes. We are, then, using these basic shapes as a building blocks for every object we see.
The takeaway
First, use patterns in your design as much as you can because our brain is primed for looking for them. This means that users will unconsciously look for these patterns. You can create patterns by grouping elements and smart use of whitespace. Second, to make it easier for user to recognize certain objects, such as icons, use simple geometric shapes. Using simple geometric shapes will also make the object easier to remember.
Third, prefer two-dimensional objects over three-dimensional objects. Our eyes see all objects as two-dimensional first. It is our visual cortex and further processing of these information and creates perception of the object in three dimensions. Therefore, when you use three-dimensional objects, it can slow down users ability to recognize and understand these objects.
No.4: Brain has specific area for facial recognition
Have you ever was in crowd of people when you suddenly recognized someone you knew? Isn’t a little bit weird? There are dozens or maybe even hundreds of unknown faces around you. However, you are still able to immediately recognize someone you know. The key to this mystery lies in the fact that there is a specific area in our visual cortex dedicated solely for facial recognition. This is why you are able to recognize someone you know in a split second.
This area is called fusion face area, or FFA. This area helps faces we see bypass regular brain channels for interpretation of we see. This area helps us recognize and identify face much faster than objects. It is interesting to mention that there is one exception to facial recognition. People with autism are not using fusion face area when they see human faces. Instead, people with autism are using other brain channels that are otherwise used for recognition of objects, not faces.
Another interesting information about facial recognition is that people look at places and in directions other faces look at. Meaning, when you see a picture with a face not looking at you, you will have a tendency to look in the same direction as the face in the picture. Before you start replacing all promo photos on your website, there is one thing you should know about. Looking at something doesn’t automatically mean paying attention to it. In order to create emotional connection, use face looking at users. In order to attract attention, use face looking on something.
The takeaway
First, people will recognize faces on the website and react to them much faster than to any other elements or objects. Keep in mind that this doesn’t apply to people with autism. Second, faces looking directly on people will create stronger emotional bonds with users. Third, if the face featured on your website is looking at certain place, users will have a tendency to look at that place as well. However, that doesn’t automatically mean they are also paying attention to it. They may be just looking at it.
No.5: Angles of view change our perception
Have you ever tried to draw some object such as car, house or cup of tea? It is interesting that if you ask random number of people to do that, the majority of drawings will show the objects from the same angle and perspective. The images will be mostly drawn from top down view. This view is called canonical perspective. The theory is that thinking, imagining and remembering objects from canonical perspective is universal human trait.
The takeaway
First, if you want to help people recognize and also remember certain object faster, show that object from canonical perspective. Second, are you using any icons on your website, in your app or interface? It can be a good idea to think about recreating these icons also in canonical perspective.
No.6: Our experiences and expectations shape our perception
The first time you arrive on some website or open some app, your previous experiences and expectations will determine where will you look first. For example, people used to read from left to right also have a tendency to scan the website from left to right. On the other hand, people used to reading from right to left will scan website in the same direction. However, there is one thing in psychology of design related to websites.
Thorough the time, people eventually grew accustomed to the fact that the top part of website is usually dedicated to navigation, brand logo and a bit of whitespace. As a result, when people arrive on website, they will not start scanning the page from to top corner. People expect that this place will contain those less important elements we mentioned. Instead, they have a tendency to start scanning the page somewhere in the middle of the screen. People will also often ignore edges of the page because these are other places also sometimes used for navigation or banner ads.
When people finish the quick scan of the page, they will switch to the normal “way” of reading, depending on their cultural customs. One way to interrupt this process is by using some image (with face if possible) or something moving. These elements will naturally catch people’s attention.
Another interesting fact is that people are also creating mental models for specific websites and applications. These mental models say where should certain elements be on the page. Then, whenever person visit a website or use an app for which she has some mental model, she will immediately pay attention to specific places of the interface. For example, let’s assume you are accustomed to using Google translate. When the Google translate website load, you will immediately focus your attention and sight on the left side where you expect to find translate box.
The takeaway
First, when you are designing a website, the best place for the most important information is in the middle of the screen or the upper third. These are places where people are likely to look first. Second, don’t put important information or elements on the edges of the page. People have a tendency to ignore these places. Third, design the layout of the page in a way that’s natural for your users and their cultural customs. Don’t force users to jump between multiple places of the page. Instead, allow them to do the task they want to do quickly and easily.
No.7: We are looking for clues to help us use objects
There is one thing in psychology of design is something called affordance. The goal of affordances is to help people understand how to use specific object. This means that the object has to be designed in a way that will basically tell the user what is the purpose of the object and how to use it. Let’s take door handle as one of the simplest examples. Unless it is badly designed, average person will understand how to use it to open the doors in a few seconds thanks to its shape.
In the case of web design, how would you indicate that some element is a button? In the age of skeuomorphism, this was quite easy. Buttons used gradients, borders, shadows an other properties that made them look similar to buttons from real world. This has changed with the introduction of flat design. Flat design, or at least its initial version, lacked almost all these affordances. There were no convex shapes, no gradients, no shadows.
The result was that many people were not able to recognize buttons from other elements on the page. Just think about it. When you have two rectangles next to each other that look the same, how do you know which one is actually a button? If both these elements also have labels, you basically have to try both and see what happen. This was the biggest problem with flat design – lack of any affordances. Fortunately, this is slowly changing and designers are embracing drop shadows and gradients in their designs.
We have to remember that these affordances, although negligible, are important and shouldn’t be ignored or removed. It doesn’t matter how much your client or you like flat design. You have to think about psychology of design and people that will use your design. Also, it is your job to remind your client about this and put him back on the right track.
Another problem in web design related to affordances are links. It is easy to see links looking like regular text – no underline or different color. There is sufficient amount of designers willing to strip links of ever affordance and leave users guessing. Isn’t this going against psychology of design and design itself? You want to make your designs clean and simple. I understand that. However, there is a difference between simplicity and stupidity. Would you remove steering wheel or breaks from car for the sake of simplicity?
Some designers may argue that although the link may have the same visual properties such as regular text on the page, there are still “special” styles for hover states. Well, good luck with that. In order to see these “special” styles, user has to recognize the link first. Also, show me hover on mobile devices.
The takeaway
First, when you design anything, never forget affordances and other clues for users. Users need to know what to do with certain element or object in order to perform desired action. Second, consider using shadows in your design to indicate activation or selection of the element. Third, double-check yourself and avoid using wrong affordances. Fourth, always think about mobile users and users of screen readers. Their devices don’t support some affordances (hover, etc.).
No.8: We may not see changes occurring in our field of view
Couple of experiments related to psychology of design demonstrated that people will, sometimes, not notice bigger changes. In one of these experiments researches instructed participants to watch and focus on basketball match. During the match, researchers let one guy in gorilla costume go across the playground. Interestingly, only fifty percent of participants noticed the gorilla. Well, there is something that is even more interesting than that.
During this experiment, researchers also used eye tracking cameras to analyze what participants are seeing. Examination of the records made by eye tracking cameras showed that all participants actually saw that guy in gorilla costume! Still, only half of the participants consciously knew about it. Researchers made conclusion that when you focus on one thing and don’t expect any changes to happen, you may become blind to any changes.
Aside from another interesting theory from psychology of design, this researcher points to something else. Eye tracking may not be as useful as we would like to think. Remember, all participants saw the gorilla, but only about half of them consciously noticed it. There is a difference between looking at something and pay attention to it. Another thing decreasing effectiveness of eye tracking is that our peripheral vision is as important as our central vision. Eye tracking measures only central vision. Maybe we should think about this method.
The takeaway
First, don’t think people will see something on the page just because it is there. People may not see the object if they are paying attention to something else. This is even more true in case of design updates. In this case, regular users may not notice even bigger changes because they simply don’t expect them to occur. Second, if you want to make sure that people will notice some change in their field of view, use additional visual clues such as animation or blinking. Third, don’t blindly trust data provided by eye tracking. Don’t use them as a foundation for related-design decisions.
No.9: Proximity makes us see relationships
When we see two or more objects in close proximity, we assume there is a relationship between them. This principle is well known in psychology of design. It is why web galleries are always placing the photo and its title. The same can be seen on blogs. In case of blog post, there is often some thumbnail, title, meta information, short excerpt and button. All these elements are relatively close to each other. Then, there is more whitespace and another group of these elements indicating another blog post.
It is proximity what helps us understand that certain elements on the blog or in the gallery or connected to each other. It is also why one of the tips related to psychology of design I give to novice designers is to learn and master the whitespace. I think that whitespace is one of the most important elements for learning the psychology of design. Lack of whitespace or its improper distribution can result in breaking the principle of proximity. When that happen, users will have a hard time seeing whether there is any connection or relationship between certain elements in the layout.
The takeaway
First, if you want to help people see connection between certain objects, such as titles, thumbnail, headings, etc., place them close to each other. Second, Learn about whitespace and how to use it. Then, try to play with whitespace in the layout before you use other techniques to group elements such as frames. You will often see that whitespace will actually work better. Third, use more whitespace in case of elements that are not connected with each other and less otherwise.
No.10: Color blindness is serious issue
Let’s think about psychology of design from the view of health for a minute, more precisely from the view of color blind people. First of all, there is no such a thing as color blindness. People who suffer from color blindness just can’t distinguish differences between specific colors. In most cases, color blindness is inherited. However, it can be also result of some more serious injury or illness. It is also important to mention that men are much more likely to suffer from colorblindness than women because of the fact that men have only one chromosomes X while women have two.
The most widespread subtype of color blindness is impaired ability to recognize between green, red and yellow color. This subtype of color blindness is called red-green color blindness and it is found in about six percent of male population. Other subtypes, such as blue-yellow or total color blindness are more rare. In the whole population, the percentage of people suffering from color blindness is about ten percent. I think that this number is high enough to make sure our designs are optimized for this health issue.
The takeaway
First, make sure your design optimized for people suffering from color blindness. There is a handful of services, such as color-blindness simulator, colorfilter or colourblindsimulator, that will help you do that. Second, if you use certain color to communicate specific meaning, consider using redundant encodings. Third, when you will work on color palette for your project, focus on shades visible for everyone. Shades of brown and yellow are safe choices. Red, green and blue are, on the other hand, the least reliable choices.
Closing thought on human psychology and how we see
This is all I have for you for this first part of this new psychology of design series. We often don’t realize how easy it is to change the perception of the world around us. Knowing about this and understanding it is critical if we want to grasp the psychology of design. Then, we can use this knowledge to make the world a better place. I hope that these ten secrets of psychology of design, we discussed today, will help you exactly that.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
