Adobe - Developer Center : Designing for Flex Part 1: Overview a...

http://www.adobe.com/devnet/flex/articles/fig_pt1_print.html

Flex Article
Designing for Flex Part 1: Overview and introduction to Flex
Rob 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 application s 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: Planning your 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) .

1 of 11

3/3/08 10:36 AM

Adobe - Developer Center : Designing for Flex Part 1: Overview a...

http://www.adobe.com/devnet/flex/articles/fig_pt1_print.html

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 user s 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 Flex applications 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. This content is a public draft. Please give us feedback in the Flex Interface Guide Forum.

Discovering Flex

If you re reading this document, chances are you re getting ready to embark on a journey into the world of Flex application design. Perhaps you re an interface or interaction designer who knows application design inside and out. Perhaps you re a UI-savvy developer who builds applications that don t just work, but work well. Or perhaps you re 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 for HTML or desktop technologies.

The Flex rich Internet application

2 of 11

3/3/08 10:36 AM

Adobe - Developer Center : Designing for Flex Part 1: Overview a...

http://www.adobe.com/devnet/flex/articles/fig_pt1_print.html

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 in novel ways, and perform many computations and screen updates directly on the user s computer while still having 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 browser s back button to return them to the location they d 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 (www.adobe.com/devnet/flex/articles/fig_pt4.html) .

3 of 11

3/3/08 10:36 AM

Adobe - Developer Center : Designing for Flex Part 1: Overview a...

http://www.adobe.com/devnet/flex/articles/fig_pt1_print.html

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 world s internet-connected PCs; and Adobe AIR, a runtime that allows Flex applications to exist on the user s 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 build rich 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. I ll 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 even non-programmers to express their ideas in code. This engine enables designers and developers to make use of the user s 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).

4 of 11

3/3/08 10:36 AM

Adobe - Developer Center : Designing for Flex Part 1: Overview a...

http://www.adobe.com/devnet/flex/articles/fig_pt1_print.html

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

5 of 11

3/3/08 10:36 AM

Adobe - Developer Center : Designing for Flex Part 1: Overview a...

http://www.adobe.com/devnet/flex/articles/fig_pt1_print.html

(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 of the 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, it s 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 (www.adobe.com/devnet/flex/articles/fig_pt3.html) .

6 of 11

3/3/08 10:36 AM

Adobe - Developer Center : Designing for Flex Part 1: Overview a...

http://www.adobe.com/devnet/flex/articles/fig_pt1_print.html

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,

7 of 11

3/3/08 10:36 AM

Adobe - Developer Center : Designing for Flex Part 1: Overview a...

http://www.adobe.com/devnet/flex/articles/fig_pt1_print.html

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 platform s 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 user s 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 interact with 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

8 of 11

3/3/08 10:36 AM

Adobe - Developer Center : Designing for Flex Part 1: Overview a...

http://www.adobe.com/devnet/flex/articles/fig_pt1_print.html

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 traditional applications, 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.

9 of 11

3/3/08 10:36 AM

Adobe - Developer Center : Designing for Flex Part 1: Overview a...

http://www.adobe.com/devnet/flex/articles/fig_pt1_print.html

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 of interoperating. 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 doesn t 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 to communicate 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) . This content is a public draft. Please give us feedback in the Flex Interface Guide Forum.

Acknowledgements

Although this article series has my name on it, many people contributed to its development. I d 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.

10 of 11

3/3/08 10:36 AM

Adobe - Developer Center : Designing for Flex Part 1: Overview a...

http://www.adobe.com/devnet/flex/articles/fig_pt1_print.html

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.

11 of 11

3/3/08 10:36 AM