ISA11 - Bill Scott - Designing Mice Men
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • 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
1,308
On Slideshare
1,306
From Embeds
2
Number of Embeds
1

Actions

Shares
Downloads
22
Comments
0
Likes
3

Embeds 2

https://twitter.com 2

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