Bill Scott – Designing for Mice and Men

UIE Web App Master’s Tour – Seattle, Washington – May 23, 2011

Bill has been in the industry for a long time, at Sabre, Yahoo! and now Netflix.

Challenge is designing across devices: web, mobile, tablets & TV. Iteration changes based on devices. In Canada, they don’t even have a queue.

People like to make lists.

Chaos – 400 SKUs (devices) can run Netflix. Different manufacturers can create different NetFlix experiences. Using HTML5 for all platforms. Using Webkit (QT Webkit, Skia Webkit, iOS Webkit) Takes advantage of the same engineering team to create for most devices.

Server-driven dynamic UI

Webstyle release vs CE firmware updates

Support A/B Testing

Controlled Variances

Managing Across Platforms

• portability layer (html5)
• vary the experience across platforms
• design for user posture, input capabilities, navigation styles and display capabilities
• embrace the constraints (design for mobile first)

h2. Design Principles

h3. Get physical

SpinArt – “My finger is out of Purple”

Whenever possible, add a realistic, physical dimension to your application.

Use metaphors to embody physicality – Kindle broken metaphor (location)

Don’t break the metaphor for the underlying implementation model. The user’s mental is the experience cushion.

Break the metaphor with magic.

Use directness to simulate physicality.

Content drives the experience instead of the controls driving the experience. If you’re interacting with the content, you shouldn’t have to think about the controls.

The actual execution of the design is as important as the design itself. Make sure that the engineering team makes it work right every time.

Don’t create artificial constructs, just to use new technology. Don’t use drag/drop when a checkbox will work. Spinning wheels and globes are cool, but are they usable?

44 pixel rule – input needs to be 44 pixels for everything except web – 16 pixels (at least) for web

|input|posture|navigation|display

web|

tablet|

mobile|

TV|

h2. Maintain flow

Change blindness – human brain is wired for flow (YouTube)

Reducing page switching helps limit change blindness

Twitter iPad app leaves layers in place for context

Mac app looks like phone app, but doesn’t perform the same way. Three Twitter apps perform differently based on device.

Hover & Cover – hides content, hard to get to anywhere else or see other content (hover only exists on web vs touch & hold, touch & hold is usually not accidental)

Keep navigation simple to maintain flow – flat, tab tree

h2. Be Responsive

use transitions/animations to create responsiveness – gratuitous animation

Animation can

• reveal relationships
• improve responsiveness
• show state change
• focus attention
• create delight
• simulate physicality

Invitations at Touch-Hold Moments – show shortcuts when user performs a similar action

Invitations at Reward Moments

DMBR – Dynamic Multi-Bulk Rater

Information as Invitation

Advances in HTML5 – Joe Hewitt working on

New design for web app directly influenced by TV. Larger box shots, less space between them. Ratings, add to queue and play on hover.

Larger box shots help avoid hover & cover

Netflix hired someone from Disney to help create the Kids Netflix site

NOTE: These are my notes from The UIE Web App Master’s Tour presentations. They were great resources and you can find much more about them and by the presentations on demand at UIE. While I would love to add my thoughts and more details to these posts, I doubt that will ever happen.

Related articles

• UI16: Of Mice & Men (lukew.com)
• A Pixel Identity Crisis (alistapart.com)
• Will the Browser Wars Invade the Mobile Web? (sixrevisions.com)