Flex Article

Designing for Flex – Part 6: Guiding with motion

Transitions—motion that teaches

Designing effective transitions can be tricky. This section provides some principles and advice that will help you do so.

In the mid-nineties there were a number of interfaces based on overly literal representations of physical spaces inside the computer, Microsoft Bob being perhaps the most well-known example. These interfaces employed excessively decorative information design and interaction patterns that didn't translate well to the computer's input devices. All failed. Applying physical principles to the motion design of your application doesn't mean blindly copying reality. Instead, incorporate these principles into interactions that are appropriate for the device's purpose and capabilities.

Figure 6. Online "books" are cool experiments in UI technology, but most take the metaphor very literally. Users must drag pages halfway across the screen to turn them, a difficult task with a mouse. Besides, an appropriate information display for a physical book may not be appropriate for the screen—consider information designs that take advantage of computing technology, not ones that attempt to replicate designs in other media with different properties. Click play to see this example

Instead of trying to craft a "virtual world" inside the computer, use the motion properties of physical objects to guide your decisions on how your Flex interface elements should move. Keep track of where onscreen objects are located in each state and how they flow from state to state. Remember the properties of physicality discussed earlier; physical objects traverse the space between them when they move or change size. Persist the identity of objects in users' minds by smoothly moving or resizing them from their old location to their new one. When objects move off of the screen or otherwise become unavailable, allow users to retrieve them by navigating to the space they went to.

Figure 7a. The hypothetical insurance claim form shown above uses motion effectively to create the illusion of navigating through a physical space. As the user moves from one page to the next, the old page slides out while the new one slides in. Click play to see this example

Figure 7b. The motion transitions in the insurance form help the user understand the system's model for how the form is organized. Because pages slide to the left and right as the user proceeds through the wizard, she builds up a mental model of the currently visible page sitting alongside the other form pages, and moving to the next page merely advances the viewing area to the next page in the list.

There are cases, however, where you must bend the rules of physicality for the purposes of comprehension. Many screen elements are visually complex—panels contain many controls, diagrams contain many shapes and colors, lists contain a variety of complex content. As a result, literally moving or resizing them as-is may appear visually disturbing and confusing; too much is going on at once for users to process (not to mention that from a technical perspective this may be difficult to achieve without adversely affecting performance). To fix this, employ animation proxies in place of the object itself during the transition. Adobe Connect, for example, fades out the content of panels before rearranging them when the user switches layouts. Although it is acceptable to temporarily simplify the object during the transition, it must still retain enough of its visual characteristics to be recognizable as the same object. Otherwise you risk sending the wrong message to the user. Physicality must always be in the service of aiding comprehension; if it gets in the way of understanding the interface, understandability should win out.

Figure 8. Adobe Acrobat Connect employs proxies when animating pods. Notice how the contents of each pod fades out before the pod moves and resizes, then fades back in at the new size. Click play to see this example

When employing a physical metaphor, some state transitions may contain many shifting objects, resulting in quite a bit of movement in a short amount of time. All this motion occurring in parallel risks overwhelming the user, which can be worse than an abrupt screen shift. To avoid this, sequence the movement in a state transition into logical chunks that overlap only slightly if at all. Each section of the sequence should express one concept only. For example, if the user deletes several items from a list, fade out the items first, then slide the remaining items up to occupy their former space. If a screen transition involves rearranging some panels in the layout and introducing some new panels, move the existing panels first, and then fade in the new ones.

Figure 9. Adobe Media Player uses sequenced transitions throughout its user interface. Notice how the left panel contents fade out, then the videos move, and finally the right panel contents fade in. Each motion overlaps slightly but the overall transition is sequenced in a way that makes it understandable. Click play to see this example

You can also sequence your state transitions to help the user understand how to complete their task. For example, if a user will generally want to enter information in a set of panels in sequence, introduce them to the layout in this same sequence to reinforce this ordering.

Page 5 of 6

Previous Page

Next Page