An introduction to the role of psychology in visual interaction

Categories: UI | UX |

Welcome again to our UX design week. In this blog we highlight the importance of psychology, visual perception and cultural systems to build effective and enjoyable user experiences.

Usually, when we think of UX design, one of the first things that comes to mind is UX research, in which companies invest great amounts of time and resources to figure out their user’s needs and motivations. However, designing great user experiences also involves understanding how we physically and psychologically react to environmental stimuli. In this article we examine the way our brain perceives graphic structures, how this is related to our cultural background, and how this enables designers to evoke feelings of affection, pleasure, or loyalty in customers.

An introduction to the role of psychology in visual interaction

Psychological elements to consider when designing a user interface

By examining human psychology we can better understand why people interact in certain ways with interfaces or products. Firstly, understanding how memory functions is an essential part of UX design to create a positive and powerful impression that users will remember. Memory is the capacity of the brain to encode, store and retrieve information. When the brain perceives an environmental stimuli, it can be stored or discarded. Whether this stimuli is kept in the short or long-term memory, depends to a great extent on our previous memories. When we encounter new information, we pull out previous experiences to find a matching pattern. This is called the retrieval process. Thus, previous knowledge is what enables us to learn and create. This means that a great part of our memory is not reproductive, but reconstructive. Therefore, the role of UX designers is to provide visual structures that will relate with the mental model of their users to trigger sensory memory and retrieval processes to engage customers with a brand.

Another psychological aspect to take into account when designing an interface is sociability. Humans inherently seek to establish relationships with others. This natural behaviour dates back to the times where humans had to build communities to survive. It is in our instinct to relate with others and act according to collective thoughts and beliefs. Humans also want to be heard; we look for the approval and validation of our peers, as well as looking for guidance. Social media such as Twitter or Facebook are the proof, as well as platforms like TripAdvisor, in which the recommendations of the community are what has made the site so successful. What does this mean for UX designers? It means interfaces need to provide users with the possibility to connect with other people who use your brand. Typical ways in which this can be done, include adding a section for forums, news or reviews, or classifying information under “most popular”.

The need for information is another important aspect. Again, this behaviour relates to the evolution of humankind, when people needed to find tools and strategies to survive. This behaviour occurs thanks to a chemical released by the brain called dopamine. It is what drives us to look for food or shelter. And although nowadays our priorities are no longer hunting or finding a cave to spend the night, dopamine is what drives us to learn new things to have a better quality of life. That is why, when people search for something on Google, they look for different sources to validate information. Having a variety of options relates with the sensation of pleasure and control, which relates again to survival. Designers can harness this need for information by providing a variety of content in a fun and interesting way, of course, taking into account that too much information can be overwhelming. For instance, progressively revealing content in the form of rollovers, click-throughs or expandable items is a good option to provide an experience where users feel they have a variety of options to access information. In addition, as users like to be informed about what is going on during their interaction, it’s important to provide feedback. Progress trackers, for instance, give the customer the sense that they have successfully achieved registrations or transactions. Also, when they know what are the steps they must follow, they are more likely to complete the task.

What is visual perception?

Our body is equipped with multiple systems that enable us to interpret information from our surroundings. Our eyes, along with other organs, make possible a process in which we receive sensory inputs and send information to our brain. It enables us to make sense of words and understand images. This process is called visual perception. In the field of UX design, visual perception involves both UX and UI. UX designers rely on building frictionless navigational structures and ease of use, while UI designers work on building effective visual elements for these structures and spatial relationships.

  • The principles of Gestalt help us determine what are the most suitable graphic solutions according to human perception:
  • The principle of Proximity states that our mind tends to group objects when they are close to each other. This means designers need to place elements from the same section close to one another so users are able to recognize different content and sections at glance.
  • The principle of Continuation relates with how our glance follows a line or a path until it finds a particular element or until it determines there is nothing else to see. This is useful for designers because they can guide the user’s attention toward certain sections or call to actions in an interface.
  • The principle of Similarity suggests that our brain relates elements between each other when they share the same characteristics. These features might include color, shape, texture or size. For instance, if the links on a webpage are underlined, the user will understand the pattern and will be able to detect and click links when necessary.
  • The principle of Figure/Ground examines how our eyes identify and separate an image (positive space) from the background (negative space). This relationship can be stable, (the image is easily identifiable from the ground) or unstable (the eye constantly flips between the figure and the background). Stable relationships are effective to guide the user to what we want them to see; however, unstable relationships between figure and ground are widely used for logos, to create a visual illusion and integrate two different meanings in the same image in a simple way.

Another element that help designers build hierarchy and coherent structures are the laws of UX. They are simple but powerful to build a seamless navigation:

  • Fitt’s law establishes that the amount of time for a user to click on a button or call to action, depends on the button’s size and distance. This means buttons must be easily selectable and have an important position within the visual hierarchy.
  • Hicks’s law suggests that it is more difficult for users to make decisions when there are too many options. As they have more elements to analyse and examine, the time to react to a call-to-action increases. That is why designers must provide simple steps.
  • Jakob’s law says that users spend most of their time on other websites than in your website. They have accumulated knowledge about how other websites work. Thus, your site must provide familiar or standard structures so customers can focus on the product and services rather in figuring out how to use it.

Among the visual elements of UI design, typography plays a crucial role. Choosing a typography relates with the feeling we want to evoke. Different typography styles work for certain situations. In the field of technology, for example, sans serif typography is very useful to denote innovation and effectiveness, while a jewelry company might want to use more ornamental typos to express elegance and exclusiveness. It is advisable to choose typos with a wide font family, which means a variety of font styles that include different weights (light, medium, bold) and slant (roman, italic and oblique). As they are visually different but still belong to the same font, designers are able to offer fun and interesting content while maintaining order and consistency. Many websites ignore size or weight; as a result the content looks plain and boring. Also, unsuccessful web pages do not take into account the path that the user will visually follow. There are no focal points, which means graphic elements in the site are competing between one another, and this makes the customer feel confused or bored.

The challenge of building a cross-cultural user experience

So far, we have talked about how the human body has specific responses according to biological and psychological structures, and how UX designers harness this to build brilliant user experiences. However, UX designers also have to face an incredibly varied spectrum of values, beliefs and mental models that also shape the behaviour and responses of users. We will examine how culture affects UX design, based upon the culture dimensions theory, created by the Dutch sociologist, Geert Hofstede.

The first dimension, power of distance index (PDI), expresses to what extent societies tolerate inequality. Countries with high PDI tend to accept hierarchical structures and the inequalities that come with it, while in societies with low PDI, people question authority and seek to equalize the distribution of power. If designers are addressing an audience with low PDI, its important to provide enough and detailed information so users can make their own decisions and have control over their experience. As their standards to accept leadership are more exigent, simplicity and elegance and trustworthy structures are recommended for interfaces designed for this group of people. On the other hand, societies with low PDI usually don’t question authority and will be more likely to easily find your content as valid. They are less critical and won’t be looking for detailed information. Colorful web pages with clear and brief statements in which we don’t give the user a lot of responsibility work for this kind of audience.

Individualism vs Collectivism (IDV) dimension questions whether a society’s self-image relates with “I” or “We”. Individualistic people are expected to take care of themselves and their immediate family, while collectivistic societies have tightly-integrated relationships that go beyond family bonds. As a designer, when addressing individualistic societies, you must provide options and information based on the individual needs of your user. Creating sections such as “find your favourite option” or headlines like “exactly what you were looking for” are examples of how designers catch the attention of individualistic users. On the contrary, interface design for collectivistic groups need to add social features that enable visitors to connect with others and take their decisions based on the opinion of the community. Add social media buttons, reviews and forums; highlight the role of the community for the brand or product.

The next dimension is masculinity vs femininity (MAS). Leaving aside the debate about what kind of values and behaviour should be associated to men and women, we will focus on how the core values of a society affect perception. According to Gerard Hofstede, values such as competitiveness, achievement, heroism and materialism are related to masculine societies, while cooperation, modesty, caring for the weak and quality of life are associated to feminine societies. Users who belong to masculine societies strive for success and for showing they are the best at what they do. Thus, they look for the best quality and expertise in the products they use. The best way to address this kind of audience is creating interfaces that provide detailed information with copy that focuses on an exclusive and world-class experience. On the other hand, interfaces for feminine societies can build a relaxed and playful environment, using a wide palette of colors and images and less technical information. Interfaces created for feminine societies focus on building a fun experience where the user feels the brand cares for their sake.

The uncertainty avoidance (UAI) dimension is about to what extent people are tolerant to ambiguity. Groups with low UAI show more acceptance to new ideas and practices while societies with high UAI prefer to follow established rules and methodologies. When designing for societies with high uncertainty avoidance, it is recommendable to use familiar patterns and build classic structures and navigation flows. Provide clear information in a simple way, letting the users know what will happen if they take certain actions on the website. On the other hand, people with low uncertainty avoidance would prefer a cutting-edge interface, with special features and even surprising options. Designers can include different color schemes for different sections and play with copy to come up with something different than a “home” button, for example.

Building brilliant user experiences requires understanding universal rules of visual perception and psychology, as well as examining the specificities of cultural systems. A successful interface provides graphical structures that relate to our mental models, are pleasurable to navigate, and enable users to focus their attention on specific areas, such as content, services, and call-to-actions. Leading companies that have developed such powerful user experiences, have developed strategies that trigger positive cognitive responses, address a varied spectrum of backgrounds, and provide usability and functionality.

Related content

Why UX design is so important in agile software development

UX design: the key elements of building an omnichannel experience

UX design methods: when do we use them, and why

 

Leave a comment