Flex Article

Designing for Flex – Part 6: Guiding with motion

The physical world and applications

In the physical world, objects behave very differently from the way they do in the world of traditional computer applications. When objects move, they travel the space between them. When they grow, they visibly expand rather than snapping to a new, larger size. When they vanish from sight, it is usually because they have moved outside our range of vision or have become occluded by another object. Humans understand this behavior of physical objects instinctually, and thus we have a set of preconceived interpretations of what happened when objects vanish or change positions when we turn our backs on them.

In traditional web and desktop applications, objects do not behave this way. They teleport from one location of the screen to another. They get bigger instantaneously. They vanish with no apparent clues as to where they went. In a world like this one, all of our instinctual knowledge goes out the window. (A painful way to discover this is to watch a computer novice try to multitask between two applications. When one application's window pops up over the other applications, many users believe that they somehow made the first application disappear and all the work they had done with it is lost.)

Figure 2a. When panels move around in Adobe Dreamweaver, they "teleport" from one position to another. This is very different from how objects behave in the real world. Click play to see this example.

Figure 2b. Unlike Dreamweaver, when panels move in Adobe Connect they traverse the intervening space and grow instead of snapping to a new size. This feels much more natural. Click play to see this example.

Those of us who work with computers regularly have trained ourselves to follow a different mental model when working with typical applications, and we've superficially become used to its eccentricities. But at a deeper level, this odd computer behavior disturbs us and detracts from the experience of using them. Much of the appeal of the modern Macintosh operating system is its rich physicality—drawers slide out, windows shrink when minimized, document icons pop forward when opened.

Like the Macintosh, Flex applications should take advantage of human understanding of motion in the physical world and apply these perceptual principles to the motion design of their own panels, content, controls, and other interface objects. Through the use of physical principles, Flex applications should employ motion to help reinforce their task flows and guide users through their content.

Figure 3. Part of the appeal of Mac OS X is the rich physicality of its motion. In this demonstration, a window expands from its minimized state in the dock, the folder structure slides to the left as new folder contents appear on the right, and finally a file's icon briefly expands and fades out when opened. Each transition mimics a related real-world motion, helping the user understand the file system's mental model by mapping it onto an instinctually understood physical model. Click play to see this example.

Not all motion in Flex applications is literally an analog of physical behavior. Cross-fades, for example, do not appear in the physical world yet are often appropriate when removing details of a screen or panel that are no longer necessary. Yet cross-fades help users understand that the details are changing without creating a confusing jumble of moving objects that a slide or resize effect would when applied to many objects at once. Even here, motion helps users understand what happened as they navigate through the application.

Motion in the physical world has a natural attention-drawing effect on humans. Our peripheral vision is very good at picking up sudden motion and our natural instinct is to immediately turn to focus on whatever caused it, since this was a pretty good way of minimizing our chances of getting eaten by tigers trying to sneak up on us. (Have you ever sat in a restaurant or bar trying to hold a conversation with a television playing behind the person you're speaking to? Then you likely understand this principle already.) This is the reason Clippy and the banner ads are so irritating and distracting, but it's also a good way to temporarily draw users' attention to a part of the interface they are not currently focused on but which may interest them. Motion can help draw users to the next step towards completing their goals.

Page 3 of 6

Previous Page

Next Page