Split Focus: Designing Applications for Multiple Monitor Setups

Lisa Battle + Rachel Sengers + Michael Owens
User experience designers
@design4context
#UXPA2017 #multiplemonitors
Split Focus
DESIGNING APPLICATIONS FOR MULTIPLE MONITOR SETUPS
UXPA • 8 JUNE, 2017

@design4context Split Focus UXPA 2017 2
@design4context
Rachel Sengers Michael OwensLisa Battle

@design4context Split Focus UXPA 2017
SCALING OUR DESIGNS TO SMALLER SCREENS
3

OUR NEXT CHALLENGE: LARGE/MULTIPLE MONITORS
4

PAGES THAT DON’T SCALE TO LARGE/MULTIPLE MONITORS
5

THE MULTIPLE MONITOR WORLD

PRODUCTIVITY ISSUES WITH 1 MONITOR
Colvin, J., Tobler, N., and Anderson, J. A. 2004. Productivity and multi-screen displays. Rocky Mountain Comm. Review 2, 1 (2004), Dept. Comm. Univ. Utah, 31-53.
Truemper, J. M., Sheng, H., Hilgers, M. G., Hall, R. H., & Kalliny, M. (2008). The Effect of Multiple Monitor Display on User Performance and Multi-tasking. The DATA BASE for Advances in
Information Systems: Special Issue on HCI in IS.
7

PRODUCTIVITY ISSUES WITH 1 MONITOR
User rely on taskbar or alt-
tab to switch between
windows. Productivity is
reduced by time spent
switching between
windows.
8

INCREASE IN PRODUCTIVITY
9

USERS TEND NOT TO STRETCH WINDOWS ACROSS MONITORS
10

SEGMENTATION OF THE WORKSPACE
11

CHALLENGES WITH POINTING ACROSS MONITORS
12

CHALLENGES WITH POINTING ACROSS MONITORS
13
The size of
the gap can
increase the
challenges
D. R. Hutchings. An Investigation of Fitts' Law in a Multiple-Display
Environment. Proc. CHI 2012, ACM Press, 3181-3184.

CHALLENGES WITH POINTING
14

CHANGES TO FITTS’ LAW
15

16
Omata, Masaki, Kosaka, Masahiro, Imamiya, Atsumi (2009): A pen-tablet-orientation-pointing method for multi-monitors.
In Proceedings of CHINZ09, the ACM SIGCHI New Zealand Chapters International Conference on Computer-Human Interaction , 2009, pp. 53-60.

17
tinkertry.com/logitech-multiple-desktop-mouse-mappings-for-windows-10

FIELD OF VISION
18
V. Witka, Perceptual Issues in Multi-Display Environments.
In Mobile Multi-Display Environments. Advances in Embedded Interactive Systems, Technical Report, Volume 4, Issue 2. Winter 2015/2016. ISSN:2198-9494.
-100° 100°
-60 60°
-30 30°
10°-10°
Reading
Symbols Symbols
Color Color
Movement Movement

FIELD OF VISION
19
en.wikipedia.org/wiki/Peripheral_vision

FIELD OF VISION
20

FIELD OF VISION
21

USAGE PATTERNS

THE MULTI-TASKER

THE RESEARCHER

THE INSPECTOR

THE DEEP DIVER

THE ALEXANDER
“When Alexander saw
the breadth of his domain,
he wept for there were
no more worlds to conquer.” *
Alan Rickman as Hans Gruber, Die Hard
* Not an actual quote.

THE ALEXANDER

DESIGN PRINCIPLES & CONSIDERATIONS

ORGANIZING & GROUPING WINDOWS
MOVING PAGES ACROSS MONITORS1

SETTINGS
31
DESIGN FOR CONTEXT PROJECT
Many users do not know
how to open links in new
windows or tear off tabs
into new windows
You could have your app
automatically do it for
them
DIALOG FOR FIRST-TIME USERS

AUTOMATICALLY POP OUT WINDOWS
LIST IN PRIMARY WINDOW
DETAIL IN SECONDARY WINDOW
User can move this window into another monitor
Be consistent about
which types of pages
you launch in a
secondary window
Remember the size
& position of the
user’s secondary
windows
Decide if each page
will launch a new
window or always
appear in same
secondary window

AD-HOC CHOICES
USER LAUNCHES AN ACTION
In this app, forms
appear in the parent
window by default…
FORM OVERLAY

AD-HOC CHOICES
… And user can choose to
click a “pop out” button
to tear off the form into a
new window
FORM OVERLAY

AD-HOC CHOICES
PARENT WINDOW
NEW WINDOW
Form is now popped out
in a new window and user
can move it to another
monitor

SETTINGS: LET THE USER DECIDE
36
In this app, users have
several different options
for the default window
behavior

LET THE USER DECIDE
37
Example of opening items
in new browser tabs
(in the same browser
window)

LET THE USER DECIDE
38

LET THE USER DECIDE
39
Example of opening items
from the workflow
application’s “to do” list in
a new browser window
NEW WINDOW

LET THE USER DECIDE
40
Example of choosing
“on the fly” where to
open items

MENUS & GLOBAL NAVIGATION2

GLOBAL NAV IN PRIMARY WINDOW
42
Primary window
has global nav bar
at top of page In this app,
secondary
window does not
have global nav

GLOBAL NAV IN CHILD WINDOWS
43
Example of global
navigation in child window
to support users in
handling interruptions and
task switching
PARENT WINDOW CHILD WINDOW

PROBLEM: CLOSING THE PRIMARY WINDOW
44

PROBLEM: CLOSING THE PRIMARY WINDOW
45
If the user closes the
primary window, can they
continue working in the
child windows?
How can they re-open the
primary window?

PAGE LAYOUT3

MAKE USE OF THE REAL ESTATE
47
TOOLBOX
TOOL A TOOL B TOOL C
Modular areas in the UI
can be re-sized and re-
positioned in a docking
framework

48
One tool can overlap
another via tabs, when
screen width is more limited.

49
Ability to scale to a narrow
width is helpful for users
with vertical monitors

NAVIGATING & KEEPING TRACK OF WINDOWS

THE BROWSER TITLE BAR IS YOUR FRIEND
FAVICON PAGE TITLE
answers.microsoft.com
51

PAGE TITLES USED IN BROWSER TABS
52
PAGE TITLE

PAGE TITLES USED IN NAVIGATING BETWEEN CHILD WINDOWS
53
PAGE TITLE
PAGE TITLE
Ensure that the most
important identifying
information is at the
front of the page title
string, since it is often
truncated

PAGE TITLES ACCESSED FROM THE WINDOWS TRAY
54

SIGNPOSTING AT THE TOP OF THE PAGE
55
Prominent identifying information
in header area

COLOR CODING PREFERENCES
56

COLOR CODING PREFERENCES: PAGES RELATED BY SERIAL NUMBER
57
In this option, color
coding is used to
visually group
windows that pertain
to the same work
item

COLOR CODING PREFERENCES: SAME TASK WORKSPACE
58
In this option, color
coding is used to
visually group
windows that pertain
to the same task

SIGNPOSTING ON FORMS
59
PARENT WINDOW
FORM IN NEW WINDOW
Top of page identifies the
object the form is
operating on. It includes
a link to object’s detail
window.

RECENTLY VIEWED
60
Provide a list of any
pages the user currently
has open or has recently
viewed

RECENTLY VIEWED
61
If secondary window is
already open, the app
brings it to front
User can re-launch any
page from the Recently
Viewed tray

UPDATES IN WINDOWS OUT OF VIEW

NOTIFICATIONS: TOASTS
63
SLACK www.youtube.com/watch?v=cfkX8oTalDg
Web push notification
displays a toast on user’s
dominant monitor even
when your app’s window
is out of view

NOTIFICATIONS: EMAILS, SMS
64
BASE CRM

NOTIFICATIONS: AUDIO
65
SLACK
Assigning different sounds to
different kinds of alerts helps user
know level of urgency — know
whether they need to turn their
head to pay attention to your app
in their secondary monitor now.
In this app, you can get
audio notifications. You
can set different audio
sounds for different
teams.

LET USER KNOW WHAT HAPPENED WHILE THEY WERE AWAY
66
This app lets you know
new messages that
appeared since you last
focused on this window
SLACK

CLEARLY INDICATE STATUS; AUTO-REFRESH STATUS
67

ONCE AGAIN, THE BROWSER TITLE BAR IS YOUR FRIEND
68
Dynamic page title – number of updates
Dynamic fav icon w/ red badge – page has new unread updates
webdesign.tutsplus.com/tutorials/how-to-display-update-notifications-in-the-browser-tab--cms-23458
SLACK

Animated page title
69
FACEBOOK MESSAGING
The page title swaps back
and forth; the animation
gets your attention

70
Dynamic favicon – status indicator
Dynamic favicon & page title – progress indicator
blog.placeit.net/creative-uses-favicons/ Image by Little Big Details
blog.placeit.net/creative-uses-favicons/ Image by Little Big Details

DOWNSIZING & UPSIZING

SETTINGS FOR WINDOW BEHAVIOR
72

2-WINDOW SETTING
73
LIST IN PRIMARY WINDOW
DETAIL IN NEW WINDOW

1-WINDOW SETTING
74
LIST IN PRIMARY WINDOW DETAIL IN SAME WINDOW

CONSOLIDATING WINDOWS / RE-DOCKING
75
Pop out a window
and pull it into a
different display… …then use built -in menu
options to pop it back in a
variety of configurations
PHOTOSHOP APP

THE BIG PICTURE

DESIGNING FOR A CONTINUUM OF DISPLAYS
77

WRAP-UP
#UXPA2017 #multiplemonitors @design4context
THE MULTIPLE MONITOR WORLD
• Usage trends and ergonomic
factors
USAGE PATTERNS
• Multi-tasker
• Researcher
• Inspector
• Deep diver
• Alexander
DESIGN PRINCIPLES & CONSIDERATIONS
Organizing & grouping windows
• Moving pages across monitors
• Menus & global navigation
• Page layout
Navigating & keeping track of windows
Updates in windows out of view
Downsizing & upsizing

Lisa Battle + Rachel Sengers + Michael Owens
User experience designers
@design4context
#UXPA2017 #multiplemonitors
Split focus
DESIGNING APPLICATIONS FOR MULTIPLE MONITOR SETUPS
UXPA • 8 JUNE, 2017

Split Focus: Designing Applications for Multiple Monitor Setups

Recommended

Recommended

More Related Content

Similar to Split Focus: Designing Applications for Multiple Monitor Setups

Similar to Split Focus: Designing Applications for Multiple Monitor Setups (15)

More from Design for Context

More from Design for Context (20)

Recently uploaded

Recently uploaded (20)

Split Focus: Designing Applications for Multiple Monitor Setups