Evaluating visual cues for window switching on large screens

  • 2,660 views
Uploaded on

An increasing number of users are adopting large, multi-monitor displays. The resulting setups cover such a broad viewing angle that users can no longer simultaneously perceive all parts of the …

An increasing number of users are adopting large, multi-monitor displays. The resulting setups cover such a broad viewing angle that users can no longer simultaneously perceive all parts of the screen. Changes outside the user's visual field often go unnoticed. As a result, users sometimes have trouble locating the active window, for example after switching focus. This paper surveys graphical cues designed to direct visual attention and adapts them to window switching. Visual cues include five types of frames and mask around the target window and four trails leading to the window. We report the results of two user studies. The first evaluates each cue in isolation. The second evaluates hybrid techniques created by combining the most successful candidates from the first study. The best cues were visually sparse --- combinations of curved frames which use color to pop-out and tapered trails with predictable origin.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,660
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
8
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Hi, I am Raphael Hoffmann, and this is joint work with Patrick Baudisch and Dan Weld.

Transcript

  • 1. EVALUATING VISUAL CUES FOR WINDOW SWITCHING ON LARGE SCREENS Raphael Hoffmann (University of Washington) Patrick Baudisch (Microsoft Research) Daniel S. Weld (University of Washington)
  • 2. WHICH IS THE ACTIVE WINDOW?
  • 3. ON LARGE SCREENS CHANGES MAY GO UNNOTICED
  • 4. NOTICING CHANGE Flashing of window moving to foreground  Flashing of window frame  Visual Search 
  • 5. A HIGHLY EFFECTIVE CUE?
  • 6. QUESTION
    • Which notification technique is highly effective and has little side effects?
  • 7. DESIGN GOALS 2 Minimize impact on other screen content 3 Use sparse visual effects to minimize fatigue/annoyance 1 Minimize visual search time; Do not slow down users who already know where the target is
  • 8. VISUAL CUES frames trails
  • 9. BLINKINGFRAME
  • 10. REDFRAME
  • 11. BUBBLEFRAME
  • 12. SHADOWFRAME
  • 13. MASK
  • 14. CENTERBEAM
  • 15. CENTERSPLASH
  • 16. WINDOWSPLASH
  • 17. WINDOWBEAM
  • 18. OUTLINE
    • Motivation
    • Related Work & Visual Cues for Window Switching
    • Studies
    • Conclusion
  • 19. PERCEPTUAL UNDERPINNINGS high acuity vision peripheral vision
  • 20. PERCEPTUAL UNDERPINNINGS
  • 21. FEATURE INTEGRATION THEORY (Treisman, Gelade; CP 1980)
    • Pre-attentive Search
    • Attentive Search
  • 22. COLOR Feature Integration Theory (Treisman, Gelade; CP 1980)
  • 23. MOTION Feature Integration Theory (Treisman, Gelade; CP 1980)
  • 24. SHAPE Feature Integration Theory (Treisman, Gelade; CP 1980)
  • 25. SHADING + SHADOWS Feature Integration Theory (Treisman, Gelade; CP 1980)
  • 26. NOISY BACKGROUND
  • 27. COLOR VS. SHAPE Feature Integration Theory (Treisman, Gelade; CP 1980)
  • 28. COLOR VS. SHAPE Feature Integration Theory (Treisman, Gelade; CP 1980) >
  • 29. HETEROGENOUS DISTRACTORS Feature Integration Theory (Treisman, Gelade; CP 1980)
  • 30. HOMOGENOUS DISTRACTORS Feature Integration Theory (Treisman, Gelade; CP 1980)
  • 31. WHAT STANDS OUT IN OUR UI?
  • 32. POPOUT PRISM Suh, Woodruff, Rosenholtz, Glass; CHI 2002
  • 33. HALO Baudisch, Rosenholtz; CHI 2003 +
  • 34. SPOTLIGHT Khan, Matejka, Fitzmaurice, Kurtenbach; CHI 2005 +
  • 35. PHOSPHOR Baudisch, Tan, Collomb, Robbins, Hinckley, Agrawala, Zhao, Ramos; UIST 2006 DRAG-AND-POP Baudisch, Cutrell, Robbins, Czerwinski, Tandler, Bederson, Zierlinger; Interact 2003
  • 36. TRAILS
    • Work even when target outside field of view
    • Reduce 2d search to 1d search
  • 37. IMPLEMENTATION
    • Program written in C# using WPF
    • Cues can be selected through a configuration menu
    • System integrated with Alt-TAB mechanism in Windows XP
  • 38. OUTLINE
    • Motivation
    • Related Work & Visual Cues for Window Switching
    • Studies
    • Conclusion
  • 39.
    • <remind>:
    • Efficiency in finding target
    • Awareness of other screen content
    • Avoiding annoyance
    WHICH CUE SUPPORTS USERS BEST?
  • 40. SEARCH SPACE ( ) 2 = 160 combinations x x x x x 2 2 2 2 4+1 control
  • 41. SEARCH SPACE ( ) 1 = 10 (combinations) + + + + + 1 1 1 1 4+1 STUDY 1
  • 42. SEARCH SPACE ( ) 1 + + + + + 1 1 1 1 4+1
  • 43. SEARCH SPACE 1 = 6 combinations + 1 STUDY 2 1 1 1 1 + + + +
  • 44. STUDY 1: CUES IN ISOLATION
  • 45. TASK
    • Switch window focus by hitting space bar.
    • Locate newly active window and type number (title bar read ‘Window - #’).
    • If number correct, system removed it from title bar and replaced it with a new number on next switch
  • 46. TASK
    • In 20% of the cases when windows were switched, a popup window with a letter appeared for 350ms at another location.
    • Participants were asked to type the letter, if they saw the popup.
    • Participants rated annoyance on Likert scale; said what they prefered
  • 47. MEASURED …
    • Efficiency in finding target
    • Awareness of other screen content
    • Annoyance
    task time proportion of overlooked popups subjective rating on 7pt Likert scale
  • 48. STUDY DESIGN
    • Within-subjects design, 10 conditions, 62 repetitions, 10 participants
    • Background content: 80 windows – 1 / 3 accessories, 1 / 3 web pages, 1 / 3 office docs
    • Mixed Model analysis, ANOVA on ranks
    • Sequential Bonferroni correction
  • 49. APPARATUS
    • 24’’ + 30’’ + 24’’ displays
    • 25’’ distance to center monitor
    • Used leash to prevent moving backwards
  • 50. RESULTS – OVERVIEW Task Time Annoyance Popup Misses Control 0 1 2 3 Blinking- Frame Bubble- Frame Red- Frame Shadow- Frame Center- Beam Center- Splash Window- Beam Window- Splash Dark- Mask Task Time (seconds ± SEM) 8 10 12 Blinking- Frame Bubble- Frame Red- Frame Shadow- Frame Center- Beam Center- Splash Window- Beam Window- Splash Dark- Mask Control Popup Detection Error (N ± SEM) 0 1 2 3 4 5 Annoyance (rating ± SEM) Blinking- Frame Bubble- Frame Red- Frame Shadow- Frame Center- Beam Center- Splash Window- Beam Window- Splash Dark- Mask Control
  • 51. RESULTS – OVERVIEW Task Time Annoyance Popup Misses Control 0 1 2 3 Blinking- Frame Bubble- Frame Red- Frame Shadow- Frame Center- Beam Center- Splash Window- Beam Window- Splash Dark- Mask Task Time (seconds ± SEM) 8 10 12 Blinking- Frame Bubble- Frame Red- Frame Shadow- Frame Center- Beam Center- Splash Window- Beam Window- Splash Dark- Mask Control Popup Detection Error (N ± SEM) 0 1 2 3 4 5 Annoyance (rating ± SEM) Blinking- Frame Bubble- Frame Red- Frame Shadow- Frame Center- Beam Center- Splash Window- Beam Window- Splash Dark- Mask Control
  • 52. FRAMES – TASK TIME BubbleFrame ShadowFrame Control BlinkingFrame RedFrame 0 1 2 3 sec dominant dominant
  • 53. FRAMES – ANNOYANCE BubbleFrame ShadowFrame Control BlinkingFrame RedFrame 0 2 4 6 0 1 2 3 dominant dominant dominant dominant
  • 54. PARTICIPANT’S FAVORITE FRAME Task Time Annoyance Popup Misses Control 0 1 2 3 Blinking- Frame Bubble- Frame Red- Frame Shadow- Frame Center- Beam Center- Splash Window- Beam Window- Splash Dark- Mask Task Time (seconds ± SEM) 8 10 12 Blinking- Frame Bubble- Frame Red- Frame Shadow- Frame Center- Beam Center- Splash Window- Beam Window- Splash Dark- Mask Control Popup Detection Error (N ± SEM) 0 1 2 3 4 5 Annoyance (rating ± SEM) Blinking- Frame Bubble- Frame Red- Frame Shadow- Frame Center- Beam Center- Splash Window- Beam Window- Splash Dark- Mask Control
  • 55. RESULTS – OVERVIEW Task Time Annoyance Popup Misses Control 0 1 2 3 Blinking- Frame Bubble- Frame Red- Frame Shadow- Frame Center- Beam Center- Splash Window- Beam Window- Splash Dark- Mask Task Time (seconds ± SEM) 8 10 12 Blinking- Frame Bubble- Frame Red- Frame Shadow- Frame Center- Beam Center- Splash Window- Beam Window- Splash Dark- Mask Control Popup Detection Error (N ± SEM) 0 1 2 3 4 5 Annoyance (rating ± SEM) Blinking- Frame Bubble- Frame Red- Frame Shadow- Frame Center- Beam Center- Splash Window- Beam Window- Splash Dark- Mask Control
  • 56. MASK – TASK TIME sec Control 0 1 2 3 Blinking- Frame Bubble- Frame Red- Frame Shadow- Frame Center- Beam Center- Splash Window- Beam Window- Splash Dark- Mask
  • 57. MASK – POPUP MISSES 8 10 12 Blinking- Frame Bubble- Frame Red- Frame Shadow- Frame Center- Beam Center- Splash Window- Beam Window- Splash Dark- Mask Control
  • 58. MASK – ANNOYANCE 0 1 2 3 4 5 Blinking- Frame Bubble- Frame Red- Frame Shadow- Frame Center- Beam Center- Splash Window- Beam Window- Splash Dark- Mask Control
  • 59. RESULTS – OVERVIEW Task Time Annoyance Popup Misses Control 0 1 2 3 Blinking- Frame Bubble- Frame Red- Frame Shadow- Frame Center- Beam Center- Splash Window- Beam Window- Splash Dark- Mask Task Time (seconds ± SEM) 8 10 12 Blinking- Frame Bubble- Frame Red- Frame Shadow- Frame Center- Beam Center- Splash Window- Beam Window- Splash Dark- Mask Control Popup Detection Error (N ± SEM) 0 1 2 3 4 5 Annoyance (rating ± SEM) Blinking- Frame Bubble- Frame Red- Frame Shadow- Frame Center- Beam Center- Splash Window- Beam Window- Splash Dark- Mask Control
  • 60. TRAILS – TASK TIME CenterSplash WindowSplash Control CenterBeam WindowBeam 0 1 2 3 asymm. asymm.
  • 61. PARTICIPANT’S FAVORITE TRAIL Task Time Annoyance Popup Misses Control 0 1 2 3 Blinking- Frame Bubble- Frame Red- Frame Shadow- Frame Center- Beam Center- Splash Window- Beam Window- Splash Dark- Mask Task Time (seconds ± SEM) 8 10 12 Blinking- Frame Bubble- Frame Red- Frame Shadow- Frame Center- Beam Center- Splash Window- Beam Window- Splash Dark- Mask Control Popup Detection Error (N ± SEM) 0 1 2 3 4 5 Annoyance (rating ± SEM) Blinking- Frame Bubble- Frame Red- Frame Shadow- Frame Center- Beam Center- Splash Window- Beam Window- Splash Dark- Mask Control
  • 62. RESULTS – OVERVIEW Task Time Annoyance Popup Misses Control 0 1 2 3 Blinking- Frame Bubble- Frame Red- Frame Shadow- Frame Center- Beam Center- Splash Window- Beam Window- Splash Dark- Mask Task Time (seconds ± SEM) 8 10 12 Blinking- Frame Bubble- Frame Red- Frame Shadow- Frame Center- Beam Center- Splash Window- Beam Window- Splash Dark- Mask Control Popup Detection Error (N ± SEM) 0 1 2 3 4 5 Annoyance (rating ± SEM) Blinking- Frame Bubble- Frame Red- Frame Shadow- Frame Center- Beam Center- Splash Window- Beam Window- Splash Dark- Mask Control
  • 63. TRAILS/FRAMES – TASK TIME targets close Control 0 1 2 3 Blinking- Frame Bubble- Frame Red- Frame Shadow- Frame Center- Beam Center- Splash Window- Beam Window- Splash
  • 64. TRAILS/FRAMES – TASK TIME targets far Control 0 1 2 3 Blinking- Frame Bubble- Frame Red- Frame Shadow- Frame Center- Beam Center- Splash Window- Beam Window- Splash
  • 65. TRAILS/FRAMES – POPUP MISS. Control 8 10 12 Blinking- Frame Bubble- Frame Red- Frame Shadow- Frame Center- Beam Center- Splash Window- Beam Window- Splash
  • 66. OPEN QUESTIONS
    • Does combining frames and trails make better cues?
    • Does adding additional frame features help?
    • Will the mask improve with lower opacity (and a frame)?
    + > ? + + > + ? > ?
  • 67. STUDY 2: CUE COMBINATIONS synergy or interference?
  • 68. MASK + BUBBLE
  • 69. CENTERSPLASH + REDFRAME
  • 70. CS + RED + BUBBLE
  • 71. CS + RED + BUBBLE + SHADOW
  • 72. MASK + FRAMES – TASK TIME Task Time 0.0 0.5 1.0 1.5 CenterSplash CenterSplash + RedFrame CenterSplash + RedFrame + BubbleFrame CenterSplash + RedFrame + BubbleFrame + ShadowFrame sec
  • 73. MASK + BUBBLE Task Time Annoyance sec Control CenterSplash 0 1 2 3 CenterSplash + RedFrame CenterSplash + RedFrame + BubbleFrame CenterSplash + RedFrame + BubbleFrame + ShadowFrame DarkMask + BubbleFrame 0 2 4 6 CenterSplash + RedFrame CenterSplash + RedFrame + BubbleFrame CenterSplash + RedFrame + BubbleFrame + ShadowFrame DarkMask + BubbleFrame CenterSplash Control
  • 74. PARTICIPANTS’ FAVORITE CUE
  • 75. OUTLINE
    • Motivation
    • Related Work & Visual Cues for Window Switching
    • Studies
    • Conclusion
  • 76. IMPLICATIONS FOR DESIGN
    • Visual sparseness : Even low-opacity masks interfere w/ ability to detect target by its onset.
    • Adapt cue by distance : When targets are far, trails perform better than frames.
    • Use Asymmetric trails : Trails must stand out from rectilinear screen content.
    • Use subtle features : Even low-opacity frames pop out; dominant features outperform others, but are more annoying.
    • Use combinations : Combinations of frames and trails perform better than cues in isolation.
  • 77. THANK YOU! Raphael Hoffmann Computer Science & Engineering University of Washington [email_address] Patrick Baudisch Microsoft Research Redmond, Washington [email_address] Daniel S. Weld Computer Science & Engineering University of Washington [email_address] This material is based upon work supported by the National Science Foundation under grant IIS-0307906, by the Office of Naval Research under grant N00014-06-1-0147, SRI International under CALO grant 03-000225 and the Washington Research Foundation / TJ Cable Professorship.
  • 78. TRAILS – POPUP MISSES CenterSplash WindowSplash Control CenterBeam WindowBeam 8 10 12 asymm. asymm.