Mind the Gap

Why transitions are important when creating an effective user interface.

Digital animation and user interface (UI) designers owe a debt of gratitude to a horse bet. The year was 1872, and Stanford University wagered against a former governor of California that a galloping thoroughbred would actually push off the ground and soar through the air — almost leaping forward — while it carried a rider. “Unsupported transit” is what they called it. Most people, including Leland Stanford, the former governor, racehorse owner, and as it turns out, founder of his namesake university, thought this was pure fantasy. How could a beast as large and fast as a horse not have at least one hoof on the ground at all times?

The problem with Stanford’s assertion was that a horse in full gallop ran too fast for the human eye to see the position of its legs. So to prove its point, the school hired an English photographer named Eadweard Muybridge, who was beginning to experiment with a technology involving photographic techniques and electrical triggers. He set up 24 cameras, about two feet apart along a 20-foot stretch, and he rigged trip wires to the camera’s shutters. Then he had a horse and rider gallop through the trip wires, allowing the camera to snap photos a thousandth of a second apart. The photos emerging from this setup showed that the horse’s hooves were indeed momentarily all off the ground at the same time.

The Horse in Motion project proved a fairly mundane physiolo-gical point about horses, but it also addressed something much greater — and much more useful for 21st-century design. Using technology, Muybridge succeeded in providing insight into what was too fast for the human eye to follow in real time. For digital UI designers this is an important lesson to learn. Just as Muybridge used high-speed cameras and slow-motion footage to effectively perceive and understand what was actually happening when a horse ran, designers are using animation and transitions between states or functions in interface design to provide a better experience for the user. What the eye has trouble following, the mind has trouble understanding.

Transitioning smoothly between changing interface states using animation is not a new design theory or practice, but current technologies and tools have made it far more sophisticated. The most basic example is the animation you see when a Web page is “loading.” The hourglass sifting sand and the spinning color wheel are old examples. These days, Web designers have created elaborate sites in which elements in the UI move, resize, and cross fade in a much more holistic and smooth flow. The same is true for mobile interfaces. Apple’s iPhone features a number of elegant animated transitions such as the “wheel” animation for setting a time or the “turning page effect” you get when starting a new “note.”

These kinds of transitions are a powerful way to make users feel more in control of what they are doing. It allows users to understand the relationships between different states, and to observe the link between their actions and the responses of the interface. Why is this important? Like the horse enthusiasts of Muybridge’s time, users of digital devices want a full understanding of their experience. Also, users don’t want to be distracted from their tasks with staccato or clunky exchanges between tasks. They want a seamless, harmonic experience.

For UI designers, creating transitions and motion into the interface allows us to convey this kind of continuity. These animations also instill impactful emotion and meaning. Would the iPhone excite as many people if all it did was flip between static UI screens? Probably not. The pinch-zoom on a photo, the sense of zooming back out to home screen, the little bounce-back of a scrolling list when it hits the end — these small animations in the UI are delightful, and they evoke a profound emotional response to the product when you use it.

Creating UI at this level of detail — and doing it well — is hard. Designers first have to have a deep understanding of user goals so they can nail the frequent paths users take through the interface. Then they have to design those paths in detail, as an end-to-end flow. This kind of design requires one to imagine what the empty, undefined moments between one screen and the next should feel like. Failing to infuse these spaces with emotion will leave users with broken experiences and seams that confuse or trip up their flow.

Much like Muybridge’s Horse in Motion illuminated an obvious truth, designers who visualize and look closely at the UI flow can create and deliver quality in the product experience. We see a similar attention to detail and end-to-end “flow” in other industries. Consider car design. The entire experience of walking up to a car, opening it, getting in, starting the engine, having all electronic systems in the car activate, and driving off is holistically choreographed for sensorial pleasure. Gauges activate, lights fade on and dim, sounds fade in, everything in a very deliberate, flowing sequence that is both welcoming and convenient. It is this level of attention to detail that designers and developers need to aspire to in their interface design. Think beyond the static screenshots and even beyond the interface itself. As Muybridge proved in the 19th century, the world is not digital, even if our underlying technology happens to be.

Tjeerd Hoek is an executive creative director at frog’s Seattle studio.