How cognitive issues influence design of interaction styles?

Previously we reviewed many aspects of user interfaces from the perspective of the behavioral and social sciences. Do you remember the interface metaphors, mental models, and conceptual models? If yes then great, if not just click on the link and have a look at them. In this article, we will show how you can apply such insights, by considering direct manipulation interaction from a cognitive science perspective.

The topics of this article are the Gulf of Execution and the Gulf of Evaluation. These two terms were introduced by Donald Norman in his book, The Psychology of Everyday Things (1988). So Norman developed a framework that characterized directness in terms of two "gulfs" which describe the gap between the users' goals and the system image. The degree of directness in direct manipulation interfaces can be considered as the discrepancy or distance between two gulfs.

The Gulf of Execution

Refers to the distance between the user's goals and the means of achieving them through the system.

The Gulf of Evaluation

Refers to the distance between the system's behavior and the user's goals.

Image from the book The Psychology of Everyday Things (1988)

Both gulfs are related, the concern is finding ways to reduce the discrepancy between the user's goals and the system's physical state and form. By reducing the gap, the mismatch is reduced thereby making it easier for users to carry out their tasks. This is achieved by bridging the two gulfs.

Bridging the gulfs

The users can bridge the gulf of execution by changing the way they currently think and Harry out the task towards the way the system requires it to be done. The designers can bridge the gulf of execution by designing the input characteristic to match the users' psychological capabilities.

The users can bridge the gulf of evaluation by changing their interpretation of the system image and evaluating it with respect to their goals. The designers can bridge the gulf of evaluation by changing the output characteristics of the system.

Image from the book The Psychology of Everyday Things (1988)

Affordances, Constraints, Mapping, and Feedback

In addition to developing a theoretical framework for understanding the principles of direct manipulation, Don Norman in his book The Psychology of Everyday Things (1988) developed the four main design principles of good direct manipulation interface design:

• Affordances

When designing interface objects, like buttons, sliders, and files, it is important that the actions meant to be performed on them are obvious.

• Constraints

Refers to limit the number of possibilities of what can be done with an object. Norman suggests that there are four main types of constraints: physical, semantic, cultural, and logical.

• Mapping

Refers to a design in which the system's controls represent or correspond to the desired outcome. Mappings are said to be good if they appear natural and intuitive to the users.

• Feedback

This is a very important and fundamental design concept. Feedback is defined as sending back to the user information about what action has actually been done and what result has been accomplished.

Photo by Garrett Sears on Unsplash

Exploring the Gestalt Principles of Design

Gestalt Principles are principles/laws of human perception that describe how humans group similar elements, recognize patterns, and simplify complex images when we perceive objects. Designers use the principles to organize content on websites and other interfaces so it is aesthetically pleasing and easy to understand. The human brain is exceptionally good at filling in the blanks in an image and creating a whole that is greater than the sum of its parts. It’s why we see faces in things like tree leaves or sidewalk cracks.

The most influential early proposal written about the theory was published by Max Wertheimer in his 1923 Gestalt laws of perceptual organization, though Wolfgang Köhler’s 1920 discussion of Physical Gestalten also contains many influential ideas on the subject. Regardless of who first proposed the ideas (there have been essays dating back as far as 1890), gestalt principles are an important set of ideas for any designer to learn, and their implementation can greatly improve not just the aesthetics of a design, but also its functionality and user-friendliness.

In the simplest terms, gestalt theory is based on the idea that the human brain will attempt to simplify and organize complex images or designs that consist of many elements, by subconsciously arranging the parts into an organized system that creates a whole, rather than just a series of disparate elements. Our brains are built to see structure and patterns in order for us to better understand the environment that we’re living in.

There are seven principles commonly associated with gestalt theory: similarity, continuity, closure, proximity, figure/ground, focal point, and common region. Let's go and have a look at them individually:

Similarity

Image from the Creative Beacon

It’s human nature to group like things together. In gestalt, similar elements are visually grouped, regardless of their proximity to each other. They can be grouped by color, shape, or size. Similarity can be used to tie together elements that might not be right next to each other in a design. In UX design, using similarity makes it clear to your visitors which items are alike. For example, in a features list using repetitive design elements (such as an icon accompanied by 3-4 lines of text), the similarity principle would make it easy to scan through them. In contrast, changing the design elements for features you want to highlight makes them stand out and gives them more importance in the visitor’s perception.

Continuity

Image from Smashing Magazine

The principle of continuity states that elements that are arranged on a line or curve are perceived to be more related than elements not on the line or curve. In the image above, for example, the red dots in the curved line seem to be more related to the black dots on the curved line than to the red dots on the straight horizontal line. That’s because your eye naturally follows a line or a curve, making continuation a stronger signal of relatedness than the similarity of color. Since the eye naturally follows a line, placing items in a series in a line will naturally draw the eye from one item to the next. Horizontal sliders are one such example, as are related product listings on sites like Amazon.

Closure

Image from Eduard Volianskyi

The principle of closure states that when we look at a complex arrangement of visual elements, we tend to look for a single, recognizable pattern. In other words, when you see an image that has missing parts, your brain will fill in the blanks and make a complete image so you can still recognize the pattern. For example, when you look at the image above you most likely see a zebra even though the image is just a collection of black shapes. Your mind fills in the missing information to create a recognizable pattern based on your experience. Closure is quite often used in logo design, with other examples including those for the USA Network, NBC, IBM, Sun Microsystems, and even Adobe.

Proximity

Image from Andy Rutledge

The principle of proximity states that things that are close together appear to be more related than things that are spaced farther apart. Proximity is so powerful that it overrides the similarity of color, shape, and other factors that might differentiate a group of objects. In UX design, proximity is most often used in order to get users to group certain things together without the use of things like hard borders. By putting things closer together, with space in between each group, the viewer will immediately pick up on the organization and structure you want them to perceive.

Figure/Ground

Image from A Dwarf Named Warren

The figure-ground principle states that people instinctively perceive objects as either being in the foreground or the background. They either stand out prominently in the front (the figure) or recede into the back (the ground). In the image above, for example, your eye instantly sees a white apple sitting on a black background. The figure/ground principle can be very handy when product designers want to highlight a focal point, particularly when it is active or in use—for example, when a modal window pops up and the rest of the site fades into the background, or when a search bar is clicked on and the contrast is increased between it and the rest of the site.

Focal Point

Image from Smashing Magazine

The focal point principle states that whatever stands out visually will capture and hold the viewer’s attention first. When you look at the image above, for example, the first thing you notice is the red square because it’s different than all of the black circles around it. It’s the first point of interest that grabs your attention, and from there your attention moves to other parts of the image.

Common Region

Image from Smashing Magazine

The principle of the common region is highly related to proximity. It states that when objects are located within the same closed region, we perceive them as being grouped together. Adding borders or other visible barriers is a great way to create a perceived separation between groups of objects—even if they have the same proximity, shape, color, etc.

Gestalt Principles in UX Design

As with any psychological principle, learning to incorporate the visual perception principles of gestalt into your design work can greatly improve the user experience. Understanding how the human brain works and then exploiting a person’s natural tendencies creates a more seamless interaction that makes a user feel comfortable on a website, even if it’s their first visit. Gestalt principles are relatively easy to incorporate into just about any design and can quickly elevate a design that seems haphazard or like it’s fighting for a user’s attention to one that offers a seamless, natural interaction that guides users toward the action you want them to take.

Photo by processingly on Unsplash

Reading and Navigating

Navigation is the first point of interaction. This means that making your top line navigation labels stand out to attract users attention is key. This article introduces the concept of information scent and explains how creating strong information scents enables users to confidently find the information they require.

The web is all about hyperlinks and enabling people to find the specific information they require amongst the hundreds of other pieces of content available on a site can be difficult. But, you may wonder, how do users decide which link to click on and which to ignore? The answer is information scent.

What is information scent?

This term is used to describe how people navigate the web and how they interact with different potential sources of information to satisfy a question or information need. When presented with a list of options users will choose the option that gives them the clearest indication (or strongest scent) that it will step them closer to the information they require.

Sites with strong information scents are good at guiding users to content. Conversely, sites with weak information scents cause users to spend longer evaluating the options they have and increase the chance that they will select the wrong option, forcing the user to employ the back button.

The two big components of information scent

According to Nielsen Norman Group, there are two big components of information scent:

• What the user sees — the representation of the source as perceived from afar (e.g., from a search results page); the representation includes, usually, the link text, but also the immediate and more general context surrounding that link text.

• What the user knows about that source — any knowledge that the user may have about the search domain, the brand, the author of that source.

When users arrive on the page (or other information sources), they scan it through and search for trigger words and other cues, like relevant images. The first component is largely controllable by designers: we usually can decide how a page will be represented. The second is only indirectly controllable by designers, through the perceived value that they may have constructed in the past for that brand or source of information.

Applying the Information Scent

There are lots of different ways to lead the user along their desired goal path, but there are also many ways to crush their confidence in the information scent. To ensure the user does not lose confidence or patience, it is important to provide informative links that are clearly visible at the appropriate stage of a task. Often, next to a link there may be a short text snippet or a thumbnail intended to present the user with additional information. Even though users may not read all the text associated with a link, they may still scan it and glean additional cues from it. Another component of information scent is the knowledge that the user has accumulated in the past either directly — over her own previous experiences with the company, with the same type of content, or simply from using the web — or indirectly, from word of mouth or recommendations.

Conclusion

Be careful not to take this approach to extremes. Presenting too much information on a page can make the page appear cluttered and decrease the chance users will actually read the information at all. Conducting usability testing alongside the redesign of a homepage and key decision making pages enables an organization to evaluate the impact that stronger information scents have. Findability is one of the most important aspects of usability, and you can improve that by adding strong, meaningful cues, e.g. descriptive button texts and links, short and to-the-point summaries that don’t contain unnecessary jargon.