Developing a Great User Interface

16,816 views

Published on

Presentation from the UIE Web Application Summit

Published in: Business, Technology
2 Comments
89 Likes
Statistics
Notes
No Downloads
Views
Total views
16,816
On SlideShare
0
From Embeds
0
Number of Embeds
333
Actions
Shares
0
Downloads
0
Comments
2
Likes
89
Embeds 0
No embeds

No notes for slide

Developing a Great User Interface

  1. 1. Developing a Great User Interface A Netflix Case Study Sean Kane Director, User Interface Engineering UIE Web Application Summit - Monterey January 2007 Innovative techniques Netflix uses to make finding movies an easy, personalized experience.
  2. 2. Background <ul><li>Designer, Developer, Usability Research </li></ul><ul><li>Product Development </li></ul><ul><li>Presentation-Layer Architect </li></ul><ul><li>UI Engineering Lead </li></ul><ul><li>Ajax Developer </li></ul>
  3. 3. <ul><li>Connecting people to the movies they’ll love </li></ul><ul><li>Unexpected value </li></ul><ul><li>Design, technology, insight and culture </li></ul><ul><li>Context </li></ul><ul><li>Approach </li></ul><ul><li>Examples </li></ul>
  4. 4. Quick Facts <ul><li>World’s largest online movie rental service </li></ul><ul><li>5.7 million members </li></ul><ul><li>70,000 titles – 200 Genres </li></ul><ul><li>41 Shipping Centers </li></ul><ul><li>Over 1.4 million daily ships – 42 Million DVDs </li></ul><ul><li>>95% of all titles are rented each quarter </li></ul><ul><li>Two release week cycle </li></ul>
  5. 5. Development Approach Qualitative & Quantitative
  6. 6. EPIC Easy Personalized Innovative Cinematic
  7. 7. Intuition is only a Start <ul><li>Prove it </li></ul><ul><li>Define metrics </li></ul><ul><li>Qualitative and quantitative testing </li></ul><ul><li>Find gems in tests </li></ul><ul><li>Prove with real world data </li></ul><ul><li>Don’t become emotionally involved </li></ul><ul><li>Total Stars Added </li></ul><ul><li>Number of Interactions </li></ul><ul><li>Time to task completion </li></ul>
  8. 8. Lifecycle Concept Paper Prototype Usability Testing Functional Prototype Usability Testing Production-Ready Prototype Quantitative Testing Full Release Refine
  9. 9. Starbar Rating Widget <ul><ul><li>Connect people with the movies they’ll love. </li></ul></ul>
  10. 10. Stars <ul><li>Rental patterns != strong signal of taste </li></ul><ul><li>Red Stars </li></ul><ul><ul><li>Average rating </li></ul></ul><ul><ul><li>Predictive rating </li></ul></ul><ul><li>Yellow Stars </li></ul><ul><ul><li>Member rating </li></ul></ul><ul><ul><li>Marks movie as seen </li></ul></ul>Refresh page to update prediction Note change In red stars
  11. 11. Simplify
  12. 12. Star Power <ul><li>Over 1.5 billion ratings </li></ul><ul><li>Users get yellow stars </li></ul><ul><li>Rate anywhere </li></ul><ul><li>Could be better </li></ul><ul><li>Red stars are perceived as average </li></ul>
  13. 13. Back of the Box Using Ajax to make finding the right movie simple
  14. 14. Watching the User Patterns <ul><li>Repeating paths </li></ul><ul><li>User requests </li></ul><ul><li>Nonmember experience </li></ul>
  15. 15. What About BOB? <ul><li>More detail fast </li></ul><ul><li>Prototype </li></ul><ul><li>Mostly a success </li></ul>
  16. 16. The New Path <ul><li>Fascinating qualitative test </li></ul><ul><li>Very favorable response </li></ul><ul><li>Largest traffic swing </li></ul><ul><li>Some glitches </li></ul>
  17. 17. Queue Add Confirmation Layer Keeping context
  18. 18. A Successful Page Browse Site Add Movie Queue Add Confirmation Return to Starting Point? User Pattern
  19. 19. New Interaction <ul><li>Keep people in context </li></ul><ul><li>Deliver same content </li></ul>
  20. 20. Strong Opinions, One Winner <ul><li>Concept debate </li></ul><ul><li>Qualitative testing </li></ul><ul><li>Quantitative testing </li></ul><ul><li>Launched with confidence </li></ul><ul><li>Room for improvement </li></ul>
  21. 21. Recommendations Layer Not everything works as expected
  22. 22. Goals <ul><li>Establish rating/personalization connection </li></ul><ul><li>Show personalization in action </li></ul>
  23. 24. Because you loved Toy Story… We recommend A Bug’s Life Close x Seen it? Rate it. If not Add It
  24. 28. <ul><li>Weak correlation </li></ul><ul><li>Moving focus </li></ul><ul><li>Timing </li></ul><ul><li>Inconsistent behavior </li></ul>
  25. 29. Friends Recommendation Layer Obscurity
  26. 33. Release Day
  27. 34. If Untested <ul><li>Reactive </li></ul><ul><li>Defensive </li></ul><ul><li>Time wasted looking at bad data </li></ul><ul><li>Quick fixes not tested </li></ul><ul><li>Left guessing </li></ul><ul><li>Seasonal obfuscation </li></ul>
  28. 35. Previews The textbook case-study
  29. 36. Variants <ul><li>No Control </li></ul><ul><li>User Select </li></ul><ul><li>Full Control </li></ul><ul><li>Whack-a-mole </li></ul>
  30. 45. Easy
  31. 47. More Information Netflix is Hiring www.netflix.com/jobs Senior User Interface Engineers HTML, CSS, JavaScript, Java, Flash Senior User Interface Designers Senior Manager, Consumer Behavior and Analysis Sean Kane Blog: seankane.wordpress.com

×