• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
ISA11 - Bill Scott - Designing Mice Men
 

ISA11 - Bill Scott - Designing Mice Men

on

  • 944 views

 

Statistics

Views

Total Views
944
Views on SlideShare
944
Embed Views
0

Actions

Likes
3
Downloads
21
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    ISA11 - Bill Scott - Designing Mice Men ISA11 - Bill Scott - Designing Mice Men Presentation Transcript

    • Designing for Mice & Men* Bill Scott, PayPalThursday, December 8, 2011
    • to o! en wom *and Designing for Mice & Men* Bill Scott, PayPalThursday, December 8, 2011
    • Thursday, December 8, 2011
    • From DVDs by Mail & WebsiteThursday, December 8, 2011
    • To Streaming on 100’s of DevicesThursday, December 8, 2011
    • Led to Experience Explosion (400 SKUs)Thursday, December 8, 2011
    • It is Better to “Own” the Experience Netflix...Thursday, December 8, 2011
    • 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
    • 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
    • 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
    • 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
    • Netflix “Owned” Experience Across DevicesThursday, December 8, 2011
    • Netflix “Owned” Experience Across Devices Web Tablet Mobile TVThursday, December 8, 2011
    • Netflix “Owned” Experience Across Devices Web Browser iOS Webkit QT Webkit & iOS Webkit Skia WebkitThursday, December 8, 2011
    • Netflix “Owned” Experience Across Devices HTML5 HTML5 HTML5 HTML5Thursday, December 8, 2011
    • What Differs Across Devices?Thursday, December 8, 2011
    • What Differs Across Devices? Web Input Indirect. Pointer/keyboard Navigation Controls & windows Posture Stationary Working Display Hi-Rez Large, NearThursday, December 8, 2011
    • 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
    • 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
    • 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
    • Netflix’s Strategy for Multi-DeviceThursday, December 8, 2011
    • Netflix’s Strategy for Multi-Device Chose a portability layer (html5, css3, JS)Thursday, December 8, 2011
    • Netflix’s Strategy for Multi-Device Chose a portability layer (html5, css3, JS) Yet design for each constraint:Thursday, December 8, 2011
    • Netflix’s Strategy for Multi-Device Chose a portability layer (html5, css3, JS) Yet design for each constraint: user postureThursday, December 8, 2011
    • 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
    • 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
    • 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
    • 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
    • Two PS3 Experiences: “SPECIAL”Thursday, December 8, 2011
    • Two PS3 Experiences: “PLUS”Thursday, December 8, 2011
    • 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
    • Design Principles 3 common design principles for multiple platform designThursday, December 8, 2011
    • #1 Get PhysicalThursday, December 8, 2011
    • The Illusion of PhysicalityThursday, December 8, 2011
    • The Illusion of Physicality +Thursday, December 8, 2011
    • Design for PhysicalityThursday, December 8, 2011
    • Design for Physicality ossible, add a realistic, Whenever p application. ical dimensi on to your physThursday, December 8, 2011
    • Design for Physicality ossible, add a realistic, Whenever p application. ical dimensi on to your phys - Apple HIGThursday, December 8, 2011
    • tegy Stra Use Metaphors to Embody PhysicalityThursday, December 8, 2011
    • Thursday, December 8, 2011
    • Thursday, December 8, 2011 X
    • 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
    • Physicality as MetaphorThursday, December 8, 2011
    • Physicality as Metaphor Film StripThursday, December 8, 2011
    • Physicality as Metaphor BookThursday, December 8, 2011
    • Physicality as Metaphor Book “Books have pages” “Pages turn”Thursday, December 8, 2011
    • Anti-Pattern: Broken MetaphorThursday, December 8, 2011
    • Anti-Pattern: Broken MetaphorThursday, December 8, 2011
    • Anti-Pattern: Broken Metaphor Location??Thursday, December 8, 2011
    • Anti-Pattern: Broken Metaphor Location??Thursday, December 8, 2011
    • Anti-Pattern: Broken Metaphor Location??Thursday, December 8, 2011
    • Anti-Pattern: Broken Metaphor Location?? “Books have pages” Page!!Thursday, December 8, 2011
    • 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
    • Break the Metaphor with MagicThursday, December 8, 2011
    • Break the Metaphor with MagicThursday, December 8, 2011
    • Break the Metaphor with Magic Back to orig pageThursday, December 8, 2011
    • Break the Metaphor with Magic Back to You are orig page this farThursday, December 8, 2011
    • Break the Metaphor with Magic You are Back to You are here orig page this farThursday, December 8, 2011
    • Break the Metaphor with Magic You are You can go Back to You are here anywhere orig page this farThursday, December 8, 2011
    • 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
    • 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
    • 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
    • To Flick or not to Flick (iOS4)Thursday, December 8, 2011
    • To Flick or not to Flick (iOS4) Page BindingThursday, December 8, 2011
    • To Flick or not to Flick (iOS4) Page Binding Page DepthThursday, December 8, 2011
    • To Flick or not to Flick (iOS4) Page Binding Page Depth Page’s animate a flip via scrub barThursday, December 8, 2011
    • 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
    • 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
    • Then we have this! ABC News iPad App (Metaphors Gone Wild)Thursday, December 8, 2011
    • Simply Content.Thursday, December 8, 2011
    • Simply Content.Thursday, December 8, 2011
    • tegy Stra Use Directness to Simulate PhysicalityThursday, December 8, 2011
    • Thursday, December 8, 2011
    • Thursday, December 8, 2011
    • in 1984, this was physicality - the scrollbarThursday, December 8, 2011
    • Scrollbar Evolution ControllerThursday, December 8, 2011
    • 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
    • From Mouse to Touch... TwitterThursday, December 8, 2011
    • intain Flow #2 MaThursday, December 8, 2011
    • Game Time: Spot the differencesThursday, December 8, 2011
    • Game Time: Spot the differencesThursday, December 8, 2011
    • Now try again...Thursday, December 8, 2011
    • Now try again...Thursday, December 8, 2011
    • Now try again... ness Change blindThursday, December 8, 2011
    • Change BlindnessThursday, December 8, 2011
    • 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
    • tegy Stra Reduce Page Switching to Maintain FlowThursday, December 8, 2011
    • “Special” ExperienceThursday, December 8, 2011
    • “Special” Experience Princ iples followed : le Focus + context, Simp rol navigati on, User ContThursday, December 8, 2011
    • “Plus” ExperienceThursday, December 8, 2011
    • “Plus” Experience Prin ciples followe d: . Conte nt is the flow xt. Inform ation in Conte . Onl y 1 experienceThursday, December 8, 2011
    • Which Won?Thursday, December 8, 2011
    • Which Won?Thursday, December 8, 2011
    • Which Won? lus” experience won. “P transitions, feels more Re duces page nematic, less jarring. ci Maintains FlowThursday, December 8, 2011
    • Twitter as iPad AppThursday, December 8, 2011
    • Twitter as iPad App Minimize page transitio ns ern w ith Page Slide pattThursday, December 8, 2011
    • 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
    • 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
    • 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
    • Pattern: Page Slide http://srobbin.com/blog/jquery-pageslide/Thursday, December 8, 2011
    • 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
    • Twitter as Desktop Mac AppThursday, December 8, 2011
    • Twitter as Desktop Mac App s to Rethin k desktop app re use real estate mo creativelyThursday, December 8, 2011
    • Twitter as Web AppThursday, December 8, 2011
    • Twitter as Web App s Minimize page transition n with Page Slide patterThursday, December 8, 2011
    • 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
    • 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
    • VS - Twitter’s Previous Hover & CoverThursday, December 8, 2011
    • VS - Twitter’s Previous Hover & Cover ce Where possible repla th annoying ho ver details wi nes dedicated detail paThursday, December 8, 2011
    • #3 Be ResponsiveThursday, December 8, 2011
    • Use Transitions/ Animations to Create ResponsivenessThursday, December 8, 2011
    • Thursday, December 8, 2011
    • Animation Can...Thursday, December 8, 2011
    • Animation Can...Thursday, December 8, 2011
    • Animation Can...Thursday, December 8, 2011
    • Animation Can...Thursday, December 8, 2011
    • Animation Can...Thursday, December 8, 2011
    • 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
    • Web Apps Seem Prone to ThisThursday, December 8, 2011
    • Web Apps Seem Prone to ThisThursday, December 8, 2011
    • Web Apps Seem Prone to This me Snarky answer: Bla it on Flash :-)Thursday, December 8, 2011
    • 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
    • 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
    • Animation Can...Thursday, December 8, 2011
    • Animation Can... ps Reveal relationshiThursday, December 8, 2011
    • Animation Can... ps Reveal relationshi Improve s responsivenesThursday, December 8, 2011
    • Animation Can... ps Reveal relationshi Improve s responsivenes ge Sh ow state chanThursday, December 8, 2011
    • Animation Can... ps Reveal relationshi Improve s responsivenes ge Sh ow state chan on Focus attentiThursday, December 8, 2011
    • Animation Can... ps Reveal relationshi Improve s responsivenes ge Sh ow state chan on Focus attenti t Create delighThursday, December 8, 2011
    • 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
    • TV Experiences...Thursday, December 8, 2011
    • TV Experiences...Thursday, December 8, 2011
    • Thursday, December 8, 2011
    • Thursday, December 8, 2011
    • Can Influence Website ExperienceThursday, December 8, 2011
    • Thursday, December 8, 2011
    • 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