Close your eyes and touch your nose. How did you do it? How did you sense where your hand was, and direct it to the right point? You’re not using sight, hearing, taste, smell, or touch (except right at the end). Instead, you’re relying on proprioception: the sense of your body’s position in space, and the position of various parts of the body in relation to each other.
Article Continues Below
Proprioception—sometimes regarded as the sixth sense—helps us understand our orientation, coordinate our movements, and make sense of the world around us. It helps us turn space into place, turning an abstract set of dimensions into an environment that we understand and can manipulate accordingly.
Digital space, of course, doesn’t offer physical proprioception, so it falls to designers to provide cues about the user’s position. The most obvious way to do this is with explicit visual components. Throughout the web’s history, we’ve adopted many physical metaphors for these navigational building blocks: breadcrumbs, navigation menus, and homepages have become familiar to millions of users.
Unfortunately, these explicit navigational components are difficult to handle in the responsive era. They don’t fit well on small screens, and are falling out of favor as recent trends demand their deprecation in the interface.
To revitalize these components, enterprising designers have started to explore new small-screen navigation patterns. These are a useful start, but to help users navigate comfortably on small screens, it’s worth looking beyond pure signposting. We can bring the sense of proprioception into the digital world by focusing on the transitions between screens. Here are just a few examples.
Horizontal for hierarchy#section2
By (largely unspoken) Western convention, right is the direction of horizontal progression–just think of the number line or written text. Left is subsequently seen as backward, even regressive. It’s no accident that the Latin for left–“sinistra”–found its home in the English language as “sinister.” This historical prejudice may upset my fellow lefties, but it offers a helpful convention for digital product designers.
Horizontal transitions are seen throughout smartphone operating systems. In this example from the iOS Music app, as content moves right to left, the user appears to move right, and thus down the hierarchy. He can then move left to return back up the tree. The iOS designers use directional indicators to back up these transitions. Controls that lead down the hierarchy are given right arrow shapes, and those that lead up (or “Back”) point left. Position further reinforces the concept, with right arrows placed on the right, and left arrows on the left.
The design works by offering users a mental origin—the home screen–then using transitions to establish a sense of displacement from that origin. Every step right takes the user farther from home, every step left brings them closer. This effect therefore needs a clear anchor or landmark against which the user can orient. The home screen of an app is usually at the top of the tree: the horizontal hierarchy effect isn’t so successful if the user is thrown straight into the middle of a complex hierarchy.
Perpendicular for modals#section3
Not every action in an otherwise hierarchical structure sits within the hierarchy. Modal actions like warnings, “select account” disambiguation screens, or login flows need different treatment. It’s useful here to use perpendicular transitions that go against the horizontal flow.
Using the y-axis (i.e. vertical transitions) is the most common choice. The Twitter mobile app uses it, for example, for composing new tweets, an activity that breaks out of the timeline/detail view hierarchy.
The modal window slides into view from the bottom of the app. This doesn’t suggest progress within the hierarchy. Instead, it feels disruptive: the screen intrudes into the usual flow. Once the user has completed or dismissed the screen, it disappears from whence it came, and we return to horizontal business as usual.
Flip for configuration#section4
An alternative for non-hierarchical interactions is a flip.
The physical metaphor of the flip gives it a slightly different feel. This isn’t interruption so much as configuration: reaching around the back of the screen to play with the wiring. As such, a flip is ideal for Settings screens, where the options chosen directly affect the initial view. In this clip, the Me screen flips to allow the user to choose their preferred account.
Card swap for entering a new hierarchy#section5
In the card swap transition, the active screen moves aside and then behind another, like a deck of cards being cut.
This transition feels more absolute than the others. Just this simple piece of animation wipes the slate clean and tells the user she’s moved to a new structure, or even a new app. As such, it also feels less reversible. The user can’t simply press Back to undo this switch. The only way to reverse is to repeat the action, bringing the other screen back to the foreground.
These four transitions alone communicate significantly different navigational patterns; yet transitions are frequently overlooked in favor of bulkier on-screen components. Intelligent transitions could make a significant difference to your app’s user experience. If they support and confirm your app’s structure, your navigational model can fall into place more easily. However, if your transitions conflict with on-screen components, you may just stir up a vague feeling that something’s not quite right.
The rise of small screens rewards time spent on the small details. When on-screen territory is at a premium, the gaps between screens become far more interesting.
