Flex Article

Designing for Flex – Part 6: Guiding with motion

Transitions and effects

From this understanding of motion in the real world and its effects on humans, we can infer two primary uses of motion in application design:

1. To help users understand the workings of the application and increase its desirability by leveraging their instinctual understanding of physical objects, and
2. To focus the user's attention and provide effective feedback on the results of an action or to guide them to the next step in accomplishing their current goal.

Flex provides facilities for realizing both of these uses of motion, and it calls them "transitions" and "effects," respectively.

Traditional, narrative-oriented motion design environments conceive of time as the primary organizing principle that begins at the start of the experience and ticks off the seconds until its end. In Flex's nonlinear model, however, motion happens primarily during transitions, the things that happen between two application states.

Transitions allow Flex applications to avoid the jumpy, abrupt movement of objects that traditional applications suffer from. When objects move, they move smoothly through the intervening space. When they change size, they grow or shrink. And in well-designed Flex applications, the metaphor of physicality is perfectly preserved; if the screen slides to the right to show different content or functionality, sliding it to the left will bring the old content back. If a drawer slams shut, pulling it out will open it back up again.

Figure 4. The hypothetical photo browser application above demonstrates a transition in action; the panel containing the search box smoothly animates open to reveal the search results. The motion reinforces the panel's identity in the user's mind across the two application states. Click play to see this example.

Well-designed transitions keep the user fully informed about where they are, where they have been, and how they get back. They also inform the user of what has changed in the application's state and how to revert it or change it again. And it does these things through mechanisms that require no learning since users instinctually understand them from the physical world.

Effects also employ our instinctual knowledge of physical motion to enhance the user's understanding, but they are more localized to individual objects. They excel not at guiding the user through application navigation paths, but at drawing and channeling users' attention to the next step in their current task and in providing rich feedback in response to user actions. For example, you might employ a glow effect when a user's mouse hovers over a piece of content to indicate she can interact with it, or cause an image to grow when selected, making it more visible.

Figure 5. The hover behavior of the hypothetical photo browser demonstrates an effect in action—as the user places her mouse over each photo, it softly pulses to indicate that the photo may be interacted with. Effects excel at providing feedback on the level of individual objects. Click play to see this example.

When employing effects and transitions, avoid using motion in gimmicky or gratuitous ways. If the motion you employ is not intended to have one of the aforementioned purposes, carefully consider whether it warrants inclusion in your application at all. It's easy to become enamored of motion and use it inappropriately; for an example, view a demo of the "Wobbly Windows" effect in the Gnome Luminosity project. It adds nothing to the user's understanding of the application and serves only to distract from the experience of using it. Such gratuitous effects make great demos but are best avoided in real-world applications.

Page 4 of 6

Previous Page

Next Page