Effects—motion that emphasizes

Animated effects draw users' attention to objects of particular importance. This section describes some common ways to employ effects.

The most direct use of effects is to emphasize an item that has unusual permanent or temporary importance that the user may not otherwise notice. A default button or other control may glow to draw the user's attention to it as the next step in their task. A piece of content that has appeared, disappeared, or changed due to some user action may use an effect to indicate this change. For example, an instant messaging application may use subtle effects to draw the user's attention when a person on their IM list has logged in, logged out, or messaged them.

Figure 10. The Converse shoe configurator uses effects to indicate to the user what his next action should be. When the user has selected all the colors for his shoe, the next bar in the accordion control glows to indicate he should click on it to proceed to the next step in the task. Click play to see this example.

Most other uses of effects are special cases of this one. For example, some elements of the interface may need to express the progress of an asynchronous operation, such as loading a video stream. This operation may play an animated effect to indicate it is still ongoing. The effect may be on some decoration of the content, such as a spinning wheel or progress bar, or it may be on the content itself. The merging of the loading progress bar with the video time bar is one such example; the behavior of interlaced images on the web that load progressively higher-resolution versions as more information is downloaded is another.

 

Figure 11. Many video players, such as the one in Adobe Media Player above, express the progress of the video load by filling up the background of the play bar with a lighter color. This helps the user understand how much of the video remains to load and how much he can view without waiting.

Transient notifiers, a replacement for the intrusive dialog boxes we discouraged in Designing for Flex - Part 5: Designing content displays, commonly employ a subtle fade effect when they appear and disappear. Transient notifiers provide or emphasize small bits of information to users, then fade out over time. This information may notify the user of the result of some background activity, such as the receipt of new e-mail or a new instant message. It may also provide modeless feedback of the result of some operation the user performed.

System-triggered notifiers that draw users' attention away from their current task must be carefully designed and sparingly applied. If the user finds the information provided by a system-triggered notifier interesting and relevant, they will find the modeless tip useful yet nonintrusive. However, if the information is not interesting or appears too frequently, the notifier can quickly become irritating and annoying. Only draw the user's attention when you are sure the content you are presenting is something she wants to see. The bubble notifier in Windows was a nice idea in theory, but its overuse by programs that felt the need to provide users with irrelevant information (such as Microsoft's own "Would you like us to clean up your desktop icons for you?" message) rendered it more of an irritation than a convenience. System-triggered notifiers are like fats and oils—use them sparingly.

Figure 12a. iChat makes good use of a system-triggered notifier when alerting users when someone has instant messaged them. Since most people who have iChat open want to know when they are messaged, having the bubble animate in the upper-left corner of the screen is not unwanted intrusion. Moreover, the bubble is small and easily ignored if the user is embroiled in another task she does not wish to interrupt. Click play to see this example.

 

Figure 12b. Flash Player used to notify users of new updates using the Windows bubble notifier. Although well-intentioned, this annoyed many users by popping up too frequently and at times when the intrusion was not wanted. Unlike receiving an instant message, updating a software application is not as relevant to users' goals and thus must tread more carefully with system-triggered notifications.

To learn more, stay tuned for the next part of the series, Part 7: Making your application fast.

This content is a public draft. Please give us feedback in the Flex Interface Guide Forum.

Acknowledgements

Although this article series has my name on it, many people contributed to its development. I'd like to thank my reviewers, Sho Kuwamoto, Phil Costa, Steven Heintz, Narciso Jaramillo, Josh Ulm, Jeremy Clark, Deb Galdes, Tom Hobbs, and Amy Wong for providing me with extremely helpful feedback. Special thanks to Sho Kuwamoto and Phil Costa for envisioning this project and pushing me to complete it and to my managers, Josh Ulm and Jeremy Clark, for finding the time for me to give it the attention it needed. Finally, extra-special thanks to Tom Hobbs, Narciso Jaramillo, Sho Kuwamoto and Peter Flynn for guiding my thinking on many of the topics that appear in the articles.

Page 6 of 6

Previous Page