Motion and interface design — continuity and expectation
(by the way, if you want to receive my articles and tutorial videos on UI Animation straight to your email, click here to get added to my list)
Built for survival
For whatever reason, humans are more wired to notice when something is wrong than when something is right. When everything is even keel, we tend not to notice. When we experience something as discontinuous, it triggers our alert systems and a cascade of subsequent physiological and behavioral responses.
One theory about this has its roots in evolutionary biology. Humans evolved as a prey species. We had to watch out for lions and other predators. Humans developed warning detection systems to alert us when something in our environment was ‘wrong’ to avoid being lunch.
This survival instinct can also be thought of in terms of a ‘violation of expectation.’ Once our subconscious has processed our environment and created a normalized baseline model, events that are discontinuous with our model start to stand out and get noticed.
Studies show that these subconscious detection systems kick in before our conscious mind registers that something is wrong.
It also appears that our subconscious detects discontinuities far quicker than our conscious mind. Therefore, the thought you have that something is wrong, is in fact a confabulation: you think that something is wrong because you believe that the thought you had is in response to something you saw. In fact, you subconsciously saw something earlier, which triggered a physiological response, which in turn triggered the thought. You experience the physiological sensation that something wrong, therefore your mind tells you something is be wrong.
Proprioception and tool use
Proprioception is defined as, “The sense of the relative position of neighboring parts of the body and strength of effort being employed in movement.” Studies on tool use in macaque’s show us that, over time, we neurologically begin to treat tools as extensions of the body. Our proprioception and neurology start to transform what was once a foreign object into something that becomes a part of us.
As designers, we are accountable for creating objects and experiences that, through repetition, become an extension of the user. We need to accept that devices and user experiences, when used repeatedly, stimulate new neural pathways and as a result, our users stop thinking of their phone or app as an external thing.
Leonard B. Meyer wrote a seminal book in 1961 titled Emotion and Meaning in Music (buy it your local bookstore, not Amazon, por favor). I highly recommend it. In it, he writes that –
“As soon as the unexpected, or for that matter the suprising, is experienced, the listener attempts to fit it into the general system of beliefs relevant to the style of the work. … three things may happen: (1) The mind may suspend judgment, so to speak, trusting that what follows will clarify the meaning of the unexpected consequent. (2) If no clarification takes place, the mind may reject the whole stimulus and irritation will set in. (3) The expected consequent may be seen as a purposeful blunder.
In my experience, this perfectly captures the behavior of users (myself and most designers I know fall into the #2 category).
But the question remains, in the context of interfaces and user experiences, how we determine whether something is continuous or not?
Motion is how it works
I assert that motion is the glue that binds the interaction model, interface elements and tasks, and tells us ‘how it works.’ It is the thing that creates continuity and what as a user, we should expect and anticipate. This ‘glue’ is what creates relationship, in the sense that a fishing net is a ‘collection of holes tied together with string.’ Motion ties it all together by creating continuity, relationship and causality.
Over the course of an interaction, the user is doing something i.e. performing a task. Typically, there are several to many steps involved in the accomplishment of the task (as a reality based example, making eggs and instant waffles this morning required 67 separate steps/actions). The continuity by which each task transitions into the next task will greatly influence usability.
When things are in motion, they can be thought of as being in relation to each other and can be thought of spatially. Spatial relationships includes things like topological, directional, distance and temporal relationships. Another way that motion creates relationship is through causality — the relation between an event, and a second event, where the first event is understood to be responsible for the second.
Continuity, relationships and causality contribute to our mental model and support the creation of expectation.
Steve Jobs said –
“Most people make the mistake of thinking design is what it looks like. People think it’s this veneer — that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.”
Let’s replace the word ‘design’ with the word ‘motion.’
“Most people make the mistake of thinking motion is what it looks like. People think it’s this veneer — that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think motion is. It’s not just what it looks like and feels like. Motion is how it works.”
Simply put, motion tells us ‘how it works’. By being thus informed, our users develop mental models and expectations, which as designers, we can choose how to best design and implement.
Motion as a visual language
When I coach designers who have no motion experience, it helps to have them think of motion in terms of a visual language.
Businesses, commonly referred to in the design community as ‘brands,’ employ a visual language which is in alignment with, and an expression of their core values. Take a look at any well executed brand guide. Consideration is given to everything from layout, color, typography, photography, do’s and don’ts, and much more. These brand recommendations are an expression of the brand and in alignment with our expectations of the brand promise using the fundamentals and symbology of the visual design medium. Certain fonts are chosen over others because of their meaning. And the meaning of the selected font supports the values of the brand. You could say there is a continuity of experience across the design sprectrum with relationship to brand.
(All of this works, by the way, because of semiotics. We create meaning from things that fundamentally have no meaning i.e. reality. Red means stop. Why? Because we say so.)
Likewise, motion in user experiences can be thought of as a visual language itself, containing elements like timing, velocity, physics, and a number of properties that change over time including but not limited to transparency, scale, rotation, position, shape, overlay, anchor point, masks & mattes, material performance, etc. Each of these elements or properties, just like the fundamentals of design, carry with them their own meaning.
With the launch of Material Design, Google is the first company to publicly release a standards guide for motion. Love or hate Material Design, Google put a lot of thought into creating a comprehensive model with little to no opportunity for violation of expectation.
Landing the plane
Two simple examples of how to support and break continuity can be found in the iOS home screen.
When you open an app or tap the home button to exit an app, we see that we are zooming into and out of the apps (represented as icons) on our home screen. This gives us a sense of continuity, relationship and causality. The home screen is where the apps live and we ‘zoom into them.’ When we leave the app, we ‘zoom out.’ In this model, the home screen itself is not an app, it is more like a place where the apps all hang out.
However, when you tap the home button twice to enable the app switching mode, the experience becomes discontinuous.
While we can accept the overall idea of our open apps rendered horizontally, the breakdown in continuity comes from four areas — the relationship of the static wallpaper to the app icons, the relationship of the status bar, the background of the favorites icons, and the transition of the ‘recents’ content. Note that these breakdowns mostly occur as breakdowns in relationship, as determined by the motion.
In the case of the static wallpaper, the issue seems to be one of guidelines. It seems it is against Apple guidelines to show empty space. If our experience of the wallpaper remains continuous with the app icons, and scales down ‘or zooms out’ in the app view, than what lies beyond the wallpaper? This is the conundrum and the conflict between continuity, consistency, and guideline in this instance: our sense of continuity wants the wallpaper to zoom out but we can’t show beyond the edges of the content.
Rendering the status bar as tied to the apps themselves, rather with the OS, is also problematic, and impacts our expectations of what the status bar fundamentally is and it’s relationship to apps and the home screen.
The favorites bar, treated as a full bleed in normal mode, now is shown with edges, another break in continuity
Finally, the ‘recents’ simultaneously fade up and appear behind the app icons as if they were behind the app icons the whole time. My point of view is that the use of opacity as transition should always be carefully evaluated. Often, the use of opacity as transition is largely the result of not having any better ideas. Ideally, transitions would facilitate relationship and rarely does opacity do this. The transition doesn’t feel thought through as well, and as a result, lands as discontinuous. Additionally, there is no real relationship in this transition, a missed opportunity.
That the ‘glass’ effect that fades in behind the home screen icons only serves to make the whole transition slightly less awkward (if it weren’t there, then the icons would just be scaling down over a static wallpaper, which would look REALLY weird).
All of a sudden, the mind starts asking questions. Is this deliberate or an accident? Do the designers know what they’re doing or am I wrong for second guessing? Did the wind move the grass or was it a lion? Was it a lion or an antelope? Clearly we need answers if we don’t want to be someone else’s dinner. The ground has become uneven. We must tread carefully.
Bringing it all together
In the context of user experience, motion is a critical player. As humans, we are hard wired to notice when something is wrong, and we do this through the use of predictive mental models. We use continuity as a powerful tool to inform us as to what is so. When our sense of continuity is challenged or when experiences appear as discontinuous, we are taken out of the experience and into the world of ‘figuring it out.’
Your choice as a designer is whether the experiences you design will support continuity and expectation or whether, through discontinuations, the user expectations are violated. (There are instances when as a designer it is advantageous to consciously, deliberately, and with intention ‘break the fourth wall’ i.e. disrupt expectation, and I’ll address this in a subsequent article).
I present these musings not as a dire warning (the iOS home screen’s discontinuity hasn’t result in any loss of life that I’m aware of, nor has it impacted sales), but rather as opportunities, and design is all about opportunity.
In coaching non animators, it has been my pleasure to witness how little time it takes to go from zero to full competency. You don’t need to become an animation guru. Rather, by focusing on a limited range of motion opportunities and visual language based strategies, you can begin designing and prototyping continuous, powerful and evocative interactions.
(if you thought this was awesome, click here to get added to my list and have me email you my articles and tutorials on UI Animation.)
Further reading
- Pasquale D’Silva on Transitional Interfaces
- Rebecca Ussai on The Principles of UX Choreography
- Jakob Nielson on Mental Models.
- Dr. Susan Weinschenk on The Secret to Designing an Intuitive UX: Match the Mental Model to the Conceptual Model),
If you want to learn how to design and implement continuity in your user experiences, or are interested specific UI animation tools and techniques, you can visit my website uxinmotion.com for free articles and tutorials. If you are interested in putting together a workshop for your team or business on this topic or a hands-on UI animation workshop, or if you are interested in coaching, PM me.
Also, special thanks to Mr. Alex Chang who provided extensive feedback and notes. Thank you.
Published in Startups, Wanderlust, and Life Hacking
-