1. patrick baudisch microsoft research, ASI, interaction focus desney tan, maxime collomb, dan robbins, ken hinckley, maneesh agrawala, shen zhao, gonzalo ramos phosphor

2. demo

3. visual language

4. performance benefits

5. motivation

6. people operating GUIs make mistakes…

7. …asking every time can be slow…

8. …and users have trouble following what others are doing

9. [Expose] animation can help…

10. …but animation often forces users to wait

11. animation past future can we do without the “lag”?

12. phosphor

13. phosphor transition := 1.show outcome of the change instantly and 2.explain the change in retrospect using a diagrammatic depiction

14. animation pastfuture phosphor past phosphor future

15. 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

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

17. demo afterglow fades over time multiple on screen

18. 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

19. 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) designers benefit

20. susceptible to clutter however

21. related

22. cartoon animation [thomas01] animation [chang93] ()

23. chrono photography [marey 1878] photography

25. comics

26. [mccloud93] understanding comics

27. storyboards [Joshua Siegel]

28. [haller04] games non-photorealistic rendering

29. APEX [feiner85] visualization

30. lithium [hobbler04]

31. action synopsis [assa05] visualization

32. chrono volumes [woodring03] visualization

33. transient visual cues for scrolling [kaptelinin02] user interface

34. [mac os x] user interface ()

35. high density cursor [baudisch03] user interface previous cursor position current cursor position

36. telepointer traces [gutwin02] user interface

37. MAUI groupware toolkit [hill&gutwin03] user interface

38. mnemonic rendering [bezerianos 5min ago] user interface

39. drag-and-pop [baudisch03] user interface

40. can we apply comic transitions to GUI widgets? what visual language? are there performance benefits?  questions

41. phosphor

43. space for time 1.envision animated transitions 2.project along time axis x y challenges 1.show temporal order 2.avoid occlusion

44. initial state path target state names

45. styles strobeblurspeed line less clutter, better sense of direction, better readable if overlap,

46. showing time fadingstackinginitial

47. movecopy temporary fileextract action drag-and-pop

48. initial animation [chang 93] resulting phosphor transition adding vertical motion stationary

49. reveal initial reveal initial stateomit path

50. out-of-band transparent to opaque 50% alpha to opaque rotation or transition? rotation!

51. multiple overlap is not a problemavoidance

52. multiple shorten paths single path [terveen: “clans”]

53. implement

54. extract temporary move copy rotate avoidance null operation spawn child window delphi

55. flash

56. study 1

57. task

58. interfaces with phosphor vs. without phosphor 12 participants (1 female)

59. performance benefits

60. study 2

61. task

62. Time - Interface x Outcome phosphoranimation Time - Interface x Task phosphoranimation phosphoranimation phosphoranimation Error

63. patrick baudisch patrickbaudisch.com end

64. tableclothdrag&popf+c screensmouse etherhd cursor large screens static animation

65. ...swooooosh

66. the problem with 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

67. this time: generalize…

68. visual language & prototype opacity scale extract temporary move copy rotate avoidance null operation spawn child window

69. GUI manipulations…  help remote collaborator track what I do