Web App Masters: Multi-Device Design at Netflix

dragoni:

Below are my selective key items from LukeW’s notes of Bill Scott’s Designing for Mice and Men. Read the complete post.

  • Over 400 SKUs have Netflix running on them (TVs and streaming players). You could give every manufacturer an SDK and guidelines and ask them to make things. But most manufacturers don’t want to build experiences themselves and they often have the skills or resources to do so. They prefer a platform.
  • Netflix uses HTML5 on Web, Tablet, Mobile, and TV. Have used different WebKit platforms to manage this. On the TV, Netflix ported two instances of WebKit in order to deliver HTML5 solutions (QT and Skia). This allows the same team to build the same way across many devices. WebKit is Netflix’s application platform.
  • Why HTML5? Server-driven dynamic UI, Web-style release vs. CE firmware updates, Support A/B Testing, Learn fast/Fail quickly, Chaos otherwise
  • Netflix needs a server-driven UI so they can test lots of different variations. The PS3 interface had 16 variations and four experiences that were tested. Trying to manage this testing through certification processes (like those on TV manufacturers) takes way too long.

Different Platforms, Different Experiences

  • Netflix chose a portability layer. But varies user experience across platforms (TV, Web, mobile, tablet).
  • Design for mobile first when thinking about multiple platforms as it holds the most constraints. This helps you focus.

Get Physical

  • On touch interfaces, you can use less constructs to create the experience, and instead add more content to create the experience. As people get used to the idioms, we’ll be able to do more with content interactions.
  • How big should touch targets be: 44 pixels on mobile, tablet, TV. 16 pixels on desktop Web (mouse/cursor) but accurate as 1 pixel.

Maintain Flow

  • Change blindness: our brain expects continuous change. Single page changes sometimes leave things unnoticed because the change is too drastic. This happens with page refreshes on the Web –people don’t notice what changed. So people can loose their context when moving from page to page.
  • Overlays can encapsulate alternate workflows without removing context. Flow keeps people engaged in a task. Manage screen transitions carefully. You can minimize them with page slide transitions and other forms of animation. When using transitions, make flow visible.

Be Responsive

  • Animation is a supporting actor. It should not take center stage. Always question why you are using animations. Occam: what can be done with less is done in vain with more. Consider the least effective difference to communicate change.
  • Netflix Web site had a lot of white space in between box shots. The version that took out names, star ratings, buttons, and more performed much better than the version with text, etc. The idea is that content is front and center in the UI. This was directly influenced by the TV interactions.
This post is posted on Monday 25 February 2013.
Currently has 1 note
1 note - Show notes
  1. us86 reblogged this from dragoni
  2. dragoni posted this