When you swipe through photos on your phone, dismiss a notification, or tap into a message, you’re not just moving pixels—you’re navigating a spatial mental model. Content feels like it lives somewhere beyond the edges of the screen: to the side, below, behind. That sense of place can help keep you oriented, even when the screen itself can only show one thing at a time.
These spatial metaphors aren’t accidental; they’re designed. And understanding them is one of the more underrated skills in mobile UI work.
The screen is a window
A mobile screen doesn’t show everything—it shows one piece of a larger whole. The way content enters, exits, and transitions tells users where they are in that larger space.
Here are five common navigation patterns and the spatial relationships they imply. In each animation below, content that has moved outside the screen becomes semi-transparent, so you can see where it’s come from or where it’s going.
Horizontal swipe
Swiping horizontally suggests sibling screens—peers that live side by side, like tabs or a photo gallery. The mental model is a row of cards laid out left to right, with the screen as a window sliding over them.
Vertical dismiss
Swiping a card or notification off the top (or bottom) of the screen suggests disposal—flicking something lightweight away. It arrived, you dealt with it, and now it’s gone.
Vertical scroll
Scrolling vertically implies a continuous surface—a feed, a long document, a list that extends beyond view. The mental model is a tall page, and the screen is a window sliding up and down over it.
Modals
A modal materializes in place—scaling into view, floating above the content beneath it. Unlike other patterns, it doesn’t imply a direction. Instead, it suggests a layer above, something that temporarily demands attention before receding.
Stack navigation
Tapping into a detail view pushes a new screen in from the right, while the previous screen shifts away to the left. Going back reverses the motion. This creates a sense of depth—a stack of screens you can move forward and backward through.
Reading the map
Spatial patterns can become so familiar that, even in the abstract, it’s possible to tell which movements go with what user actions.
Below are three animations based on an email app. Each one represents a different action: opening a message, composing a new one, and opening an action menu. See if you can tell which is which before reading the answers.
The first is a sheet sliding up from the bottom, the kind of surface you’d compose on. The second is a popover appearing from the top-right corner, anchored to where a menu button would be. And the third uses a stack push—a detail screen slides in from the right, the way you’d open a message from a list.
If any of those felt obvious, that’s the point. Your spatial instincts filled in the meaning before you needed an explanation.
Use, don’t abuse
Spatial metaphors are powerful, but fragile.
If you break the motion pattern, users lose their place. When screens slide in from inconsistent directions, it feels disorienting. Consistency is what lets people build and maintain their mental map.
If you stack too many layers, the map falls apart. Modals on top of modals on top of sheets quickly gets messy. Too many layers make it hard to remember where you started and what you were doing.
If everything’s off-canvas, nothing feels accessible. Too many floating panels and hidden drawers can make an interface feel overwhelming. A little spatial orientation goes a long way; if you mix and match too many mental models, the utility for users degrades quickly.
A good rule of thumb: if you can’t keep the spatial model straight in your head, your users won’t either.