phosphor patrick baudisch microsoft research ASI interaction focus
phosphor patrick baudisch microsoft research, ASI, interaction focus desney tan, maxime collomb, dan robbins, ken hinckley, maneesh agrawala, shen zhao, gonzalo ramos
demo
visual language
performance benefits
motivation
people operating GUIs make mistakes…
…asking every time can be slow…
…and users have trouble following what others are doing
[Expose] animation can help…
…but animation often forces users to wait
animation past animation future can we do without the “lag”?
phosphor
phosphor transition : = 1. show outcome of the change instantly and 2. explain the change in retrospect using a diagrammatic depiction
animation past animation future phosphor future past phosphor
animation explains transition first and then shows outcome phosphor explains transition and outcome at the same time phosphor lets users choose whether to attend to a transition or to ignore it
afterglow (specific case of phosphor effect) : = • • show previous state and show it changed
afterglow fades over time multiple on screen demo
users benefit 1. afterglow = visual buffer for changes helps users follow activities in bursts 2. afterglow has (almost) no notion of time users read transitions at their own pace 3. afterglow can be read back and forth helps undoing undesired changes
designers benefit 1. users choose to attend to transition; wait never 2. giving extra time (to the inexperienced) is cheap 3. free application designers from hand-optimizing animation speed (just pick reasonable upper bound)
however susceptible to clutter
related
animation cartoon animation ( [thomas 01] [chang 93] )
photography chrono photography [marey 1878]
photography
comics
comics understanding comics [mccloud 93]
storyboards [Joshua Siegel]
non-photorealistic rendering games [haller 04]
visualization APEX [feiner 85]
visualization lithium [hobbler 04]
visualization action synopsis [assa 05]
visualization chrono volumes [woodring 03]
user interface transient visual cues for scrolling [kaptelinin 02]
user interface ( ) [mac os x]
user interface high density cursor previous cursor position current cursor position [baudisch 03]
user interface telepointer traces [gutwin 02]
user interface MAUI groupware toolkit [hill&gutwin 03]
user interface mnemonic rendering [bezerianos 5 min ago]
user interface drag-and-pop [baudisch 03]
questions • can we apply comic transitions to GUI widgets? • what visual language? • are there performance benefits?
phosphor
space for time 1. envision animated transitions 2. project along time axis y x challenges 1. show temporal order 2. avoid occlusion
names initial state path target state
strobe blur styles speed line less clutter, better sense of direction, better readable if overlap,
showing time fading stacking initial
move action copy temporary drag-and-pop file extract
stationary initial animation [chang 93] adding vertical motion resulting phosphor transition
reveal initial state omit path
out-of-band transparent to opaque 50% alpha to opaque rotation or transition? rotation!
multiple overlap is not a problem avoidance
multiple shorten paths single path [terveen: “clans”]
implement
delphi spawn child window extract null operation rotate temporary move copy avoidance
flash
study 1
task
interfaces with phosphor vs. without phosphor 12 participants (1 female)
performance benefits
study 2
task
Error Time - Interface x Task phosphor animation Time - Interface x Outcome phosphor animation Error phosphor animation
end patrick baudisch patrickbaudisch. com
large screens f+c screens hd cursor mouse ether drag&pop tablecloth static animation
. . . swooooosh
the problem with animation… • animation in the UI can help users follow transitions Expose Media Player • right speed is crucial • too fast error rate++ • too slow task time++ • right speed also depends on familiarity, distraction… we cannot determine the right speed
this time: generalize…
visual language & prototype scale opacity spawn child window extract null operation rotate temporary move copy avoidance
GUI manipulations… help remote collaborator track what I do
- Slides: 69