Arrows: Just as Important as Boxes

In a 2012 UX Day presentation at the HFES Annual Meeting, Bill Buxton shared his critique of many student projects. He summarized that too often focus was only given to the “boxes.” The user interface screens were presented with elaborate detail and a highly considered selection of widgets and elements. However, the “arrows” were often just an afterthought. The transition from screen to screen barely mentioned. He implied a transition was not considered, or the final product had a proposed animation that was over-the-top and distracting.

A colleague of mine recently returned from the Magic Kingdom in Walt Disney World and mentioned a different kind of transition. To paraphrase him, “what I really love is when walking from land-to-land, everything seems to gradually change.”

To be honest, I had never consciously noticed this. My bet is that most park-goers do not realize it either – and that was by design. There is no strict border between Fantasyland and Liberty Square. And yet, within a few steps, the experience completely changes without any jarring awkwardness.

This article’s goal is to highlight the value and use of transitions within user experiences.

The Disney Cross-Dissolve

Walt Disney recruited the original Imagineering team from his staff of animators and movie makers. During the development of Disneyland, it was natural they reuse some storytelling methodologies they were familiar with.

In Disneyland Inside Story, Imagineer John Hench explains, “A film makes sense to the audience because the director takes them from scene one to scene two and so on, in a logical flow of events and relationships. If the director were to leap from from scene one to scene fifty-two, it would be like sending the audience out for dinner in the middle of the film.”

The challenge in the parks is that each land has a completely different theme, just like those divergent scenes in a movie. Disney did not want the guests to experience an abrupt transition as they moved around the park – to be whipped from the nostalgia of Main Street to the jungles of Adventureland without easing into it. A cross-dissolve of the senses was required.

In John Hench’s own book, he describes this solution:Three Railings in Disney

As guests walk from Main Street into Adventureland, walkway surfaces change from concrete to cut stone, wrought-iron hand railings give way to bamboo, Main Street’s music yields to animals’ growls and howls. A blanked bridge highlights the final moment of the transition. There is no confusion for guests – the soles of their feet tell them where they are. Their hands feel it; their eyes and ears know it, too. They are thousands of miles away from Main Street, USA.

The Imagineering Disney book specifically calls out additional design elements to make it a smooth transition:

… there is a gradual blending of themed foliage, color, sound, music and architecture. Even the soles of your feet feel a change in the paving that explicitly tells you something new is on the horizon. Smell may also factor into a dimensional cross-dissolve. In a warm summer breeze, you may catch a whiff of sweet tropical flora and exotic spices as you enter Adventureland.

When the distances between lands was long, it is not uncommon for the transition to contain other elements to entertain guests. If the main attractions are the “key frames” in an animation, various “in-betweens” like the Snow White Grotto are used as a respite from all the action. This picturesque wishing well is tucked in an alcove by the castle waiting for guests to stumble upon it in their journey.

For those who have never been to a Disney park or need a reminder, the following video provides one example. It begins in the Magic Kingdom’s Liberty Square with colonial styling and patriotic music. And, two minutes later, you are in the old-west-themed Frontierland with My Darlin’ Clementine playing in the background.

Visual Momentum

Early filmmakers might not have had a background in cognitive psychology, but their editing techniques were supplementing human perception in an important way – benefiting those first Disney Imagineers and today’s interaction designers.

A 1978 article by Hochberg and Brooks coined the term, “visual momentum” to describe an important consideration when linking together various shots in cinematography. You have likely noticed that when watching a filmed scene play out, multiple different camera angles may be used to capture different dynamics and to keep audience attention. The danger is that the observer will become lost or confused when each cut takes place. Therefore, scenes with high visual momentum will have consistent visual cues that make each seem coherent and part of a whole. This may mean taking steps like having an establishing shot of the whole scene or avoiding inconsistencies like different hairstyles between shots.

Woods (1984) was one of the first authors to begin to draw a between visual momentum and user interfaces. Even if his article was before the graphic horsepower and animation whiz-bang-ery that a “simple” device like an iPhone can now provide in our pockets, interfaces were being developed with multiple screens. Just like scenes in a movie, it was important to tie these together.

Wickens (1992, recent) summarized four principles to achieve higher visual momentum which are still relevant today.

1) Use consistent representations. Between multiple states, objects should not fundamentally change in-nature. For example, each page of website or app should have consistent visual branding and elements – otherwise a user may think they have left your site.

2) Use graceful transitions. This principle stresses the nature of the animated change. Just like a camera panning smoothly across a scene, transitions in a user interface can pan or zoom with similar fluidity. This video from the Disneyland Explorer iOS app shows an extreme example of transition – mimicking the park itself, the entire user experience is built on smoothly sliding across the park environment.

3) Highlight anchors. Between multiple states, having some consistent element can help provide a frame-of-reference. This may be as simple as a logo or home page link always found in the same location. And, if an animated transition is taking place, these anchors should overlap in multiple frames to draw attention to where the user is being taken. A simple example of this is swiping through pages of an ebook. During the transition, the user can see both pages simultaneously, immediately communicating to the cognitive system where the pages are going.

Swiping pages in iBook

4) Display continuous world maps. While Wickens approached this principle from an aviation navigation standpoint, navigation menus in web pages or apps often show your location in the overall information space. Even a simple scroll-bar (now rapidly disappearing from many UI’s) can provide a sense of place.

When to Use Animated Transitions

Microsoft guidelines defines their transitions as “animations used to keep users oriented during user interface (UI) state changes and object manipulations, and make those changes feel smooth instead of jarring.” Advances in graphical capabilities means UX professionals no longer have to ask if we can do animated transitions, the question is now whether we should. Listed below are common situations where it may be appropriate.

1) Provide an ongoing sense of orientation. When a user is in-control of an action, often through direct manipulation, animated transitions allow the user to stay in their task flow. For example, not too long ago, paging through a content (like text in a word processor) resulted in complete page refreshes that required the user to relocate their reading location. Now, smooth scrolling allows the eye to track the target as the content moves up or down. Research indicates this decreases task times and increases subjective satisfaction. This same benefit theoretically also applies when swiping through content using gesture-based UIs.

2) Explain the results of an action. Other times, a user may initiate an action, thereby handing control over to the computer. In these times, an animated transition may reflect the result. The classic example is minimizing an application window. Both Microsoft and Apple operating systems animate the window disappearing to the bar/dock area – the latter even patenting their “genie” animated effect. A similar (if less elegant) effect is now used in multiple applications to show anything from panels docking to email messages flying into folders.

Minimize an app panel

3) Shift users’ mental state. You may specifically want the user to prepare for a new task ahead. This may take the form of a transition that transforms two different visual styles or even something subtle like a pause. Like a period between sentences, Follett suggests that: “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.”

4) Distract users from some other event. Like a magician using flagrant motion to distract the audience away from their subtle trickery, so too could animated transitions be used in software. Typically, animations can take significant processing power. However, some systems, like video game consoles, can make use of leftover power to show videos and other content to entertain users while the next level loads.

5) Add personality and character to the interface. While dangerous if this is the sole reason for introducing animations into a product, this consideration could help reinforce the experience a brand is trying to achieve. When Microsoft introduced their new mobile OS, they included a number of elegant transitions which helped reinforce the message that this was a significant step beyond their prior product (example video from Luke Wroblewski below).

Further Reading

Sketching and storyboarding transitions. A great introduction that introduces many best-practices for anyone to follow.

Animation for user interfaces. The prior article referenced this talk. If you have a spare hour, watch this video to see many creative techniques actually inspired by early Disney animation.

Collection of UI transitions. This web site has an animated repository of many of the transition patterns you may want to consider using.

Thanks For Visiting

As always, thanks for reading! I would love to update this page with more videos of transitions you think are particularly well-done. Please feel free to suggest ideas.

Lead photo from Tours Departing Daily
Add Comment Add yours ↓

Your Comment