evaluating visual cues for window switching on large screens
DESCRIPTION
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.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)
1. Pre-attentive Search2. Attentive Search
22
COLORFeature Integration Theory (Treisman, Gelade; CP 1980)
23
MOTIONFeature Integration Theory (Treisman, Gelade; CP 1980)
24
SHAPEFeature Integration Theory (Treisman, Gelade; CP 1980)
25
SHADING + SHADOWSFeature Integration Theory (Treisman, Gelade; CP 1980)
26
NOISY BACKGROUND
27
COLOR VS. SHAPEFeature Integration Theory (Treisman, Gelade; CP 1980)
28
COLOR VS. SHAPEFeature Integration Theory (Treisman, Gelade; CP 1980)
>
29
HETEROGENOUS DISTRACTORSFeature Integration Theory (Treisman, Gelade; CP 1980)
30
HOMOGENOUS DISTRACTORSFeature Integration Theory (Treisman, Gelade; CP 1980)
31
WHAT STANDS OUT IN OUR UI?
32
POPOUT PRISMSuh, Woodruff, Rosenholtz, Glass; CHI 2002
33
HALOBaudisch, Rosenholtz; CHI 2003
+
34
SPOTLIGHTKhan, Matejka, Fitzmaurice, Kurtenbach; CHI 2005
+
35
PHOSPHORBaudisch, Tan, Collomb, Robbins, Hinckley, Agrawala, Zhao, Ramos; UIST 2006
DRAG-AND-POPBaudisch, 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 x2 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 – OVERVIEWTask Time
Annoyance
Popup Misses
Control0
1
2
3
Blinking-Frame
Bubble-Frame
Red-Frame
Shadow-Frame
Center-Beam
Center-Splash
Window-Beam
Window-Splash
Dark-Mask
Tas
k T
ime
(sec
onds
± S
EM
)
8
10
12
Blinking-Frame
Bubble-Frame
Red-Frame
Shadow-Frame
Center-Beam
Center-Splash
Window-Beam
Window-Splash
Dark-Mask
Control
Pop
up D
etec
tion
Err
or (
N± S
EM
)
0
1
2
3
4
5
Ann
oyan
ce(r
atin
g ±
SE
M)
Blinking-Frame
Bubble-Frame
Red-Frame
Shadow-Frame
Center-Beam
Center-Splash
Window-Beam
Window-Splash
Dark-Mask
Control
51
RESULTS – OVERVIEWTask Time
Annoyance
Popup Misses
Control0
1
2
3
Blinking-Frame
Bubble-Frame
Red-Frame
Shadow-Frame
Center-Beam
Center-Splash
Window-Beam
Window-Splash
Dark-Mask
Tas
k T
ime
(sec
onds
± S
EM
)
8
10
12
Blinking-Frame
Bubble-Frame
Red-Frame
Shadow-Frame
Center-Beam
Center-Splash
Window-Beam
Window-Splash
Dark-Mask
Control
Pop
up D
etec
tion
Err
or (
N± S
EM
)
0
1
2
3
4
5
Ann
oyan
ce(r
atin
g ±
SE
M)
Blinking-Frame
Bubble-Frame
Red-Frame
Shadow-Frame
Center-Beam
Center-Splash
Window-Beam
Window-Splash
Dark-Mask
Control
52
FRAMES – TASK TIME
BubbleFrame ShadowFrameControl BlinkingFrame RedFrame
0
1
2
3
sec
dominant dominant
53
FRAMES – ANNOYANCE
BubbleFrame ShadowFrameControl BlinkingFrame RedFrame
0
2
4
6
dominant dominant
54
PARTICIPANT’S FAVORITE FRAME Task Time
Annoyance
Popup Misses
Control0
1
2
3
Blinking-Frame
Bubble-Frame
Red-Frame
Shadow-Frame
Center-Beam
Center-Splash
Window-Beam
Window-Splash
Dark-Mask
Tas
k T
ime
(sec
onds
± S
EM
)
8
10
12
Blinking-Frame
Bubble-Frame
Red-Frame
Shadow-Frame
Center-Beam
Center-Splash
Window-Beam
Window-Splash
Dark-Mask
Control
Pop
up D
etec
tion
Err
or (
N± S
EM
)
0
1
2
3
4
5
Ann
oyan
ce(r
atin
g ±
SE
M)
Blinking-Frame
Bubble-Frame
Red-Frame
Shadow-Frame
Center-Beam
Center-Splash
Window-Beam
Window-Splash
Dark-Mask
Control
55
RESULTS – OVERVIEWTask Time
Annoyance
Popup Misses
Control0
1
2
3
Blinking-Frame
Bubble-Frame
Red-Frame
Shadow-Frame
Center-Beam
Center-Splash
Window-Beam
Window-Splash
Dark-Mask
Tas
k T
ime
(sec
onds
± S
EM
)
8
10
12
Blinking-Frame
Bubble-Frame
Red-Frame
Shadow-Frame
Center-Beam
Center-Splash
Window-Beam
Window-Splash
Dark-Mask
Control
Pop
up D
etec
tion
Err
or (
N± S
EM
)
0
1
2
3
4
5
Ann
oyan
ce(r
atin
g ±
SE
M)
Blinking-Frame
Bubble-Frame
Red-Frame
Shadow-Frame
Center-Beam
Center-Splash
Window-Beam
Window-Splash
Dark-Mask
Control
56
MASK – TASK TIME
Control0
1
2
3
Blinking-Frame
Bubble-Frame
Red-Frame
Shadow-Frame
Center-Beam
Center-Splash
Window-Beam
Window-Splash
Dark-Mask
sec
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 – OVERVIEWTask Time
Annoyance
Popup Misses
Control0
1
2
3
Blinking-Frame
Bubble-Frame
Red-Frame
Shadow-Frame
Center-Beam
Center-Splash
Window-Beam
Window-Splash
Dark-Mask
Tas
k T
ime
(sec
onds
± S
EM
)
8
10
12
Blinking-Frame
Bubble-Frame
Red-Frame
Shadow-Frame
Center-Beam
Center-Splash
Window-Beam
Window-Splash
Dark-Mask
Control
Pop
up D
etec
tion
Err
or (
N± S
EM
)
0
1
2
3
4
5
Ann
oyan
ce(r
atin
g ±
SE
M)
Blinking-Frame
Bubble-Frame
Red-Frame
Shadow-Frame
Center-Beam
Center-Splash
Window-Beam
Window-Splash
Dark-Mask
Control
60
TRAILS – TASK TIME
CenterSplash WindowSplashControl CenterBeam WindowBeam
0
1
2
3
asymm. asymm.
61
PARTICIPANT’S FAVORITE TRAIL Task Time
Annoyance
Popup Misses
Control0
1
2
3
Blinking-Frame
Bubble-Frame
Red-Frame
Shadow-Frame
Center-Beam
Center-Splash
Window-Beam
Window-Splash
Dark-Mask
Tas
k T
ime
(sec
onds
± S
EM
)
8
10
12
Blinking-Frame
Bubble-Frame
Red-Frame
Shadow-Frame
Center-Beam
Center-Splash
Window-Beam
Window-Splash
Dark-Mask
Control
Pop
up D
etec
tion
Err
or (
N± S
EM
)
0
1
2
3
4
5
Ann
oyan
ce(r
atin
g ±
SE
M)
Blinking-Frame
Bubble-Frame
Red-Frame
Shadow-Frame
Center-Beam
Center-Splash
Window-Beam
Window-Splash
Dark-Mask
Control
62
RESULTS – OVERVIEWTask Time
Annoyance
Popup Misses
Control0
1
2
3
Blinking-Frame
Bubble-Frame
Red-Frame
Shadow-Frame
Center-Beam
Center-Splash
Window-Beam
Window-Splash
Dark-Mask
Tas
k T
ime
(sec
onds
± S
EM
)
8
10
12
Blinking-Frame
Bubble-Frame
Red-Frame
Shadow-Frame
Center-Beam
Center-Splash
Window-Beam
Window-Splash
Dark-Mask
Control
Pop
up D
etec
tion
Err
or (
N± S
EM
)
0
1
2
3
4
5
Ann
oyan
ce(r
atin
g ±
SE
M)
Blinking-Frame
Bubble-Frame
Red-Frame
Shadow-Frame
Center-Beam
Center-Splash
Window-Beam
Window-Splash
Dark-Mask
Control
63
TRAILS/FRAMES – TASK TIMEtargets close
Control0
1
2
3
Blinking-Frame
Bubble-Frame
Red-Frame
Shadow-Frame
Center-Beam
Center-Splash
Window-Beam
Window-Splash
64
TRAILS/FRAMES – TASK TIMEtargets far
Control0
1
2
3
Blinking-Frame
Bubble-Frame
Red-Frame
Shadow-Frame
Center-Beam
Center-Splash
Window-Beam
Window-Splash
65
TRAILS/FRAMES – POPUP MISS.
8
10
12
Blinking-Frame
Bubble-Frame
Red-Frame
Shadow-Frame
Center-Beam
Center-Splash
Window-Beam
Window-Splash
Control
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 + BUBBLETask Time
Annoyance
Control CenterSplash0
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
CenterSplashControl
sec
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 HoffmannComputer Science & Engineering
University of [email protected]
Patrick BaudischMicrosoft Research
Redmond, [email protected]
Daniel S. WeldComputer Science & Engineering
University of [email protected]
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.