Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Lisa	Battle	+	Rachel	Sengers + Michael	Owens
User	experience	designers
@design4context
#UXPA2017	#multiplemonitors
Split	F...
@design4context			Split	Focus	 UXPA	2017 2
@design4context
Rachel	Sengers Michael	OwensLisa	Battle
@design4context			Split	Focus			UXPA	2017
SCALING	OUR	DESIGNS	TO	SMALLER	SCREENS
3
@design4context			Split	Focus			UXPA	2017
OUR	NEXT	CHALLENGE:	LARGE/MULTIPLE	MONITORS
4
@design4context			Split	Focus			UXPA	2017
PAGES	THAT	DON’T	SCALE	TO	LARGE/MULTIPLE	MONITORS
5
@design4context			Split	Focus	 UXPA	2017 6
THE	MULTIPLE	MONITOR	WORLD
@design4context			Split	Focus			UXPA	2017
PRODUCTIVITY	ISSUES	WITH	1	MONITOR
Colvin,	J.,	Tobler,	N.,	and	Anderson,	J.	A.	2...
@design4context			Split	Focus			UXPA	2017
PRODUCTIVITY	ISSUES	WITH	1	MONITOR
User	rely	on	taskbar	or	alt-
tab	to	switch	be...
@design4context			Split	Focus			UXPA	2017
INCREASE	IN	PRODUCTIVITY
9
@design4context			Split	Focus			UXPA	2017
USERS	TEND	NOT TO	STRETCH	WINDOWS	ACROSS	MONITORS
10
@design4context			Split	Focus			UXPA	2017
SEGMENTATION	OF	THE	WORKSPACE
11
@design4context			Split	Focus			UXPA	2017
CHALLENGES	WITH	POINTING	ACROSS	MONITORS
12
@design4context			Split	Focus			UXPA	2017
CHALLENGES	WITH	POINTING	ACROSS	MONITORS
13
The	size	of	
the	gap	can	
increase	t...
@design4context			Split	Focus			UXPA	2017
CHALLENGES	WITH	POINTING
14
D.	R.	Hutchings. An	Investigation	of	Fitts'	Law	in	a...
@design4context			Split	Focus			UXPA	2017
CHANGES	TO	FITTS’	LAW
15
D.	R.	Hutchings. An	Investigation	of	Fitts'	Law	in	a	Mu...
@design4context			Split	Focus			UXPA	2017
CHALLENGES	WITH	POINTING
16
Omata,	Masaki, Kosaka,	Masahiro, Imamiya,	Atsumi	(20...
@design4context			Split	Focus			UXPA	2017
CHALLENGES	WITH	POINTING
17
tinkertry.com/logitech-multiple-desktop-mouse-mappin...
@design4context			Split	Focus			UXPA	2017
FIELD	OF	VISION
18
V.	Witka,	Perceptual	Issues	in	Multi-Display	Environments.	
I...
@design4context			Split	Focus			UXPA	2017
FIELD	OF	VISION
19
en.wikipedia.org/wiki/Peripheral_vision
@design4context			Split	Focus			UXPA	2017
FIELD	OF	VISION
20
en.wikipedia.org/wiki/Peripheral_vision
@design4context			Split	Focus			UXPA	2017
FIELD	OF	VISION
21
en.wikipedia.org/wiki/Peripheral_vision
@design4context			Split	Focus	 UXPA	2017 22
USAGE	PATTERNS
@design4context			Split	Focus	 UXPA	2017 23
THE	MULTI-TASKER
@design4context			Split	Focus	 UXPA	2017 24
THE	RESEARCHER
@design4context			Split	Focus	 UXPA	2017 25
THE	INSPECTOR
@design4context			Split	Focus	 UXPA	2017 26
THE	DEEP	DIVER
@design4context			Split	Focus	 UXPA	2017 27
THE	ALEXANDER
“When	Alexander	saw	
the	breadth	of	his	domain,	
he	wept	for	the...
@design4context			Split	Focus	 UXPA	2017 28
THE	ALEXANDER
@design4context			Split	Focus	 UXPA	2017 29
DESIGN	PRINCIPLES	&	CONSIDERATIONS
@design4context			Split	Focus	 UXPA	2017 30
ORGANIZING	&	GROUPING	WINDOWS
MOVING	PAGES	ACROSS	MONITORS1
@design4context			Split	Focus			UXPA	2017
SETTINGS
31
DESIGN	FOR	CONTEXT	PROJECT
Many	users	do	not	know	
how	to	open	links...
@design4context			Split	Focus			UXPA	2017 32
DESIGN	FOR	CONTEXT	PROJECT
AUTOMATICALLY	POP	OUT	WINDOWS
LIST	IN	PRIMARY	WIND...
@design4context			Split	Focus			UXPA	2017 33
DESIGN	FOR	CONTEXT	PROJECT
AD-HOC	CHOICES
USER	LAUNCHES	AN	ACTION
In	this	app...
@design4context			Split	Focus			UXPA	2017 34
DESIGN	FOR	CONTEXT	PROJECT
AD-HOC	CHOICES
…	And	user	can	choose	to	
click	a	“...
@design4context			Split	Focus			UXPA	2017 35
DESIGN	FOR	CONTEXT	PROJECT
AD-HOC	CHOICES
PARENT	WINDOW
NEW	WINDOW
Form	is	no...
@design4context			Split	Focus			UXPA	2017
SETTINGS:	LET	THE	USER	DECIDE
36
In	this	app,	users	have	
several	different	opti...
@design4context			Split	Focus			UXPA	2017
LET	THE	USER	DECIDE
37
Example	of	opening	items	
in	new	browser	tabs	
(in	the	sa...
@design4context			Split	Focus			UXPA	2017
LET	THE	USER	DECIDE
38
DESIGN	FOR	CONTEXT	PROJECT
@design4context			Split	Focus			UXPA	2017
LET	THE	USER	DECIDE
39
Example	of	opening	items	
from	the	workflow	
application’...
@design4context			Split	Focus			UXPA	2017
LET	THE	USER	DECIDE
40
Example	of	choosing	
“on	the	fly”	where	to	
open	items
DE...
@design4context			Split	Focus	 UXPA	2017 41
ORGANIZING	&	GROUPING	WINDOWS
MENUS	&	GLOBAL	NAVIGATION2
@design4context			Split	Focus			UXPA	2017
GLOBAL	NAV	IN	PRIMARY	WINDOW
42
DESIGN	FOR	CONTEXT	PROJECT
Primary	window	
has	g...
@design4context			Split	Focus			UXPA	2017
GLOBAL	NAV	IN	CHILD	WINDOWS
43
Example	of	global	
navigation	in	child	window	
to...
@design4context			Split	Focus			UXPA	2017
PROBLEM:	CLOSING	THE	PRIMARY	WINDOW
44
DESIGN	FOR	CONTEXT	PROJECT
@design4context			Split	Focus			UXPA	2017
PROBLEM:	CLOSING	THE	PRIMARY	WINDOW
45
If	the	user	closes	the	
primary	window,	c...
@design4context			Split	Focus	 UXPA	2017 46
ORGANIZING	&	GROUPING	WINDOWS
PAGE	LAYOUT3
@design4context			Split	Focus			UXPA	2017
MAKE	USE	OF	THE	REAL	ESTATE
47
TOOLBOX
TOOL	A TOOL	B TOOL	C
Modular	areas	in	the...
@design4context			Split	Focus			UXPA	2017
MAKE	USE	OF	THE	REAL	ESTATE
48
DESIGN	FOR	CONTEXT	PROJECT
One	tool	can	overlap	
...
@design4context			Split	Focus			UXPA	2017
MAKE	USE	OF	THE	REAL	ESTATE
49
Ability	to	scale	to	a	narrow	
width	is	helpful	fo...
@design4context			Split	Focus	 UXPA	2017 50
NAVIGATING	&	KEEPING	TRACK	OF	WINDOWS
@design4context			Split	Focus			UXPA	2017
THE	BROWSER	TITLE	BAR	IS	YOUR	FRIEND
FAVICON PAGE	TITLE
answers.microsoft.com
51
@design4context			Split	Focus			UXPA	2017
PAGE	TITLES	USED	IN	BROWSER	TABS
52
PAGE	TITLE
DESIGN	FOR	CONTEXT	PROJECT
@design4context			Split	Focus			UXPA	2017
PAGE	TITLES	USED	IN	NAVIGATING	BETWEEN	CHILD	WINDOWS
53
PAGE	TITLE
PAGE	TITLE
En...
@design4context			Split	Focus			UXPA	2017
PAGE	TITLES	ACCESSED	FROM	THE	WINDOWS	TRAY
54
DESIGN	FOR	CONTEXT	PROJECT
@design4context			Split	Focus			UXPA	2017
SIGNPOSTING	AT	THE	TOP	OF	THE	PAGE
55
Prominent	identifying	information	
in	head...
@design4context			Split	Focus			UXPA	2017
COLOR	CODING	PREFERENCES
56
DESIGN	FOR	CONTEXT	PROJECT
@design4context			Split	Focus			UXPA	2017
COLOR	CODING	PREFERENCES:	PAGES	RELATED	BY	SERIAL	NUMBER
57
In	this	option,	colo...
@design4context			Split	Focus			UXPA	2017
COLOR	CODING	PREFERENCES:	SAME	TASK	WORKSPACE
58
In	this	option,	color	
coding	i...
@design4context			Split	Focus			UXPA	2017
SIGNPOSTING	ON	FORMS
59
PARENT	WINDOW
FORM	IN	NEW	WINDOW
Top	of	page	identifies	...
@design4context			Split	Focus			UXPA	2017
RECENTLY	VIEWED
60
Provide	a	list	of	any	
pages	the	user	currently	
has	open	or	...
@design4context			Split	Focus			UXPA	2017
RECENTLY	VIEWED
61
If	secondary	window	is	
already	open,	the	app	
brings	it	to	f...
@design4context			Split	Focus	 UXPA	2017 62
UPDATES	IN	WINDOWS	OUT	OF	VIEW
@design4context			Split	Focus			UXPA	2017
NOTIFICATIONS:	TOASTS
63
SLACK	www.youtube.com/watch?v=cfkX8oTalDg
Web	push	noti...
@design4context			Split	Focus			UXPA	2017
NOTIFICATIONS:	EMAILS,	SMS
64
BASE	CRM
@design4context			Split	Focus			UXPA	2017
NOTIFICATIONS:	AUDIO
65
SLACK
Assigning	different	sounds	to	
different	kinds	of	...
@design4context			Split	Focus			UXPA	2017
LET	USER	KNOW	WHAT	HAPPENED	WHILE	THEY	WERE	AWAY
66
This	app	lets	you	know	
new	...
@design4context			Split	Focus			UXPA	2017
CLEARLY	INDICATE	STATUS;	AUTO-REFRESH	STATUS
67
DESIGN	FOR	CONTEXT	PROJECT
@design4context			Split	Focus			UXPA	2017
ONCE	AGAIN,	THE	BROWSER	TITLE	BAR	IS	YOUR	FRIEND
68
Dynamic	page	title	– number	...
@design4context			Split	Focus			UXPA	2017
ONCE	AGAIN,	THE	BROWSER	TITLE	BAR	IS	YOUR	FRIEND
Animated	page	title	
69
FACEBOO...
@design4context			Split	Focus			UXPA	2017
ONCE	AGAIN,	THE	BROWSER	TITLE	BAR	IS	YOUR	FRIEND
70
Dynamic	favicon	– status	ind...
@design4context			Split	Focus	 UXPA	2017 71
DOWNSIZING	&	UPSIZING
@design4context			Split	Focus			UXPA	2017
SETTINGS	FOR	WINDOW	BEHAVIOR
72
DESIGN	FOR	CONTEXT	PROJECT
@design4context			Split	Focus			UXPA	2017
2-WINDOW	SETTING
73
LIST	IN	PRIMARY	WINDOW
DETAIL	IN	NEW	WINDOW
DESIGN	FOR	CONTE...
@design4context			Split	Focus			UXPA	2017
1-WINDOW	SETTING
74
LIST	IN	PRIMARY	WINDOW DETAIL	IN	SAME	WINDOW
DESIGN	FOR	CONT...
@design4context			Split	Focus			UXPA	2017
CONSOLIDATING	WINDOWS	/	RE-DOCKING
75
Pop	out	a	window	
and	pull	it	into	a	
diff...
@design4context			Split	Focus	 UXPA	2017 76
THE	BIG	PICTURE
@design4context			Split	Focus			UXPA	2017
DESIGNING	FOR	A	CONTINUUM	OF	DISPLAYS
77
@design4context			Split	Focus	 UXPA	2017 78
WRAP-UP
#UXPA2017		#multiplemonitors		@design4context
THE	MULTIPLE	MONITOR	WOR...
Lisa	Battle	+	Rachel	Sengers + Michael	Owens
User	experience	designers
@design4context
#UXPA2017	#multiplemonitors
Split	f...
Upcoming SlideShare
Loading in …5
×

Split Focus: Designing Applications for Multiple Monitor Setups

1,116 views

Published on

Presentation by Lisa Battle, Rachel Sengers, and Michael Owens at the UXPA2017 conference in Toronto, Ontario, on June 8, 2017.

The next big challenge on the horizon for UX in application design is not about the small screen—it’s about going large. Large monitors keep getting cheaper – and higher resolution – so many users working with SaaS and enterprise applications today have multiple monitors on their desks. It is frustrating for those users when applications do not scale well to a larger size, wasting screen real estate, and not taking advantage of the additional monitors to support side-by-side comparisons and multi-tasking that are common to knowledge workers in many domains. As UX design consultants, we are increasingly seeing opportunities to improve user experience and productivity for business users by utilizing multiple monitors. In this presentation, we discuss new UX design patterns and challenges that arise in software and web-based application design for multiple monitors, illustrating them with real project examples.

Published in: Technology

Split Focus: Designing Applications for Multiple Monitor Setups

  1. 1. Lisa Battle + Rachel Sengers + Michael Owens User experience designers @design4context #UXPA2017 #multiplemonitors Split Focus DESIGNING APPLICATIONS FOR MULTIPLE MONITOR SETUPS UXPA • 8 JUNE, 2017
  2. 2. @design4context Split Focus UXPA 2017 2 @design4context Rachel Sengers Michael OwensLisa Battle
  3. 3. @design4context Split Focus UXPA 2017 SCALING OUR DESIGNS TO SMALLER SCREENS 3
  4. 4. @design4context Split Focus UXPA 2017 OUR NEXT CHALLENGE: LARGE/MULTIPLE MONITORS 4
  5. 5. @design4context Split Focus UXPA 2017 PAGES THAT DON’T SCALE TO LARGE/MULTIPLE MONITORS 5
  6. 6. @design4context Split Focus UXPA 2017 6 THE MULTIPLE MONITOR WORLD
  7. 7. @design4context Split Focus UXPA 2017 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
  8. 8. @design4context Split Focus UXPA 2017 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
  9. 9. @design4context Split Focus UXPA 2017 INCREASE IN PRODUCTIVITY 9
  10. 10. @design4context Split Focus UXPA 2017 USERS TEND NOT TO STRETCH WINDOWS ACROSS MONITORS 10
  11. 11. @design4context Split Focus UXPA 2017 SEGMENTATION OF THE WORKSPACE 11
  12. 12. @design4context Split Focus UXPA 2017 CHALLENGES WITH POINTING ACROSS MONITORS 12
  13. 13. @design4context Split Focus UXPA 2017 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.
  14. 14. @design4context Split Focus UXPA 2017 CHALLENGES WITH POINTING 14 D. R. Hutchings. An Investigation of Fitts' Law in a Multiple-Display Environment. Proc. CHI 2012, ACM Press, 3181-3184.
  15. 15. @design4context Split Focus UXPA 2017 CHANGES TO FITTS’ LAW 15 D. R. Hutchings. An Investigation of Fitts' Law in a Multiple-Display Environment. Proc. CHI 2012, ACM Press, 3181-3184.
  16. 16. @design4context Split Focus UXPA 2017 CHALLENGES WITH POINTING 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. 17. @design4context Split Focus UXPA 2017 CHALLENGES WITH POINTING 17 tinkertry.com/logitech-multiple-desktop-mouse-mappings-for-windows-10
  18. 18. @design4context Split Focus UXPA 2017 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
  19. 19. @design4context Split Focus UXPA 2017 FIELD OF VISION 19 en.wikipedia.org/wiki/Peripheral_vision
  20. 20. @design4context Split Focus UXPA 2017 FIELD OF VISION 20 en.wikipedia.org/wiki/Peripheral_vision
  21. 21. @design4context Split Focus UXPA 2017 FIELD OF VISION 21 en.wikipedia.org/wiki/Peripheral_vision
  22. 22. @design4context Split Focus UXPA 2017 22 USAGE PATTERNS
  23. 23. @design4context Split Focus UXPA 2017 23 THE MULTI-TASKER
  24. 24. @design4context Split Focus UXPA 2017 24 THE RESEARCHER
  25. 25. @design4context Split Focus UXPA 2017 25 THE INSPECTOR
  26. 26. @design4context Split Focus UXPA 2017 26 THE DEEP DIVER
  27. 27. @design4context Split Focus UXPA 2017 27 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.
  28. 28. @design4context Split Focus UXPA 2017 28 THE ALEXANDER
  29. 29. @design4context Split Focus UXPA 2017 29 DESIGN PRINCIPLES & CONSIDERATIONS
  30. 30. @design4context Split Focus UXPA 2017 30 ORGANIZING & GROUPING WINDOWS MOVING PAGES ACROSS MONITORS1
  31. 31. @design4context Split Focus UXPA 2017 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
  32. 32. @design4context Split Focus UXPA 2017 32 DESIGN FOR CONTEXT PROJECT 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
  33. 33. @design4context Split Focus UXPA 2017 33 DESIGN FOR CONTEXT PROJECT AD-HOC CHOICES USER LAUNCHES AN ACTION In this app, forms appear in the parent window by default… FORM OVERLAY
  34. 34. @design4context Split Focus UXPA 2017 34 DESIGN FOR CONTEXT PROJECT AD-HOC CHOICES … And user can choose to click a “pop out” button to tear off the form into a new window FORM OVERLAY
  35. 35. @design4context Split Focus UXPA 2017 35 DESIGN FOR CONTEXT PROJECT AD-HOC CHOICES PARENT WINDOW NEW WINDOW Form is now popped out in a new window and user can move it to another monitor
  36. 36. @design4context Split Focus UXPA 2017 SETTINGS: LET THE USER DECIDE 36 In this app, users have several different options for the default window behavior DESIGN FOR CONTEXT PROJECT
  37. 37. @design4context Split Focus UXPA 2017 LET THE USER DECIDE 37 Example of opening items in new browser tabs (in the same browser window) DESIGN FOR CONTEXT PROJECT
  38. 38. @design4context Split Focus UXPA 2017 LET THE USER DECIDE 38 DESIGN FOR CONTEXT PROJECT
  39. 39. @design4context Split Focus UXPA 2017 LET THE USER DECIDE 39 Example of opening items from the workflow application’s “to do” list in a new browser window NEW WINDOW DESIGN FOR CONTEXT PROJECT
  40. 40. @design4context Split Focus UXPA 2017 LET THE USER DECIDE 40 Example of choosing “on the fly” where to open items DESIGN FOR CONTEXT PROJECT
  41. 41. @design4context Split Focus UXPA 2017 41 ORGANIZING & GROUPING WINDOWS MENUS & GLOBAL NAVIGATION2
  42. 42. @design4context Split Focus UXPA 2017 GLOBAL NAV IN PRIMARY WINDOW 42 DESIGN FOR CONTEXT PROJECT Primary window has global nav bar at top of page In this app, secondary window does not have global nav
  43. 43. @design4context Split Focus UXPA 2017 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 DESIGN FOR CONTEXT PROJECT
  44. 44. @design4context Split Focus UXPA 2017 PROBLEM: CLOSING THE PRIMARY WINDOW 44 DESIGN FOR CONTEXT PROJECT
  45. 45. @design4context Split Focus UXPA 2017 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? DESIGN FOR CONTEXT PROJECT
  46. 46. @design4context Split Focus UXPA 2017 46 ORGANIZING & GROUPING WINDOWS PAGE LAYOUT3
  47. 47. @design4context Split Focus UXPA 2017 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 DESIGN FOR CONTEXT PROJECT
  48. 48. @design4context Split Focus UXPA 2017 MAKE USE OF THE REAL ESTATE 48 DESIGN FOR CONTEXT PROJECT One tool can overlap another via tabs, when screen width is more limited.
  49. 49. @design4context Split Focus UXPA 2017 MAKE USE OF THE REAL ESTATE 49 Ability to scale to a narrow width is helpful for users with vertical monitors DESIGN FOR CONTEXT PROJECT
  50. 50. @design4context Split Focus UXPA 2017 50 NAVIGATING & KEEPING TRACK OF WINDOWS
  51. 51. @design4context Split Focus UXPA 2017 THE BROWSER TITLE BAR IS YOUR FRIEND FAVICON PAGE TITLE answers.microsoft.com 51
  52. 52. @design4context Split Focus UXPA 2017 PAGE TITLES USED IN BROWSER TABS 52 PAGE TITLE DESIGN FOR CONTEXT PROJECT
  53. 53. @design4context Split Focus UXPA 2017 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 DESIGN FOR CONTEXT PROJECT
  54. 54. @design4context Split Focus UXPA 2017 PAGE TITLES ACCESSED FROM THE WINDOWS TRAY 54 DESIGN FOR CONTEXT PROJECT
  55. 55. @design4context Split Focus UXPA 2017 SIGNPOSTING AT THE TOP OF THE PAGE 55 Prominent identifying information in header area DESIGN FOR CONTEXT PROJECT
  56. 56. @design4context Split Focus UXPA 2017 COLOR CODING PREFERENCES 56 DESIGN FOR CONTEXT PROJECT
  57. 57. @design4context Split Focus UXPA 2017 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 DESIGN FOR CONTEXT PROJECT
  58. 58. @design4context Split Focus UXPA 2017 COLOR CODING PREFERENCES: SAME TASK WORKSPACE 58 In this option, color coding is used to visually group windows that pertain to the same task
  59. 59. @design4context Split Focus UXPA 2017 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. DESIGN FOR CONTEXT PROJECT
  60. 60. @design4context Split Focus UXPA 2017 RECENTLY VIEWED 60 Provide a list of any pages the user currently has open or has recently viewed DESIGN FOR CONTEXT PROJECT
  61. 61. @design4context Split Focus UXPA 2017 RECENTLY VIEWED 61 If secondary window is already open, the app brings it to front DESIGN FOR CONTEXT PROJECT User can re-launch any page from the Recently Viewed tray
  62. 62. @design4context Split Focus UXPA 2017 62 UPDATES IN WINDOWS OUT OF VIEW
  63. 63. @design4context Split Focus UXPA 2017 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
  64. 64. @design4context Split Focus UXPA 2017 NOTIFICATIONS: EMAILS, SMS 64 BASE CRM
  65. 65. @design4context Split Focus UXPA 2017 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.
  66. 66. @design4context Split Focus UXPA 2017 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
  67. 67. @design4context Split Focus UXPA 2017 CLEARLY INDICATE STATUS; AUTO-REFRESH STATUS 67 DESIGN FOR CONTEXT PROJECT
  68. 68. @design4context Split Focus UXPA 2017 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
  69. 69. @design4context Split Focus UXPA 2017 ONCE AGAIN, THE BROWSER TITLE BAR IS YOUR FRIEND Animated page title 69 FACEBOOK MESSAGING The page title swaps back and forth; the animation gets your attention
  70. 70. @design4context Split Focus UXPA 2017 ONCE AGAIN, THE BROWSER TITLE BAR IS YOUR FRIEND 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
  71. 71. @design4context Split Focus UXPA 2017 71 DOWNSIZING & UPSIZING
  72. 72. @design4context Split Focus UXPA 2017 SETTINGS FOR WINDOW BEHAVIOR 72 DESIGN FOR CONTEXT PROJECT
  73. 73. @design4context Split Focus UXPA 2017 2-WINDOW SETTING 73 LIST IN PRIMARY WINDOW DETAIL IN NEW WINDOW DESIGN FOR CONTEXT PROJECT
  74. 74. @design4context Split Focus UXPA 2017 1-WINDOW SETTING 74 LIST IN PRIMARY WINDOW DETAIL IN SAME WINDOW DESIGN FOR CONTEXT PROJECT
  75. 75. @design4context Split Focus UXPA 2017 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
  76. 76. @design4context Split Focus UXPA 2017 76 THE BIG PICTURE
  77. 77. @design4context Split Focus UXPA 2017 DESIGNING FOR A CONTINUUM OF DISPLAYS 77
  78. 78. @design4context Split Focus UXPA 2017 78 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
  79. 79. Lisa Battle + Rachel Sengers + Michael Owens User experience designers @design4context #UXPA2017 #multiplemonitors Split focus DESIGNING APPLICATIONS FOR MULTIPLE MONITOR SETUPS UXPA • 8 JUNE, 2017

×