patrick baudischmicrosoft research, ASI, interaction focus

desney tan, maxime collomb, dan robbins, ken hinckley,maneesh agrawala, shen zhao, gonzalo ramos

phosphor

demo

visual language

performance benefits

motivation

people operating

GUIs make mistakes…

…asking every time can be slow…

…andusers have trouble

following whatothers are doing

[Expose]

animation can help…

…but animation oftenforces users to wait

animationanimatio

npast future

can we do without the “lag”?

phosphor

phosphor transition :=1. show outcome of the change instantly and

2. explain the change in retrospect usinga diagrammatic depiction

animationanimationpast future

phosphorpast phosphor

future

animationexplains transition first and then shows outcome

phosphorexplains transition and outcome at the same time

phosphor lets users choose whether to attendto a transition or to ignore it

afterglow (specific case of phosphor effect) :=• show previous state and• show how it changed

demoafterglowfades over timemultiple on screen

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

users benefit

1. users choose to attend to transition; wait never

2. giving extra time (to the inexperienced) is cheap

3. free application designersfrom hand-optimizing animation speed(just pick reasonable upper bound)

designers benefit

susceptible to clutter

however

related

cartoon animation

[thomas01]

animation

[chang93]

( )

chrono photography

[marey 1878]

photography

photography

comics

comics

[mccloud93]

understanding comics

storyboards

[Joshua Siegel]

[haller04]

games

non-photorealistic rendering

APEX

[feiner85]

visualization

visualization

lithium

[hobbler04]

action synopsis

[assa05]

visualization

chrono volumes

[woodring03]

visualization

transient visual cues for scrolling

[kaptelinin02]

user interface

[mac os x]

user interface

( )

high density cursor

[baudisch03]

user interface

previous cursorposition

current cursorposition

telepointer traces

[gutwin02]

user interface

MAUI groupware toolkit

[hill&gutwin03]

user interface

mnemonic rendering

[bezerianos5min ago]

user interface

drag-and-pop

[baudisch03]

user interface

•can we apply comic transitions to GUI widgets?

•what visual language?

•are there performance benefits?

questions

phosphor

space for time1. envision animated transitions

2.project along time axis

x

y

challenges

1. show temporal order

2. avoid occlusion

initial state

path

target state

names

stylesstrobe blur speed line

less clutter, better sense of direction,better readable if overlap,

showing timefading stacking initial

move copy

temporary

file extract

action

drag-and-pop

initial animation[chang 93]

resultingphosphortransition

addingverticalmotion

stationary

reveal initial

reveal initial state omit path

out-of-band

transparentto opaque

50% alphato opaque

rotation ortransition?

rotation!

multiple

overlap is not a problem avoidance

multiple

shorten paths single path

[terveen: “clans”]

implement

extract

temporary move copy

rotate

avoidance

null operation

spawn child window

delphi

flash

study 1

task

interfaces

with phosphor vs. without phosphor

12 participants (1 female)

performance benefits

study 2

task

Time - Interface x Outcome

phosphor animation

Time - Interface x Task

phosphor animation

phosphor animation phosphor animation

Error

Error

patrick baudischpatrickbaudisch.com

end

tableclothdrag&popf+c screens mouse etherhd cursor

large screens

staticanimation

...swooooosh

the problemwith animation…

• animation in the UI can help users follow transitions

• 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

Expose

Media Player

this time: generalize…

visual language& prototype

opacity

scale

extract

temporary move copy

rotate

avoidance

null operation

spawn child window

GUI manipulations…

help remotecollaboratortrack what I do