UI16: Of Mice & Men

by Luke Wroblewski November 8, 2011

At the User Interface 16 Conference in Boston, Bill Scott outlined a number of design principles that apply across diverse devices. Here are my notes from his Designing for Mice and Men presentation:

  • Netflix’s roots are on the Web but they quickly realized they needed to move beyond the Web into TVs and beyond. This was one of the best things that happened to Netflix as it forced them to revisit assumptions and try new things.
  • 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. Working with consumer electronics companies is really different from working on the Web. Long development cycles, lots of variants.
  • 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? Control the user experience, 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. Testing is a ingrained part of the Netflix culture: learn fast/iterate quickly.

Different Platforms, Different Experiences

  • Netflix chose a portability layer. (HTML5, CSS3, JS)
  • They don’t use progressive enhancement because they want the freedom to experiment with different experiences on different platforms in isolation.
  • 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.
  • 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. Example: location on the Kindle, http requests on the Web creates a page-based model.
  • Instead, break the metaphor with magic. Strict physicality is hard work! Use magic in your interface to simplify the real world. Example: dragging multiple items to trash to delete them.
  • Anti-pattern: mismatched metaphor/borg idiom. 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.
  • The more heavy an interface idiom is, the more it will try to take over the whole interface.
  • 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. Consider all the interesting moments by looking at the events and actions that make up an interaction.
  • 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. It was interesting to see the same target size issues on TV and touch interfaces. The same target size can up as optimal.

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 on the Web.
  • Additional features often negatively impact overall consumption. More streamlined, activity-focused designs can put you into the “flow” of continuous consumption.
  • Content is the flow. Keep information in context. Focus on a single experience.
  • 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.
  • The things you learn on mobile and tV can influence what you do on the Web, and vice versa. Innovation can flow both ways.

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.
  • 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. Shortcuts can be best taught during the “long cut”. During actions the long while, you can introduce shortcut versions. Features at the point of discovery are much more powerful.
  • Netflix product officer went to Blockbuster and took photos of the shelves of movies, then measured how big they should be on the TV using the same proportions. Hint: much bigger than they were.
  • 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.