The Next Generation of Flash User Experience

A look at the next generation of design and development in Flash Player 10.1, with a focus on the end user. Given at Flash and the City NYC.

Transcript

1. The next Generation of FLASH USER EXPERIENCE Kevin Suttle Flash Platform UX Architect { }
2. 5 years of large-scale Flash Platform eLearning content Featured author for InsideRIA Tech Reviewer for O’Reilly’s Flex 4 Cookbook Submitted close to 150 bugs/features for Flash CS5 “Most likely to break hearts” - My mom Kevin Suttle Flash Platform UX Architect kevinsuttle.com | @kevinSuttle I’m on the internet:
3. I wasn’t making that Flash thing up.
4. I spend most of my time in FLASH but I also know my way around FLEX. I started out wanting to be a writer. I changed my mind. I got a degree in Electronic Media Communications from the University of Cincinnati. I loved digital art and photo manipulation, but it just kind of sat there. I got into web design, and then met Flash. I taught myself how to program. How I got into Flash:
5. Flash is at a crucial point within the realm of development technologies. All of a sudden there are “sides”.
6. The Battle for PLATFORM SUPREMACY
7. I don’t know if you’ve heard: There’s a bit of news about an new standard - HTML5 Adobe HEARTS Apple but not the other way ‘round. Apple has their own agenda, and that’s cool. I guess.
8. Smoke and mirrors It wasn’t about performance It wasn’t about plugin-architecture It wasn’t about ubiquity It wasn’t about devices It was about competition Glandul... ia... er... Apple’s JS framework
9. Sept 2000 - Flash Player 2 had a 95% average in USA, CAN, EUR, ASIA, and South America Let’s take a look
10. Open or closed Flash Player is a standard. It’s been at 90+% for years. Whether Steve likes it or not.
11. The thing is that consumers don’t really care. They just want their content, or do they?
12. Yes, and no. Users want content, but they also want a great experience. The iPhone and iPad are perfect examples.
13. Some users are willing to only play Farmville at home and have an iPhone. They shouldn’t have to make a choice.
14. You’re all developers, right? Think of it as encapsulation. Push the button, watch it go.
15. HTML5? Flash? Obj-C? Doesn’t matter. ...but of course I’m biased.
16. Why does there even NEED to be a winner? Can’t we all just get along?
17. The tech tabloids don’t help because they’re businesses. They have to make money, and the internet is full of opinionated nerds.
18. Want to know who will win? Well, good. Because I was going to tell you anyway.
19. The platform that wins, is the one that will provide the most content through the best experience. You had to see that coming.
20. We’re Flash developers Let’s make great Flash experiences. Or Flex. Whatever you want.
21. Worst-case scenario We go back to ALL of the massive amounts of work we had before Section 331 Open Screen Project FTW PLUS MOBILE.
22. I work on what I like to think are “translatable skills”. Jesse Freeman says that “Flash is dead”. I’m just picking out what I’m wearing to the “funeral”. User Experience Information Architecture Usability Engineering Interaction Design UI Construction
23. UX, IxD, IA, UI , ETC, HUH What is USER EXPERIENCE?
24. User experience is the sum of all your users' interactions with your company, its services, and its products. “ ” “User Experience As Corporate Imperative” hesketh.com
25. User Experience The elements of according to Jesse James Garrett Visual Design Information Design Interface design | Navigation design Interaction Design | Information Architecture Functional specs | Content requirements User Needs in parallel to Site Objectives
27. The point is UX spans all aspects of design and development. Let’s talk about both within Flash.
28. Pretty screens actually do require thinking. Design CONSIDERATIONS
29. for any platform. double-edged sword Freedom in design is a Please use responsibly.
30. HTML/CSS - “Standardized” coding practices, very loose control of display across browsers Let’s take a look Flash - Complete freedom of design and development, but bad coding or lack of optimization can lead to very poor performance
31. Design is emotional, subconscious even. Design is Platform Independent Flash, HTML, Silverlight? Doesn’t matter.
32. What is “cute?”
33. Disney’s Definition of Cute
34. Good designers play on our emotions, but for good.
35. Rule of thirds Golden Ratio Designing on a grid http://en.wikipedia.org/wiki/Rule_of_thirds http://en.wikipedia.org/wiki/Golden_ratio http://960.gs More keys to emotional design
36. New APIs, tools and platforms Development APPROACHES
37. for any platform. double-edged sword Freedom in development is also a
38. It’s only a dot release, right? Enter Flash Player 10.1
39. So much more Geolocation Gestures and Touch Accelerometer Global Error Handling P2P/RMTFP Sensors IME DRM Globalization Printing Sampling My VERY unofficial count: a few hundred new APIs.
40. Freeing Flash from the restraints of traditional mouse and keyboard interaction. Multi-touch Flash was always meant to be multi-touch
41. Specifies the type of touchscreen supported, if any. flash.system.Capabilities.touchscreenType
42. misconception about There is a bit of a rollovers on touch screens. You can TOTALLY do it.
43. Dispatched when the user moves a point of contact over the InteractiveObject instance on a touch- enabled device (such as moving a fingers from left to right over a display object on a mobile phone or tablet with a touch screen). Some devices might also interpret this contact as a mouseOver event and as a touchOver event. flash.display.InteractiveObject.gesturePan
44. Dispatched when the user creates a point of contact with an InteractiveObject instance, then taps on a touch-enabled device (such as placing several fingers over a display object to open a menu and then taps one finger to select a menu item on a mobile phone or tablet with a touch screen). Some devices might also interpret this contact as a combination of several mouse events, as well. flash.display.InteractiveObject.gesturePressAndTap
45. flash.display.InteractiveObject.gesturePressAndTap flash.display.InteractiveObject.gestureRotate flash.display.InteractiveObject.gestureSwipe flash.display.InteractiveObject.gestureTwoFingerTap flash.display.InteractiveObject.gestureZoom flash.display.InteractiveObject.touchBegin flash.display.InteractiveObject.touchEnd flash.display.InteractiveObject.touchMove flash.display.InteractiveObject.touchOut flash.display.InteractiveObject.touchOver flash.display.InteractiveObject.touchRollOut flash.display.InteractiveObject.touchRollOver flash.display.InteractiveObject.touchTap flash.display.Sprite.startTouchDrag flash.display.Sprite.stopTouchDrag flash.events.GesturePhase flash.events.TouchEvent flash.events.TransformGestureEvent ... and a TON more.
46. Not just a checkbox any more. Accessibility
47. has pretty much been a nightmare for a long time. Accessibility in Flash ... but it’s getting better.
48. The ISearchableText interface can be implemented by objects that contain text which should be searchable on the web. flash.accessibility.ISearchableText
49. flash.accessibility.ISimpleTextSelection The ISimpleTextSelection class can be used to add support for the MSAA ISimpleTextSelection interface to an AccessibilityImplementation. If an AccessibilityImplementation subclass implements the two getters in this class, a screen reader such as JAWS can determine the text selection range by calling them.
50. Before, all SWFs ran at the max frame rate, even when invisible. Flash Player Throttling
51. Is the SWF instance in a hidden tab? Is the SWF instance scrolled out of view? Two main throttling techniques
52. MAC - Webkit nightly (standalone .app) Supported Browsers as of APRIL 2010 HIDDEN TAB DETECTION WIN - IE7-8, Firefox 3.6 http://blog.kaourantin.net/?p=83
53. MAC - Safari 4, Webkit nightly (standalone .app), Firefox 3.7 (standalone beta .app) Supported Browsers as of APRIL 2010 OUT OF VIEW DETECTION WIN - IE7-8 http://blog.kaourantin.net/?p=83
54. Supported Browsers as of APRIL 2010 Linux folks - Well, you’re going to have to wait. It would require a LOT of overhauling within Flash Player and Linux browsers.
55. The most under-hyped API in Flash. Globalization API
56. Detects system locale properties to tailor: UNDER-HYPED Text language/orientation (RTL) Date/Time Currency formatting/parsing Number formatting/parsing String comparison for sorting or searching for text Upper and lower case conversions
57. Supported in modern versions of Chrome, IE and Firefox Private browsing mode (inside of Flash Player)
58. Handy tools for unpredictable runtimes. Mobile-specific APIs
59. Detects if a physical keyboard is attached. If not, a virtual native keyboard is displayed. Mobile text input
60. GPU-based vector renderer that replaces OEM software. Graphics hardware acceleration on mobile
61. Vector graphics Bitmaps 3D effects Filters/Shaders Color transforms Alpha transparency Device/embedded text fonts Saffron Type and the cacheAsBitmap property Supports many types of hardware rendering
62. if video or audio is not paused, stopped, or buffering. Disabled screensaver in fullscreen mode Basically, it checks to see if there is volume.
63. Mobilizing, not minimizing Contextual APPLICATIONS
64. desktop anymore. It’s not just the ... or even mobile handsets.
65. are changing. Design & development Adaptability is key now.
66. everything. The data drives Content will always be king.
67. multiple instances had to be written. Traditionally One for desktop, mobile, tablets, TVs, etc.
68. options for user interfaces Now we have Native, or custom? It’s up to you.
69. to a “write once, deploy everywhere” workflow. We’re getting closer ... but it probably will never be that simple.
70. “write once, deploy to many.” It’s more like - Scott Janousek
71. it’s all about context! Mobilize, not minimize
72. for using a device or platform that you forgot or didn’t want to test for. Don’t punish the user
73. by taking away or diminishing features Don’t punish the user based on end platforms.
74. that each platform affords. Use the unique advantages
75. powered by Flash Player 10.1. Enter AIR Mobile The beginning of the “full” mobile Flash explosion.
76. powered in part by a special build of Flash Player 10.1, to drive the use of Enter litl OS Web book, web-connected TV, multitouch remote developer.litl.com Flash in the living room.
77. virtually anywhere now. Flash can be used
78. both designers and developers, to It’s up to you, make the best experiences with the Flash Platform.
79. The END Kevin Suttle Flash Platform UX Architect { } KevinSuttle.com @kevinSuttle