I am sitting on a jet bound for Zurich (insert clever Swiss Design reference here). Embedded in the seat before me, a touch screen offers up a wealth of entertainment, and as a designer, I dutifully take a moment to silently critique the clunky yet functional user interface. It’s not the interactions I fumble through here that prompt me to write this article, however. Instead, it’s my experience with two buttons on the cabin wall next to me. Here I find a device for dynamically adjusting the opacity of the window, as if by magic (and magic totally exists in flight-mode with no means to google how stuff works). The cabin has been set to “dark” for the benefit of the in-flight film buffs, and all of the windows are tinted a deep blue. Keen to take in the view as we cross the Gulf of Carpentaria, I tap one of the buttons; up five times; a little LED dot moves upwards accordingly, and I peer through the foggy blue portal. For a moment, I still can’t make out the coastline below, but then gradually, as if the sun had just appeared from behind a cloud, the vista brightens and all becomes clear. Whether by design or technical limitation, this subtle and beautifully timed transition kept me entertained through the journey, my own private sunrise on demand.
This simple interaction spurred my thoughts; what is the state of play within user interface design when considering the way users move through and around experiences. Where does motion hand-off to meaning, and what delightful interactions lurk around the corner?
The Age of Interaction
To the betterment of user experiences everywhere, interaction designers have been weaving choreographed motion into interfaces for years now. Long gone are the days of stitching together strings of static screens without any regard for what happens on the timeline. The fundamentals of animation (easing, bounce, transitions) are readily available to developers and designers alike, built into frameworks, one-click options in prototyping tools, or simply evident in the remarkable uptake of Adobe’s After Effects as an interaction design tool. When used well, we have come to associate basic motion design with UI that feels contemporary.
While a welcome change from static screens, not to mention a relief from the over exuberance of Flash-style multimedia, the majority of modern interaction design has generally only applied motion to the basic stages of UI; appearing, thinking and disappearing. Superficially softening the edges as we move about a product, interaction designers have enriched UI with the digital equivalents of cape flurries, chin scratches and puffs of smoke, all delightful and welcome, but ultimately placeholders as industry champions headed back to the lab to develop ambitious new sets of interaction guidelines with the aim of imbuing UI with far more meaningful motion. By 2015 the fruits of these labours had come to bare, best exemplified by Google’s Material Design, which not only meticulously prescribes it’s philosophy in vast and detailed specification but makes it’s numerous animations and effects available at an operating system level.
Motion with Meaning
Material Design leveraged Google’s widely adopted Android platform to quickly enter the mainstream of not only mobile app design, but web and beyond. One key principle is the notion that the user, as the prime mover, instigates all motion, and in doing so, causes digital objects to move and rearrange without breaking the continuity of the experience; a subtle tint radiating out from my finger when I long press a button acknowledges the gesture and indicates that the UI is actioning the request. Material Design shines when it takes a physical gesture and perpetuates the motion into the digital space; tapping a button may result in a transition originating from the button’s position on screen, thus creating a direct correlation between the point of contact and the digital interaction, much like a physical object.
The ambition of Material Design is both enlightening and somewhat daunting for the uninitiated. Deeply rooted in natural physics, and underpinned by garden variety psychology, the guidelines offer subtle variations in movement appropriate to almost every scenario that the current crop of apps and devices demand, although understandably confined to the shallow perceived 3D space that lies at the heart of it’s vision.
Moving Through Interstitial Space
All of this refined motion has lead to great improvements in user experiences, allowing UI to truly focus attention and give clear feedback like never before, but perhaps the final frontier has yet to be fully explored; that of interstitial space. Bad puns aside, clever interaction designers have begun to seriously contend with the moments of tension in between key screens, where users are often left in the dark while latent tasks churn in the background. In what Chase Buckley refers to as optimised interstitial anxiety, motion may be used to create a pleasant rhythm throughout a complex process in order to channel a user’s hesitation into confident strides. The Commonwealth Bank iPad app utilises the Material Design playbook during a payment flow to give the user the sense that they are in complete control every step of the way; loading screens are replaced with incremental adjustments to the present information, more akin to shuffling notes of paper around than progressing through a traditional UI.
Keeping the user comfortably in the loop with meaningful transitions and previewed content while moving through a product is now the interaction designers benchmark. For those moments when an interface absolutely must resort to the trusty old loading screen, even then are we able to creatively enhance the experience thanks to the foresight of recent design efforts. Facebook’s pseudo wireframe in place of real content, for example, offers a far more tantalising glimpse of what’s coming down the pipeline than an animated spinner ever did.
Where to from here?
It’s a fairly safe bet that Material Design and it’s similar counterparts will see out the current generation of two-dimensional screen based interfaces, so the most interesting forward thinking notions tend to look towards the emerging virtual and augmented reality mediums. Of note, however, advances in haptic feedback seem set to offer a new tier of interactions, bringing digital interfaces into the physical realm. Ultrahaptics™ is a technology originally developed by the University of Bristol, claiming contactless yet tactile user interfaces. This potential UI works by directing ultrasound to points in mid-air, creating invisible tactile sensations. Similarly, Disney Research has made forays into this space with Aireal, a project focused on delivering immersive experiences by moving highly accurate bursts of air about the user’s physical frame.
Perhaps more pertinent and relevant to today’s mobile devices, the increased availability and fidelity of Electro-Active Polymer Actuators (EAPs) will allow designers to weave tactility into a screen based interface via similar haptic vibrations to those we are already familiar with. The Disney Research team again, have forged ahead to create algorithms mapping depth information to EAP screens, so that a user might feel pseudo-haptic textures (simulated undulation, ridges and edges ) as they interact with a UI.
Exactly how these innovations will affect the way interaction designers transport users around their products has yet to play out, but it is encouraging to see engineers and designers pursue “perfect usability” with such gumption. As we inevitably transition away from the “quantum paper” ideals of Material Design, I for one look forward to the likes of Google and Apple rolling out thoroughly considered guidelines for the dynamic user interfaces of the future.