microsoft research


patrick baudisch


These phosphor widgets use green afterglow effects to show how they have changed. The slider in the top left 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.

Sometimes users fail to notice a change that just took place on their display. For example, the user may have accidentally 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 present a framework of transition designs for widgets, icons, and objects in drawing programs. We evaluate phosphor objects in two user studies and report significant performance benefits for phosphor objects.

Try out the flash demo

Get the Flash Player to see this player.
download this video AVI/DIVX (1.0M))



Baudisch, P., Tan, D., Collomb, M., Robbins, D., Hinckley, K., Agrawala, M., Zhao, S., and Ramos, G.
Phosphor: Explaining Transitions in the User Interface Using Afterglow Effects.
To appear in UIST 2006, Montreux, Switzerland, Oct 15-18, 2006.
PDF (2.9M) | PDF (10.5M) | AVI/DIVX (1M)

Related to drag-and-pop