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.

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
15. Tiles intersecting the viewport Pre-painted to cover scrolling TiledBackingStore Source: https://trac.webkit.org/browser/trunk/Source/ WebCore/platform/graphics/TiledBackingStore.cpp
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