1. Designing for Mice & Men* Bill Scott, PayPalThursday, December 8, 2011

2. to o!enwom *andDesigning for Mice & Men*Bill Scott, PayPalThursday, December 8, 2011 3. Thursday, December 8, 2011 4. From DVDs by Mail & WebsiteThursday, December 8, 2011 5. To Streaming on 100s of DevicesThursday, December 8, 2011 6. Led to Experience Explosion (400 SKUs)Thursday, December 8, 2011 7. It is Better to Own the Experience Netix...Thursday, December 8, 2011 8. It is Better to Own the Experience Netix... Is known for valuing UX -- cant do it if you dont own itThursday, December 8, 2011 9. It is Better to Own the Experience Netix... Is known for valuing UX -- cant do it if you dont own it Lives by server-driven, testable, dynamic UIsThursday, December 8, 2011 10. It is Better to Own the Experience Netix... Is known for valuing UX -- cant do it if you dont own it Lives by server-driven, testable, dynamic UIs Believes agile is better than rigid rmware processThursday, December 8, 2011 11. It is Better to Own the Experience Netix... Is known for valuing UX -- cant do it if you dont own it Lives by server-driven, testable, dynamic UIs Believes agile is better than rigid rmware process Values Learn Fast/Fail QuicklyThursday, December 8, 2011 12. Netix Owned Experience Across DevicesThursday, December 8, 2011 13. Netix Owned Experience Across Devices WebTablet MobileTVThursday, December 8, 2011 14. Netix Owned Experience Across DevicesWeb Browser iOS WebkitQT Webkit & iOS WebkitSkia WebkitThursday, December 8, 2011 15. Netix Owned Experience Across Devices HTML5 HTML5 HTML5 HTML5Thursday, December 8, 2011 16. What Diers Across Devices?Thursday, December 8, 2011 17. What Diers Across Devices? Web Input Indirect. Pointer/keyboard Navigation Controls & windows Posture Stationary Working Display Hi-Rez Large, NearThursday, December 8, 2011 18. What Diers Across Devices? Web TV 10 UI Input Input Indirect. Indirect. Pointer/keyboardLRUD/OSK NavigationNavigation Controls & windowsPanes Posture Posture StationaryLean Back Working Relaxing Display Display Hi-RezHi-Rez Large,Large NearFar-awayThursday, December 8, 2011 19. What Diers Across Devices? Web TV Mobile 10 UI Input InputInput Indirect. Indirect.Direct. Pointer/keyboardLRUD/OSK Gesture/OSK NavigationNavigation Navigation Controls & windowsPanesPanes Posture PosturePosture StationaryLean BackOn-the-go Working Relaxing In Hand Display DisplayDisplay Hi-RezHi-Rez Hi-Rez Large,LargeSmall NearFar-away NearThursday, December 8, 2011 20. What Diers Across Devices? Web TV MobileTablet 10 UI Input InputInput Input Indirect. Indirect.Direct. Direct. Pointer/keyboardLRUD/OSK Gesture/OSK Gesture/OSK NavigationNavigation NavigationNavigation Controls & windowsPanesPanes Panes & Slideouts Posture PosturePosture Posture StationaryLean BackOn-the-go On-the-go Working Relaxing In Hand Lean backShared Display DisplayDisplay Display Hi-RezHi-Rez Hi-RezHi-Rez Large,LargeSmall Medium, NearFar-away NearNearThursday, December 8, 2011 21. Netixs Strategy for Multi-DeviceThursday, December 8, 2011 22. Netixs Strategy for Multi-DeviceChose a portability layer (html5, css3, JS)Thursday, December 8, 2011 23. Netixs Strategy for Multi-DeviceChose a portability layer (html5, css3, JS)Yet design for each constraint:Thursday, December 8, 2011 24. Netixs Strategy for Multi-DeviceChose a portability layer (html5, css3, JS)Yet design for each constraint:user postureThursday, December 8, 2011 25. Netixs Strategy for Multi-DeviceChose a portability layer (html5, css3, JS)Yet design for each constraint:user postureinput capabilitiesThursday, December 8, 2011 26. Netixs Strategy for Multi-DeviceChose a portability layer (html5, css3, JS)Yet design for each constraint:user postureinput capabilitiesnavigation stylesThursday, December 8, 2011 27. Netixs Strategy for Multi-DeviceChose a portability layer (html5, css3, JS)Yet design for each constraint:user postureinput capabilitiesnavigation stylesdisplay capabilitiesThursday, December 8, 2011 28. Netixs Strategy for Multi-DeviceChose a portability layer (html5, css3, JS)Yet design for each constraint:user postureinput capabilitiesnavigation stylesdisplay capabilitiesThursday, December 8, 2011 29. Two PS3 Experiences: SPECIALThursday, December 8, 2011 30. Two PS3 Experiences: PLUSThursday, December 8, 2011 31. So whats common? design principles fundamental, universal ideas that underpin good design across dierent input methods, display capabilities and user postureThursday, December 8, 2011 32. Design Principles 3common design principles formultiple platform designThursday, December 8, 2011 33. #1 Get PhysicalThursday, December 8, 2011 34. The Illusion of PhysicalityThursday, December 8, 2011 35. The Illusion of Physicality +Thursday, December 8, 2011 36. Design for PhysicalityThursday, December 8, 2011 37. Design for Physicalityossible, add a realistic,Whenever p application.ical dimensi on to yourphysThursday, December 8, 2011 38. Design for Physicalityossible, add a realistic,Whenever p application.ical dimensi on to yourphys - Apple HIGThursday, December 8, 2011 39. tegyStra Use Metaphorsto Embody PhysicalityThursday, December 8, 2011 40. Thursday, December 8, 2011 41. Thursday, December 8, 2011 X 42. Thursday, December 8, 2011 X Not talk visual c ping about a onstruct. Bhysicality t information.n articial ut instead hat ts the 43. Physicality as MetaphorThursday, December 8, 2011 44. Physicality as Metaphor Film StripThursday, December 8, 2011 45. Physicality as Metaphor BookThursday, December 8, 2011 46. Physicality as Metaphor BookBooks have pagesPages turnThursday, December 8, 2011 47. Anti-Pattern: Broken MetaphorThursday, December 8, 2011 48. Anti-Pattern: Broken MetaphorThursday, December 8, 2011 49. Anti-Pattern: Broken Metaphor Location??Thursday, December 8, 2011 50. Anti-Pattern: Broken Metaphor Location??Thursday, December 8, 2011 51. Anti-Pattern: Broken Metaphor Location??Thursday, December 8, 2011 52. Anti-Pattern: Broken MetaphorLocation?? Books have pages Page!!Thursday, December 8, 2011 53. Anti-Pattern: Broken Metaphor t break the metaphor Don for theunderlyinglementation model. impLocation??users mental model isThethe experience cushion. Books have pages Page!!Thursday, December 8, 2011 54. Break the Metaphor with MagicThursday, December 8, 2011 55. Break the Metaphor with MagicThursday, December 8, 2011 56. Break the Metaphor with MagicBack to orig pageThursday, December 8, 2011 57. Break the Metaphor with MagicBack toYou are orig page this farThursday, December 8, 2011 58. Break the Metaphor with MagicYou areBack toYou are here orig page this farThursday, December 8, 2011 59. Break the Metaphor with MagicYou are You can goBack toYou are here anywhere orig page this farThursday, December 8, 2011 60. Break the Metaphor with MagicYou are You can goBack toYou are here anywhere Pages le/ orig page this farin chapterThursday, December 8, 2011 61. Break the Metaphor with MagicTap tochange pageYou are You can goBack toYou are here anywhere Pages le/ orig page this farin chapterThursday, December 8, 2011 62. Break the Metaphor with MagicTap tochange pageYou are You can goBack toYou are here anywhere Pages le/ orig page this farin chapterhysicality is hard work.Strict pic to simpli fy the real Use mag world.Thursday, December 8, 2011 63. To Flick or not to Flick (iOS4)Thursday, December 8, 2011 64. To Flick or not to Flick (iOS4)Page BindingThursday, December 8, 2011 65. To Flick or not to Flick (iOS4)Page Binding Page DepthThursday, December 8, 2011 66. To Flick or not to Flick (iOS4)Page Binding Page DepthPagesanimate a ip via scrubbarThursday, December 8, 2011 67. To Flick or not to Flick (iOS4)Page Binding Page Depth However, youcant ip orturn pages with yourngerPagesanimate a ip via scrubbarThursday, December 8, 2011 68. To Flick or not to Flick (iOS4) PageBindingPageDepthHowever, you cant ip or turn pageswith your nger Pages animate aip via scrubPage Page barturning ChoosingThursday, December 8, 2011 69. Then we have this!ABC News iPad App (Metaphors Gone Wild)Thursday, December 8, 2011 70. Simply Content.Thursday, December 8, 2011 71. Simply Content.Thursday, December 8, 2011 72. tegyStra Use Directnessto SimulatePhysicalityThursday, December 8, 2011 73. Thursday, December 8, 2011 74. Thursday, December 8, 2011 75. in 1984, this was physicality - the scrollbarThursday, December 8, 2011 76. Scrollbar Evolution ControllerThursday, December 8, 2011 77. Scrollbar Evolution From Controller to Indicator Content is scrolled instead of scrollbarControllerIndicator Flick toscroll Thumbwheel is an evolution as wellThursday, December 8, 2011 78. From Mouse to Touch... TwitterThursday, December 8, 2011 79. intain Flow #2 MaThursday, December 8, 2011 80. Game Time: Spot the dierencesThursday, December 8, 2011 81. Game Time: Spot the dierencesThursday, December 8, 2011 82. Now try again...Thursday, December 8, 2011 83. Now try again...Thursday, December 8, 2011 84. Now try again... ness Change blindThursday, December 8, 2011 85. Change BlindnessThursday, December 8, 2011 86. Change Blindnesscannot see a change The brain that it hasppening to an element hayet stored - Wikipedia not rds, it does nt expectIn other wo contiguous.the w o rld to be disThursday, December 8, 2011 87. tegyStra Reduce PageSwitching to Maintain FlowThursday, December 8, 2011 88. Special ExperienceThursday, December 8, 2011 89. Special Experience Princ iples followed : leFocus +context, Simp rolnavigati on, User ContThursday, December 8, 2011 90. Plus ExperienceThursday, December 8, 2011 91. Plus Experience Prin ciples followed:. Conte nt is the owxt. Information in Conte. Onl y 1 experienceThursday, December 8, 2011 92. Which Won?Thursday, December 8, 2011 93. Which Won?Thursday, December 8, 2011 94. Which Won? lus experience won. P transitions, feels more Reduces pagenematic, less jarring. ciMaintains FlowThursday, December 8, 2011 95. Twitter as iPad AppThursday, December 8, 2011 96. Twitter as iPad App Minimizepage transitionsern w ith Page Slide pattThursday, December 8, 2011 97. Twitter as iPad App Minimizepage transitionsern w ith Page Slide patt Open, c lose & refreshs panels withswipe gestureThursday, December 8, 2011 98. Twitter as iPad App Minimizepage transitionsern w ith Page Slide patt Open, c lose & refreshs panels withswipe gesture tly Scroll the content direcThursday, December 8, 2011 99. Twitter as iPad App Minimizepage transitionsern w ith Page Slide patt Open, c lose & refreshs panels withswipe gesture tly Scroll the content direct& Ope n web conten m edia in placeThursday, December 8, 2011 100. Pattern: Page Slidehttp://srobbin.com/blog/jquery-pageslide/Thursday, December 8, 2011 101. Pattern: Page Slideeal estate andPage Slide extends the rmanagementsimplies windowhttp://srobbin.com/blog/jquery-pageslide/ http://www.youtube.com/watch?v=WBv3fFg8t8gThursday, December 8, 2011 102. Twitter as Desktop Mac AppThursday, December 8, 2011 103. Twitter as Desktop Mac App s toRethin k desktop appreuse real estate mocreativelyThursday, December 8, 2011 104. Twitter as Web AppThursday, December 8, 2011 105. Twitter as Web Apps Minimize page transition n with Page Slide patterThursday, December 8, 2011 106. Twitter as Web Apps Minimize page transition n with Page Slide patter ith Find myself annoyed win web p ages openingow another windThursday, December 8, 2011 107. Twitter as Web Apps Minimize page transition n with Page Slide patter ith Find myself annoyed win web p ages openingow another wind Find myself wanting tora substi tute a drag fo swipeThursday, December 8, 2011 108. VS - Twitters Previous Hover & CoverThursday, December 8, 2011 109. VS - Twitters Previous Hover & Coverce Wherepossible replath annoying ho ver details wines dedicated detail paThursday, December 8, 2011 110. #3 Be ResponsiveThursday, December 8, 2011 111. Use Transitions/ Animationsto Create ResponsivenessThursday, December 8, 2011 112. Thursday, December 8, 2011 113. Animation Can...Thursday, December 8, 2011 114. Animation Can...Thursday, December 8, 2011 115. Animation Can...Thursday, December 8, 2011 116. Animation Can...Thursday, December 8, 2011 117. Animation Can...Thursday, December 8, 2011 118. Animation Can... s isdone with les What can be . done in vain with more - Occam al d istinctions as Make all visu rible , but still clea subtle as poss and eective. nceest Eective Diere - Tu/e SmallThursday, December 8, 2011 119. Web Apps Seem Prone to ThisThursday, December 8, 2011 120. Web Apps Seem Prone to ThisThursday, December 8, 2011 121. Web Apps Seem Prone to This me Snarky answer: Bla it on Flash :-)Thursday, December 8, 2011 122. Web Apps Seem Prone to This me Snarky answer: Bla it on Flash :-)er:M ost likely answ putInd i rectness of In ices On touch devanimat ion and input edare synchronizThursday, December 8, 2011 123. Web Apps Seem Prone to This me Snarky answer: Bla it on Flash :-)er:M ost likely answ putInd i rectness of In ices On touch devanimat ion and input edare synchronizwHowever, slo transitions can still bea problemThursday, December 8, 2011 124. Animation Can...Thursday, December 8, 2011 125. Animation Can...ps Reveal relationshiThursday, December 8, 2011 126. Animation Can...ps Reveal relationshi Improve sresponsivenesThursday, December 8, 2011 127. Animation Can...ps Reveal relationshi Improve sresponsivenes geSh ow state chanThursday, December 8, 2011 128. Animation Can...ps Reveal relationshi Improve sresponsivenes geSh ow state chan on Focus attentiThursday, December 8, 2011 129. Animation Can...ps Reveal relationshi Improve sresponsivenes geSh ow state chan on Focus attentitCreate delighThursday, December 8, 2011 130. Animation Can...ps Reveal relationshi Improve sresponsivenes geSh ow state chan on Focus attentitCreate deligh y Simu late physicalitThursday, December 8, 2011 131. TV Experiences...Thursday, December 8, 2011 132. TV Experiences...Thursday, December 8, 2011 133. Thursday, December 8, 2011 134. Thursday, December 8, 2011 135. Can Inuence Website ExperienceThursday, December 8, 2011 136. Thursday, December 8, 2011 137. Presentation billwscott.com/share/presentations/2011/bh Blogs http://looksgoodworkswell.com http://designingwebinterfaces.com Follow me on twitter! @billwscottBookhttp://designingwebinterfaces.comVideohttp://oreil.ly/dwivideo Picture Credits (Creative Commons) http://www.ickr.com/photos/rsms/ http://www.ickr.com/photos/lalegranegra/4722576618/ http://www.ickr.com/photos/tim_d/29529584/sizes/l/ http://www.ickr.com/photos/miradesdunacionat/4519236888/sizes/z/ http://www.ickr.com/photos/zetson/ http://www.ickr.com/photos/spencereholtaway/1411877351/in/photostream/ http://creativecommons.org/nsThursday, December 8, 2011