Transcript Clipping Lists and Change Borders: Improving Multitasking

Clipping Lists & Change Borders:
Improving Multitasking Efficiency with
Peripheral Information Design
Tara Matthews
U.C. Berkeley
Mary Czerwinski
George Robertson
Desney Tan
Microsoft Research
Peripheral Info can Help Multitaskers

Information workers balance many tasks and
interruptions and need help to




maintain task flow
know when to resume tasks
more easily reacquire tasks
We explore peripheral information design to
support these needs
2
Study: compare abstraction techniques

Change detection


Relevant task information


signals when a change has
occurred
pulling out and showing the
most relevant content
Scaling

shrunken version of all the
content
Which will most improve
multitasking efficiency?
3
Results: most relevant task info…
+ benefits task flow, resumption
timing, and reacquisition
+ improves multitasking
performance more than either
change detection or scaling
Clipping Lists performed best:
 like WinCuts, cuts out a relevant
portion of each task window
 like Scalable Fabric, arranges
clippings in the periphery
4
Outline

System design




Scalable Fabric, Clipping Lists, & Change Borders
User study
Results
Design implications & future work
5
Our Designs: Video
6
Study Design
no Clippings
Clippings
no Change
Borders
Change
Borders
7
Comparing Tradeoffs
no Change
Borders
Change
Borders
no Clippings
Clippings
+ spatial layout
– no legible content
+ most relevant task info
– detailed visuals / text
+ spatial layout
+ simple visual cue
for change
– limited info
+ most relevant task info
+ simple visual cue
for change
8
User Study: Participants

26 users from the Seattle area (10 female)

moderate to high experience using computers
and Microsoft Office-style applications
9
User Study: Tasks

Four tasks designed to mimic real world tasks




Quiz
- wait for modules to load
Uploads - wait for documents to upload
Email
- wait for quiz answers and upload
task documents to arrive
Puzzle - high-attention task done while waiting
10
Quiz
User Study: Tasks

Four tasks designed to mimic real world tasks




Quiz
- wait for modules to load
Uploads - wait for documents to upload
Email
- wait for quiz answers and upload
task documents to arrive
Puzzle - high-attention task done while waiting
12
Uploads
13
User Study: Tasks

Four tasks designed to mimic real world tasks




Quiz
- wait for modules to load
Uploads - wait for documents to upload
Email
- wait for quiz answers and upload
task documents to arrive
Puzzle - high-attention task done while waiting
14
User Study: Tasks

Four tasks designed to mimic real world tasks




Quiz
- wait for modules to load
Uploads - wait for documents to upload
Email
- wait for quiz answers and upload
task documents to arrive
Puzzle - high-attention task done while waiting
15
Puzzle
16
User Study: Tasks

Four tasks designed to mimic real world tasks




Quiz
- wait for modules to load
Uploads - wait for documents to upload
Email
- wait for quiz answers and upload
task documents to arrive
Puzzle - high-attention task done while waiting
17
User Study Setup
left monitor
right monitor
18
Metrics & Key Results

Metrics






Overall performance
Ability to maintain task flow
Knowing when to resume a task
Ease of reacquiring tasks
User satisfaction
Key results


Clipping Lists perform significantly better for all metrics
Change Borders further improved performance for
most metrics, on average
19
Results: overall
Average Taskperformance
Times
Average
Time
in Seconds
Average
Time
in Seconds
Average Task Times
700
680
700
660
680
640
660
620
640
600
620
580
600
560
580
540
560
540
SF
SF
SF +
Clippings
Change
SF +
Clippings
Change
Clippings
+ Change
Clippings
+ Change
Clipping Lists  faster performance
Change Borders  no significant improvement
20
Results: overall
Average Taskperformance
Times
Average
Time
in Seconds
Average
Time
in Seconds
Average Task Times
700
680
700
660
680
640
660
620
640
600
620
580
600
560
580
540
560
540
SF
SF
SF +
Clippings
Change
SF +
Clippings
Change
Clippings
+ Change
Clippings
+ Change
Clipping Lists  faster performance
Change Borders  no significant improvement
21
Results: overall
Average Taskperformance
Times
Average
Time
in Seconds
Average
Time
in Seconds
Average Task Times
700
680
700
660
680
640
660
620
640
600
620
580
600
560
580
540
560
540
SF
SF
SF +
Clippings
Change
SF +
Clippings
Change
Clippings
+ Change
Clippings
+ Change
Clipping Lists  faster performance
Change Borders  no significant improvement
22
Results: overall
Average Taskperformance
Times
Average
Time
in Seconds
Average
Time
in Seconds
Average Task Times
700
680
700
660
680
640
660
620
640
600
620
580
600
560
580
540
560
540
SF
SF
SF +
Clippings
Change
SF +
Clippings
Change
Clippings
+ Change
Clippings
+ Change
Clipping Lists  faster performance
Change Borders  no significant improvement
23
Results: overall
Average Taskperformance
Times
Average
Time
in Seconds
Average
Time
in Seconds
Average Task Times
700
680
700
660
680
640
660
620
640
600
620
580
600
560
580
540
560
540
SF
SF
SF +
Clippings
Change
SF +
Clippings
Change
Clippings
+ Change
Clippings
+ Change
Clipping Lists  faster performance
Change Borders  no significant improvement
24
Results: task flow
Average Task Switches
Average
# of Switches
Average
# of Switches
56
54
56
52
54
50
52
48
50
46
48
44
46
42
44
40
42
40
Average Task Switches
SF
SF
SF +
Clippings
Change
SF +
Clippings
Change
Clippings
+ Change
Clippings
+ Change
Clipping Lists  better task flow
Change Borders  worse task flow for SF
25
Results: task flow
Average Task Switches
Average
# of Switches
Average
# of Switches
56
54
56
52
54
50
52
48
50
46
48
44
46
42
44
40
42
40
Average Task Switches
SF
SF
SF +
Clippings
Change
SF +
Clippings
Change
Clippings
+ Change
Clippings
+ Change
Clipping Lists  better task flow
Change Borders  worse task flow for SF
26
Results: task flow
Average Task Switches
Average
# of Switches
Average
# of Switches
56
54
56
52
54
50
52
48
50
46
48
44
46
42
44
40
42
40
Average Task Switches
SF
SF
SF +
Clippings
Change
SF +
Clippings
Change
Clippings
+ Change
Clippings
+ Change
Clipping Lists  better task flow
Change Borders  worse task flow for SF
27
Results: task flow
Average Task Switches
Average
# of Switches
Average
# of Switches
56
54
56
52
54
50
52
48
50
46
48
44
46
42
44
40
42
40
Average Task Switches
SF
SF
SF +
Clippings
Change
SF +
Clippings
Change
Clippings
+ Change
Clippings
+ Change
Clipping Lists  better task flow
Change Borders  worse task flow for SF
28
Results: knowing when to resume
Average
AverageTime
TimeininSeconds
Seconds
Average Time to Resume Quiz
Average Time to Resume Quiz
90
90
80
80
70
70
60
60
50
50
40
40
30
30
20
20
10
10
0
0
SF
SF
SF +
SF
+
Change
Change
Clippings
Clippings
Clippings
Clippings
+ Change
+ Change
Clipping Lists  trend toward resuming the Quiz task
at more opportune times
29
Results: knowing when to resume
Average
AverageTime
TimeininSeconds
Seconds
Average Time to Resume Quiz
Average Time to Resume Quiz
90
90
80
80
70
70
60
60
50
50
40
40
30
30
20
20
10
10
0
0
SF
SF
SF +
SF
+
Change
Change
Clippings
Clippings
Clippings
Clippings
+ Change
+ Change
Clipping Lists  trend toward resuming the Quiz task
at more opportune times
30
Results: ease of reacquiring tasks
Average Quiz Window Switches
Average Upload Window Switches
Average Quiz Window Switches
Average Upload Window Switches
20.5
21
20
20.5
19.5
20
19
19.5
18.5
19
18
18.5
17.5
18
17
17.5
16.5
17
16.5
SF
SF
SF +
Clippings Clippings
Change
+ Change
SF +
Clippings Clippings
Change
+ Change
Average
Average
# of#Switches
of Switches
Average
Average
# of#Switches
of Switches
21
20
18
20
16
18
14
16
12
14
10
12
8
10
6
8
4
6
2
4
0
2
0
SF
SF
SF +
Clippings
Change
SF +
Clippings
Change
Clippings
+ Change
Clippings
+ Change
Clipping Lists  easier to reacquire tasks
Change Borders  no significant improvement
31
Results: ease of reacquiring tasks
Average Quiz Window Switches
Average Upload Window Switches
Average Quiz Window Switches
Average Upload Window Switches
20.5
21
20
20.5
19.5
20
19
19.5
18.5
19
18
18.5
17.5
18
17
17.5
16.5
17
16.5
SF
SF
SF +
Clippings Clippings
Change
+ Change
SF +
Clippings Clippings
Change
+ Change
Average
Average
# of#Switches
of Switches
Average
Average
# of#Switches
of Switches
21
20
18
20
16
18
14
16
12
14
10
12
8
10
6
8
4
6
2
4
0
2
0
SF
SF
SF +
Clippings
Change
SF +
Clippings
Change
Clippings
+ Change
Clippings
+ Change
Clipping Lists  easier to reacquire tasks
Change Borders  no significant improvement
32
Results: ease of reacquiring tasks
Average Quiz Window Switches
Average Upload Window Switches
Average Quiz Window Switches
Average Upload Window Switches
20.5
21
20
20.5
19.5
20
19
19.5
18.5
19
18
18.5
17.5
18
17
17.5
16.5
17
16.5
SF
SF
SF +
Clippings Clippings
Change
+ Change
SF +
Clippings Clippings
Change
+ Change
Average
Average
# of#Switches
of Switches
Average
Average
# of#Switches
of Switches
21
20
18
20
16
18
14
16
12
14
10
12
8
10
6
8
4
6
2
4
0
2
0
SF
SF
SF +
Clippings
Change
SF +
Clippings
Change
Clippings
+ Change
Clippings
+ Change
Clipping Lists  easier to reacquire tasks
Change Borders  no significant improvement
33
Results: user satisfaction

Clipping List UIs
 rated better than those without

Change Border UIs
 rated better than those without

Preferred UI




17
4
2
2
– Clipping Lists + Change Borders
– Scalable Fabric + Change Borders
– Clipping Lists
– Scalable Fabric
34
Results: user satisfaction

Clipping List UIs
 rated better than those without

Change Border UIs
 rated better than those without

Preferred UI




17
4
2
2
– Clipping Lists + Change Borders
– Scalable Fabric + Change Borders
– Clipping Lists
– Scalable Fabric
35
Results: user satisfaction

Clipping List UIs
 rated better than those without

Change Border UIs
 rated better than those without

Preferred UI




17
4
2
2
– Clipping Lists + Change Borders
– Scalable Fabric + Change Borders
– Clipping Lists
– Scalable Fabric
36
Results: user satisfaction

Clipping List UIs
 rated better than those without

Change Border UIs
 rated better than those without

Preferred UI




17
4
2
2
– Clipping Lists + Change Borders
– Scalable Fabric + Change Borders
– Clipping Lists
– Scalable Fabric
37
Results Summary


Clipping Lists were most effective for all metrics
 Overall performance
 Ability to maintain task flow
 Knowing when to resume a task
 Ease of reacquiring tasks
 User satisfaction
Improvements are cumulative, adding up to a
sizeable impact on daily multitasking productivity
 Clipping Lists
 29 seconds faster on average

Clipping Lists + Change Borders
 44 seconds faster on average
38
Peripheral Design Implications

Why were Clipping Lists more effective?


Why is this surprising?


Clippings are higher in detail than Change Borders – require
more attention
Why were Change Borders relatively
less effective?


Provided most relevant task info
Change detection didn’t provide enough
task info
Change Borders + Clipping Lists
were most effective together
39
Peripheral Design Implications



Show enough relevant task information
Even if this means more detailed visuals
Combining relevant task info with simple visuals is
best
40
Future Work

Glanceable peripheral interfaces





Relevant task info does not require excessive details
Easy to perceive & interpret visuals should perform better
Presumably, simpler visuals will be easier to perceive
What is the sweet spot between simple design and
conveying relevant info?
Automatic selection of content relevant to
user’s tasks
41
Summary
no Change
Borders
Change
Borders
no Clippings
Clippings
+ spatial layout
– no legible content
+ most relevant task info
– detailed visuals / text
+ spatial layout
+ simple visual cue
for change
– limited info
+ most relevant task info
+ simple visual cue
for change
42
Summary
no Change
Borders
Change
Borders
no Clippings
Clippings
+ spatial layout
– no legible content
+ most relevant task info
– detailed visuals / text
+ spatial layout
+ simple visual cue
for change
– limited info
+ most relevant task info
+ simple visual cue
for change
43
Summary
no Change
Borders
Change
Borders
no Clippings
Clippings
+ spatial layout
– no legible content
+ most relevant task info
– detailed visuals / text
+ spatial layout
+ simple visual cue
for change
– limited info
+ most relevant task info
+ simple visual cue
for change
44
Questions?
Contact Tara Matthews
[email protected]
Download Scalable Fabric
http://research.microsoft.com/research/downloads/
45
Extra Slides
46
Summary
Results:

showing relevant task info via Clippings best enabled users to



maintain task flow
know when to resume tasks
more easily reacquire tasks
Peripheral design implications:


providing enough relevant task info may be more important
than very simplistic designs
together, relevant task info and simplistic visuals improve
performance even more
47
Our Designs
48
Scalable Fabric

Study compares Scalable Fabric and two variations of it


Clipping Lists & Change Borders
We use SF since tasks span multiple applications and SF
keeps track of tasks across applications
49
Scaling: baseline condition

Previous study:


Scalable Fabric performed as well as
Windows & was qualitatively preferred
Scaling benefits:



convey window’s spatial layout, major
color schemes, & graphics
may enable easy recognition of
windows for reacquiring tasks
large updates are visible
…but virtually none of the content is
legible…
50
Clipping Lists: semantic content extraction




SF scaled windows are replaced
by clippings
Clippings: live window cuts,
manually created by user
Task: list of clippings
Benefits:



shows most relevant portion of window
more readable than scaled window
Disadvantages:


may provide too much info, increasing
cognitive overhead
removes spatial window layout
51
Change Borders: change detection
Red Change Border
red = change in progress
Green Change Border
green = change is complete
52
Change Borders: change detection

Benefits:



cognitive overhead is low
knowing about changes can help users know when
to resume a paused task, e.g., when waiting for
 important email
 documents to upload
 files to be checked in to a
version control system
 a compiler build to complete
 a large file or Web page to load
Disadvantages:

change doesn’t always require a
task switch, e.g.,
 moving Web page ads
 spam email
53