Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Split Focus: Designing Applications for Multiple Monitor Setups

1 084 vues

Publié le

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.

Publié dans : Technologie
  • Soyez le premier à commenter

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

×