Design Delight 4 - Grouping

Leverage human nature…

…to capture consumer attention and keep it long enough to convey your value.

Humans don’t like not knowing.

In fact we fear the unknown. We’re always striving to understand. This is why a big part of human nature is to make connections between the data we’re given, even if there are none.

This is true for all kinds of data.

For example, people constantly make assumptions to fill in gaps between the facts they have about a person or company. This is why it’s important to actively tell your brand’s story instead of leaving it to consumers’ imaginations. (Learn more in part 1 of our Brand Affinity series.)

Another example is visual data. Our brains automatically group visual elements together, and it’s this tendency that we can use to better capture their attention and keep it long enough so we can convey our value to them.

When do we group?

Let’s look at five conditions that trigger our brain to group visual elements together.

Proximity: The closer elements are to each other, the more we see them as one group.

Direction: We group elements which move in the same direction.

Connectedness: We group elements that are linked by other elements.

Size: We group elements that are of a similar size..

Form: We group elements that are similar in shape, form and colour.

When visual elements are related to each other in any of the above ways, it acts as a trigger for our brain to group them. The more potent the relationship, the more we group. Example: The closer a bunch of objects are to each other, the more we see them as a whole. The farther apart they are, the more we see them as individual elements. Simple.

Combining triggers increases the likelihood and potency of grouping. So if we have a bunch of similar-sized objects that are also close together, and are similar in shape, the cohesive effect is extremely powerful.

What does it mean when we group visual elements?

It means that we see them as one whole. We see them as the sum of their parts, more so than as many individual parts. What’s another way of looking at this that allows us to truly leverage grouping?

When consumers group data, any data inside the group is less likely to escape their attention because the group already has their attention.

What is our goal with consumers? To get their attention. We want to capture it, and keep it long enough to either convey our value, or to build an emotional connection with them.

Therefore to increase the amount of data that people consume on our page, we want to arrange it with a mix of the 5 grouping triggers so that their brain continues to group the information. We’re essentially using grouping to create a steady, flowing path of visually related data that they stay focused on.

If you want a great example of how to use all 5 triggers at various places throughout a webpage with lots of information, take a look at the this page. It applies grouping to text, buttons, icons, background imagery and entire sections in order to not only tell an important story but to engage the viewer as they scroll to the very bottom.

Another powerful and much simpler example, is once again our home page.

What’s happening as you look at the page?

Your brain groups our logo and the 46 other brains to create a large visual element: a path. This path then leads your attention to a second group: Our header, position statement, and call-to-action. We used proximity, direction, connectedness, size and form, all on the same page.

Mastering the 5 grouping triggers can go a long way in capturing and holding consumers’ attention.