Menu

How Human Perception Affects Interface Design

Steven Nguyen - Posted in Web Design

How Human Perception Affects Interface Design

How Does Human Perception Affect the Way We Design Interfaces?

“Don’t judge a book by its cover,” a common phrase people say to not place judgement on something or someone’s value based on appearance alone. But in web or user interface (UI) design, our perception in which a website is considered “good” stems from our judgement on its overall appearance. This is the result of our visual perception created by our brain’s ability to make sense of what we see through our eyes. Understanding how our designs are perceived and deemed “good design” is how we receive feedback to make better adjustments and to improve ourselves as designers. In this post, we discuss the various human perception factors that play a major role into design, and how websites will benefit greatly from design that resonates with users and meets the expectations of usability and user experience (UX).

Gestalt Principles

Gestalt psychology, the philosophy that looks at the human mind and behavior as a whole to shape our own perceptions and viewpoints of the chaos the world brought to our senses. When people have their attention caught by anything with their sight, their mind begins to process what they just saw and form thoughts and opinions regarding their recent viewing, rinse and repeat. That is the never-ending cycle of human perception.

For instance, have you ever gazed at the stars at night, and connected them to form a recognizable figure or pattern? Have you ever tried connecting the stars to create the Big Dipper? That’s one example of how your mind works by trying to make sense of the world based on your viewpoint. It has your mind trying to process the information received from your eyesight, and uses it to the draw the complete picture for you.

I think we can all agree that sight is the most important sense when viewing the interface (because how else can you see the design…). As designers, we can take advantage of Gestalt psychology to determine which visual element are the most effective at design. Then, we can apply those elements to web and UI design as an efficient plan to create an efficient UX. This is in the form of Gestalt principles, and here are a few:

Good Figure

“We tend to order our experience in a manner that is regular, orderly, symmetrical, and simple.”

When we have an element whose design or pattern is complex, or have a number of elements overlapping each other, we tend to look for any simplicity and order in it to make our experience less strenuous to perceive. This is done so that we would need little cognitive effort make any sense of it and prevent information overload.

In web design (and computer science in general), an important rule is to keep things relatively as simple as possible. As you’re already dealing with complex design implementations, there’s no need to overcomplicate your solutions and make it harder for yourself than it already is. In the eyes of the viewer, you wouldn’t want to make it harder for them to navigate and interact with in favor of flashy design that prioritizes style over substance. You’re free to design your UI as your creative mind allows it, but not when it’s at the expense of user experience. Therefore, it’s recommended to approach design with a plan that allows the user to learn little but efficiently in UI interaction.

Closure

“When seeing a complex arrangement of elements, we tend to look for a single, recognizable pattern.”

When an element appears incomplete or has visual gaps, our mind proceeds to fill it in for us to view it as one complete entity as part of our perception.

In design, this principle is mostly associated with logos, where they commonly feature artwork or design that doesn’t appear complete or intentionally doesn’t fill in interior spaces, so our mind will fill in those gaps to view it as complete.

Example

Closure

Sega's logo above is an example of Closure. While you will most likely recognize the letters on the logo, the white curved lines in each of them makes them look like they were split in two. Your mind proceeds fill in the those white lines to make Sega's logo look more complete from your viewpoint.

Proximity

“Objects that are closer together are perceived as more related than objects that are further apart.”

It doesn’t get any more common than this. When there are elements that are near each other, or in close proximity, they are perceived as related to each other or grouped together. This principle was conceptualized with the knowledge that the mind tends to view different types of elements as a group as opposed to being individual.

We can use Proximity as a web design to organize content by grouping information together with different elements, provide proper formatting and layout to pages, and prevent cluttering. Spacing in the forms of margins and padding is also crucial to laying out content in a way that guides the user’s eye to viewing and reading content the correct way.

Example

Proximity

The image above shows our website's about page and information about our best strengths and specialization organized in two blocks of content per row. Each block of content features an orange header and the corresponding information below it to indicate to communicate to the viewer that they’re related to each other. The header and the information are in close proximity, while at the same time are spread apart other blocks of content to distance themselves and avoid cluttering.

Similarity

“Elements that share similar characteristics are perceived as more related than elements that don’t share those characteristics.”

Similarity occurs when there are elements perceived as related to each other if they share similar visuals, design, or characteristics, over elements that do not. Designs that can potentially create similarity include:

  • Font Style/Family/Size
  • Color
  • Shape

With this principle, you can distinguish elements with styling, and make it easier for users to know what its purpose is and how it functions.

Example

Similarity

The image above shows one of our blog posts. In this post, the word "surpassed" is highlighted orange compared to the sea of text that are black. This is because "surpassed" is a link, so it has to distinguish itself from regular text by being stylized differently. In this case, Similarity is the principle used here by making links the color orange as opposed to text being black.

Continuity

“Elements arranged on a line or curve are perceived as more related than elements not on the line or curve.”

Continuity means that an element that is perceived as a long streak, such as a line or a curve, traveling in one direction until it reaches the endpoint or another element. In artwork or logos, it would feature a piece of art that is seen as “traveling” from one destination to another. For instance, the Amazon logo below features an arrow starting from the letter “a” and pointing to “z”, to indicate that it's “traveling.”

Amazon Logo

Continuity can also be applied to having you view a stream of content from one position of the page to another based on the order it was designed, because of the way your eyesight is being guided like a straight line.

Example

Continuity

The image above shows our website's home page's section providing information about our three stages of development: design, develop, scale. Viewers will most likely read this from left to right, starting from design, continuing onto develop, and ending on scale. As Continuity revolves around an element being arranged on a line, within web design, the way this section is designed is having the viewer's eyesight guided on reading content horizontally, like a straight line.

Common Fate (Synchrony)

“Elements that move in the same direction are perceived as more related than elements that are stationary or that move in different directions.”

Common Fate occurs when there are elements moving towards the same direction, which makes it perceived as being related to each other, compared to other elements that are moving towards another direction or are stationary.

In design, this principle would be used in animation or motion. Elements that are applied to this principle include dropdown menus, accordions, and expanding more content with the click of a button.

Example

Common Fate (Synchrony)

The image above shows the navigation bar on the top right. When hovering over one of the links, a dropdown menu appears, revealing even more links related to the one above it. Common Fate is used in this design by having the dropdown menu show itself below after hovering over a specific link. This has the user then move their eyesight downwards to see what the rest of the dropdown menu has to offer.

Common Regions

“Elements are perceived as part of a group if they are located within the same closed region.”

Elements that are enclosed or sharing a part of an area are perceived as grouped together. Much like proximity, this principle revolves around being close to each other to be seen as being related to each other. The difference, however, is that Common Region involves isolating a group of elements with a visible barrier, and makes close proximity with other groups irrelevant.

In design, we can use Common Region to create a page consisting of a list of content separated and organized by a border. Examples include a list of e-commerce collection products, blog posts, articles, and portfolio projects.

Example

Common Regions

The image above shows the blog section in our home page containing a list of posts to read more about. Each post is designed like a card, each containing the image, category, title, some beginning words, and a read more link. The cards are enclosed and distinguishable from each other with a white background and border radius that contrasts with the grey background. Even if the marginal distance of each post was changed to be closer, viewers would still be able to tell it apart because of the enclosed design. This is the principle of Common Region.

Uniform Connectedness

“Elements that are visually connected are perceived as more related than elements with no connection.”

When there are elements that are visually connected to each other, they are more likely to be perceived as related to each other over elements that have no connection. Like with Proximity and Common Region, this principle involves grouping up elements together by being close. In the case of Uniform Connectedness, it requires elements being “tethered” by another element to be related to each other.

In design, we tend to use styling and visuals to communicate to the user that this element is connected to this one. Whether the visuals make tethering visible or not, Uniform Connectedness helps to establish connection and relation between certain elements.

Example

Uniform Connectedness

The image above shows our testimonials from clients in the form of an owl carousel. The carousel shows one testimonial at a time as an item, and dots below to indicate the number of items it has. The dot that is highlighted is related to the testimonial that is currently displayed. Users can swap between testimonials, either by clicking on another dot, or swiping the screen horizontally. When that happens, the carousel swaps to another testimonial, and that dot becomes highlighted to indicate its relation. Uniform Connectedness plays into this design by connecting the current testimonial and the highlighted dot to show the viewer that they're related.

Symmetry and Order

“Symmetry gives us a feeling of solidity and order, which we tend to seek. It’s our nature to impose order on chaos.”

Elements that are shaped similarly but are facing each other are symmetric. This is because perception seeks balance and harmony in structure.

In design, Symmetry and Order helps to maintain balance of web pages by analyzing content and recognize its patterns in alignment, position, and shape. Bootstrap columns and rows is one instance of keeping Symmetry and Order intact for a web page that needs to display an assortment of content in a proper order.

Example

Symmetry and Order

The image above shows our portfolio page consisting of a list of projects. Each project is properly organized and aligned in three items per row. The projects themselves have the same width, height, and thumbnail design to keep the list well formatted. This design helps to maintain order and balance for the user to view each project from its cover.

Figure / Ground

“The idea is the eye will separate whole figures from their background in order to understand what’s being seen. It’s one of the first things people will do when looking at any composition.”

Elements where the viewer perceives its shape or figure based on its background or foreground. This involves the eye’s tendency to separate objects from their surrounding background.

Example

Figure / Ground

The image above features the logo for our company. The "OC" (Orange County) part of the logo is designed as an orange square background, allowing the user to see the white text in capital letters. It is done by the human mind using its sight to separate the colors and see the text clearly.

Focal Points

“Elements with a point of interest, emphasis or difference will capture and hold the viewer’s attention.”

An element that stands out within a group of elements or a contrasting background is seen as its own entity. Like Similarity, this occurs by stylizing an element with a distinctive:

  • Font Style/Family/Size
  • Color
  • Shape

This principle is applied in design to immediately catch the user’s eye and create a point of interest once the web page has finished loading. It is meant to emphasize this particular element’s presence to the viewer for a specific reason.

Example

Focal Point

The image above shows the hero message of our home page. The element that stands out the most in this message is the big orange button that is the call to action on contacting our company for a proposal. The button is designed with bright colors that contrasts the monochromatic background in order to be the first thing that draws the user's attention when visiting our website.

Past Experiences

“Elements tend to be perceived according to an observer’s past experience.”

An element that is instantly recognized or perceived by the viewer based on their past experiences. With a decade of websites created on the internet, common tropes and elements have remained the same from time to time. Our experience in surfing the internet has led us to become familiar with these elements and their functionality.

Example

Past Experiences

The image above shows our menu button as a hamburger menu (designed as three stacked horizonal bars) positioned on the top right when viewing our website on mobile. Viewers will be quick to detect that the hamburger icon is a button that accesses our menu because of how widely known its purpose is used in web design.

Other Perceptions That Affect UI Design

Of course, while sight is an important perception that factors into UI design, it isn’t the only one. When we design interfaces, we also have to factor in sound, speech, and touch.

Sound

While sound may not be part of the everyday web experience (though there are some cases where sound effects do contribute to web design), it is one of the perceptions that provide feedback when users interact with devices. For instance, when you create notifications and warnings for mobile apps, you have to find a way to inform the user that something had pop up and it’s telling you need to check it out. Most likely, you will make use of the mobile device’s ringtone as the way to send that message to the user. Still, you should only use sound as a design when necessary, because unwanted noise can be rather annoying and detrimental to UX.

Speech

With the rise of virtual assistants (Siri, Cortana, Alexa, etc.) providing their services to the user, speech recognition has become a new way to interact with web and mobile devices by recognizing our voices and interpreting them to perform system operations. So, when designing a UI where users interact with voice commands, not only do we have to design it in a way that will perform a function based on the user’s words, but also provide feedback as a response.

Touch

When designing a mobile app, making the website responsive to mobile devices, creating a kiosk machine, etc., touch is one essential perception because of user interaction through touch gestures. Through the use of links, buttons, and other widgets, we can provide users the ability to interact with the device by the touch of the finger. Additionally, the design should be easy, simple, and immediate responsive to interaction to guarantee users that they have the control to do whatever they want, and not have to worry about errors caused by their input. With the rise of the use of mobile devices to surf the internet, touch has grown to be the primary form of interacting with interfaces.

Usability and Accessibility

Usability != Accessibility

Usability is a measure of how easy it is for a system to use. It’s about designing products as easy, efficient, and satisfying for everyone to interact with. It’s quite obvious then that when creating a website or mobile app, providing an efficient UX depends on how users can easily interact with the site based on the design. This is why Gestalt principles are crucial to web and UI design in order to tell us how the human mind perceives visual objects and forms it into thoughts and opinion that will provide us feedback to improve our creativity and efficiency.

Accessibility is about access to everyone, regardless of their capabilities. This can be people who use touch screens instead of a computer, have disabilities that make it more challenging for them to interact, or have slow internet connection. No matter where they are coming from, designing should always be done in where everyone can interact with the product equally. The success of a website is not only driven by the quality of the content provided, but also by fair and easy access for any and all users.

Why Websites Need Good Design to Succeed

At the end of the day, a website needs to have good design in order to guarantee a successful long-term future. First impressions are everything, and when a user visits your website only to face difficulties in navigation and interaction, they will leave before they even see what the rest of the site has to offer. Furthermore, web design represents the brand identity of your site. The impression your design gives them is their perception and viewpoint of your brand. So, a good web design helps to keep users on the website and form a complete opinion on your website.

Understanding the human mind and how it perceives anything they view helps to understand their viewpoint, grab their attention, and improve ourselves with feedback they provide. Here at OC Web Kings, we have a deep understanding of the Gestalt psychology and principles, allowing us insightful collaboration as a team on what is the most effective and visually stunning approach to design. We can guarantee you on what is the best user experience based on current trends of web and UI design and even surpass ourselves on limitless creativity and substance to deliver a great product for you. Feel free to contact us, send a proposal to us, and get started on our journey together.

Share this post with

Contact Us

Need a new site or app? We're always looking for new challenges! Get in touch with us and let's make some magic happen!

4590 MacArthur Blvd. #500
Newport Beach, CA 92660

1-949-701-6831

kevin@ocwebkings.com