The next Generation of FLASH
USER EXPERIENCE { Kevin Suttle Flash Platform UX Architect }

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

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 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.

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 way ‘round. Apple has their own agenda, and that’s cool. I guess.

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

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 it or not.

The thing is that consumers
don’t really care. They just want their content, or do they?

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 internet is full of opinionated nerds.

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 to see that coming.

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. Open Screen Project FTW

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”.

What is USER EXPERIENCE? UX,
IxD, IA, UI , ETC, HUH

“ 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

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

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 - Complete freedom of design and development, but bad coding or lack of optimization can lead to very poor performance

Design is Platform Independent Design
is emotional, subconscious even. Flash, HTML, Silverlight? Doesn’t matter.

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.wikipedia.org/wiki/Golden_ratio Designing on a grid http://960.gs

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 Handling Printing P2P/RMTFP Sampling Sensors My VERY unofficial count: a few hundred new APIs.

Multi-touch Freeing Flash from the
restraints of traditional mouse and keyboard interaction. Flash was always meant to be multi-touch

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 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.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.

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.

Accessibility Not just a checkbox
any more.

Accessibility in Flash has pretty
much been a nightmare for a long time. ... but it’s getting better.

flash.accessibility.ISearchableText The ISearchableText interface can
be implemented by objects that contain text which should be searchable on the web.

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.

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 http://blog.kaourantin.net/?p=83

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

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.

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/parsing Number formatting/parsing String comparison for sorting or searching for text Upper and lower case conversions

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 transparency Device/embedded text fonts Saffron Type and the cacheAsBitmap property

Disabled screensaver in fullscreen mode
if video or audio is not paused, stopped, or buffering. Basically, it checks to see if there is volume.

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. Web book, web-connected TV, multitouch remote developer.litl.com

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 }