We stand with Ukraine and our team members from Ukraine.

The Community Of Over 578,000

Home ›› Behavioral Science ›› How spatial logic can make your product design more intuitive and high-craft

How spatial logic can make your product design more intuitive and high-craft

by Vida Zhang
Share this post on
Tweet
Share
Post
Share
Email
Print

Save

How-spatial-logic-can-make-your-product-design-more-intuitive-and-high-craft-lead-banner.png

Navigation in digital influences design. 4 reasons why having clear spatial logic between components in design is necessary.

Just as in the real world, when navigating in digital products, people need to know where they are, how they got there, and how to get out. That’s why having clear spatial logic between components is necessary.

1. Good spatial logic often maps to physical world metaphors

Opening a folder on iOS is like opening a folder or a box in real life. The expanding animation keeps the continuity of the “folder” — it’s as if we brought a physical folder closer to our eyes to see what’s inside.

Opening a folder on iOS
Opening an app on iOS

2. People have also gotten used to digital-native patterns that don’t exist in the physical world

For example, iOS users are quite used to opening a list cell that pushes the next screen in, or tapping on bottom tab bars to see a different screens. These patterns don’t remind us of any physical world interactions, but people get used to them after thousands of repetitions. As designers, we should leverage these familiar patterns as much as we can.

Opening a list cell
Opening a list cell
Tapping on a tap bar
Tapping on a tap bar

3. Clear spatial logic your design more intuitive

Compare swiping down to access notification center on iOS and control center on Android. On iOS, the spatial relationship between the notification screen (screen A) and the launch screen (screen B) is straightforward. A sits on top of B — edge swiping pulls it off, the gesture and screen movement synchronized. It’s straightforward because we can easily find a physical world metaphor.

Swiping down for notif screen on iOS
Swiping down for notif screen on iOS

In comparison, the spatial logic of the same interaction on Android is much less clear. By pulling down anywhere on the screen, the launch screen morphs into a white layer — no mapping physical world metaphor here.

It’s also hard to tell visually the spatial logic between the control layer with the black background and the white layer. Are they on the same level or the black layer is one level lower? Whereas on iOS the blur effect on the notification screen gives a clear clue.

Users can definitely get used to this interaction with repetition, but the lack of spatial logic will always cause cognitive dissonance. Subtleties like this make the product feel less fluid and thus of lesser quality as well.

Swiping down control center on Android
Swiping down control center on Android

4. Seamless animation also plays a huge role in establishing spatial logic and elevating product quality

Let’s look at opening and closing an app on iOS. When opening an app, the app icon expands and fades out, with the app screen fading in and growing in size with the fading icon. The animation establishes the spatial logic and tells the user where the app lives in this digital space — it’s embedded within its icon. Closing app animation mirrors this behavior, which is expected, as the app goes back to where it came from.

Opening and closing an app on iOS
Opening and closing an app on iOS
Opening and closing an app on iOS slowed down (manually)
Opening and closing an app on iOS slowed down

In comparison, the opening vs closing app interaction on Android is somewhat fragmented. But I’ll leave it to you to observe and find out in the video below.

Opening and closing an app on Android
Opening and closing an app on Android

To summarize, when you think about elevating the intuitiveness and craft of your product, look into the spatial logic implied by the design.

  1. Does it map to real-world metaphors?
  2. Does it follow an interaction pattern that most people are familiar with?
  3. Does the spatial logic simply make sense?
  4. Are you using animation to demonstrate the spatial logic?

In design, subtleties like these always matter.

post authorVida Zhang

Vida Zhang, Vida Zhang is a product designer at Meta, working on Messenger. She’s passionate about designing great products and writes about no-frill design tips.

Tweet
Share
Post
Share
Email
Print
Ideas In Brief
  • It is important to use spacial logic in digital products as it helps people understand where they are, how they got here and how they can get out – like in the real life.
  • 4 reasons why having clear spatial logic between components in design is necessary:
    • Good spatial logic often maps to physical world metaphors
    • People have also gotten used to digital-native patterns that don’t exist in the physical world
    • Clear spatial logic your design more intuitive
    • Seamless animation also plays a huge role in establishing spatial logic and elevating product quality
  • Vida Zhang, a Product Designer at Meta, suggests looking into the spatial logic implied by the design when you think about elevating the intuitiveness and craft of your product.

Related Articles

The overview of current challenges and opportunities design faces and how BBC team can help designers out to enhance digital experience and understanding of the world.

The Evolution of Experience Design
  • Dan Ramadan, Creative Director for UX Architecture & Content Design at BBC, tells about the current challenges and opportunities design faces by describing 3 stages of ‘the web’:
    • Challenges of the past (document retrieval)
    • Challenges of the present (control and contribution)
    • Challenges of the future (pervasive and ubiquitous)
  • Technology is as capable of solving problems as it is of creating them.
  • The team at BBC can explore how digital experience can enhance our understanding of the world, develop empathy for others, instill pride and commitment to the importance of the individual and the inherent value of shared values and cooperative society.
Share:The Evolution of Experience Design
5 min read
Evolution-of-design-article-image.png

As organizations grow in their conversational maturity, there’s an increasing demand for conversation designers. Explore 7 skills to learn for conversation designers in 2022.

 

7 new skills to learn for conversation designers in 2022
  • Conversational design requires far more than having got all your convo design courses nailed, completed all the challenges on VUI-challenge and finished re-reading Pearl, Evanhoe & Deibel and Cohen, Giangola & Balogh for the umptieth time.
  • There is a number of new skills that can up your career as a conversation designer:
    • NLU
    • Entities
    • Entities on steroids: ontologies and graphs
    • Building conversational teams
    • Open source movement
    • Mastering conversational AI platforms
  • It’s time for conversation designers to develop t-shaped profile: specialize in one or two particular conversation design skills and systems , and mastering skills that allow us to connect with people from neighbouring disciplines.
Share:7 new skills to learn for conversation designers in 2022
7 min read
7 new skills to learn for conversation designers in 2022

There are different ways participatory design can influence young people with cognitive disability. Read reflections on co-design methodology and ways it can help.

Reflections: Co-Designing with Young People with Cognitive Disability
  • In this article, Jax Wechsler, Principal Designer at Sticky Design Studio, shares:
    • Facts about Young People with a cognitive disability that may be useful when working with this group
    • Discussion and reflections about her methodological choices
  • Things to know about Young People with cognitive disabilities:
    • Ability levels can be very nuanced, every Young Person is different
    • Life Tasting not Life Wasting!
    • The level of advocacy of parents impacts experiences and opportunities for Young People with Cognitive Disabilities
    • Social inclusion and relationships are keys to wellbeing
  • Reflections on Co-Design Methodology:
    • Recruitment is hard!
    • Using referrals and ‘snowball sampling’
    • It’s important to build rapport
    • Understanding ability and research design
    • Cultural probes/diary studies are gold
    • Parents mediating participation
    • Flexibility is key
    • Value in participation
Share:Reflections: Co-Designing with Young People with Cognitive Disability
10 min read
Reflections : Co-Designing with Young People with Cognitive Disability

This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and