Law of Common Region lesson

Gestalt principles guide how people perceive the world visually — including digital interfaces.^[1] One of them, the law of common region, states that we see elements placed within the same visual container as a group. What's more, we assume that elements of the group share something in common — a characteristic or function.

As designers, we can use the law of common region to our advantage. To do that, we can apply borders, background, and shadows to establish relationships.

Exercise #1

Define element grouping

What makes us think that some objects belong to the same group? In 1999, gestalt psychologists Stephen Palmer and Irvin Rock formulated the law of common region.^[2] This perceptual principle states that we see elements placed in the same area as a group. It's crucial that the area has a clear boundary. For example, in UI, we can use a border or background color to create a container for related items. It helps users understand the UI structure and which elements are connected.

Exercise #2

Overpower similarity

Adding a common background holds elements together. It makes us perceive them as related — even if they're different in shape.

Designers can use this trick to define distinct, organized sections of content or controls. This helps users recognize the basic UI structure and understand what elements they can interact with. For example, the Slack app uses the principle of common region to define the UI controls section with a dark background.

Exercise #3

Overpower proximity

How do different gestalt principles relate to one another? For example, two elements are close to each other but belong to different areas. In this case, a clear boundary is a strong visual cue that overpowers the principle of proximity.^[3]

In UI, establishing a common region for related elements helps users understand groupings. For example, in an older version of the Food Network tablet app, it was difficult to understand which rating was related to which recipe because of extra space beneath each recipe name. The Food Network solved this problem by enclosing all the related content within a border using a card layout.

Exercise #4

Establish hierarchy

The law of common region helps establish visual hierarchy. Designers group elements by outlining or setting the same background color for the connected elements. It allows users to effectively navigate the design and understand where to look for the information they need.

You can see the example of this on article webpages, where images are often grouped with their captions. Creating a visual boundary around these 2 elements separates them from the rest of the article content.

Exercise #5

Emphasize multiple elements

The law of common region brings structure and helps visualize multiple groupings at a time. It's especially important in tables that compare several products and their characteristics. In cases like this, designers need to find a way to distinguish both the column and the row.

One way to structure a table like that is to use "zebra stripes." Use different background colors for alternating rows and a border to distinguish columns. Alternatively, you can use outlines to distinguish rows and set the columns to change the background color on hover.

Exercise #6

Highlight relevant information

Like in the real world, borders can separate but also unite. Using an outline to isolate some elements from others also shows users what elements belong to the same group. As an alternative way to group the content, designers can outline elements that are related to one another. Card layouts like this are popular in weather apps.

Exercise #8

Bring attention to what’s important

Enclosing elements in an area makes them stand out from their surroundings. In the example, a slight change of the background color, border, and shadow separate the form from the rest of the page. This draws attention to the registration and establishes its importance.

Exercise #9

Show relationship

According to the law of the common region, containers communicate relationship. This works in graphic design too. Even when the container has no visible outlines, it holds elements inside, making the design look complete.

Elements that go outside the boundary, break the perception of the group and create a chaotic, sloppy feeling.

Exercise #10

Apply multiple common regions

One of the ways to establish hierarchy is to apply multiple common regions at once. In the example, each card has a common background color, which identifies them as separate elements. The common white background and border, in turn, indicate that these cards belong to the same category.

Pro Tip: Overusing the law of common region for grouping can create visual clutter. If it happens, consider using whitespace as it reduces the visual complexity of a design.