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.
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.
Nice break down Cennydd. Now while they work well for device-specific apps (Android has similar treatments to the iOS examples), are you suggesting we look at these for web sites too?
I worry that the line, for the user, would get too blurred between the ‘normal’ expected web behaviour and that of interacting with an app.
Okay, I’ll be that guy.
I love your examples. They really show how we can use animation and movement to assist wayfinding on small devices. But this is not in any way using proprioception. In fact it’s precisely not proprioception. Maybe navigating through the Twitter app with Kinect. But like you said at the beginning, proprioception is the sense of your physical position in space. It’s a physical sense with specific receptor cells in the body. Don’t see why we need to appropriate a well-defined term for something else.
@Shaun, I think the point is that the transitions use a psuedo-physical spatial model to understand the structure. Might I dare say skeuomorphic proprioception?
Normally you’ve got some really good insights. I was “with you” for part of this column. Then I read the “flip for configuration”.
These aren’t “design patterns”, this is “what iOS does”. Flip hasn’t ever made sense, and it still doesn’t. The problem is that you’re taking something that’s two dimensional and now implying there’s a “back edge”, which I think is unreasonable, especially because many “cards” might have the same “back” to them. Card swap sounds like a good idea, but the animation looks inappropriate: The cards don’t look like they’re being cut.
Regardless, as David Mead says, are you suggesting this for websites? If so, how is this going to work? I don’t just mean the actual transitions but the responsiveness of the site, so it gracefully scales upwards. How will this not just result in sites that just look like iOS apps?
Great article on the use of interaction and transition effects to inform location and aid navigation.
I’ve looked at how subtle transitions can form waypoints, helping to denote start and end points in a journey. The key is to apply them in a way that they work at a subconscious level.
Whilst conducting usability tests against less capable mobile devices, it’s clear to see some struggle with animation and frame-rate, when this is the case, as expected, the majority of these patterns become counter intuitive. This is why they are not always ideal for Mobile Web Apps, especially in guaranteeing the experience across all browsers/devices.
You might be interested to read my article – Mobile Interaction Design for the subconscious mind
I didn’t mention a medium (web/apps etc) because I think it’s irrelevant to the piece. These are patterns that help users navigate complex digital spaces. Whether and where you choose to apply them is up to you.
Yes! I think we’re still just seeing the start of how movement can improve user experience without adding clutter and chrome to designs. Animation can communicate so much in a relatively short amount if time.
Am I the only person who can’t actually see the examples? If there’s another place where I can view them, that would be appreciated, as the article isn’t as effective without them. I’m running Google Chrome on Windows 7 64-bit if that helps.
Check out Windows Phone’s page animation and design patterns 🙂
Reminds me of the transitions to instant replay in [insert sport here]. Often overlooked unless you consciously watch out for its format, but without concentrating on the transition it will still affect the user psychologically often without the user realising it. Thanks for the break down 🙂
Interesting ideas here… I might just call these conventions as opposed to considering them proprioception. Or perhaps as these conventions, and others, begin to take hold, they’ll create something of a digital proprioception; an intuitive way of navigating apps. Either way, these things are incredibly dynamic and will continue to evolve in the coming years.
I too am on Windows 7 (x64) Chrome and unable to view the example. I hit play and it just flutters a black screen on and off…
Will there be challenges with using some of these “Proprioception navigation” for websites if you take in account that a website user doesn’t start at a particular spot and work deeper into a program (he can, but a lot of times it doesn’t happen), instead he enters a website on any point?
How will these navigations indicate to him where he is in the bigger scheme of things? You will probably still need some traditional elements to assist.
Where they might be more successful similar to apps, are some internal corporate websites, which are just large apps; when it comes to interaction.
Great article on transitions… but that’s not proprioception. Here is a podcast that IS about proprioception: https://soundcloud.com/roman-mars/99-invisible-37-steering-wheel
The proprioception concept is nice, but relative to even worms humans (consigned to massive doses of stationary focal perception) are falling away behind the rest of the animal kingdom. Honestly though, when we watch those IMAX HD nature clips of zooplankton, just a glimmer of hope? I totally disagree with vertical-horizontal assertions elicited by Mr. Cennyyd Bowles. Cheap handhelds force users into flip-flop mental gymnastics, but looking at any dweeb lost in bleep-bleep-bleep… let’s just agree its good to have a real computer. As HTML matures, we will also say goodbye to the archaic “drop list” hangover from the late 1970’s, early 1980’s. Anyone else here go back that far (oh my back-side hurts)? Still need some visceral collateral along the line of my reasoning? Which way do the lines of text go in this site: left to right. For some Chinese translations, up and down, but exceedingly consistently so. It is that very consistency that ensures our severely (shall we say) distorted proprioception. Be good, boys and girls. Bleep-bleep-bleep!
Very good observations about navigation in touch screens!
Hi Cennydd,
A question for you to ask if you’ve come across this before, particularly as Twitter has internationalization/localization considerations…
Have you found the direction of transitions should change in regions where people read in different directions?
If I read Hebrew from right to left, am I also wired to think in terms of progress as moving from right to left?
Lar
Thats great sense of writting…..
And good Observation