Interfaces That Flow: Transitions as Design Elements

Beautiful Information

Discovering patterns in knowledge spaces

A column by Jonathan Follett
April 26, 2007

Actively influencing a person’s emotional state throughout an experience—in particular, his or her sense of anticipation, involvement, and desire for a certain outcome—is still an evolving concept in the realm of user interface design. However, this is very familiar territory for makers of music, film, television, and video games. While UX designers may not be storytellers, we can create more engaging product user experiences by learning from their examples.

Many UX designers—myself included—approach projects from a combination of information architecture, information design, interaction design, and visual design perspectives. These disciplines and their methods are fundamentally different from those people use to construct the continuous linear narratives we see and hear in film, video, and music. However, as the technologies for creating interactive user experiences become more robust—especially in the realm of Rich Internet Applications (RIAs)—we have an opportunity to draw upon a much wider visual vocabulary. This will also make narrative elements such as timing, pacing, and rhythm increasingly important. Using such design elements may enable us to move users from mere understanding to engagement and, ultimately, to immersion in our digital products and services.

Champion Advertisement
Continue Reading…

The Pause That Refreshes

The concept of a pause is lacking in many user interface designs. I’m not referring to an option to halt playback in midstream—as in an audio or video system—or the kind of delay users experience as a microprocessor churns through its calculations, but to a brief rest before the next step in a task. There is nothing more inorganic and unnatural than a system that has no state of rest.

Without question, the influence of the information age has decreased our attention span. We jump from link to link, from screen to screen. As UX designers, we may have a picture in our minds of the users of a Web site or application—people who are harried and busy and just trying to get their tasks done. And it may be for such a person that we design user interfaces. At some point in their tasks, though, users must pause to take a breath.

When used appropriately, a pause can create anticipation, clear the decks, and remove the clutter that competes for a user’s attention, enabling a user to more effectively focus on what comes next. The pause contributes to the effective pacing or flow of the user experience.

A great example of pacing at Design by Fire, the blog of Andrei Michael Herasimchuk, uses a well-timed fade out/fade in transition between content selections (shown in Figures 1 and 2). Once a user clicks a menu item, the current content fades out, then the new content fades in. The transition provides a pause in the action.

Figure 1—The current content fades out
Fade out
Figure 2—The selected content fades in
Fade in

In most, if not all forms of human communication, we use a pause to indicate passage from one state to another. In writing, we have paragraph breaks; in graphic design, whitespace; in oratory, silence; and in user interface design, we have animated transitions.

Consistency and Continuity

In the September 2004 article “Interfaces for Staying in the Flow,” from the Association for Computing Machinery magazine Ubiquity, Benjamin B. Bederson, an associate professor at the Computer Science Department and past director of the Human-Computer Interaction Lab at the University of Maryland, writes:

“Another approach that can potentially be used to reduce users’ sense of interruption is to use animation between screen states. While animation in general can be used in ways that are very disruptive, we have found that animation can be helpful if used to help users understand how the interface changes. The potential for this kind of animated transition is that it can reduce the cognitive overhead of understanding of the relationship between two screen states, thus enabling users to stay focused on the task.”

The Zune™ user interface provides an elegant example of an animated transition connecting screen states. The scrolling transition in Zune makes it easy for users to know where they are in its song list. As a user scrolls through an impossibly long alphabetical listing of songs on a device, the list becomes a blur. To keep users oriented to their location in the list as they scroll, the user interface provides continuous feedback, flashing the appropriate letter of the alphabet as the names starting with that letter pass by.

Figure 3—The scrolling transition in Zune
Scrolling transition

37signals popular project management Web application Basecamp™ offers another example of an animated transition that acts as a connector. When a user posts a new message, a yellow box initially highlights the message text, then fades out over time. The yellow highlighting effectively transitions the user from the input screen on which he posted his comment to the message board itself.

Figure 4—A yellow background highlights a newly edited message
Figure 5— ;The highlight quickly fades away
Highlight fades

Animated transitions can add a level of consistency to a user interface. Without smooth transitions, the jumps from state to state can be jarring to users, forcing them to reorient themselves to each new screen state.

Riding the Transition

It’s even possible for an animated transition to be an integral part of a digital product’s user experience. The online visual search application Grokker lets users view search results as an interactive diagram—a topical information map—and provides a great example of using transitions as a key component of a navigational system.

Grokker search results appear within a large circle, containing smaller circles within its circumference. Each of these smaller circles represents a subtopic related to the search, and in turn, can contain a group of nested subtopics within its boundaries, and so on. To explore the search results, a user selects a subtopic, then drills down into the information, both figuratively and literally, as the user interface zooms in on the selected circle.     

Not only does the zoom transition help keep the user oriented within the visual representation of the information space, it also enhances the search experience, providing an engaging visual metaphor for exploring results. Thus, the Grokker zoom transition is vital to the user experience of exploring search results.

Figure 6—Search results grouped within circles in Grokker
Search results
Figure 7—The Grokker zoom transition
Zoom transition

About animated transitions, Jenifer Tidwell, author of Designing Interfaces, writes:

“... when the shift from one state to another is continuous, it’s not so bad. In other words, you can animate the transition between states so it looks smooth, not discontinuous. This helps keep the user oriented. We can guess that it works because it more closely resembles physical reality—when was the last time you instantaneously jumped from the ground to 20 feet in the air? Less fancifully, an animated transition gives the user’s eyes a chance to track a location while the view changes, rather than try to find the location again after an abrupt change.”

The Rules of Engagement

There is a school of thought that says all animated transitions are bad. And, admittedly, there are innumerable pitfalls that one must avoid when transitions are poorly executed. Slow or overly elaborate transitions can ruin a user interface’s response time, derail a task flow, and cause a user to wonder, “Is this thing broken?”

Once the creator of music or a film engages an audience, he can bring them along wherever he wants to take them. But user interface design is not storytelling, and our audience of users is self-directed. It’s unlikely that most of the multidisciplinary practitioners who are responsible for information, interaction, and visual design will soon abandon wireframes and prototypes for scripts and storyboards. However, if UX designers can take advantage of the transition states between interactions and use animated transitions to introduce pacing to user interface design, we can help our audience connect more fully to their digital product user experiences. 

Principal at GoInvo

Boston, Massachusetts, USA

Jonathan FollettAt GoInvo, a healthcare design and innovation firm, Jon leads the company’s emerging technologies practice, working with clients such as Partners HealthCare, the Personal Genome Project, and Walgreens. Articles in The Atlantic, Forbes, The Huffington Post, and WIRED have featured his work. Jon has written or contributed to half a dozen non-fiction books on design, technology, and popular culture. He was the editor for O’Reilly Media’s Designing for Emerging Technologies, which came out in 2014. One of the first UX books of its kind, the work offers a glimpse into what future interactions and user experiences may be for rapidly developing technologies such as genomics, nano printers, or workforce robotics. Jon’s articles on UX and information design have been translated into Russian, Chinese, Spanish, Polish, and Portuguese. Jon has also coauthored a series of alt-culture books on UFOs and millennial madness and coauthored a science-fiction novel for young readers with New York Times bestselling author Matthew Holm, Marvin and the Moths, which Scholastic published in 2016. Jon holds a Bachelor’s degree in Advertising, with an English Minor, from Boston University.  Read More

Other Columns by Jonathan Follett

Other Articles on Interaction Design

New on UXmatters