Introduction

Attitudes toward (digital) visual design have been evolving since the first raster graphics illuminated the original CRT screens of the 70s and 80s. Unlike other artistic fields, the trends that emerge in digital design are tightly bound to the evolution of the tools we work with.

We’ve seen device capabilities improve from the CGA’s limiting 320x200 resolution through VGA (640x480), SVGA (800x600) with display technology now quickly moving to 4k and beyond.

Visual Design Parallels

Motion design is experiencing similar growing pains that visual design experienced in the 90s and 2000s. It’s worth looking back at the way that visual design evolved to help us understand the current state of motion design.

A typical early 2000s website design

It’s only natural that designers initially abuse new capabilities before a more sophisticated design language evolves. Anyone who designed for the screen in the late 90s and 2000s (web and CD-ROM) will remember incredibly overwrought designs which featured drop shadows, bevels, lighting effects and of course no consideration for white space. This was all a natural consequence of designers wrestling with a new medium and reveling in the glory of all those pixels!

Flat Design

Example of flat design

Love it or hate it, Flat Design now enjoys overwhelming mind-share among designers. All major computing platforms have embraced variations of this minimalist design language (Android, iOS, OSX, Windows, Windows Mobile). It also dominates the fast paced world of web design.

Flat design is a demonstration of the maturation of visual design thinking. It is a natural progression which is partly driven by trends and fashion and partly a reflection of an industry of professionals finally coming to grips with the digital medium.

Motion Design

The current state of motion design can be compared to the Drop Shadow Era of visual design.

Animation capabilities have improved dramatically across the web driven by CSS transitions, hardware accelerated transforms along with coming standards such as JS Web Animations

In addition to this, increasingly capable, multi-core, multi-gigabyte, high DPI mobile devices can now comfortably output 60fps animated UIs.

Animate like it’s 1999!

Given the early state of UI motion design, it’s only natural that designers are tempted to add animation as visual flair, not unlike, drop shadows or bevels.

I’m confident that, unlike visual design, it won’t take 15 years for motion design to mature.

Overuse of Animation

Gratuitous animation can be seen everywhere and it’s not only limited to amateur designers. As a user it’s easy to spot this kind of animation. It’s the animation that gets in your way. The animation that makes you furrow your brow in frustration as it stands between you an your intended goal. As a designer you need to realize that your UI is not entertainment. Nobody is firing up your app (or website) to delight at all its awesome popup animation wonder!

Example of Poor UI Animation

OS X Full-screen Animation

There are countless examples of poor UI animation across both desktop and mobile. The OS X transition animation used when moving from windowed to full-screen mode is one such example. It’s particularly baffling since it’s such a central feature of a flagship product produced by a company known for its cutting edge design sensibilities.

Some issues with this UI animation include

It’s slow

It’s unnecessary

It’s not customizable (without command line hacks)

How do you know when your UI animation is annoying? People write blog posts complaining about it. There are countless posts and forum questions dedicated to how to speed up or disable this interaction which is a good indication that the animated transition serves no purpose other than to irritate users, i.e. a UI motion design cardinal sin.

Motion Design Case Study

We’ll use a simple design that comes from some recent client work I did. This interaction incorporated a number of poor design choices.

An example of Poor UI motion design

Issues with this design include:

a mask that blocks the UI

no indication that an operation is occurring in the background

slow animation

unnecessary animation

One of the most annoying aspects of this animation is that it occurs after the time consuming network request completes, thereby adding additional wait time for the user.