Using The Law of Common Region To Become A Better Manager

By:
, ,

This series is designed to help those working in the arts and culture sector apply user experience (UX) best practices to daily content management tasks. Using Jon Yablonski’s collection at LawsOfUX.com that gathers best practices designers consider when building user interfaces, these articles will show you how each practice can be applied to more than just user experience tasks.

Law of Common Region

Per https://lawsofux.com/law-of-common-region/ here’s how the Law Of Common Region is defined:

Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.

  1. Common region creates a clear structure and helps users quickly and effectively understand the relationship between elements and sections.
  2. Adding a border around an element or group of elements is an easy way to create common region.
  3. Common region can also be created by defining a background behind an element or group of elements.

Origins

The principles of grouping (or Gestalt laws of grouping) are a set of principles in psychology, first proposed by Gestalt psychologists to account for the observation that humans naturally perceive objects as organized patterns and objects, a principle known as Prägnanz. Gestalt psychologists argued that these principles exist because the mind has an innate disposition to perceive patterns in the stimulus based on certain rules. These principles are organized into five categories: Proximity, Similarity, Continuity, Closure, and Connectedness.

Let’s examine some real-word examples where you can put this into practice.

Website Content Management

Regular page content is a great place to implement the Law Of Common Region and it’s something I include in client designs quite frequently in the form of grouping content into horizontal sections.

In this example from Austin Chamber Music Center’s About page, the background color for each section alternates between white and a very light gray. It’s not enough to distract, but enough to help visitors group content and increase their time on page.

Now compare how that same page looks with the alternating background color removed.

We can drill down even more by grouping content within a section by using a card with borders. ChicagoPlays.com uses a card design for displaying upcoming events from their member theaters. In this example, the common elements are the details for each event.

You can begin to combine this approach for mixed content within the same page. Here, ChicagoPlays.com uses a background color to create a visual where their event filters live. To the right, bordered event cards make it easy for visitors to skim results.

Beyond Solid Colors

While solid color backgrounds are a solid option, you can kick things up a notch and apply the Law Of Common Region effect using background images to help create clear visual grouping.

The Morikami Museum and Japanese Gardens website uses some striking photography to good effect to highlight each of their gardens.

It also helps make what might seem like a very long page easier to navigate and improve engagement thanks to the added impact from background images.

Email Campaigns

Given how straightforward this approach is, you can begin to see how it can help with other communication channels. Providers like MailChimp go so far as to offer ready made modules that create containers with color backgrounds for both regular text and image + text options:

Presentations

Hopefully, you’re already starting to think about applying common regions to a variety of mediums and one you shouldn’t overlook is presentations. I recently created a new proposal template for UpStageCRM, and it uses common regions. In this example, it’s used to help distinguish between two development options for potential clients to consider.

Slippery Slope

This is such an easy method to apply, it can get out of hand in a hurry if you aren’t careful. If your content starts looking like checkerboard, you’ve probably gone too far 😄

Use the following tips to help keep on track:

  1. Anytime copy is broken up with a header, it could be a good candidate for applying a common region container.
  2. Avoid using them as separators. Let the content guide you; does if fit into proximity, similarity, continuity, closure, and connectedness?
  3. High priority list-based content can benefit from a common region container, like this event page from Orlando Philharmonic’s website:
  4. Don’t get carried away with colors that throw you out of accessibility compliance (details).

Show Yablonski some love and order one or more of the posters he designed for each practice covered at lawsofux.com, which is completely free to use. You can purchase them at his online store.

Visit Online Store

 

About Drew McManus

In addition to my consulting business, I'm also the Principal of Venture Industries Online but don’t let that title fool you into thinking I'm just a tech geek. I bring 20+ years of global broad-based arts consulting experience to the table to help clients break the cycle of choosing one-size-fits-none solutions and instead, deliver options allowing them to get ahead of the tech curve instead of trying to catch up by going slower.

With the vision of legacy support strategy and the delights of creative insights, my mission is to deliver a sophisticated next generation technology designed especially for the field of performing arts. The first step in that journey began in 2010 when The Venture Platform was released, a purpose-designed managed website development solution designed especially for arts organizations and artists.

For fun, I write a daily blog about the orchestra business, provide a platform for arts insiders to speak their mind, lead a team of intrepid arts pros to hack the arts, lead an arts business incubator, and love a good coffee drink.

Leave a Comment