The next Generation of

FLASH USER EXPERIENCE




                         {                   Kevin Suttle
              ...
Kevin Suttle
Flash Platform UX Architect

5 years of large-scale Flash Platform eLearning content

Featured author for Ins...
I wasn’t making that Flash thing up.
How I got into Flash:

I started out wanting to be a writer.
I changed my mind.
I got a degree in Electronic Media Communi...
Flash is at a crucial point
within the realm of
development technologies.


           All of a sudden there are “sides”.
The Battle for
PLATFORM SUPREMACY
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 wa...
Smoke and mirrors
It wasn’t about performance
It wasn’t about plugin-architecture
It wasn’t about ubiquity
It wasn’t about...
Let’s take a look
Sept 2000 - Flash Player 2 had a 95% average in USA,
CAN, EUR, ASIA, and South America
Open or closed
Flash Player is a standard. It’s been at 90+% for years.




                           Whether Steve likes...
The thing is that consumers
don’t really care.



             They just want their content,
                             ...
Yes, and no.
Users want content, but they
also want a great experience.

      The iPhone and iPad are perfect examples.
Some users are
willing to only play Farmville
at home and have an iPhone.

         They shouldn’t have to make a choice.
You’re all developers, right?
Think of it as encapsulation.


              Push the button, watch it go.
HTML5? Flash? Obj-C?
Doesn’t matter.


             ...but of course I’m biased.
Why does there even
NEED to be a winner?


              Can’t we all just get along?
The tech tabloids don’t help
because they’re businesses.


                      They have to make money,
     and the int...
Want to know who will win?
Well, good.

       Because I was going to tell you anyway.
The platform that wins,
is the one that will provide the
most content through the
best experience.
               You had ...
We’re Flash developers
Let’s make great Flash
experiences.

             Or Flex. Whatever you want.
Worst-case scenario
We go back to ALL of the massive amounts of work
we had before Section 331 PLUS MOBILE.




          ...
I work on what I like to think
are “translatable skills”.

User Experience
  Information Architecture
  Usability Engineer...
What is
USER EXPERIENCE?



            UX, IxD, IA, UI , ETC, HUH
“   User experience is the sum of
       all your users' interactions
              with your company,
                   ...
The elements of
User Experience
according to Jesse James Garrett


Visual Design
Information Design
     Interface design ...
The point is
UX spans all aspects of design
and development.

           Let’s talk about both within Flash.
Design
CONSIDERATIONS



     Pretty screens actually do require thinking.
Freedom in design is a
double-edged sword
for any platform.




                         Please use responsibly.
Let’s take a look
HTML/CSS - “Standardized” coding practices,
very loose control of display across browsers

Flash - Compl...
Design is
Platform Independent
Design is emotional, subconscious even.




                              Flash, HTML, Silv...
What is “cute?”
Disney’s Definition of Cute
Good designers play on our
emotions, but for good.
More keys to emotional design
Rule of thirds
http://en.wikipedia.org/wiki/Rule_of_thirds



Golden Ratio
http://en.wikiped...
Development
APPROACHES



          New APIs, tools and platforms
Freedom in development is also a
double-edged sword
for any platform.
Enter Flash Player 10.1
It’s only a dot release, right?
So much more
Geolocation              IME
Gestures and Touch       DRM
Accelerometer            Globalization
Global Error...
Multi-touch
Freeing Flash from the restraints of traditional mouse
and keyboard interaction.




            Flash was alw...
flash.system.Capabilities.touchscreenType
Specifies the type of touchscreen supported, if any.
There is a bit of a
misconception about
rollovers on touch screens.

                 You can TOTALLY do it.
flash.display.InteractiveObject.gesturePan
Dispatched when the user moves a point of contact
over the InteractiveObject ins...
flash.display.InteractiveObject.gesturePressAndTap
Dispatched when the user creates a point of contact
with an InteractiveO...
flash.display.InteractiveObject.gesturePressAndTap
flash.display.InteractiveObject.gestureRotate
flash.display.InteractiveObj...
Accessibility
Not just a checkbox any more.
Accessibility in Flash
has pretty much been a nightmare for a long time.




                              ... but it’s ge...
flash.accessibility.ISearchableText
The ISearchableText interface can be implemented by
objects that contain text which sho...
flash.accessibility.ISimpleTextSelection
The ISimpleTextSelection class can be used to add
support for the MSAA ISimpleText...
Flash Player Throttling
Before, all SWFs ran at the max frame rate,
even when invisible.
Two main throttling techniques
Is the SWF instance in a hidden tab?
Is the SWF instance scrolled out of view?
HIDDEN TAB DETECTION
Supported Browsers as of APRIL 2010

MAC - Webkit nightly (standalone .app)
WIN - IE7-8, Firefox 3.6
...
OUT OF VIEW DETECTION
Supported Browsers as of APRIL 2010

MAC - Safari 4, Webkit nightly (standalone .app),
      Firefox...
Supported Browsers as of APRIL 2010
Linux folks - Well, you’re going to have to wait.




                It would require...
Globalization API
The most under-hyped API in Flash.
UNDER-HYPED
Detects system locale properties to tailor:
Text language/orientation (RTL)
Date/Time
Currency formatting/pars...
Private browsing mode (inside of Flash Player)
Supported in modern versions of
Chrome, IE and Firefox
Mobile-specific APIs
Handy tools for unpredictable runtimes.
Mobile text input
Detects if a physical keyboard is attached.
If not, a virtual native keyboard is displayed.
Graphics hardware acceleration on mobile
GPU-based vector renderer that replaces OEM software.
Supports many types of hardware rendering
Vector graphics
Bitmaps
3D effects
Filters/Shaders
Color transforms
Alpha transpa...
Disabled screensaver in fullscreen mode
if video or audio is not paused, stopped, or buffering.




           Basically, i...
Contextual
APPLICATIONS



             Mobilizing, not minimizing
It’s not just the
desktop anymore.



            ... or even mobile handsets.
Design & development
are changing.



             Adaptability is key now.
The data drives
everything.



            Content will always be king.
Traditionally
multiple instances
had to be written.


      One for desktop, mobile, tablets, TVs, etc.
Now we have
options for user interfaces



          Native, or custom? It’s up to you.
We’re getting closer
to a “write once, deploy
everywhere” workflow.


      ... but it probably will never be that simple.
It’s more like
“write once, deploy to many.”



                    - Scott Janousek
Mobilize, not minimize
it’s all about context!
Don’t punish the user
for using a device or
platform that you forgot
or didn’t want to test for.
Don’t punish the user
by taking away or
diminishing features
based on end platforms.
Use the unique advantages
that each platform affords.
Enter AIR Mobile
powered by
Flash Player 10.1.

  The beginning of the “full” mobile Flash explosion.
Enter litl OS
powered in part by a special build of
Flash Player 10.1, to drive the use of
Flash in the living room.



  ...
Flash can be used
virtually anywhere now.
It’s up to you,
both designers and developers, to
make the best experiences
with the Flash Platform.
The END

KevinSuttle.com
 @kevinSuttle

         {                   Kevin Suttle
             Flash Platform UX Architect...
The Next Generation of Flash User Experience
Upcoming SlideShare
Loading in...5
×

The Next Generation of Flash User Experience

8,723

Published on

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

(From Flash and the City 2010)

Published in: Technology, Education
7 Comments
49 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,723
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
7
Likes
49
Embeds 0
No embeds

No notes for slide

The Next Generation of Flash User Experience

  1. 1. The next Generation of FLASH USER EXPERIENCE { Kevin Suttle Flash Platform UX Architect }
  2. 2. Kevin Suttle Flash Platform UX Architect 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 I’m on the internet: kevinsuttle.com | @kevinSuttle
  3. 3. I wasn’t making that Flash thing up.
  4. 4. How I got into Flash: 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. I spend most of my time in FLASH but I also know my way around FLEX.
  5. 5. Flash is at a crucial point within the realm of development technologies. All of a sudden there are “sides”.
  6. 6. The Battle for PLATFORM SUPREMACY
  7. 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. 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. 9. Let’s take a look Sept 2000 - Flash Player 2 had a 95% average in USA, CAN, EUR, ASIA, and South America
  10. 10. Open or closed Flash Player is a standard. It’s been at 90+% for years. Whether Steve likes it or not.
  11. 11. The thing is that consumers don’t really care. They just want their content, or do they?
  12. 12. Yes, and no. Users want content, but they also want a great experience. The iPhone and iPad are perfect examples.
  13. 13. Some users are willing to only play Farmville at home and have an iPhone. They shouldn’t have to make a choice.
  14. 14. You’re all developers, right? Think of it as encapsulation. Push the button, watch it go.
  15. 15. HTML5? Flash? Obj-C? Doesn’t matter. ...but of course I’m biased.
  16. 16. Why does there even NEED to be a winner? Can’t we all just get along?
  17. 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. 18. Want to know who will win? Well, good. Because I was going to tell you anyway.
  19. 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. 20. We’re Flash developers Let’s make great Flash experiences. Or Flex. Whatever you want.
  21. 21. Worst-case scenario We go back to ALL of the massive amounts of work we had before Section 331 PLUS MOBILE. Open Screen Project FTW
  22. 22. I work on what I like to think are “translatable skills”. User Experience Information Architecture Usability Engineering Interaction Design UI Construction Jesse Freeman says that “Flash is dead”. I’m just picking out what I’m wearing to the “funeral”.
  23. 23. What is USER EXPERIENCE? UX, IxD, IA, UI , ETC, HUH
  24. 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. 25. The elements of User Experience 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
  26. 26. The point is UX spans all aspects of design and development. Let’s talk about both within Flash.
  27. 27. Design CONSIDERATIONS Pretty screens actually do require thinking.
  28. 28. Freedom in design is a double-edged sword for any platform. Please use responsibly.
  29. 29. Let’s take a look HTML/CSS - “Standardized” coding practices, very loose control of display across browsers Flash - Complete freedom of design and development, but bad coding or lack of optimization can lead to very poor performance
  30. 30. Design is Platform Independent Design is emotional, subconscious even. Flash, HTML, Silverlight? Doesn’t matter.
  31. 31. What is “cute?”
  32. 32. Disney’s Definition of Cute
  33. 33. Good designers play on our emotions, but for good.
  34. 34. More keys to emotional design Rule of thirds http://en.wikipedia.org/wiki/Rule_of_thirds Golden Ratio http://en.wikipedia.org/wiki/Golden_ratio Designing on a grid http://960.gs
  35. 35. Development APPROACHES New APIs, tools and platforms
  36. 36. Freedom in development is also a double-edged sword for any platform.
  37. 37. Enter Flash Player 10.1 It’s only a dot release, right?
  38. 38. So much more Geolocation IME Gestures and Touch DRM Accelerometer Globalization Global Error Handling Printing P2P/RMTFP Sampling Sensors My VERY unofficial count: a few hundred new APIs.
  39. 39. Multi-touch Freeing Flash from the restraints of traditional mouse and keyboard interaction. Flash was always meant to be multi-touch
  40. 40. flash.system.Capabilities.touchscreenType Specifies the type of touchscreen supported, if any.
  41. 41. There is a bit of a misconception about rollovers on touch screens. You can TOTALLY do it.
  42. 42. flash.display.InteractiveObject.gesturePan 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.
  43. 43. flash.display.InteractiveObject.gesturePressAndTap 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.
  44. 44. 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.
  45. 45. Accessibility Not just a checkbox any more.
  46. 46. Accessibility in Flash has pretty much been a nightmare for a long time. ... but it’s getting better.
  47. 47. flash.accessibility.ISearchableText The ISearchableText interface can be implemented by objects that contain text which should be searchable on the web.
  48. 48. 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.
  49. 49. Flash Player Throttling Before, all SWFs ran at the max frame rate, even when invisible.
  50. 50. Two main throttling techniques Is the SWF instance in a hidden tab? Is the SWF instance scrolled out of view?
  51. 51. HIDDEN TAB DETECTION Supported Browsers as of APRIL 2010 MAC - Webkit nightly (standalone .app) WIN - IE7-8, Firefox 3.6 http://blog.kaourantin.net/?p=83
  52. 52. OUT OF VIEW DETECTION Supported Browsers as of APRIL 2010 MAC - Safari 4, Webkit nightly (standalone .app), Firefox 3.7 (standalone beta .app) WIN - IE7-8 http://blog.kaourantin.net/?p=83
  53. 53. 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.
  54. 54. Globalization API The most under-hyped API in Flash.
  55. 55. UNDER-HYPED Detects system locale properties to tailor: 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
  56. 56. Private browsing mode (inside of Flash Player) Supported in modern versions of Chrome, IE and Firefox
  57. 57. Mobile-specific APIs Handy tools for unpredictable runtimes.
  58. 58. Mobile text input Detects if a physical keyboard is attached. If not, a virtual native keyboard is displayed.
  59. 59. Graphics hardware acceleration on mobile GPU-based vector renderer that replaces OEM software.
  60. 60. Supports many types of hardware rendering Vector graphics Bitmaps 3D effects Filters/Shaders Color transforms Alpha transparency Device/embedded text fonts Saffron Type and the cacheAsBitmap property
  61. 61. Disabled screensaver in fullscreen mode if video or audio is not paused, stopped, or buffering. Basically, it checks to see if there is volume.
  62. 62. Contextual APPLICATIONS Mobilizing, not minimizing
  63. 63. It’s not just the desktop anymore. ... or even mobile handsets.
  64. 64. Design & development are changing. Adaptability is key now.
  65. 65. The data drives everything. Content will always be king.
  66. 66. Traditionally multiple instances had to be written. One for desktop, mobile, tablets, TVs, etc.
  67. 67. Now we have options for user interfaces Native, or custom? It’s up to you.
  68. 68. We’re getting closer to a “write once, deploy everywhere” workflow. ... but it probably will never be that simple.
  69. 69. It’s more like “write once, deploy to many.” - Scott Janousek
  70. 70. Mobilize, not minimize it’s all about context!
  71. 71. Don’t punish the user for using a device or platform that you forgot or didn’t want to test for.
  72. 72. Don’t punish the user by taking away or diminishing features based on end platforms.
  73. 73. Use the unique advantages that each platform affords.
  74. 74. Enter AIR Mobile powered by Flash Player 10.1. The beginning of the “full” mobile Flash explosion.
  75. 75. Enter litl OS powered in part by a special build of Flash Player 10.1, to drive the use of Flash in the living room. Web book, web-connected TV, multitouch remote developer.litl.com
  76. 76. Flash can be used virtually anywhere now.
  77. 77. It’s up to you, both designers and developers, to make the best experiences with the Flash Platform.
  78. 78. The END KevinSuttle.com @kevinSuttle { Kevin Suttle Flash Platform UX Architect }

×