Download - Evaluating visual cues for window switching on large screens

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



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


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


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


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


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


+ BubbleFrame


+ BubbleFrame+ ShadowFrame

DarkMask+ BubbleFrame

0

2

4

6



+ BubbleFrame


+ BubbleFrame+ ShadowFrame

DarkMask+ BubbleFrame

CenterSplashControl

sec

74

PARTICIPANTS’ FAVORITE CUE

75

OUTLINE



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.

Download - Evaluating visual cues for window switching on large screens

Top Related