The next Generation of
FLASH USER EXPERIENCE
Kevin Suttle
Flash Platform UX Architect
{ }
Slide 2
Slide 2 text
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:
Slide 3
Slide 3 text
I wasn’t making that Flash thing up.
Slide 4
Slide 4 text
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:
Slide 5
Slide 5 text
Flash is at a crucial point
within the realm of
development technologies.
All of a sudden there are “sides”.
Slide 6
Slide 6 text
The Battle for
PLATFORM SUPREMACY
Slide 7
Slide 7 text
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.
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
Sept 2000 - Flash Player 2 had a 95% average in USA,
CAN, EUR, ASIA, and South America
Let’s take a look
Slide 10
Slide 10 text
Open or closed
Flash Player is a standard. It’s been at 90+% for years.
Whether Steve likes it or not.
Slide 11
Slide 11 text
The thing is that consumers
don’t really care.
They just want their content,
or do they?
Slide 12
Slide 12 text
Yes, and no.
Users want content, but they
also want a great experience.
The iPhone and iPad are perfect examples.
Slide 13
Slide 13 text
Some users are
willing to only play Farmville
at home and have an iPhone.
They shouldn’t have to make a choice.
Slide 14
Slide 14 text
You’re all developers, right?
Think of it as encapsulation.
Push the button, watch it go.
Slide 15
Slide 15 text
HTML5? Flash? Obj-C?
Doesn’t matter.
...but of course I’m biased.
Slide 16
Slide 16 text
Why does there even
NEED to be a winner?
Can’t we all just get along?
Slide 17
Slide 17 text
The tech tabloids don’t help
because they’re businesses.
They have to make money,
and the internet is full of opinionated nerds.
Slide 18
Slide 18 text
Want to know who will win?
Well, good.
Because I was going to tell you anyway.
Slide 19
Slide 19 text
The platform that wins,
is the one that will provide the
most content through the
best experience.
You had to see that coming.
Slide 20
Slide 20 text
We’re Flash developers
Let’s make great Flash
experiences.
Or Flex. Whatever you want.
Slide 21
Slide 21 text
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.
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
UX, IxD, IA, UI , ETC, HUH
What is
USER EXPERIENCE?
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
The point is
UX spans all aspects of design
and development.
Let’s talk about both within Flash.
Slide 28
Slide 28 text
Pretty screens actually do require thinking.
Design
CONSIDERATIONS
Slide 29
Slide 29 text
for any platform.
double-edged sword
Freedom in design is a
Please use responsibly.
Slide 30
Slide 30 text
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
Slide 31
Slide 31 text
Design is emotional, subconscious even.
Design is
Platform Independent
Flash, HTML, Silverlight?
Doesn’t matter.
Slide 32
Slide 32 text
What is “cute?”
Slide 33
Slide 33 text
Disney’s Definition of Cute
Slide 34
Slide 34 text
Good designers play on our
emotions, but for good.
Slide 35
Slide 35 text
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
Slide 36
Slide 36 text
New APIs, tools and platforms
Development
APPROACHES
Slide 37
Slide 37 text
for any platform.
double-edged sword
Freedom in development is also a
Slide 38
Slide 38 text
It’s only a dot release, right?
Enter Flash Player 10.1
Slide 39
Slide 39 text
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.
Slide 40
Slide 40 text
Freeing Flash from the restraints of traditional mouse
and keyboard interaction.
Multi-touch
Flash was always meant to be multi-touch
Slide 41
Slide 41 text
Specifies the type of touchscreen supported, if any.
flash.system.Capabilities.touchscreenType
Slide 42
Slide 42 text
misconception about
There is a bit of a
rollovers on touch screens.
You can TOTALLY do it.
Slide 43
Slide 43 text
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
Slide 44
Slide 44 text
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
Slide 45
Slide 45 text
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.
Slide 46
Slide 46 text
Not just a checkbox any more.
Accessibility
Slide 47
Slide 47 text
has pretty much been a nightmare for a long time.
Accessibility in Flash
... but it’s getting better.
Slide 48
Slide 48 text
The ISearchableText interface can be implemented by
objects that contain text which should be searchable
on the web.
flash.accessibility.ISearchableText
Slide 49
Slide 49 text
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.
Slide 50
Slide 50 text
Before, all SWFs ran at the max frame rate,
even when invisible.
Flash Player Throttling
Slide 51
Slide 51 text
Is the SWF instance in a hidden tab?
Is the SWF instance scrolled out of view?
Two main throttling techniques
Slide 52
Slide 52 text
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
Slide 53
Slide 53 text
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
Slide 54
Slide 54 text
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.
Slide 55
Slide 55 text
The most under-hyped API in Flash.
Globalization API
Slide 56
Slide 56 text
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
Slide 57
Slide 57 text
Supported in modern versions of
Chrome, IE and Firefox
Private browsing mode (inside of Flash Player)
Slide 58
Slide 58 text
Handy tools for unpredictable runtimes.
Mobile-specific APIs
Slide 59
Slide 59 text
Detects if a physical keyboard is attached.
If not, a virtual native keyboard is displayed.
Mobile text input
Slide 60
Slide 60 text
GPU-based vector renderer that replaces OEM software.
Graphics hardware acceleration on mobile
Slide 61
Slide 61 text
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
Slide 62
Slide 62 text
if video or audio is not paused, stopped, or buffering.
Disabled screensaver in fullscreen mode
Basically, it checks to see if there is volume.
Slide 63
Slide 63 text
Mobilizing, not minimizing
Contextual
APPLICATIONS
Slide 64
Slide 64 text
desktop anymore.
It’s not just the
... or even mobile handsets.
Slide 65
Slide 65 text
are changing.
Design & development
Adaptability is key now.
Slide 66
Slide 66 text
everything.
The data drives
Content will always be king.
Slide 67
Slide 67 text
multiple instances
had to be written.
Traditionally
One for desktop, mobile, tablets, TVs, etc.
Slide 68
Slide 68 text
options for user interfaces
Now we have
Native, or custom? It’s up to you.
Slide 69
Slide 69 text
to a “write once, deploy
everywhere” workflow.
We’re getting closer
... but it probably will never be that simple.
Slide 70
Slide 70 text
“write once, deploy to many.”
It’s more like
- Scott Janousek
Slide 71
Slide 71 text
it’s all about context!
Mobilize, not minimize
Slide 72
Slide 72 text
for using a device or
platform that you forgot
or didn’t want to test for.
Don’t punish the user
Slide 73
Slide 73 text
by taking away or
diminishing features
Don’t punish the user
based on end platforms.
Slide 74
Slide 74 text
that each platform affords.
Use the unique advantages
Slide 75
Slide 75 text
powered by
Flash Player 10.1.
Enter AIR Mobile
The beginning of the “full” mobile Flash explosion.
Slide 76
Slide 76 text
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.
Slide 77
Slide 77 text
virtually anywhere now.
Flash can be used
Slide 78
Slide 78 text
both designers and developers, to
It’s up to you,
make the best experiences
with the Flash Platform.
Slide 79
Slide 79 text
The END
Kevin Suttle
Flash Platform UX Architect
{ }
KevinSuttle.com
@kevinSuttle