Designing for screens is managing that change. To put a finer head on it, the grain of screens is something I call flux—

This area is most interesting to me, because it overlaps with what I do: websites and interfaces. Medium level flux is assistive and descriptive animation, and restructuring content based on sensors. It clarifies interactivity by allowing elements to respond to that interaction and other, measured conditions.
— Frank Chimero (2013) What Screens Want

This is a very important part. In these last years it’s developing a new critical language for interaction designers, and this is the language of movement.

Frank does a wonderful job here describing it in terms of flux and three levels of it (low, medium, high) and the importance of that medium level.

Medium flux defines meaning. We are now designing meaningful animations, using motion to convey a message. This is a new world, to the point that people still dismiss animation as superficial eye-candy.

Now, this doesn’t want to dismiss that there are also delightful animations, or animations that are pleasurable for the user without detracting from the usability of the tool. Flash animations are famous for being slow, annoying. Even when done well, they are mostly animation in the sense of a movie, to generate passive pleasure.

A delightful and meaningful animation instead is strictly related to interaction, and that’s why it’s interaction design and not just motion design. It carries three characteristics:

1. Conveys meaning: it helps the user understanding, like the slide animation on mobile that explains you the hierarchy of the visual interface, the genie animation you have on Mac when you minimize a window and so on.
2. Gives delight: a meaningful animation that is however choppy or with the wrong kind of dynamic will feel weird, even if it conveys meaning. Delight must be present as well.
3. Stay out of the way: it must not get in the way of what the user wants. If the animation takes too long (and often too long means more than 0.2 seconds) I feel the interface is slowing me down. That should not happen.

Once we start getting this in our vocabulary, things can improve. Today it’s almost impossible to convince a client that an animation can be a good replacement – replacement, not addition – of a visual static element (i.e. navigation, position, wizard).

We also need new tools. Chimero explains this very well a little later:

I’ve worked on a several responsive projects in the past couple years, and it’s always been a headache—not from technological limitations, but because there weren’t suitable words to describe the behaviors I wanted. I had to jump into code, and waste time writing non-production markup and CSS to prototype a behavior so the developer could see it. That’s really wasteful, especially if all you needed was a word for the behavior. The community has been putting a lot of effort in developing tools that allow for quicker prototyping, but explaining yourself can happen multiple ways. Clear wording with consistent meaning reduces the number of prototypes you need to build, because a simple word will do.

• Fold
• Squish
• Flip
• Pan
• Jump
• Morph
• Sort
• Scoot
• Grow

The part above for me is interesting because he was often quoted as one of the advocates of the “designers should code” camp (vs my know how / know what), while now with this piece, and specifically the part above, he explains better the different design moments. I really appreciate this given his visibility in the digital design world.

In general, the whole article is really excellent, and it describes beautifully the importance of screens, even more with an eye to the future. It’s definitely worth reading.