Today we dove deeper into the psychological aspect of design theory. We learned about the gestaltism. Gestalt psychology is an attempt to understand the laws behind the ability to acquire and maintain meaningful perceptions in a chaotic world. We use this psychology’s principles: proximity, similarity, continuity, closure, symmetry, figure/ground. Taking a look at another of my favorite websites, Spotify.com, will help us to further understand how these principles are applied.
This is another site that, at first glance, may seem fairly simple. There is a reason that some of the most visited streaming sites are so successful. Apart from having content consumers want to use, having a tool that allows us to use it easily requires much thought. Spotify does an excellent job of applying the Gestalt principles, here’s how:
First up is Proximity, or the relative distance between objects in a display. Proximity definitely plays a major role in this web page. Our eyes are drawn to the middle of the page where we see “New Releases.” Because of the proximity principle, each individual square represents a new release. We are also safe to assume that the text below each square is a description of what each album or song is. We come to this conclusion because these objects are near us and appear grouped. We know that the other items around “New Releases” are not part of the sections because their distance to the descriptor is not close.
Another reason this section stands out is because of the Gestalt principle, Similarity. Similarity occurs when elements(color, shape, size, form) resemble each other and are close enough together that they are perceived as a group. Looking at it more primitively, the 12 squares in the middle are assumed to be a group because they are the same shape, and are the only elements contain bright colors in them.
The text on the left applies the principle of similarity because the same font, color, and size are used. Although the text is similar, Spotify made sure that it does not stand out and distract from it’s intended display: the music. This leads us to our third principle of Figure/Ground. The figure/ground principle helps describe how we structure the data we receive. It is, in a nutshell, the relationship between an object and its surroundings. Spotify does a great job of applying the Figure/Ground principle by making sure our music choices stand out by using a dark grey background, and a black navigation bar. Imagine if they how distracting if they used lime green or pink. They also applied Figure/Ground in their text. The white text stands out more because it explains the content, and where we currently are within their website. They also used a lighter grey for its navigation/menu options, which does not distract from the main content. This is important to remember when creating a project. Another thing that is important is to understand how these principles apply to other websites.
We will now take a look at another favorite website of mine, Instagram.com. Analyzing how they apply the Gestalt principles will help us to further understand why these principles are so important.
Instagram uses proximity in a very noticeable way. Smack dab in the center of the page is the content. Although the sizing is noticeably different, the principle of proximity groups the pictures and stories together in a way that helps the human mind to understand that this is what you are supposed to be looking at. They also use proximity for the tiny navigation symbols up in the top right-hand corner.
The symbols also use the principle of similarity. These items are of the same size, color, and simple design. This causes the human brain to assume these items are related and it naturally groups them together.
Instagram also uses figure/ground in such a way that the main photo of the page stands out. Generally, photos posted on the feed are bright and vibrant and will naturally stand out against the light grey background. I appreciate this about Instagram because they do not allow anything to distract you from what their primary purpose is: to display photos that users have uploaded.
Instagram did not originally have a website when it launched its mobile-only app. I think this allowed them the time to really think about the design and UX of their site. They were able to apply the Gestalt principles in such a way that their main content definitely shines out as the star.
A third website that I frequent is Pinterest.com. At first glance, the website may seem content heavy and overwhelming. But, after further analyzing how Pinterest applies the Gestalt principles, we can understand that this is intentional.
Pinterest is a website where you go to find inspiration for anything. Whether it is a hairstyle, a how-to, or a recipe, Pinterest has something for everyone. Because of this ability to reach out to nearly everyone, they have an infinite amount of content to display. They provide as much content as possible and the principle of Continuity allows this content to be displayed in a matter that appeals to its audience. Continuity is a principle that states that our visual perception is biased to perceive continuous forms rather than disconnected segments. Although the photos on the bottom appear cut off, our brain naturally tells us that there is more down there. This is where the scroll feature comes in. Users naturally try to scroll down to see if the rest of the image is there, and low and behold: it is!
Pinterest uses proximity in such a way that we understand that the text under the image includes the title and content creator. Because they are closer together than the other photos, the human mind tends to group these elements together. This is what causes us to assume that the name and title belong to the photo.
Next, we will take a look at how Pinterest uses the principle of proximity and similarity in the navigation bar. The items are clearly not the same, but because they are close together in relation and are similar in color, and size, our brain groups them together.
Understanding the Gestalt principles is incredibly important when you are a UX designer. Although these three websites are very different, they all use at least 3 of the Gestalt principles. Most of them use the same 3 principles. Considering the way the human brain perceives the information it is presented, these principles will help us to create projects that are not only appealing but meaningful. After today, I more than likely won’t be able to create another work without considering the Gestalt principles first. It is just way too important a tool to not use and can make the difference between whether a product is successful or not.
