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
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
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
- 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.
- UI16: Of Mice & Men (lukew.com)
- A Pixel Identity Crisis (alistapart.com)
- Will the Browser Wars Invade the Mobile Web? (sixrevisions.com)
What do YOU think? Let me know...