Evaluating visual cues for window switching on large screens

3,322 views

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

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,322
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Hi, I am Raphael Hoffmann, and this is joint work with Patrick Baudisch and Dan Weld.
  • Evaluating visual cues for window switching on large screens

    1. 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. 2. WHICH IS THE ACTIVE WINDOW?
    3. 3. ON LARGE SCREENS CHANGES MAY GO UNNOTICED
    4. 4. NOTICING CHANGE Flashing of window moving to foreground  Flashing of window frame  Visual Search 
    5. 5. A HIGHLY EFFECTIVE CUE?
    6. 6. QUESTION <ul><li>Which notification technique is highly effective and has little side effects? </li></ul>
    7. 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. 8. VISUAL CUES frames trails
    9. 9. BLINKINGFRAME
    10. 10. REDFRAME
    11. 11. BUBBLEFRAME
    12. 12. SHADOWFRAME
    13. 13. MASK
    14. 14. CENTERBEAM
    15. 15. CENTERSPLASH
    16. 16. WINDOWSPLASH
    17. 17. WINDOWBEAM
    18. 18. OUTLINE <ul><li>Motivation </li></ul><ul><li>Related Work & Visual Cues for Window Switching </li></ul><ul><li>Studies </li></ul><ul><li>Conclusion </li></ul>
    19. 19. PERCEPTUAL UNDERPINNINGS high acuity vision peripheral vision
    20. 20. PERCEPTUAL UNDERPINNINGS
    21. 21. FEATURE INTEGRATION THEORY (Treisman, Gelade; CP 1980) <ul><li>Pre-attentive Search </li></ul><ul><li>Attentive Search </li></ul>
    22. 22. COLOR Feature Integration Theory (Treisman, Gelade; CP 1980)
    23. 23. MOTION Feature Integration Theory (Treisman, Gelade; CP 1980)
    24. 24. SHAPE Feature Integration Theory (Treisman, Gelade; CP 1980)
    25. 25. SHADING + SHADOWS Feature Integration Theory (Treisman, Gelade; CP 1980)
    26. 26. NOISY BACKGROUND
    27. 27. COLOR VS. SHAPE Feature Integration Theory (Treisman, Gelade; CP 1980)
    28. 28. COLOR VS. SHAPE Feature Integration Theory (Treisman, Gelade; CP 1980) >
    29. 29. HETEROGENOUS DISTRACTORS Feature Integration Theory (Treisman, Gelade; CP 1980)
    30. 30. HOMOGENOUS DISTRACTORS Feature Integration Theory (Treisman, Gelade; CP 1980)
    31. 31. WHAT STANDS OUT IN OUR UI?
    32. 32. POPOUT PRISM Suh, Woodruff, Rosenholtz, Glass; CHI 2002
    33. 33. HALO Baudisch, Rosenholtz; CHI 2003 +
    34. 34. SPOTLIGHT Khan, Matejka, Fitzmaurice, Kurtenbach; CHI 2005 +
    35. 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. 36. TRAILS <ul><li>Work even when target outside field of view </li></ul><ul><li>Reduce 2d search to 1d search </li></ul>
    37. 37. IMPLEMENTATION <ul><li>Program written in C# using WPF </li></ul><ul><li>Cues can be selected through a configuration menu </li></ul><ul><li>System integrated with Alt-TAB mechanism in Windows XP </li></ul>
    38. 38. OUTLINE <ul><li>Motivation </li></ul><ul><li>Related Work & Visual Cues for Window Switching </li></ul><ul><li>Studies </li></ul><ul><li>Conclusion </li></ul>
    39. 39. <ul><li><remind>: </li></ul><ul><li>Efficiency in finding target </li></ul><ul><li>Awareness of other screen content </li></ul><ul><li>Avoiding annoyance </li></ul>WHICH CUE SUPPORTS USERS BEST?
    40. 40. SEARCH SPACE ( ) 2 = 160 combinations x x x x x 2 2 2 2 4+1 control
    41. 41. SEARCH SPACE ( ) 1 = 10 (combinations) + + + + + 1 1 1 1 4+1 STUDY 1
    42. 42. SEARCH SPACE ( ) 1 + + + + + 1 1 1 1 4+1
    43. 43. SEARCH SPACE 1 = 6 combinations + 1 STUDY 2 1 1 1 1 + + + +
    44. 44. STUDY 1: CUES IN ISOLATION
    45. 45. TASK <ul><li>Switch window focus by hitting space bar. </li></ul><ul><li>Locate newly active window and type number (title bar read ‘Window - #’). </li></ul><ul><li>If number correct, system removed it from title bar and replaced it with a new number on next switch </li></ul>
    46. 46. TASK <ul><li>In 20% of the cases when windows were switched, a popup window with a letter appeared for 350ms at another location. </li></ul><ul><li>Participants were asked to type the letter, if they saw the popup. </li></ul><ul><li>Participants rated annoyance on Likert scale; said what they prefered </li></ul>
    47. 47. MEASURED … <ul><li>Efficiency in finding target </li></ul><ul><li>Awareness of other screen content </li></ul><ul><li>Annoyance </li></ul>task time proportion of overlooked popups subjective rating on 7pt Likert scale
    48. 48. STUDY DESIGN <ul><li>Within-subjects design, 10 conditions, 62 repetitions, 10 participants </li></ul><ul><li>Background content: 80 windows – 1 / 3 accessories, 1 / 3 web pages, 1 / 3 office docs </li></ul><ul><li>Mixed Model analysis, ANOVA on ranks </li></ul><ul><li>Sequential Bonferroni correction </li></ul>
    49. 49. APPARATUS <ul><li>24’’ + 30’’ + 24’’ displays </li></ul><ul><li>25’’ distance to center monitor </li></ul><ul><li>Used leash to prevent moving backwards </li></ul>
    50. 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. 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. 52. FRAMES – TASK TIME BubbleFrame ShadowFrame Control BlinkingFrame RedFrame 0 1 2 3 sec dominant dominant
    53. 53. FRAMES – ANNOYANCE BubbleFrame ShadowFrame Control BlinkingFrame RedFrame 0 2 4 6 0 1 2 3 dominant dominant dominant dominant
    54. 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. 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. 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. 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. 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. 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. 60. TRAILS – TASK TIME CenterSplash WindowSplash Control CenterBeam WindowBeam 0 1 2 3 asymm. asymm.
    61. 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. 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. 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. 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. 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. 66. OPEN QUESTIONS <ul><li>Does combining frames and trails make better cues? </li></ul><ul><li>Does adding additional frame features help? </li></ul><ul><li>Will the mask improve with lower opacity (and a frame)? </li></ul>+ > ? + + > + ? > ?
    67. 67. STUDY 2: CUE COMBINATIONS synergy or interference?
    68. 68. MASK + BUBBLE
    69. 69. CENTERSPLASH + REDFRAME
    70. 70. CS + RED + BUBBLE
    71. 71. CS + RED + BUBBLE + SHADOW
    72. 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. 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. 74. PARTICIPANTS’ FAVORITE CUE
    75. 75. OUTLINE <ul><li>Motivation </li></ul><ul><li>Related Work & Visual Cues for Window Switching </li></ul><ul><li>Studies </li></ul><ul><li>Conclusion </li></ul>
    76. 76. IMPLICATIONS FOR DESIGN <ul><li>Visual sparseness : Even low-opacity masks interfere w/ ability to detect target by its onset. </li></ul><ul><li>Adapt cue by distance : When targets are far, trails perform better than frames. </li></ul><ul><li>Use Asymmetric trails : Trails must stand out from rectilinear screen content. </li></ul><ul><li>Use subtle features : Even low-opacity frames pop out; dominant features outperform others, but are more annoying. </li></ul><ul><li>Use combinations : Combinations of frames and trails perform better than cues in isolation. </li></ul>
    77. 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. 78. TRAILS – POPUP MISSES CenterSplash WindowSplash Control CenterBeam WindowBeam 8 10 12 asymm. asymm.

    ×