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 hierarchyBy (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.