Newtonian interfaces
Newtonian ‘physics’ is experienced in graphical microinteractions as they appear to behave in accordance with one another. In Nathan Hunt’s inspiring piece on Mass and Motion in User Experience, he highlights that easing animations create the appearance that a user interface graphics has mass and is responding to force and friction.
When applying these animations is to somewhat mirror the motion of objects in the living world according to realistic physics. It is a means to anchor us in two worlds, as we interact with one reality through another. Motion is more than an aesthetically pleasing effect, it is a medium for the continuum realism from our end of the world.
Animations make the interface feel natural and responsive. Its role not only fills the gap between the actions we take but amalgamates the two realities by translucing the border in which our interaction transcends. It makes us feel that we are not just tapping a piece of glass, but touch and interact with the elements.
The characteristic of this aspect of realism is that it communicates identity bound to that individual element. As in the living world, physical properties of an object are the reason they behave the way they do. Properties bound to an object imbues it with personality. UI elements move as if they are real and react to external forces as if they accommodate mass and are susceptible to inertia.
Easing, or the infusing of a sense of weight and balance in their motion, grants this. Again, it allows it an individual identity. Thus elevates it from a mere flat surface on the screen to a tangible entity that is real enough to possess its own behaviour.
However, if user interface graphics are to be animated according to ‘realistic’ physics, they must accommodate physical characteristics.
“A bouncing ball is a good example to study these physical forces. Balls with different physical properties will behave very differently according to their properties. Each ball takes a different amount of time to do the action and they have different rhythms. The rhythm of the ball comes from every time the ball hits the floor and the time between each hit. This rhythm and time tells us something about the ball.”
Motion
This enhances our intuition and experience by reusing metaphors from the living world. Just as sudden change does not exist in the world; it takes a certain amount of time from one user interface element to move to another — and this opportunity in time is used to build motion.
Motion creates spatial awareness. It helps us navigate within the graphical user interface, enforcing a dialogue between us, our interaction with, and the elements. This responsiveness makes the interface feel alive and less static. It guides us through the experience.
Without animation, that guidance may appear broken — causing confusion of where the action took us and what content we have missed by taking the action. As in reality, the metaphor of spatiality serves good purposes as to making the user spatially aware of the user interface environment. It clarifies the element’s relationship.
What is the mass of a navigation menu?
Mass
Mass is a physical characteristic of an object and a measure of its resistance to acceleration when force is applied. Newtonian physics theorizes its measure as inertia. The greater the mass, the greater the inertia. Inertia is explained to be the tendency of an object to resist change in its state of motion.
One view is, an object due to its mass, creates a curvature of space around it. That curvature makes a force be required to make change in state of the object. Hence, causes inertia. Imagine inertia as gravity of the object acting on itself against any change of state. In other words, the more mass an object has, the more force it takes to get it in motion.
Atomic design
“If atoms are the basic building blocks of matter, then the atoms of our interfaces serve as the foundational building blocks that comprise all our user interfaces. These atoms include elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional.” Then, we would consider that “molecules are relatively simple groups of UI elements functioning together as a unit.”
A molecule is to have greater mass than an atom. Likewise, an element would require interaction to change its state of motion. In this sense, force is applied in interacting with an element, and easing animations mirror the motion of acceleration of the living world.
Brad Frost’s Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. Atomic design is not a linear process, but a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time.
How is realistic physics relative to the comprehension of graphical microinteractions or even the spatial structure of a graphical user interface?
In the living world, physical characteristics imply it also being made of material. In the digital realm,
What kind of material would an element be made of?
What would it mean for user interface graphics to manifest physical characteristics?
How can we work with it as a material? What are its physical characteristics?
What new opportunities may it afford?
What does this understanding entail in terms of interaction design practices?
Thus to ask what the mass is? Is to imply that user interface graphics are to be considered as embodying ‘physical properties’, with motions based on physics of the living world. Yet we should ask,
Is realism a virtue?
Takeaway
For the future of graphical user interfaces, should we open up design space and allow creativity to flow unhindered by the restraints of reality? We tend to be inspired by realistic physics when designing contemporary graphical user interfaces. However, we should ask ourselves why and what it means to do so. Be critical and ask what if? I’m intrigued by the different future paths graphical user interfaces may head in. This article is intended to spark conversations that compel us to imagine such beyond our present.
More reads
- Expressing temporality in interfaces
- Principles of Animation Physics [PDF]
- Communication with Motion in User Interface [PDF]
- Defining microinteractions: animation in UX [PDF]
- Mass and Motion in User Experience
- Google Material Design Surfaces
