ISA11 - Bill Scott - Designing Mice Men

1,844 views

Published on

Published in: Design, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,844
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
24
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

ISA11 - Bill Scott - Designing Mice Men

  1. 1. Designing for Mice & Men* Bill Scott, PayPalThursday, December 8, 2011
  2. 2. to o! en wom *and Designing for Mice & Men* Bill Scott, PayPalThursday, December 8, 2011
  3. 3. Thursday, December 8, 2011
  4. 4. From DVDs by Mail & WebsiteThursday, December 8, 2011
  5. 5. To Streaming on 100’s of DevicesThursday, December 8, 2011
  6. 6. Led to Experience Explosion (400 SKUs)Thursday, December 8, 2011
  7. 7. It is Better to “Own” the Experience Netflix...Thursday, December 8, 2011
  8. 8. It is Better to “Own” the Experience Netflix... Is known for valuing UX -- can’t do it if you don’t own itThursday, December 8, 2011
  9. 9. It is Better to “Own” the Experience Netflix... Is known for valuing UX -- can’t do it if you don’t own it Lives by server-driven, testable, dynamic UIsThursday, December 8, 2011
  10. 10. It is Better to “Own” the Experience Netflix... Is known for valuing UX -- can’t do it if you don’t own it Lives by server-driven, testable, dynamic UIs Believes agile is better than rigid firmware processThursday, December 8, 2011
  11. 11. It is Better to “Own” the Experience Netflix... Is known for valuing UX -- can’t do it if you don’t own it Lives by server-driven, testable, dynamic UIs Believes agile is better than rigid firmware process Values “Learn Fast/Fail Quickly”Thursday, December 8, 2011
  12. 12. Netflix “Owned” Experience Across DevicesThursday, December 8, 2011
  13. 13. Netflix “Owned” Experience Across Devices Web Tablet Mobile TVThursday, December 8, 2011
  14. 14. Netflix “Owned” Experience Across Devices Web Browser iOS Webkit QT Webkit & iOS Webkit Skia WebkitThursday, December 8, 2011
  15. 15. Netflix “Owned” Experience Across Devices HTML5 HTML5 HTML5 HTML5Thursday, December 8, 2011
  16. 16. What Differs Across Devices?Thursday, December 8, 2011
  17. 17. What Differs Across Devices? Web Input Indirect. Pointer/keyboard Navigation Controls & windows Posture Stationary Working Display Hi-Rez Large, NearThursday, December 8, 2011
  18. 18. What Differs Across Devices? Web TV 10’ UI Input Input Indirect. Indirect. Pointer/keyboard LRUD/OSK Navigation Navigation Controls & windows Panes Posture Posture Stationary Lean Back Working Relaxing Display Display Hi-Rez Hi-Rez Large, Large Near Far-awayThursday, December 8, 2011
  19. 19. What Differs Across Devices? Web TV Mobile 10’ UI Input Input Input Indirect. Indirect. Direct. Pointer/keyboard LRUD/OSK Gesture/OSK Navigation Navigation Navigation Controls & windows Panes Panes Posture Posture Posture Stationary Lean Back On-the-go Working Relaxing In Hand Display Display Display Hi-Rez Hi-Rez Hi-Rez Large, Large Small Near Far-away NearThursday, December 8, 2011
  20. 20. What Differs Across Devices? Web TV Mobile Tablet 10’ UI Input Input Input Input Indirect. Indirect. Direct. Direct. Pointer/keyboard LRUD/OSK Gesture/OSK Gesture/OSK Navigation Navigation Navigation Navigation Controls & windows Panes Panes Panes & Slideouts Posture Posture Posture Posture Stationary Lean Back On-the-go On-the-go Working Relaxing In Hand Lean back Shared Display Display Display Display Hi-Rez Hi-Rez Hi-Rez Hi-Rez Large, Large Small Medium, Near Far-away Near NearThursday, December 8, 2011
  21. 21. Netflix’s Strategy for Multi-DeviceThursday, December 8, 2011
  22. 22. Netflix’s Strategy for Multi-Device Chose a portability layer (html5, css3, JS)Thursday, December 8, 2011
  23. 23. Netflix’s Strategy for Multi-Device Chose a portability layer (html5, css3, JS) Yet design for each constraint:Thursday, December 8, 2011
  24. 24. Netflix’s Strategy for Multi-Device Chose a portability layer (html5, css3, JS) Yet design for each constraint: user postureThursday, December 8, 2011
  25. 25. Netflix’s Strategy for Multi-Device Chose a portability layer (html5, css3, JS) Yet design for each constraint: user posture input capabilitiesThursday, December 8, 2011
  26. 26. Netflix’s Strategy for Multi-Device Chose a portability layer (html5, css3, JS) Yet design for each constraint: user posture input capabilities navigation stylesThursday, December 8, 2011
  27. 27. Netflix’s Strategy for Multi-Device Chose a portability layer (html5, css3, JS) Yet design for each constraint: user posture input capabilities navigation styles display capabilitiesThursday, December 8, 2011
  28. 28. Netflix’s Strategy for Multi-Device Chose a portability layer (html5, css3, JS) Yet design for each constraint: user posture input capabilities navigation styles display capabilitiesThursday, December 8, 2011
  29. 29. Two PS3 Experiences: “SPECIAL”Thursday, December 8, 2011
  30. 30. Two PS3 Experiences: “PLUS”Thursday, December 8, 2011
  31. 31. So what’s common? design principles fundamental, universal ideas that underpin good design across different input methods, display capabilities and user postureThursday, December 8, 2011
  32. 32. Design Principles 3 common design principles for multiple platform designThursday, December 8, 2011
  33. 33. #1 Get PhysicalThursday, December 8, 2011
  34. 34. The Illusion of PhysicalityThursday, December 8, 2011
  35. 35. The Illusion of Physicality +Thursday, December 8, 2011
  36. 36. Design for PhysicalityThursday, December 8, 2011
  37. 37. Design for Physicality ossible, add a realistic, Whenever p application. ical dimensi on to your physThursday, December 8, 2011
  38. 38. Design for Physicality ossible, add a realistic, Whenever p application. ical dimensi on to your phys - Apple HIGThursday, December 8, 2011
  39. 39. tegy Stra Use Metaphors to Embody PhysicalityThursday, December 8, 2011
  40. 40. Thursday, December 8, 2011
  41. 41. Thursday, December 8, 2011 X
  42. 42. Thursday, December 8, 2011 X Not talk visual c p ing about a onstruct. B hysicality t information. n artificial ut instead hat fits the
  43. 43. Physicality as MetaphorThursday, December 8, 2011
  44. 44. Physicality as Metaphor Film StripThursday, December 8, 2011
  45. 45. Physicality as Metaphor BookThursday, December 8, 2011
  46. 46. Physicality as Metaphor Book “Books have pages” “Pages turn”Thursday, December 8, 2011
  47. 47. Anti-Pattern: Broken MetaphorThursday, December 8, 2011
  48. 48. Anti-Pattern: Broken MetaphorThursday, December 8, 2011
  49. 49. Anti-Pattern: Broken Metaphor Location??Thursday, December 8, 2011
  50. 50. Anti-Pattern: Broken Metaphor Location??Thursday, December 8, 2011
  51. 51. Anti-Pattern: Broken Metaphor Location??Thursday, December 8, 2011
  52. 52. Anti-Pattern: Broken Metaphor Location?? “Books have pages” Page!!Thursday, December 8, 2011
  53. 53. Anti-Pattern: Broken Metaphor t break the metaphor Don’ for the underlying lementatio n model. imp Location?? user’s mental model is The the experience cushion. “Books have pages” Page!!Thursday, December 8, 2011
  54. 54. Break the Metaphor with MagicThursday, December 8, 2011
  55. 55. Break the Metaphor with MagicThursday, December 8, 2011
  56. 56. Break the Metaphor with Magic Back to orig pageThursday, December 8, 2011
  57. 57. Break the Metaphor with Magic Back to You are orig page this farThursday, December 8, 2011
  58. 58. Break the Metaphor with Magic You are Back to You are here orig page this farThursday, December 8, 2011
  59. 59. Break the Metaphor with Magic You are You can go Back to You are here anywhere orig page this farThursday, December 8, 2011
  60. 60. Break the Metaphor with Magic You are You can go Back to You are here anywhere Pages le/ orig page this far in chapterThursday, December 8, 2011
  61. 61. Break the Metaphor with Magic Tap to change page You are You can go Back to You are here anywhere Pages le/ orig page this far in chapterThursday, December 8, 2011
  62. 62. Break the Metaphor with Magic Tap to change page You are You can go Back to You are here anywhere Pages le/ orig page this far in chapter hysicality is hard work. Strict p ic to simpli fy the real Use mag world.Thursday, December 8, 2011
  63. 63. To Flick or not to Flick (iOS4)Thursday, December 8, 2011
  64. 64. To Flick or not to Flick (iOS4) Page BindingThursday, December 8, 2011
  65. 65. To Flick or not to Flick (iOS4) Page Binding Page DepthThursday, December 8, 2011
  66. 66. To Flick or not to Flick (iOS4) Page Binding Page Depth Page’s animate a flip via scrub barThursday, December 8, 2011
  67. 67. To Flick or not to Flick (iOS4) Page Binding Page Depth However, you can’t flip or turn pages with your finger Page’s animate a flip via scrub barThursday, December 8, 2011
  68. 68. To Flick or not to Flick (iOS4) Page Binding Page Depth However, you can’t flip or turn pages with your finger Page’s animate a flip via scrub Page Page bar turning ChoosingThursday, December 8, 2011
  69. 69. Then we have this! ABC News iPad App (Metaphors Gone Wild)Thursday, December 8, 2011
  70. 70. Simply Content.Thursday, December 8, 2011
  71. 71. Simply Content.Thursday, December 8, 2011
  72. 72. tegy Stra Use Directness to Simulate PhysicalityThursday, December 8, 2011
  73. 73. Thursday, December 8, 2011
  74. 74. Thursday, December 8, 2011
  75. 75. in 1984, this was physicality - the scrollbarThursday, December 8, 2011
  76. 76. Scrollbar Evolution ControllerThursday, December 8, 2011
  77. 77. Scrollbar Evolution From Controller to Indicator Content is scrolled instead of scrollbar Controller Indicator Flick to scroll Thumbwheel is an evolution as wellThursday, December 8, 2011
  78. 78. From Mouse to Touch... TwitterThursday, December 8, 2011
  79. 79. intain Flow #2 MaThursday, December 8, 2011
  80. 80. Game Time: Spot the differencesThursday, December 8, 2011
  81. 81. Game Time: Spot the differencesThursday, December 8, 2011
  82. 82. Now try again...Thursday, December 8, 2011
  83. 83. Now try again...Thursday, December 8, 2011
  84. 84. Now try again... ness Change blindThursday, December 8, 2011
  85. 85. Change BlindnessThursday, December 8, 2011
  86. 86. Change Blindness cannot see a change The brain that it has ppening to an element ha yet stored - Wikipedia not rds, it does n’t expect In other wo contiguous. the w o rld to be disThursday, December 8, 2011
  87. 87. tegy Stra Reduce Page Switching to Maintain FlowThursday, December 8, 2011
  88. 88. “Special” ExperienceThursday, December 8, 2011
  89. 89. “Special” Experience Princ iples followed : le Focus + context, Simp rol navigati on, User ContThursday, December 8, 2011
  90. 90. “Plus” ExperienceThursday, December 8, 2011
  91. 91. “Plus” Experience Prin ciples followe d: . Conte nt is the flow xt. Inform ation in Conte . Onl y 1 experienceThursday, December 8, 2011
  92. 92. Which Won?Thursday, December 8, 2011
  93. 93. Which Won?Thursday, December 8, 2011
  94. 94. Which Won? lus” experience won. “P transitions, feels more Re duces page nematic, less jarring. ci Maintains FlowThursday, December 8, 2011
  95. 95. Twitter as iPad AppThursday, December 8, 2011
  96. 96. Twitter as iPad App Minimize page transitio ns ern w ith Page Slide pattThursday, December 8, 2011
  97. 97. Twitter as iPad App Minimize page transitio ns ern w ith Page Slide patt Open, c lose & refresh s panels with swipe gestureThursday, December 8, 2011
  98. 98. Twitter as iPad App Minimize page transitio ns ern w ith Page Slide patt Open, c lose & refresh s panels with swipe gesture tly Scroll the content direcThursday, December 8, 2011
  99. 99. Twitter as iPad App Minimize page transitio ns ern w ith Page Slide patt Open, c lose & refresh s panels with swipe gesture tly Scroll the content direc t& Ope n web conten m edia in placeThursday, December 8, 2011
  100. 100. Pattern: Page Slide http://srobbin.com/blog/jquery-pageslide/Thursday, December 8, 2011
  101. 101. Pattern: Page Slide eal estate and Page Slide extends the r ” management simplifies “window http://srobbin.com/blog/jquery-pageslide/ http://www.youtube.com/watch?v=WBv3fFg8t8gThursday, December 8, 2011
  102. 102. Twitter as Desktop Mac AppThursday, December 8, 2011
  103. 103. Twitter as Desktop Mac App s to Rethin k desktop app re use real estate mo creativelyThursday, December 8, 2011
  104. 104. Twitter as Web AppThursday, December 8, 2011
  105. 105. Twitter as Web App s Minimize page transition n with Page Slide patterThursday, December 8, 2011
  106. 106. Twitter as Web App s Minimize page transition n with Page Slide patter ith Find myself annoyed w in web p ages opening ow another windThursday, December 8, 2011
  107. 107. Twitter as Web App s Minimize page transition n with Page Slide patter ith Find myself annoyed w in web p ages opening ow another wind Find mys elf wanting to ra substi tute a drag fo swipeThursday, December 8, 2011
  108. 108. VS - Twitter’s Previous Hover & CoverThursday, December 8, 2011
  109. 109. VS - Twitter’s Previous Hover & Cover ce Where possible repla th annoying ho ver details wi nes dedicated detail paThursday, December 8, 2011
  110. 110. #3 Be ResponsiveThursday, December 8, 2011
  111. 111. Use Transitions/ Animations to Create ResponsivenessThursday, December 8, 2011
  112. 112. Thursday, December 8, 2011
  113. 113. Animation Can...Thursday, December 8, 2011
  114. 114. Animation Can...Thursday, December 8, 2011
  115. 115. Animation Can...Thursday, December 8, 2011
  116. 116. Animation Can...Thursday, December 8, 2011
  117. 117. Animation Can...Thursday, December 8, 2011
  118. 118. Animation Can... s is done with les What can be . done in vain with more - Occam al d istinctions as Make all visu r ible , but still clea subtle as poss and effective. nce” est Effective Differe - Tu/e “SmallThursday, December 8, 2011
  119. 119. Web Apps Seem Prone to ThisThursday, December 8, 2011
  120. 120. Web Apps Seem Prone to ThisThursday, December 8, 2011
  121. 121. Web Apps Seem Prone to This me Snarky answer: Bla it on Flash :-)Thursday, December 8, 2011
  122. 122. Web Apps Seem Prone to This me Snarky answer: Bla it on Flash :-) er: M ost likely answ put Ind i rectness of In ices On touch dev animat ion and input ed are synchronizThursday, December 8, 2011
  123. 123. Web Apps Seem Prone to This me Snarky answer: Bla it on Flash :-) er: M ost likely answ put Ind i rectness of In ices On touch dev animat ion and input ed are synchroniz w However, slo transitions can still be a problemThursday, December 8, 2011
  124. 124. Animation Can...Thursday, December 8, 2011
  125. 125. Animation Can... ps Reveal relationshiThursday, December 8, 2011
  126. 126. Animation Can... ps Reveal relationshi Improve s responsivenesThursday, December 8, 2011
  127. 127. Animation Can... ps Reveal relationshi Improve s responsivenes ge Sh ow state chanThursday, December 8, 2011
  128. 128. Animation Can... ps Reveal relationshi Improve s responsivenes ge Sh ow state chan on Focus attentiThursday, December 8, 2011
  129. 129. Animation Can... ps Reveal relationshi Improve s responsivenes ge Sh ow state chan on Focus attenti t Create delighThursday, December 8, 2011
  130. 130. Animation Can... ps Reveal relationshi Improve s responsivenes ge Sh ow state chan on Focus attenti t Create deligh y Simu late physicalitThursday, December 8, 2011
  131. 131. TV Experiences...Thursday, December 8, 2011
  132. 132. TV Experiences...Thursday, December 8, 2011
  133. 133. Thursday, December 8, 2011
  134. 134. Thursday, December 8, 2011
  135. 135. Can Influence Website ExperienceThursday, December 8, 2011
  136. 136. Thursday, December 8, 2011
  137. 137. Presentation billwscott.com/share/presentations/2011/bh Blogs http://looksgoodworkswell.com http://designingwebinterfaces.com Follow me on twitter! @billwscott Book http://designingwebinterfaces.com Video http://oreil.ly/dwivideo Picture Credits (Creative Commons) http://www.flickr.com/photos/rsms/ http://www.flickr.com/photos/lalegranegra/4722576618/ http://www.flickr.com/photos/tim_d/29529584/sizes/l/ http://www.flickr.com/photos/miradesdunaficionat/4519236888/sizes/z/ http://www.flickr.com/photos/zetson/ http://www.flickr.com/photos/spencereholtaway/1411877351/in/photostream/ http://creativecommons.org/nsThursday, December 8, 2011

×