Adobe - Developer Center - Designing for Flex ÔÇô Part 1- Overview and introduction to Flex.pdf

7/29/2019 Adobe - Developer Center - Designing for Flex Part 1- Overview and introduction to Flex.pdf

1/11

Adobe - Developer Center : Designing for Flex Part 1: Overview a... http://www.adobe.com/devnet/flex/articles/fig_pt1_print

of 11 3/3/08 10:36

Flex Article

Designing for Flex Part 1: Overview and introduction to FlexRob Adams

Adobe (www.adobe.comhttp://www.adobe.com)

www.usereccentric.com

Adobe Flex is a new medium specifically created for designing and developing rich Internet applications, or RIAs.

RIAs are a new breed of applications that break out of the constraints of traditional web and desktop environments

to provide a more fluid, information-focused user experience. Flex makes it much easier to create these

experiences, but it requires application designers and developers to think differently about the application design

problem than they did when creating traditional web and desktop applications.

The Designing for Flex series surveys new possibilities, techniques, and challenges designers and developers

will confront when designing Flex rich Internet applications. Specifically, the series covers: planning and

structuring Flex applications, special considerations for designing web versus desktop Flex applications, the

design of rich content displays, appropriate use of motion in application design, improving an applications

efficiency of use, and ensuring your users feel safe using your application and trust it with their data. We have

supplemented the series with an ever-growing set of components and sample code to assist you in applying the

theory presented here. In the near future, we also plan to release the official set of "Flex Interface Guidelines" that

describe in depth how to apply the Adobe standard for Flex application design to your projects.

The Designing for Flex series includes the following articles:

Part 1: Overview and discovering Flex (www.adobe.com/devnet/flex/articles/fig_pt1.html)

Part 2: Planning your application (www.adobe.com/devnet/flex/articles/fig_pt2.html)

Part 3: Structuring your application (www.adobe.com/devnet/flex/articles/fig_pt3.html)

Part 4: Merging the web and the desktop (www.adobe.com/devnet/flex/articles/fig_pt4.html)

Part 5: Designing content displays (www.adobe.com/devnet/flex/articles/fig_pt5.html)

Part 6: Guiding with motion (www.adobe.com/devnet/flex/articles/fig_pt6.html)

Part 7: Making your application fast (www.adobe.com/devnet/flex/articles/fig_pt7.html)

Part 8: Making your application safe (www.adobe.com/devnet/flex/articles/fig_pt8.html)

Appendix A: List of best practices (www.adobe.com/devnet/flex/articles/fig_appendixa.html)

Appendix B: For further reading (www.adobe.com/devnet/flex/articles/fig_appendixb.html)

This content is a public draft. Please give us feedback in the Flex Interface Guide Forum.

Planning for Flex application design is similar to application planning for other mediums, but places special

emphasis on deeply understanding your users goals, the content they use or create, and the tasks and workflows

they go through to accomplish these goals. The next article in this series: Designing for Flex Part 2: Planningyour application (www.adobe.com/devnet/flex/articles/fig_pt2.html) discusses this topic in detail.

Flex applications eschew the strict page-to-page or window-to-window metaphor of the web and the desktop, and

instead focus heavily on interactions within individual screens of the application. As a result, they must be

structured somewhat differently from traditional websites or desktop applications. Flex applications are comprised

of three types of structure: information structures, process structures, and creation structures, all of which must be

designed differently. Structural design is discussed in Designing for Flex Part 3: Structuring your application

(www.adobe.com/devnet/flex/articles/fig_pt3.html) .


2/11


of 11 3/3/08 10:36

While Flex applications break outside of the constraints of traditional web and desktop applications, they also bring

together the best aspects of these two mediums. Common features of web applications, such as back button

support, bookmarking, and hyperlinks must be preserved on the web just as proper support for the file system,

network connection changes, and windows and menu bars must be preserved on the desktop. In Designing for

Flex Part 4: Merging the web and the desktop (www.adobe.com/devnet/flex/articles/fig_pt4.html) , I discuss

these web- and desktop-specific issues.

Well-designed Flex applications put the users content first, helping her understand and visualize the information,

then provide discoverable means to interact with the content if appropriate. Designing for Flex Part 5: Designing

content displays (available soon) describes how to use the powerful graphical capabilities of Flex to help users

interact with their content.

Flex offers the ability to employ motion as part of the design medium, yet in the past, motion in applications has

often been abused. Designing for Flex Part 6: Guiding with motion (available soon) describes how to use motion

to teach and emphasize, not to distract and annoy.

Computers are intended to improve human productivity, so for any application, efficiency of use is paramount.

Well-designed Flex applications help speed up users both through snappy system performance and through

providing appropriate assistance to help users complete their work faster and easier. Designing for Flex Part 7:

Making your application fast (available soon) discusses both of these aspects of efficiency of use.

Finally, no application is useful or desirable if users cannot trust it with their data and their reputations. Good Flexapplications must carefully safeguard both of these through technical measures and through keeping users

informed of the consequences of their actions and empowering them to undo their mistakes. Designing for Flex

Part 8: Making your application safe (available soon) discusses which measures are necessary to achieve

application safety and earn your users trust.

Flex offers you the opportunity to revolutionize the way your users interact with your application and your

company. Incorporating the best practices discussed in this paper into your design thinking will put you on the

right track towards making this opportunity a reality.


Discovering Flex

If youre reading this document, chances are youre getting ready to embark on a journey into the world of Flex

application design. Perhaps youre an interface or interaction designer who knows application design inside and

out. Perhaps youre a UI-savvy developer who builds applications that dont just work, but work well. Or perhaps

youre a manager or business analyst who leads application design projects. Whether you come from the world of

the web, the desktop, or are already experienced with Flex, this series offers a solid foundation of knowledge to

apply and extend as you design and develop your next great Flex application.

Flex applications have much in common with their web and desktop predecessors, but they also require a

somewhat unique approach to design. This section covers:

How Flex differs from other technology mediums

Why Flex is an ideal technology for crafting rich Internet applications

Why Flex gives you more freedom, yet requires you to design in a slightly different way than you did forHTML or desktop technologies.

The Flex rich Internet application


3/11


of 11 3/3/08 10:36

From the very beginning, we designed Flex to be the best platform available for designing and building RIAs. Flex

RIAs enable designers and developers to build applications that break out of the old constraints of the web and

the desktop to deliver experiences that are more useful, usable, and desirable for their intended users. However,

Flex also introduces new design challenges to overcome and new user expectations to meet. These challenges

and opportunities are caused by two aspects of well-designed Flex RIAs:

They blend web and desktop idioms and thus must satisfy user expectations for both mediums.

They open up new design possibilities through their ability to use motion in applications, render content innovel ways, and perform many computations and screen updates directly on the users computer while stillhaving access to all the information services of the Internet.

Flex applications blend the web and the desktop by borrowing the best from both mediums. Most Flex

applications appear on a website, usually alongside traditional HTML content and applications. Users of these Flex

applications have certain expectations of web-ness that goes along with the environment: They expect their

browsers back button to return them to the location theyd been to before. They expect to bookmark sections of

your application and to add hyperlinks to other web pages that connect them directly to that section. They expect

the visual appearance of your application to seamlessly match the branding of the rest of your website. Lastly, they

expect to access your application anywhere, on any computer, regardless of their browser or operating system

software.

Figure 1. The Cotswold Outdoor site is built in Flex and properly supports the browser back button functionality,

a common idiom in web applications.

Likewise, Flex also brings the feel and to some extent the look of the major desktop operating systems to the web.Flex provides out-of-the-box implementations of advanced desktop controls such as tabs, sliders, trees, and data

grids as well as advanced desktop idioms such as drag and drop, direct selection, and in-place validation. Because

these controls and idioms are readily available and consistently implemented, users come to expect a richness of

interaction that they might not from a traditional website. More information on how to design an application that

blends these two mediums is available in Designing for Flex Part 4: Merging the web and the desktop



4/11


of 11 3/3/08 10:36

Figure 2. Adobe Premiere Express implements many desktop idioms such as drag and drop, yet lives in the

browser as a web-based Flex application.

Flex opens up new design possibilities by enhancing standard web browsers with the Adobe Flash technology on

which Flex is built. This technology is now available in two compatible runtime environments: Adobe Flash Player,

a browser plug-in that is installed on 98% of the worlds internet-connected PCs; and Adobe AIR, a runtime that

allows Flex applications to exist on the users desktop outside the confines of a web browser. Both runtimes

provide a set of powerful, time-tested tools that open up new possibilities for web and desktop application design.

These tools include:

Powerful drawing and media APIs for using vector graphics, bitmap graphics, and high-quality video to buildrich information displays for your application. Popular examples include the stock charts on Google Finance

and the interactive video player on YouTube. More information on using these tools to help users

understand and interact with their information appears in Designing for Flex Part 5: Designing content

(coming soon).

Built-in support for motion and effects effects that creates new ways to guide users and provide meaningful

feedback. Ill discuss this further in Designing for Flex Part 6: Guiding with motion (coming soon).

A modern code execution engine that is powerful enough to enable hard-core developers to build any

application behavior they wish, yet has its roots in a simple scripting language that empowers evennon-programmers to express their ideas in code. This engine enables designers and developers to make

use of the users computer, rather than the server, for many processing tasks involving validating data,safeguarding information, and caching results to reduce latency. More information on these topics appears

in Designing for Flex Part 7: Making your application fast (coming soon) and Designing for Flex Part 8:

Making your application safe (coming soon).


5/11


of 11 3/3/08 10:36

Figure 3. YouTube and Google Finance employ Flash technology for their video player and interactive stock

charts to help users better understand the information they offer than a standard HTML page could on its own.

These changes to the underlying technology and environment enable you to communicate with your users in new

and exciting ways. However, they also require you to think a bit differently than you did when designing for othermediums. The following sections compare Flex with other popular client-side technologies to illustrate how this is

so.

Flex and HTML

Since its beginnings as a simple markup language for hypertext documents, HTML has followed a model of

"pages" and links between pages. Content flowed from the top to the bottom of the page. Markup tags defined

the meaning of various blocks of contentspecifying them as headers, paragraphs, images, and so forth.

Although web designers pushed the envelope to create complex static layouts in HTML, they did little to change

the basic page-to-page model until the rise of AJAX.

The typical thought process for designing HTML-based web sites and applications closely mirrors this

pages-and-hyperlinks model. Designers tend to create single pages and organize them into information

hierarchies for users to navigate. Traditionally, they rarely thought much about interactions within a page because

this was prohibitively difficult to achieve in the medium. This forced them to rely on potentially slow page reloads

whenever they needed to update the screen. However, the pages-and hyperlinks model has its advantages as

well: it is quite simple, maps well to web browser s navigation models, and is already well understood by most

computer users today.


6/11


of 11 3/3/08 10:36

(www.adobe.com#)

Figure 4. A site map of a traditional HTML website (left) contrasted with a structural diagram of a Flex application

(right). Note that the Flex application relies on providing more functionality within one screen instead of organizing

content into a hierarchy of pages. Click for a larger view (www.adobe.com) .

Although Flex applications also commonly have multiple top-level pages or sections, unlike HTML many more ofthe interesting interactions occur within a page rather than between them. Thus, Flex requires designers and

developers to think more deeply about how the page itself will change in response to user input. At the same time,

its important to maintain the simplicity of the page model as you employ these interactions to improve the user

experience.

With the advent of AJAX, some of these same concerns are now present even in HTML application design, and

thus some of the guidance found in this document applies to the HTML medium as well. However, since AJAX is

typically used to enhance existing HTML pages with small bits of rich interactive functionality, most HTML

designers are generally not required to think as deeply about the intra-page interactions as are Flex application

designers. However, these very interactions are what make Flex (and AJAX) applications so compelling. When

used effectively, these technologies make it much easier for users to manipulate the application to accomplish

their goals. More details on how intra-page interactions affect the structure of Flex applications appear in the

chapter Designing for Flex Part 3: Structuring Your Application



7/11


of 11 3/3/08 10:36

Figure 5. Most web applications employ AJAX to incorporate small pieces of rich interactive functionality in a

mostly traditional HTML page, such as the rating and commenting widget in the Flex Cookbook(left).

Figure 6. On the other hand, Flex applications such as Flex Store

(www.adobe.com/devnet/flex/samples/flex_store/) consist almost entirely of rich interactive functionality blended

together into a seamless user experience.

Flex and desktop clients

Before the rise of web application development, desktop-based fat clients were the most popular way to design,


8/11


of 11 3/3/08 10:36

develop, and deploy internet-enabled applications, and they are still used for many projects today. Desktop clients

typically followed the WIMP style of user interface design (Windows, Icons, Menus, Pointing devices), and they

were generally built using desktop user interface toolkits such as MFC, Cocoa, or Java Swing. They aggregated

clusters of user interface controls or widgets (such as buttons, checkboxes, sliders, and data tables) into various

application windows in which users could view their data and perform tasks by interacting with the widgets or the

ubiquitous menu bars that appeared at the top of the window or the screen. For the designer, the primary

question was how to use this palette of controls to lay out windows that would make sense to the user and help

her accomplish her goals.

Figure 7. An example of a traditional fat client desktop application. Most of the interface consists of the standard

controls defined by the platforms toolkit, in this case Microsoft Windows.

Like desktop client technologies, Flex provides a rich set of standard user interface controls. Unlike desktop

technologies, Flex also provides access to the rich graphics and motion capabilities of the Flash Player, enabling

designers and developers to extend the framework in myriad ways through custom artwork, motion, and

interactivity. This enables designers to craft experiences that provide richer and more interactive visualizations of

the users data than can be achieved with a standard control palette alone.

Most desktop user interface toolkits have a strong notion of window management that is closely tied to the host

operating system. Most Flex applications, however, eschew windows altogether as window-based interfaces are

not expected on the web and for most web applications the benefits of multiple windows are outweighed by the

time the user must spend flipping between and arranging them. (This is not true of Flex applications that target the

Adobe Integrated Runtime (AIR). However, even Adobe AIR applications typically do not rely as heavily on multiple

window support as traditional desktop applications do.) Instead, Flex favors integrating functionality that would

ordinarily be spread across multiple windows into one seamless experience. The combination of the visual

expressiveness of the Flash Player and the lack of window management requires us to think less in terms of

arranging controls on the screen and more in terms of visualizing information for the user and letting her interactwith that information in ways that will help her accomplish her goals.

Flex and traditional Flash

Understanding the difference between Flex and traditional Flash content created using the Adobe Flash

authoring tool is often a challenge, mostly because they are both "Flash-based" technologies that are built on top


9/11


of 11 3/3/08 10:36

of the same core technology, Adobe Flash Player.

Figure 8. Homestar Runner is a popular example of a traditional Flash site that is oriented around a narrative, the

original target for the Flash authoring tool.

However, Flex and Flash differ dramatically in their models for design and development. Flash designers and

developers created traditional Flash content around a time and animation metaphor; they built narratives to teach

concepts, advertise products and services, or simply to tell stories for their own sake. (The humor site "Homestar

Runner" is one of the more popular examples of storytelling for its own sake.) As the interactive development

capabilities of the Flash Player became more powerful, some Flash gurus were able to push the envelope of the

technology and create larger, more data-rich Flash experiences that rivaled the complexity of traditionalapplications, and thus we coined the term "Rich Internet Application" or "RIA" to describe these experiences.

However, due to the inherent limits of the Flash tools and technology of the time, building complex applications

that supported many user flows, interacted heavily with large amounts of user data, and required the support of

large teams for long-term support and maintenance was prohibitively difficult and expensive. Thus, most traditional

Flash content has remained focused on media and storytelling on the web.

The Flex framework provides a more application-focused method of designing and developing RIAs that are

deployed to the web or on the desktop. Unlike Flash, the primary organizing metaphor of Flex is not time and

animation, but screens and states. Time and animation are still first-class citizens in Flex, but they are used instead

to guide the user from one state transition to the next. Designers use motion in Flex to provide visual effects to

improve user comprehension through feedback, not to organize the entire user experience as an interactive

movie. Thus designing a Flex application is more like designing a traditional HTML or desktop application at the

high level, but allows developers and designers to use the motion powers of Flash to make their application more

fluid and seamless.


10/11


0 of 11 3/3/08 10:36

Figure 9. The linear animation model of Flash authoring contrasted with the nonlinear states model of Flex. The

states model tends to work better for applications due to the many paths users can take through the system.

Despite these differences, Flash and Flex are both part of the same platform and thus are capable ofinteroperating. If sections of an application make more sense to build using the animation-focused approach of the

Flash authoring tool, you can do this and integrate them into your Flex applications as first-class citizens. Whether

you have existing Flash content you want to use in a Flex application or simply prefer the Flash authoring tool for

the job at hand, this interoperability means that deciding on Flex doesnt mean deciding against Flash.

With great power comes great responsibility

By now you have seen how Flex differs from the user interface technology mediums that came before it. You have

tasted its power and flexibility (no pun intended) and seen how designing applications that target the Flex

framework requires thinking a little bit differently than you might be used to doing when designing applications for

other mediums. However, it is always worth remembering that while Flex opens up whole new ways tocommunicate with your users and assist them in accomplishing their goals, it also introduces new potential

stumbling blocks to watch out for. It behooves all of us, whether we are designers or developers, to use the power

of this new medium effectively for the benefit of our users and our businesses. The articles in this series explain

how to do just that.

To learn more, read the next part of the series: (www.adobe.com/devnet/flex/articles/fig_pt3.html) Part 2:

Planning your application (www.adobe.com/devnet/flex/articles/fig_pt2.html) .


Acknowledgements

Although this article series has my name on it, many people contributed to its development. Id like to thank my

reviewers, Sho Kuwamoto, Phil Costa, Steven Heintz, Narciso Jaramillo, Josh Ulm, Jeremy Clark, Deb Galdes, Tom

Hobbs, and Amy Wong for providing me with extremely helpful feedback. Special thanks to Sho Kuwamoto and

Phil Costa for envisioning this project and pushing me to complete it and to my managers, Josh Ulm and Jeremy

Clark, for finding the time for me to give it the attention it needed. Finally, extra-special thanks to Tom Hobbs,

Narciso Jaramillo, Sho Kuwamoto and Peter Flynn for guiding my thinking on many of the topics that appear in the

articles.


11/11


1 of 11 3/3/08 10:36

This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License.

About the author

Rob Adams works for Adobe Systems, Inc. in San Francisco, California. He started at Macromedia, Inc. in 2004 and

has worked on the Flash authoring tool, Flash Player, and Fireworks, but nowadays works primarily on the Flex

product line. He is involved with the design of the core framework itself as well as the designer/developer tools

such as Flex Builder and Creative Suite. Although his primary focus is on design research, he also does some

design work, promotes sound design practices both within Adobe and without, and makes himself a general pain

in the necks of the designers, product managers, and engineers he works with.

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Documents

Adobe - Developer Center - Designing for Flex ÔÇô Part 1- Overview and introduction to Flex.pdf