ISA11 - Bill Scott - Designing Mice Men

  • 945 views
Uploaded on

 

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
945
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
22
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Designing for Mice & Men* Bill Scott, PayPalThursday, December 8, 2011
  • 2. to o! en wom *and Designing 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 100’s of DevicesThursday, December 8, 2011
  • 6. Led to Experience Explosion (400 SKUs)Thursday, December 8, 2011
  • 7. It is Better to “Own” the Experience Netflix...Thursday, December 8, 2011
  • 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. 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. 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. 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. Netflix “Owned” Experience Across DevicesThursday, December 8, 2011
  • 13. Netflix “Owned” Experience Across Devices Web Tablet Mobile TVThursday, December 8, 2011
  • 14. Netflix “Owned” Experience Across Devices Web Browser iOS Webkit QT Webkit & iOS Webkit Skia WebkitThursday, December 8, 2011
  • 15. Netflix “Owned” Experience Across Devices HTML5 HTML5 HTML5 HTML5Thursday, December 8, 2011
  • 16. What Differs Across Devices?Thursday, December 8, 2011
  • 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. 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. 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. 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. Netflix’s Strategy for Multi-DeviceThursday, December 8, 2011
  • 22. Netflix’s Strategy for Multi-Device Chose a portability layer (html5, css3, JS)Thursday, December 8, 2011
  • 23. Netflix’s Strategy for Multi-Device Chose a portability layer (html5, css3, JS) Yet design for each constraint:Thursday, December 8, 2011
  • 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. 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. 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. 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. 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. Two PS3 Experiences: “SPECIAL”Thursday, December 8, 2011
  • 30. Two PS3 Experiences: “PLUS”Thursday, December 8, 2011
  • 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. Design Principles 3 common design principles for multiple 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 Physicality ossible, add a realistic, Whenever p application. ical dimensi on to your physThursday, December 8, 2011
  • 38. Design for Physicality ossible, add a realistic, Whenever p application. ical dimensi on to your phys - Apple HIGThursday, December 8, 2011
  • 39. tegy Stra Use Metaphors to 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 p ing about a onstruct. B hysicality t information. n artificial ut instead hat fits 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 Book “Books have pages” “Pages turn”Thursday, 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 Metaphor Location?? “Books have pages” Page!!Thursday, December 8, 2011
  • 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. Break the Metaphor with MagicThursday, December 8, 2011
  • 55. Break the Metaphor with MagicThursday, December 8, 2011
  • 56. Break the Metaphor with Magic Back to orig pageThursday, December 8, 2011
  • 57. Break the Metaphor with Magic Back to You are orig page this farThursday, December 8, 2011
  • 58. Break the Metaphor with Magic You are Back to You are here orig page this farThursday, December 8, 2011
  • 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. 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. 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. 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. 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 Depth Page’s animate a flip via scrub barThursday, December 8, 2011
  • 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. 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. 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. tegy Stra Use Directness to Simulate PhysicalityThursday, 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 scrollbar Controller Indicator Flick to scroll 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 differencesThursday, December 8, 2011
  • 81. Game Time: Spot the differencesThursday, 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 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. tegy Stra Reduce Page Switching to Maintain FlowThursday, December 8, 2011
  • 88. “Special” ExperienceThursday, December 8, 2011
  • 89. “Special” Experience Princ iples followed : le Focus + context, Simp rol navigati on, User ContThursday, December 8, 2011
  • 90. “Plus” ExperienceThursday, December 8, 2011
  • 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. Which Won?Thursday, December 8, 2011
  • 93. Which Won?Thursday, December 8, 2011
  • 94. Which Won? lus” experience won. “P transitions, feels more Re duces page nematic, less jarring. ci Maintains FlowThursday, December 8, 2011
  • 95. Twitter as iPad AppThursday, December 8, 2011
  • 96. Twitter as iPad App Minimize page transitio ns ern w ith Page Slide pattThursday, December 8, 2011
  • 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. 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. 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. Pattern: Page Slide http://srobbin.com/blog/jquery-pageslide/Thursday, December 8, 2011
  • 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. Twitter as Desktop Mac AppThursday, December 8, 2011
  • 103. Twitter as Desktop Mac App s to Rethin k desktop app re use real estate mo creativelyThursday, December 8, 2011
  • 104. Twitter as Web AppThursday, December 8, 2011
  • 105. Twitter as Web App s Minimize page transition n with Page Slide patterThursday, December 8, 2011
  • 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. 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. VS - Twitter’s Previous Hover & CoverThursday, December 8, 2011
  • 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. #3 Be ResponsiveThursday, December 8, 2011
  • 111. Use Transitions/ Animations to 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 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. 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 put Ind i rectness of In ices On touch dev animat ion and input ed are synchronizThursday, December 8, 2011
  • 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. Animation Can...Thursday, December 8, 2011
  • 125. Animation Can... ps Reveal relationshiThursday, December 8, 2011
  • 126. Animation Can... ps Reveal relationshi Improve s responsivenesThursday, December 8, 2011
  • 127. Animation Can... ps Reveal relationshi Improve s responsivenes ge Sh ow state chanThursday, December 8, 2011
  • 128. Animation Can... ps Reveal relationshi Improve s responsivenes ge Sh ow state chan on Focus attentiThursday, December 8, 2011
  • 129. Animation Can... ps Reveal relationshi Improve s responsivenes ge Sh ow state chan on Focus attenti t Create delighThursday, December 8, 2011
  • 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. 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 Influence 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! @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