The Next Generation of Flash User Experience

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 Deﬁnition 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 unoﬃcial 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

ﬂash.system.Capabilities.touchscreenType Speciﬁes the type of touchscreen supported, if any.

There is a bit of a misconception about rollovers on touch screens. You can TOTALLY do it.

ﬂash.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 ﬁngers 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.

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

ﬂash.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-speciﬁc 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 eﬀects Filters/Shaders Color transforms Alpha transparency Device/embedded text fonts Saﬀron Type and the cacheAsBitmap property

Disabled screensaver in fullscreen mode if video or audio is not paused, stopped, or buﬀering. 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” workﬂow. ... 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 aﬀords.

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 }

http://www.slideshare.net	1142
http://kevinsuttle.com	213
http://commentedout.posterous.com	48
http://blog.5dworld.net	18
http://karthickkumar.com	4
http://translate.googleusercontent.com	2
http://feeds2.feedburner.com	1
http://johanlopes.net	1
http://johanlopes.posterous.com	1
http://yervandharutyunyan.com	1
http://us.mg2.mail.yahoo.com	1
http://www.kevinsuttle.com	1
http://facebook.slideshare.com	1
http://www.linkedin.com	1

The Next Generation of Flash User Experience

by Kevin Suttle

Accessibility

Categories

Upload Details

Usage Rights

14 Embeds 1,435

Statistics