Webvisions Notes: Designing for Mice and Men - Bill Scott of Netflix


Designing for Mice and Men
Bill Scott
@billwscott
Netflix
  • Current Experience Chaos
  • First we had a site, then we had devices.
  • On 400 different devices
  • How do we tame it?
    • Netflix Owned Experience Across Devices
  • Wanted a web-like design, development, a/b testing experience across all devices
  • PS3 browser is Netfront, which is a clone of IE6. All the bugs of IE6 plus more. jQuery wouldn’t run on it. 
  • They decided to port webkit to the PS3.
  • Then realized that they could provide this to manufacturers. If they had webkit, then they could design and develop for webkit across all devices.
    • across TV, smartphone, tablet, browser.
  • They have a single javascript bundle on the content delivery network, which they can change at any time, and update the experience across all the devices.
  • Why do we want to own the experience?
    • netflix is known for valuing UX. -- you can’t do it if you don’t own it.
    • We love server-driven, testable, dynamic UIs
    • We like agile web better than rigid CE firmware process
    • We value “learn fast/fail quickly”
    • Any other path would lead to chaos
  • Initial HTML5 Experience: PS3 - “Special”
    • Content and navigation tied together.
    • customers always self-report that they want movie discovery tools.
  • Alternate HTML5 Experience: PS3 - “Plus”
    • just a grid in which you move around, not ability to move categories or genres.
  • Design Across Platforms
    • We chose a portability layer - html5, css3, js
    • But we don’t use progressive enhancement since we want the freedom to experience with different UX on different platforms. if we also add progressive enhancement, it gets too complicated.
  • Design Principles - haven’t really changed in 1983
    • Get Physical  - making things feel real, direct, interact with them. 
      • Give them the illusion of physicality
      • Granddaughter fell in love with the iPad - specifically something called spinart.
      • Apple HIG: whenever possible, add an actual physical dimension to your interface.
      • Original netflix player on roku: when you pause it, there is a filmstrip that you can flip through.
      • the iBook has pages that turn.
      • But on the Kindle, they have an anti-pattern - broken metaphor. They have “location”. It’s an implementation, but it’s not a user’s mental model. 
      • “Books have pages”
  • We can break the metaphor with magic.
    • “back to the original page”, “you are here” you can go anywhere. “pages left in the chapter”.
  • Apple breaks this with iCal. They give you the illusion of pages -- using depth and visual indicators, but then they break the metaphor by not having the ability to flick pages.
  • The brain cannot see a change happening to an element that has not yet been stored. 
    • example: flipping between two similar photos, one has the airplane engine edited out. when the two frames have a flash between them, we can’t see it. when there is no flash, we all spot it immediately.
  • “Plus” experience won. Reduces page transitions.
  • Lots of UX examples of Twitter app on iPad vs Mac app vs. browser. Can’t capture them all.
  • Questions
    • Q: How do you determine the winner when you try different theories?
      • We care most about retention. But people don’t quit the service immediately because a button style changed.
      • The proxy for retention is consumption... do they watch movies? add them to their queue.
Post a Comment