También escribo en Español

WP Block Talk

Tune in for the first WPBlockTalk tomorrow, a free virtual event with speakers from all across the WordPress community. Matt Mullenweg and I will start by presenting on the latest adventures of Gutenberg and hopefully doing some live demos, so there could be dragons 🐉

Mercury and Argos

It tends to be common in the aching philosophy of our time to hide a treasure and then celebrate its finding as a wondrous discovery of intellect. This error seems particularly prevalent in the world of philosophy of art, where the violence of reason is wielded as a hammer to shape reality.

Arthur Danto, for example, characterized painting — ever since the Renaissance and until the avant-garde movements beginning at the turn of the 19th century — as a practice in the pursuit of increasing realism in art. An imitation of the world seeking always higher degrees of fidelity. What concerned artists, Danto would say, was depicting the world as it looked. This allowed him to state there was a fundamental conceptual shift when art “learned” that it could be more than just imitation.

On principles of Renaissance theory, paintings were windows on the world — pure, apparently transparent openings through which one saw the world as if from outside. So a picture drew its beauty from the world, ideally having none of its own to contribute to what one saw, as it were, through it.

Arthur Danto, Abuse of Beauty, 2002.

Such a resolute conviction in his theoretical model (that illusionism was the primary objective of painting) shows a disregard for the actual reality of art and those that made its history. Leonardo wrote among his notes for a book on painting:

The painter who draws merely by practice and by eye, without any reason, is like a mirror which copies every thing placed in front of it without being conscious of their existence.

Leonardo da Vinci, Treatise on Painting.

It is also evident when looking at some of our greatest painters that the development of their craft was not one of increasing fidelity but often quite the oposite. Their earlier work tends to exhibit more faithful attention towards depicting details of the world than their later work does. At their zenith and the more they dominated the medium, the representation becomes more dynamic, portraying elements with varying degrees of emphasis in a symphony of shapes.

Velázquez final works display this quality with extreme eloquence and sensibility. His forms attain both freshness and aplomb through his extraordinary and varied brushwork. Composition becomes tangibly cinematic built out of impressions of reality. That ability to synthesize and express couldn’t be further away from a quest to depict the world as if paintings were mere mirrors standing in front of it.

Unfortunately, three of his compositions on mythology were lost centuries ago to the fires at the Alcázar of Madrid, with just one remaining: Mercury and Argos. It is a magnificent work that should elude on its own the mischaracterization of mimetic progress as a valid project. It contains that ingredient which eludes the philosopher chasing conceptual simplification: that porosity and style in expression that shine over pale and cold imitation.

Using Motion to Express Change

A lot has been written about the concept of visualizing the user interface as a reflection of the application’s state. Ushered in the last couple years by an emergence of code libraries — leaning on declarative patterns that describe the what instead of the how — that seek to absorb the task of managing changes so that programmers can focus on expressing the different states of their interfaces. This mental model can drastically reduce the complexity of managing views as changes occur through time.

Such a paradigm works particularly well in reducing the overhead of having to imperatively apply updates to an interface as the result of user interactions. However, there is an effect that has been generally at odds with this stance: if the interface is an expression of the application state, then changes to the state tend to be experienced discreetly. That is to say, the progression of change is perceived instantaneously by the viewer.

Sometimes this is alright and a desired outcome. Others, though, it can lead to an unintuitive experience as the change becomes abrupt and disconcerting. There is no trail explaining how something changed and the difference between the states has to be elucidated by the user, which can suppose a considerable cognitive burden that distracts.

Even though the instant transformation of the interface is accurate it may not be the clearest expression of the change that just occurred. 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. All in all, we experience reality — quantum substrate aside! — as a continuum that flows through changes. Moving interfaces can help people connect how A transformed into B.

In the realm of the digital, this has been made particularly evident with tactile devices where gestures and changes are intertwined in their cause and effect. This can be vastly more intuitive for people as it emulates more tangibly the fabric of reality people are used to interacting with.

Consider the case of a list containing a set of items: the action of moving, reordering, and so on, doesn’t just affect the single item being acted on but the rest of the set as well, particularly the one it is “swapping places” with. Reality conveys to us that in order to put something in the place of something else both things have to move. The change in overall state for the entire group can be harder to grasp by just changing the order instantly. It takes a moment to reorient. Transitions and gesture based interactions generally help connect these two states in a way that makes the interaction (the “what just happened”) more immediately understandable.

Yet there is also a tension between communicating clearly and taking too much time to communicate. Motion, wrongly applied, can lead to a feeling of slowness and unresponsiveness. Particularly if the animation is divorced from the interaction itself (its intensity, velocity, direction, etc). For example, when turning a light on or off, it is generally not necessary to describe the changes in an artificially delayed way. The relationship between intention, effect, and familiarity is enough, even though the switch and the light might not be closely connected spatially. (Dimming a light, on the other hand, follows the speed of the action, giving a more tangible feeling of control over the change.)

Once an action has become extremely familiar, the transition between states can be less of a requirement and more of an impediment. That is one of the reasons why gestural motion is so valuable. It is not merely an imperative statement of the like “animate from A to B” but an actual mapping of the interstitial states resulting in motion that is concurrent to the action being performed — the faster the action, the faster the transition occurs.

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.

Beyond the cognitive load benefits, other studies show that animation can improve decision-making and even help people learn and remember spatial relationships. Animating between states can also help prevent change blindness. In short: animation can free up your brain power and make an interface easier to understand—the benefits can’t be ignored.

Val Head, A List Apart.

A Scent of Spring 🦋

It is challenging to bring realistic motion control to the web in a way that is ergonomic to implement and at the same time performant to execute. Mobile operating systems have baked many of these interactions in their frameworks and their gesture models so it is a more natural and expected resource, optimized at a more profound level. The web, however, remains a lot more barebones with its animation toolkit.

If declarative patterns proved convenient in managing complex application design, they have shown limitations in representing interstitial states as performant motion. For example, APIs that trigger re-renders for every calculated micro-state between changes, while offering great development experience is too much of a penalty to pay in common usage.

On the other side, one could connect time-defined transitions to different states of the interface. However, time based transitions can be quite a poor tool when looking to represent fluid interactivity or natural motion. They take duration as a parameter so they tend to escape the control flow and anchor of the view. They are harder to map to consistent interstitial states of the application. They become awkward to interrupt and they are unable to adapt to the intensity of the user action.

Generalizing physical motion through the application of motion curves is also quite hard to model reliably. Time based animation gravitates on its own fictional space. So when it comes to portraying realistic motion, traditional CSS transitions based on duration and easing curves are largely ineffective.

Some libraries have looked elsewhere to replicate realistic motion consistently and continuously. One such case is the use of “springs” to express natural motion as a result of tension, mass, and resistance rather than duration and curves. But physics-based APIs can be harder to integrate in any sufficiently complex interface system. It is not trivial to express these values within the encapsulation provided by render functions and still retain clean user interface components. This tension has gone largely unresolved in the web space.

The recent development of React hooks offers one way of encapsulating the physics of spring motion while retaining component views largely uncluttered by the added complexity. There is also a wonderful library called react-spring that integrates all these ideas, seeking to bring the benefits of physics based animation, declarative APIs, and performant solutions, that is quite a joy to use.

Browsers are also bringing more control into the user’s hands — like the reduced motion media query — to help tune the experience to the user’s needs or preferences.It becomes more feasible to use motion in sophisticated interfaces.

The tools available for both declaring interfaces and using motion to connect state changes are maturing to the point where it is both convenient and manageable to take advantage of them. It casts a more auspicious path forwards for bringing meaningful motion control to web interfaces with a good developer experience.

Demo!

Let’s bring it all together with an example. Consider the case of moving blocks in the new WordPress editor. The ability to move content is very powerful and a crucial part of the editing experience. However, the interaction itself can at times be disorienting because two blocks have instantly moved. Under the new state, there is a brief period of reorientation happening to make sense of where things have moved and what the new order is. This can be exacerbated when moving a group of blocks all at once. Bringing motion into this fundamental interaction could help explain it better.

The first video is how block reordering looks today in the editor. The second one shows the same interactions but using motion to describe the changes, giving a better sense of flow and clarity.

Note — this is currently an experiment and not indicative of something meant to be shipped as is. Also props to Riad for helping build this prototype.