In a post titled “Using Motion to Express Change,” Gutenberg designer and engineer Matías Ventura takes a deep dive into how animation can be applied to interfaces to replicate realistic motion. These animations can sometimes more clearly communicate changes, particularly in relationship to the action of moving or reordering items on a page.

“Even though the instant transformation of the interface is accurate it may not be the clearest expression of the change that just occurred,” Ventura said. “The relationship between intention and effect might become harder to grasp. Motion can be a great aid in communicating relationships and clarifying the changes experienced in a more intuitive way.”

This creates an interesting choice for an interface designer. Although instantaneous changes are possible to implement, they may require more time for the user’s brain to process. In the case of an editor, any added cognitive processing can pull a user out of the flow of writing. Ventura sets a good practical rule of thumb for determining if an animation adds value to an interaction:

One could say that an animation is worth being present if the clarity of change it provides is greater than the time it would take to adjust cognitively to the new state in its absence.

Ventura illustrates this concept with two video demos in his post – one showing how block reordering currently looks in WordPress’ editor and a second with an example of how it could be improved with subtle, tasteful animations. It’s an early prototype but very convincing:

When Gutenberg was still in the selling phase before being merged into core, some said that moving forward was simply a matter of retraining your muscle memory to work with the new editor. However, at that time there were still a number of markedly flawed interactions that didn’t feel natural and were even jarring for the user. The legacy editor didn’t have blocks to reorder or many of the other interactions introduced by the new block paradigm, so there wasn’t much prior context for comparison.

User reviews have complained about the cognitive load that Gutenberg adds and have continued to identify problematic interactions with the core blocks. Unfortunately, in many heated exchanges that took place in comments and discussions prior to WordPress 5.0’s release, these concerns were often brushed aside as coming from people who were resistant to change.

Many of the reviewers may not have had the right words to communicate what it was they were experiencing, but the cognitive load may be one of the strongest reasons why the Classic Editor plugin has more than 5 million active installs.

Matías Ventura’s proposal to add motion to express change in the editor has the potential to solve some of these unintuitive interactions. The Gutenberg repository now has an issue dedicated to exploring and discussing the use of motion to add clarity to the action of reordering blocks.

Ventura’s post is an encouraging read that demonstrates the thought and craftsmanship that go into architecting an interface that is required to meet the needs of millions of users. If you have been impatient with Gutenberg’s progress, as I have been, it’s important to recognize that these kinds of refinements to interactions take time to percolate. Replicating realistic motion comes from contemplating how we interact with the known world and understanding how that informs users’ digital expectations.