Better Navigation Through Proprioception

by Cennydd Bowles

18 Reader Comments

Back to the Column
  1. 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.
    Copy & paste the code below to embed this comment.
  2. 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.
    Copy & paste the code below to embed this comment.
  3. @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?
    Copy & paste the code below to embed this comment.
  4. 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?
    Copy & paste the code below to embed this comment.
  5. 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
    Copy & paste the code below to embed this comment.
  6. 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.
    Copy & paste the code below to embed this comment.
  7. 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.
    Copy & paste the code below to embed this comment.
  8. 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.
    Copy & paste the code below to embed this comment.
  9. Check out Windows Phone’s page animation and design patterns :)
    Copy & paste the code below to embed this comment.
  10. 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 :)
    Copy & paste the code below to embed this comment.
  11. 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.
    Copy & paste the code below to embed this comment.
  12. 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…
    Copy & paste the code below to embed this comment.
  13. 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.
    Copy & paste the code below to embed this comment.
  14. 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
    Copy & paste the code below to embed this comment.
  15. 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!
    Copy & paste the code below to embed this comment.
  16. Very good observations about navigation in touch screens!
    Copy & paste the code below to embed this comment.
  17. 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
    Copy & paste the code below to embed this comment.
  18. Thats great sense of writting…..
    And good Observation
    Copy & paste the code below to embed this comment.