Instantaneous transitions and blindness to change
Visual continuity in motion interaction
In the traditional web when a user clicks or interacts with any element of an interface, he arrives, after a blink, on a new page. The browser refreshes the page. There’s a flicker, or a blank screen for a very brief time in between the initial view before the action and the final view after it. It’s like a break, a gap.
Applying this traditional method of change to smartphones and tablets is time consuming and disorienting for users. Because of the limited real state sizes of these devices, users have to switch almost constantly between screens to read or view the content. A flicker screen in between all these switches eventually becomes very annoying.
There are three challenges or problems with this type of interaction: breaking realism, interrupting the user’s flow and causing cognitive perturbations.
- In the real world things don’t stay here, suddenly disappear and appear there as they do in traditional webpages. This abrupt jump doesn’t feel life like, it breaks the sense of realism. The new interaction paradigm takes advantage of the user’s previous knowledge from everyday life, understanding of physics and tries to emulate “natural” interactions. It attempts to replicate the physical world, recreating “realistic” interactions, or at least a believable illusion of reality.
- Page refresh creates an interruption in the user’s work flow, a break in the task and a disruption in the visual flow. If you are lucky and you get “in the flow” when using your app or webpage the “holistic sensation that people feel when they act with total involvement”. Any interruption can break that state, as Mihaly Csikszentmihalyi says in Flow: The Psychology of Optimal Experience. Our limited supply of attention make necessary minimazes any distractions to feel a seamless sequence.
- This is cognitive perturbation. The viewer is in an initial situation, there is a time lag, and then, the user is facing a new situation. Some cognitive psychologists call this cognitive destabilization. After a moment of destabilization, dealing with the new state versus the previous situation, the user must recover and re-stabilize. The user has to reconcile the previous state and the previous content, with the new state or view. The viewer must compare almost instantaneously the new situation with the old, understand what is the same as before and what is different now. This is what Jenifer Tidwel calls the cost of navigation in Designing Interfaces. Just as when you enter in a room, even a familiar room, you have to look around and figure it out, to orient yourself, when you arrive at a new webpage, you have to look at the elements and their characteristics (volumes, colours, layout, content, how to do what you wanted to do…) to realise where you are. Its takes time and energy, it has a cognitive cost. Even if you are familiar with the web site, ”the context switch forces you to refocus your attention and adjust to your new surroundings”. The viewer has to compare what it was like before and after and discover what is different. And this is a real problem because we are often blind to changes.
It’s easier to understand the blindness problem with images. If you try to identify the differences between the initial image and the second one in these pictures, you’ll probably find it difficult and it’ll take you a while to find them.
Thomas Davies and Ashweeni K. Beeharee say that change blindness “is the failure to detect a clear and obvious change that is within our field of vision when it occurs during a visual disruption — such as a blink” (The Case of the Missed Icon: Change Blindness on Mobile Devices).
It’s quite hard to see changes in our visual field if these changes occur either when attention is lacking, the change happens in a saccadic eye movement or if the change occurs with a brief interruption, like a blank screen or with a flicker between the two states. Appear when some event disturbs our visual continuity in the visual field.
Ronald A. Rensink in Change Blindness writes that “the key factor is believed to be the appearance of the blank fields. Normally, a change produces a motion signal at its location. But when a blank field appears it produces motion signals throughout the display. If these global signals are strong enough they will overwhelm the local signals, and make changes more difficult to notice”.
Remove the blank screen or flicker, and the change is easy to see, it’s clearly visible, immediately.
So, what if we get rid of that visual disturbance in the Web and in apps? This has happened, in a way, with the introduction of enriched interactions. Freer from the limitations of the previous technology, the viewer can have continuity, without going from one page to another. But now with animation, this can be more generalised, allowing the user to stay in the same view, thus maximizing continuity, reducing the sense of interruption and allowing the user to detect the changes in the interface.
At one point Apple recommended reducing full-screen transitions when designing for iPad, in order to have greater visual stability helping viewers track changes and to know where they are.
“Closely associate visual transitions with the content that’s changing. Instead of swapping in a whole new screen when some embedded information changes, try to update only the areas of the UI that need it. As a general rule, transition individual views and objects, not the screen. In most cases, flipping the entire screen is not recommended.”
We can see examples of these two approaches, the traditional and the one that uses animations to show visual continuity:
In the first case, after an abrupt change, the context switches, throwing off the users spatial sense. The user must resituate and remember which property has clicked. In the second, when the picture zooms up, filling the whole screen and afterwards shrinks back, the user is certain which one was clicked. It keeps the user oriented, allowing him to track the changes and the location while the picture is moving from one place to another. The interface provides continuous feedback, instantaneous confirmation of what’s going on .
With animation acting as connector of the different states, the viewer doesn’t have to think about where he is and what happened. Animation reduces his memory loading, his cognitive load of understanding the changes. He can focus on his task, on analysis and compare the hotels.
As E. Bruce Goldstein writes in Sensation and Perception “changes that occur in real life are often accompanied by motion, which provides a cue that indicates a change is occurring”.
Don’t break the visual continuity, don’t break the user experience continuity.
