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

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.

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 displays .
• 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.
• 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 and Designing for Flex – Part 8: Making your application safe.

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.

Page 2 of 5

Previous Page

Next Page