The Psychology Of Web Design


From our perspective, the choices we make are our own. We confront an external world of objects and individuals, and an internal world of preferences and desires. Our will directs how we interact to these two worlds, and what decisions we should make in the face of them. These assumptions however, have at least partially been thrown into disrepute as a consequence of the findings of psychology. Our minds are conditioned by forces too old to even comprehend. Preferences that we think are a matter of personal taste are in fact reflexes or instincts developed over a very long period of selection. Much the same can be said of what we focus on, and what piques our interest.

Understanding of the mechanisms that underpin our behaviour have innumerable practical applications in the real world. One such example is the intersection between psychology and advertising. By recognising the patterns of human behaviour, advertisers can design their ads so as to maximise consumer attention. Today, I want to focus on how advertisers use this knowledge in web design, and how good web design is able to play on a consumer’s subconscious.

Gestalt Psychology And The Principle Of Proximity

How many objects do you see when you look at a bicycle? The question seems silly because the answer is obvious, one, the bicycle itself. But is there another way to answer the question? After all, a bicycle is not comprised of one object. It is constituted of spokes, wheels, handles, screws and so on. So why is it that when we look at a bicycle, our intuition tells us that there is only one object? The answer can be found in Gestalt psychology. Gestalt psychology is a branch of psychology that is used to account for how humans naturally perceive disparate objects as organized patterns. The concept has been used to great effect in web design in order to create a more cohesive flow to websites. The field is built on a few central principles known as the principles of grouping. One such principle is the principle of proximity.

The principle of proximity states that the closer a collection of objects and shapes are to one another, the more likely they are to be seen as forming one whole group. To further illustrate what I mean, look to the two images below. In the first image, we see circles of the same size placed haphazardly and randomly across the picture. In the second image, we see the same circles placed equidistance from one another around the centre of the picture. In the former instance, you don’t perceive a single image, but rather a collection of different unrelated objects. In the latter, you see a single image, even though it is still comprised of precisely the same number of parts.

 

 

Proximity is used frequently in web design to have the user unconsciously ascribe similar meaning to sets of objects. To take an example, let’s look at the express website packages that we offer on this site. Here we see a variety of images, all of which detail different iterations of the express website. Now as they are grouped in the same manner as the circles from our previous example, we unconsciously expect all of the pictures to be related in some way.

 

Now let’s see what happens when we modify the picture by removing the centre column. We instinctively feel as if there must be a difference in the class of images provided on the left and on the right, even though they refer to the same product. Again, the only thing that changed was proximity. This principle is not merely limited to products either. Tabs in drop down menus, videos, articles and a whole host of other items are clustered together in certain ways so as to play on your inherent instinct for association. When grouped closely, users automatically assume that objects must share some sort of united purpose.

 

Gestalt Psychology And the Principle Of Similarity

So in the same way that proximity is used as a method for association, so is similarity. In Gestalt psychology, the principle of similarity means that as objects increasingly resemble one another, they are seen as being part of the same group. To illustrate what I mean, look to the images below. In the first image, we see a group of circles not dissimilar to the image used in my proximity example. Here, every circle displayed is identical to every other circle, and by virtue of their proximity, they are seen as part of the same group. In the second instance, we see the same image, though the rows alternate in colour. Now, because each row has a feature that distinguishes itself from the previous and following row, we group the object row by row rather than as one cohesive whole.

 

 

In web design, similarity is used to distinguish types of items, so as to make consumption of information easier. Below we see an image taken from the front page of ABC news. Broadly speaking, the information here is segregated into three different categories. First is latest news (seen on the left), followed by featured news (seen in the centre) and finally are the columnists and podcasts (seen on the right). Here, ABC is using size of image and text in order to draw distinctions between these classes of news item. It is using similarity between text and photo to let you draw the assumption that every item within a column belongs to the same category.

 

Priming

Priming is a technique whereby exposure to one stimulus influences your response to a subsequent stimulus. For example, the word “chair” is recognized much more quickly if it is preceded by the word “couch” than the word “helicopter.” The mind is a rich tapestry of interconnected ideas, images and experiences, and because of this interconnection, certain words and concepts are anchored strongly to other words and concepts. This anchoring is completely involuntary, and is developed through decades of external experiences and social programming. As you would expect, it is regularly exploited in web design.

Much of web design priming comes from fairly anodyne sources. A good example of this is the colour scheme of a website. Certain schemes will attempt to elicit specific emotions or associations from individuals. An example is how green is often used in the masthead of websites specializing in organic products, as it evokes ideas of nature and health.

A separate example of priming can be seen on Coca-Cola’s website. Young smiling faces, jovial music and dancing are often seen concurrently with either the Coca-Cola symbol or beverage. Coca-Cola is trying to tease out the positive feelings we have to youth and music, and then set them as a backdrop to their product. By this process, we naturally associate all of these feelings to Coca-Cola.

Disguising The Trick

Excellent web design is not obvious. That is, customers don’t feel manipulated after its use. They don’t know that they’ve been influenced; they’ve just been influenced. This is why an understanding of the psychological underpinnings of web design is so important. A nuanced use of these concepts (among many others) won’t engender a feeling of manipulation from the user, as the cognitive realities to which they are based off of is so fundamental to who we are, that we virtually never notice them.

 

AdvertisingDigital AdvertisingNewsPsychology

PsychologyWeb Design