At the Web App Masters Tour in Seattle, Bill Scott detailed how Netflix manages the differences and similarities in cross-platform design. Here are my notes from his Designing for Mice and Men presentation:
- 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
- Some people at Netflix have been arguing for a single experience across all devices. This has never born out in any kind of testing. Instead, Netflix has a variety of experiences on different devices and even regions. In Canada, Netflix does not have a queue as they only have a streaming service available.
- Netflix chose a portability layer. But varies user experience across platforms (TV, Web, mobile, tablet).
- What determines the right user experience for a platform?
- User posture: Stationary, Lean back, on-the-go, shared
- Input capabilities: pointer/keyboard, LRUD/OSK, Gesture/OSK
- Navigation style: controls & windows, panes
- Display capabilities: Hi-Res, near, far away, small, medium, large
- These constraints are really powerful. You need to embrace them to get to appropriate designs.
- Design for mobile first when thinking about multiple platforms as it holds the most constraints. This helps you focus.
- The new Netflix Web experience has learned a lot form the constraints of the TV experience.
- So What’s in Common? Design principles: fundamental, universal ideas that underpin good design stay the same but the application of principles varies across input, posture, navigation, and display.
Get Physical
- Whenever possible add a realistic, physical dimension to your application. The more true to life your application looks and behaves the easier it is for people to understand how it works and the more they enjoy using it.
- Use metaphors to embody physicality. Take a common, understandable metaphor and translate it to the interface. Example: filmstrip metaphor on the Rocku player.
- The user’s mental model is the user experience cushion. Don’t break the metaphor for the underlying implementation model.
- Instead, break the metaphor with magic. Strict physicality is hard work! Use magic to simplify the real world.
- Use directness to simulate physicality. The scrollbar has moved from a controller to an indicator (on touch devices). Content is scrolled instead of the scrollbar. It is not about controls driving the experience; it is about content driving the experience. You are interacting with the content not the controller. This is really powerful.
- It must feel real. Make sure event handling is consistent. Remember fingers are fat. Real estate is limited.
- 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.
- Drag and drop often creates artificial constructs in an interface that are not necessary. People often start with a technical solution first not a user experience first. This often ends up in artificial visual constructs to support a technology solution.
- 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.
- Where possible replace annoying hover details with dedicated detail panes.
- You can help explain interactions through changes in the user interface. Content is the flow. Keep information in context.
Be Responsive
- Use transitions/animations to create responsiveness
- Animation can: reveal relationships, improve responsiveness, show state change, focus attention, create delight, and simulate physicality.
- Needless fanfare anti-pattern: don’t use animations without purpose.
- 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.
- Because you can easily add animations in Flash, people often do (many times in bad ways).
- On touch devices animation and input are synchronized. When things are more direct, connections between transitions feel more appropriate.
- Use invitations to create responsiveness: just in time invitations at drag moments & invitations at touch and hold moments
- Pull to refresh is a great place to show a shortcut. Align it with a natural action like pulling down. Think about ways to align with already existing, natural interactions.
- Tours have their place but features at the point of discovery are much more powerful.
- 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.