Is the grouping of content and elements intentional and won't cause ambiguity?
Pulse Check #2: A scientific support for visual design
Pulse Check is a collection of reflective design questions by Thomas Budiman. As designers, we are not perfect. We could be biased, reckless, and driven by our mere instinct. These questions encourage us to pause and reflect throughout the design process.
When to reflect on this question:
After designing high-fidelity screens.
When you QA your design as the engineer is working on the design
Why this matters
Neither the woman nor the cat is wrong. Human brains process what they see in structures, patterns, or interconnections between objects. You can see patterns in the image above based on the color and proximity of the text.
If we look at the color, the information is NO SMOKING, SAFETY FIRST (Figure 2). This is what the woman believed.
Meanwhile, if we look at the sign based on proximity, the information is NO SAFETY, SMOKING FIRST (Figure 3) – which is what the cat believed.
It's ambiguous. Although our mind is impressive. We filter information out to determine whether a piece of information is logical. You may smoke on the ship. But, of course, in certain designated areas. When the message says NO SAFETY, it becomes ridiculous. What kind of person would sacrifice public safety for smoking first? Please don't.
In another theory, the ship's owner may create ambiguity to get people to pay attention. Some will make it a joke that goes around, and people remember it. The captain wins. People pay attention and remember the message.
Regardless of the intention, we want to learn why the sign can confuse people.
Let's jump into screen design. You can find similar cases where a grouping of elements might be ambiguous. Sometimes, it can confuse people and cause them to make wrong decisions. For example, on the system where users need to operate it fast, someone is waiting behind you, e.g., ATM, ticketing machine, etc.
In other cases where the situations are slower and need more thinking, e.g., booking flight tickets. Users can pay close attention and notice if the information is ambiguous. They can resolve situations on their own. But dealing with confusing designs will take extra mental effort, patience, and time – because:
You have to read over and over.
Go to the FAQs to seek answers.
You may need to contact customer service to find certainty.
You may ask someone else who might understand better.
Visual design plays a role in creating a good user experience. Understanding how humans see makes you more deliberate in composing elements. You will check structures or groupings of elements to see whether they can confuse people. Or there could be elements or content that can come together to make it easy to find.
The fundamentals
In the early 20th century, a group of German-Austrian psychologists developed theories about how humans perceive and organize visual information around them. They called it Gestalt1. Today various fields adopt Gestalt theory, some related to therapy, physics, and design.
In design, these human perception theories help provide a more objective view. Well, you can’t avoid subjectivity in design. But, you can enrich design decisions by leveraging principles about humans, the subjects who use your design.
Max Wertheimer, one of the psychologists, wrote down the original principles, which are
Proximity
Good Figures
Common Fate
Similarity
In this post, I will only cover 2 out of 4 relevant to the no-smoking safety-first case. They are the proximity and similarity principles.
By definition, the proximity principle is where people consider objects that appear close together as a group2.
Figure 4A: Grouping is (123456).
Figure 4B: With another variation on the spacing, making them three groups, (12)(34)(56).
Figure 4C: Another wider spacing and makes the grouping (1)(23)(45)(6).
So now you know why the cat thought it was NO SAFETY, SMOKING FIRST.
The other principle is similarity, which is people consider objects that appear similar to each other as a group.
Figure 5A: There is a grouping based on color similarity, which the groups are (12)(34)(56)
Figure 5B: And based on shape similarity, the groups are (12)(34)(56)
Based on the Similarity principle, The woman was also right, NO SMOKING SAFETY FIRST.
Then why can it cause ambiguity? There is a conflict in the use of these two principles. Let’s take a look at this example:
As you can see in Figure 6, there are two possible grouping types. First, from the similarity principle, we will group them into (12)(34)(56). but the proximity principle demands partition (1)(23)(45)(6). Each principle can be quantified and compared in strength.
In 1998, two UK professors experimented to understand which grouping has the strongest influence. Proximity or similarity? The data shows that grouping based on proximity has a powerful effect compared to Similarity.
So how do we fix the nosafety-smokingfirst-or-nosmoking-safetyfirst case?
The grouping by proximity or similarity paper (1998) suggests, “When proximity and color cooperated with one another, the strength of grouping is the greatest.”3
Examples
I found some design examples regarding the two principles, proximity and similarity. But I haven't seen any ambiguous examples between similarity and proximity. If anyone finds one, please share it in the comments below.
Example #1 – Walmart4
There is a weakness in grouping elements on the chevron icon, which is part of the delivery. But it feels closer to the shopping cart icon.
I did some experiments to make the grouping stronger.
Figure 9A: I want to maintain the dropdown component as is. So I added a separator to build a group with another principle, the Common Region.
Figure 9B: I modified the dropdown component to provide proximity to the chevron icon. Still looking minimal without any additional elements.
Which do you think is better? Do you have other ideas? Please share below
Example #2 – Pinterest
Pinterest has a minimal appearance, making use of spaces to create groupings.
Suppose the spacing is a bit off, as in figure 11A; it will confuse users. It is unclear the ellipsis icon and avatar belong to which image. Only a slight difference can be a HUGE impact.
Without discrediting developers, sometimes the problem is not in your Figma files but in the development results. Therefore your ownership must be extended – helping the developer to check on what users will see. Always remember this mantra "users won't see your beautiful Figma files."
What you can do
Here are some tactical ways:
Evaluate your design. Is there any ambiguous grouping?
When I make the grouping better, am I sacrificing something else? Like creating a new modification to a component. Is this sacrifice worth it?
Does grouping elements and content make it easier for users to find information?
Collaborate with the developer to check again and provide direction to ensure the final result is appropriate.
I've always been curious to bring a scientific point of view into the design to balance our subjectivity – to design something beautiful yet functional.
Subscribe to my Substack to get other similar posts.
Pinterest & Walmart screenshots are taken from Mobbin.com