Understanding temporality in human-computer interaction
Maintaining digital homeostasis.
“From the never-ceasing flux around us, we carve entities out of space and out of time: people, places, things, events. We freeze them, turn them into words and concepts. We change those moving things into static things so that we can act on them with our minds.” — Tversky, Barbara. Mind in Motion
We freeze information to make sense of it. Any user interface is evidence of this and its utility. But what of a constantly changing sequence of information spaces as is the case in human-computer interaction? How do we make sense of sequence? An ongoing sequence of information, objects, representations, tasks, goals? How should we? And why?
Temporal Interfaces
After working on motion design system initiatives for companies like Google, LinkedIn, Intuit, and BMW Technology Corporation, I’ve grappled with important nuances of motion design as they relate to human-computer interaction.
The following is to deconstruct User Experience (UX) Motion Design, its parts, the sum of them, their value, and meaning. Explained in the following sections:
- Defining Digital Homeostasis
- Illusion from Sequence
- User Experience Motion Design
- Conclusion
Defining Digital Homeostasis
Every user interaction is a risk; The sequential nature of digital experience is prone to user disorientation, frustration, confusion, and cognition. With every interaction of an interface, the user is repeatedly forced to familiarize themselves with new information promptly displayed in front of them. With every familiarization, the user’s focus and sense of control is potentially compromised.
I argue that UX Motion Design is the regulatory mechanism to correct for the disruption inherent in every user interaction; Properly executed, motion replaces a user’s deductive reasoning with perceptual awareness (explained later). Most critical, this motion design mitigation is the only way to protect the user’s sense of control, focus, and flow.
The regulatory utility of motion design highlights the essence of temporality in human-computer interaction — Creating an uninterrupted perception of control.
Extensions of Perception
“Just as the icons of a PC’s interface hide the complexity of the computer, so our perceptions usefully hide the complexity of the world, and guide adaptive behavior.” — Donald Hoffman. The Interface Theory of Perception
To fully understand the relationship between temporality and interaction is to acknowledge the conceptual overlap of digital and base reality as they relate to human perception.
Motion design plays an increasingly fundamental role in the emerging technological paradigm; Extended reality, virtual reality, and all immersive experiences where base reality is replaced with a digital continuous flow of information spaces, sense of control is paramount. Sequences of reconfiguring information spaces are not only unavoidable, they make up the entire matrix of digital reality. Design is the only means of gluing these information spaces together to create the seamless cohesion of digital experience. In that sense, if the static user interface were to represent a singular thought, UX Motion Design would be the continuity in a stream of consciousness.
“In the distant future I see open fields for far more important researches. Psychology will be based on a new foundation, that of the necessary acquirement of each mental power and capacity by gradation.” — Darwin, Charles. The Origin of Species
Digital user interfaces are more than just visual displays; They are the evolving extensions of our perception. To that end, as nature has defined the ways our brain makes sense of the environment, UX Motion Design now dictates the narrative and cohesion of our digital sensory experience; To inverse Donald Hoffman’s Interface Theory of Perception, as space-time itself is a user interface, in the immersive digital universe, the user interface is space-time.
Consequentially, to understand perception as a user interface or controlled hallucination shaped by evolution to enable human beings to successfully manipulate base reality, the question arises: By what means should our digital hallucination be controlled?
Illusion from Sequence
Whenever we watch a video, we are actually witnessing a sequence of images played back at a certain frequency to create the appearance of moving objects. Not dissimilar to the turning pages of a flip book (Diagram 1).
The movement in animated user interfaces are no different (Diagram 2); The interface is simply displaying a sequence of images over time thereby creating the appearance of motion.
Therefore, animation isn’t actually motion at all; It is the illusion of motion and as we’ll see, illusion can be leveraged.
Narrative from Illusion
In illusions are opportunities. We can see in Diagram 3, there are two states. A circle and a square. Ostensibly insignificant.
But after adding more images to the sequence (Diagram 4), the result is something more important than the appearance of motion: The establishment of narrative — The shape has transformed.
This narrative implies a relationship between the two states — The square is the circle.
It’s this concept of illusory relationships that has profound implications for human-computer interaction; In Diagram 5, we see another two states — A relationship not very apparent.
But when we add motion (Diagram 6), the relationship between both states is obvious. More importantly, the manufactured relationship is perceptual. Not deductive.
The sequential nature of animation is what bridges temporality to human-computer interaction: Animation is a sequence of images viewed at a certain frame rate — Human-computer interaction is a sequence of information spaces navigated by a user. This conceptual overlap is key in strategically manipulating information space changes to improve user experience.
User Experience Motion Design
UX Motion Design is the strategic choreography of reconfiguring interface elements upon user interaction so to hide latency, remove uncertainty, guide user attention, and create spatial/navigational understanding.
This type of motion design can be broken down into four categories: 1. Gesture confirmation, 2. Motion Affordance, 3. Hiding Latency, and 4. Spatial Relationships
These four categories reflect the specific regulatory mechanisms that shield user control from the various forms of disruption (latency, uncertainty, confusion, deduction) triggered by interaction.
1. Gesture Confirmation
Users want to know that their input was registered at the exact moment of interaction; Interfaces that surface no visual confirmation upon user interaction will create user uncertainty. Properly timed confirmation communicates to the user that their input has been registered and corrects for the disruption of uncertainty.
For example, diagram 7 shows a degree of uncertainty is triggered at the point of interaction.
Diagram 7 shows the user taps the input control but with the delay, it’s not clear if the tap gesture was registered. Also, it’s not clear if the user tapped on “9,181 likes” or the username “all__minimal” as the point of interaction is aimed right in between the two clickable areas.
However, if we add gesture confirmation in the form of a press state that remains pressed until the operation is successful, all uncertainties are alleviated.
The user now sees their tap gesture registered and it is clear that “9,181 likes” was selected of the two clickable areas.
2. Motion Affordance
The human mind is wired to see things that move; On a static user interface, the user will see anything that moves. The user’s attention can be commanded and controlled; Signifiers can be emphasized and the user can be guided.
In the below diagram, motion design is drawing the user’s attention to the change in numeric value.
In comparison to the shopping cart on the left, animation makes the state change much more obvious. This example highlights the importance between static abrupt change and animated change.
3. Hiding Latency
Motion Design can be leveraged to change the user’s perception of delay. Properly done, users will not feel the cognitive burden of a slow system.
By simply animating the opacity property value, the conveyance of activity is much more apparent than a static line of text.
The nature of animation dictates its implication; In diagram 11 below, the temporal behavior of the loader communicates different statuses.
The loader on the left is indeterminate and communicates an undefined loading time whereas the loader’s animation on the right is determinate communicating a defined waiting time; The subtle differing nature of the animation denotes drastically different information.
Optimistic Feedback
Manipulating the time-based nature of graphic affordance sequences is also critical; Diagram 12 is an example of “optimistic feedback.”
The text “nvm” looks to be instantly part of the message thread. In reality, “nvm” has not successfully been sent until the delivery receipt says “delivered” — The sequence of visual affordances has been manipulated to convey the appearance of a successfully sent message even though the operation is not yet successful; To preserve the user’s sense of control, they believe the text was successful (unless there is a failure).
4. Spatial Relationships
The sequential nature of information spaces can be leveraged to streamline user navigation and reduce cognitive load. By properly choreographing the nature of newly surfaced information, spatial metaphors can be established and ultimately, create navigational implications.
In designing visual cues that remain unchanged in the transition between two states, the resulting continuity suppresses users’ cognitive centers and instead, leverages users’ perceptual awareness to track the mapping from state to state in the digital “environment.” Diagrams 14 & 15 demonstrate not only perceptual awareness of newly surfaced information, but navigational suggestions.
More important is the necessity that spatial interfaces mimic the nature of base reality physics. Humans expect the nature of the future to reflect the nature of the past. Therefore, replicating the familiarity of a physical model will enable users to accurately predict the outcome of their actions.
Conclusion
User Experience Motion Design is the regulatory mechanism that protects user sense of control from disruption caused by navigating information space sequences. Properly executed, image sequence choreography will replace deductive reasoning with perceptual awareness.
Temporality in human-computer interaction can be categorized by its different forms of utility: Gesture confirmation, Motion Affordance, Hiding Latency, and Spatial Relationships.
Temporal LLC
I founded Temporal LLC to be an industry resource for UX Motion Design Systems. Our mission is to leverage motion design to solve usability issues everywhere they exist.
Learn more at: https://www.tmprlux.com/
