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.