Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design, Device, Delight

Ab098775ed30da167fa4989980c1e2d5?s=47 Matt
May 20, 2014

Design, Device, Delight

An engaging and fluid mobile user interface requires more than beautiful pixel arrangement. An exceptional design may not delight users simply because it is misaligned with device constraints. In this talk, Matt Seeley, a Netflix UI Engineering Technical Lead, will discuss design and engineering compromises faced when design-meets-device head-on and the solutions they’ve found to enable world-class streaming experience.

Ab098775ed30da167fa4989980c1e2d5?s=128

Matt

May 20, 2014
Tweet

Transcript

  1. Design, Device, Delight For slides: @innerhtml

  2. Then Now “Code” by useiconic.com “Golden-Ratio” by Jae Aquino For

    slides: @innerhtml
  3. Design to delight “Happy” by Michael Hourigan

  4. Delightful design is… • personalized (Carolyn Chandler, Brian Henkel) •

    responsive to orientation, tap & gesture • culturally relevant (Will Sullivan) • fluid in interaction & animation (Cory Hudson) • predictably worthwhile (Brandon Harris) • graceful amidst network interruptions • accepting of intermittent partial attention (Cate Hudson)
  5. Design together “Group-Think” by Jose Morbán

  6. – Some developer (probably) “Keep your friends close and your

    designers closer”
  7. – Some designer (probably) “Keep your friends close and your

    designers developers closer”
  8. Sharing context • Early and frequent collaboration • Design considering

    development • Implement considering user experience • Having trouble? Colocate!
  9. Scale, fade, blur

  10. Scale, fade, blur

  11. Design for reality “Devices” by Kelig Le Luron

  12. Device reality • Physical size & orientation • Pixel dimensions

    & density • Network & disk IO • Processor(s) speed • Available memory (main & video) • Device platform
  13. http://webbyawards.com/winners/2014/mobile-apps/all-devices/best-user-experience

  14. None
  15. Tiles intersecting the viewport Pre-painted to cover scrolling TiledBackingStore Source:

    https://trac.webkit.org/browser/trunk/Source/ WebCore/platform/graphics/TiledBackingStore.cpp
  16. None
  17. Design for time “Watch” by Julien Deveaux

  18. Menu icons available immediately? Shenanigans!

  19. Avoid chasing unicorns • Beware of immediate content updates •

    Plan for graceful introduction of resources over time • Preload carefully
  20. Collaborate & share context Innovate within constraints Plan for time

  21. Attributions Creative Commons – Attribution (CC BY 3.0) Golden Ratio

    designed by Jae Aquino from the Noun Project http://thenounproject.com/term/golden-ratio/9361/ ! Creative Commons – Attribution (CC BY 3.0) Code designed by useiconic.com from the Noun Project http://thenounproject.com/term/code/45869/ ! Creative Commons – Attribution (CC BY 3.0) Happy designed by Michael Hourigan from the Noun Project http://thenounproject.com/term/happy/3540/ ! Creative Commons – Attribution (CC BY 3.0) Group Think designed by Jose Morbán from the Noun Project http://thenounproject.com/term/happy/3540/ ! Creative Commons – Attribution (CC BY 3.0) Devices designed by Kelig Le Luron from the Noun Project http://thenounproject.com/term/devices/38380/ ! Creative Commons – Attribution (CC BY 3.0) Watch designed by Julien Deveaux from the Noun Project http://thenounproject.com/term/watch/48017/
  22. jobs.netflix.com For slides: @innerhtml