X hits on this document





1 / 10

Phosphor: Explaining Transitions in the User Interface Using Afterglow Effects

Patrick Baudisch, Desney Tan, Maxime Collomb, Dan Robbins, Ken Hinckley, Maneesh Agrawala, Shengdong Zhao, and Gonzalo Ramos Microsoft Research, One Microsoft Way, Redmond, WA 98052, USA {baudisch, desney, kenh, dcr}@.microsoft.com, maneesh@cs.berkeley.edu collomb@lirmm.fr, {sszhao, bonzo}@dgp.toronto.edu

ABSTRACT Sometimes users fail to notice a change that just took place on their display. For example, the user may have acciden- tally deleted an icon or a remote collaborator may have changed settings in a control panel. Animated transitions can help, but they force users to wait for the animation to complete. This can be cumbersome, especially in situations where users did not need an explanation. We propose a different approach. Phosphor objects show the outcome of their transition instantly; at the same time they explain their change in retrospect. Manipulating a phosphor slider, for example, leaves an afterglow that illustrates how the knob moved. The parallelism of instant outcome and explanation supports both types of users. Users who already understood the transition can continue interacting without delay, while those who are inexperienced or may have been distracted can take time to view the effects at their own pace. We pre- sent a framework of transition designs for widgets, icons, and objects in drawing programs. We evaluate phosphor objects in two user studies and report significant perform- ance benefits for phosphor objects.

the possibility of remote collaboration. Without knowing what changed and how it changed, users can find it hard to detect and correct unintended or unexpected actions.

Animated transitions have been proposed to help users un- derstand changes in the user interface [9, 19] and have found their way into a range of products. Windows Media Player 10, for example, hides its play controls in fullscreen mode by slowly moving them off screen. While this can help users understand where the controls went and how to get them back, it also introduces “lag” into the interaction, i.e., it forces users to wait for the animation to complete. For experienced users who do not need an explanation, this forced pause can be cumbersome and may break their con- centration.

ACM Classification: H5.2 [Information interfaces and presentation]: User Interfaces. - Graphical user interfaces.

General terms: Design, Human Factors.

Keywords: Phosphor, comic animation, cartoon animation, user interfaces, information visualization, diagrams.

INTRODUCTION Computer users sometimes make mistakes, such as acciden- tally deleting an icon or filing it into the wrong folder. Similarly, unexpected things may occur in collaboration scenarios. Users trying to replicate a process demonstrated by a collaborator may later realize that they missed some of the steps. This is particularly difficult for actions that leave no trace, such as shortcut commands.

The potential changes that users need to keep track of con- tinues to rise with increasing user interface complexity, more concurrently running applications, large screens where the user may be attending to the wrong location, and

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that cop- ies bear this notice and the full citation on the first page. To copy other- wise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. UIST’06, October 15–18, 2006, Montreux, Switzerland. Copyright 2006 ACM 1-59593-313-1/06/0010...$5.00.

Figure 1: These phosphor widgets use green after- glow effects to show how they have changed. The slider labeled “volume” was dragged all the way to the left. Two of the checkboxes in the next row were unchecked. The combo box was set from 1 to 2.

PHOSPHOR USER INTERFACE OBJECTS We propose explaining user interface transitions without forcing users to wait. We define a phosphor transition as a transition that:

  • 1.

    shows the outcome of the change instantly and

  • 2.

    explains the change in retrospect using a diagrammatic


The space of retrospective diagrammatic descriptions en- compasses a great number of possible designs. In this pa- per, we concentrate on a specific subset based on the notion of afterglow. Figure 1 shows an example. When a user op-

Document info
Document views29
Page views29
Page last viewedFri Dec 09 20:52:43 UTC 2016