Accessibility

Flex Article

 

Understanding the Macromedia Flex Experience Model

Mike Sundermeyer

Macromedia

Macromedia Flex introduces a new way to create applications. Its language, MXML, is deceptively similar to HTML but it provides a richer, more powerful model than HTML, called the HALO experience model. With power comes the responsibility to use it wisely. This article is intended for user interface designers. I discuss some of the design goals in the HALO experience model and explain how to use them to your advantage.

HALO is a cross-platform experience model for Rich Internet Applications. Macromedia developed HALO initially for use in its own consumer-facing applications but later found that it provides a consistent set of visual cues, interaction patterns, and application navigation conventions for developers of Rich Internet Applications. Some of these are embedded in the components, containers, and layouts that ship with Flex 1.0 but many more will come in future versions of Flex, as well as future solution packs. Think of us as your "design team in a box." Of course, no amount of technology reliably yields a great experience, but HALO should give you some good tools with which to get started.

You can see some of the HALO principles at work on the Flex Developer Center application examples page.

What Is "Experience" and Why Do I Care?

Experience is a well-used term but we use it to mean something very specific. It's not just about making an interface look pretty and it's not about gratuitous, animated flying things that zoom across your screen. Experience is about using expressive visual language and good usability practices to surface capability and improve the successful completion of user tasks (see Figure 1). I'll give some examples later but the bottom line is that MXML and ActionScript 2.0 give you more tools to work with than HTML—although HTML is still great for many things!

"Experience" means the experience received by the user

Figure 1. "Experience" means the experience received by the user

Aesthetics are equally important to experience. Humans are wired with a desire for sensory stimulation and aesthetic appeal, and research shows that attractiveness keeps our focus and improves our completion of tasks. Although most research and thinking to date concentrates on how to create usable software—which is still critical—we believe that software should move beyond that to become truly useful and fun or engaging in some way, thereby appealing to you on multiple levels. Therefore we say that a really great experience combines elements that are useful, usable, and desirable .

Note: The concept of "useful, usable, desirable" came from the excellent book Creating Breakthrough Products: Innovation from Product Planning to Program Approval by Jonathan Cagan and Craig M. Vogel (Financial Times Prentice Hall, 2002). See the last page of this article for links to more resources.

The main reason why it's worth focusing on experience now more than ever is that, increasingly, the most important face-to-face relationship you have with your customers is being replaced with software—and you need that software to give users a great experience. Creating a frustrating online experience is like keeping a rude, uncooperative, inattentive salesperson on the showroom floor.

Here's an example. I do all my banking with Bank of America but haven't walked inside a branch office for several years. All of my interaction for paying bills, investing, balancing my checkbook, and so on is through the Bank of America website and ATMs. Bank of America is betting their most important relationship with me, their customer, on this buggy piece of software and hardware running on my computer. My experience with this software—how useful, usable, and desirable it is—shapes the value I place on my business relationship with them. Furthermore, my switching costs are low: With one click I can explore Wells Fargo's services and see if they are better, more useful, or more compelling.

There is much more to say about why experience matters. If you are interested, check out the last page of this article for links to a white paper we wrote on the topic, The Essence of Effective Rich Internet Applications (PDF, 2.57 MB), a report by IDC, and other resources.

Design Goals of a HALO Application

HTML is popular, in part, because it presents a very clear and simple model for user interaction. Clicking a link or image usually gives you an immediate visual cue that something is happening (the browser window momentarily goes blank while the new image or page loads) and the Back button gets you back to where you came from, so you feel safe to explore the web.

The risk of using whiz-bang technology and complex interaction models to deliver applications is that you reduce usability and confuse users.

Macromedia has created some basic high-level design principles for HALO applications that attempt to guide developers in using the new, expressive power of HALO in ways that are appropriate to the task. We hope they will improve rather than degrade the user experience. The following are not intended to capture the entire science of good UI design or usability (there are plenty of books written about that), nor will you be assured of creating an effective application if you follow them. These goals are simply a few design-oriented ideas to aid to the process you are already following:

If you study the Flex application examples, you will notice many of these principles in action.

One question about Flex that I sometimes get is why Flex applications don't look like OS-native applications. The simple answer is that they aren't OS-native applications; they are Internet applications that run in all different browsers and platforms. Macromedia has not tried to make the set of components in Flex mimic the look and behavior of OS components exactly because this would set users' expectations for the look, style, and interactivity of controls running on web pages that could not possibly be met across platforms.

In addition, the desktop/OS model for controls is not appropriate for the rich client Internet. The web has changed people's expectations. Businesses and individuals want to customize the look and feel of applications so they match their brands and express their individuality. We believe that a modern application model for rich client applications should enable and support this expectation, while setting new standards for consistent interaction patterns and visual cues so that users don't become confused.

Exploring the HALO Experience Model

The first version of the HALO experience model surfaced in Flex 1.0 through a set of components, layouts, effects and behaviors, style sheets, sample applications, and a few rules of thumb. It's easy to use once you get the hang of it.

HTML is great for rich flowed documents but it's sort of an accident of history that it has been used for interactive applications and it's really not well suited to many of those tasks. One of the big differences that you, as a UI designer, need to take into account when designing applications is that Flex applications run in a rich client rather than being generated on the server like HTML. This means that if you want to pull tabular data from a database, for example, then rather than generating HTML table row tags on the server, your app running on the client would use a DataGrid component to fetch data from a web service and display and paginate these rows. Flex makes you think a little differently about your design.

What Is HALO?

The base set of components, layouts, and style sheets that ship with Flex are part of HALO. Although they are intended to deliver a broad range of looks, they have a very consistent feel so that users can leverage their knowledge across applications. The feel is intended to be responsive; it gives immediate feedback so that, for example, all components light up slightly when your mouse rolls over them and light up even more when pressed. Figure 2 shows how the parts of HALO work together.

A high-level view of the HALO experience model

Figure 2. A high-level view of the HALO experience model

The base component set in Flex 1.0 contains behaviors that are part of the components themselves. They are intended to be changed only through the component APIs so that users of Flex applications encounter a consistent feel. Don't change these base behaviors unless you have a compelling reason to do so. However, feel free to extend the components or create your own.

By overlaying the components, themes allow quite a bit of flexibility in the look of components and layouts. The default theme in Flex is the HALO theme, which you can change easily using the style sheet mechanism described in detail in the section about Cascading Style Sheets. The HALO principles encourage you to style your applications to match your brand or content.

As shown in Figure 2, we continue to invest in creating new components, themes, and solution packs so that you can build your applications from higher level, well-designed building blocks.

Components

The default set of components (see Figure 3) have particular behavior embedded into them, such as the way drag and drop works and the way the accordion slides open smoothly. These components are easily stylable (color, font, background, and so on) and, with some effort, even reskinnable (changing the shape and behavior). Although these components are richer than standard web components, they do not look and feel exactly like OS-specific components. To understand why, read the section Design Goals of a HALO Application.

Some of the default components

Figure 3. Some of the default components

All components are exposed as tags in MXML. For a complete list of components and examples of using each, as well as how to extend them, see the Flex Explorer sample application.

The components that ship with Flex 1.0 allow you to create robust applications. If you find that they don't suit your needs, however, you can create your own, either by aggregating existing controls (for example, by creating a shopping cart or product catalog component) or by creating your own using MXML and ActionScript 2.0 or even Flash.

Layouts

A HALO application running in the browser is designed to create a clean separation from the browser chrome (toolbars, menus, scroll bars, and such) and group information so that your eye parses and understands the application and the relationships among its elements.

Figure 4 shows the Flex Store sample application that ships with Flex, and highlights several layout principles in action. The first thing to notice is that the background is a gray gradient. You can change this using the background or backgroundImage attribute of the <application> tag.

Flex Store sample application (image courtesy of ThinkGeek.com)

Figure 4. Flex Store sample application (image courtesy of ThinkGeek.com)

All application content is contained in three panels to separate clearly what is going on. The leftmost panel has a title at the top and a control bar at the bottom, with controls that affect the products shown in the body of the panel. These are all HALO conventions that are optional but recommended attributes of the <panel> tag.

The Product Details panel shows details of the product selected in the Product Catalog panel, and the Shopping Cart shows what the user has chosen. Products can be dragged from either the Catalog or the Details panel to the Shopping Cart; alternatively, you can click the Add to Cart button in the Details panel.

Other HALO conventions shown here include the title of the application, which appears above the upper left corner of the leftmost panel, and the fact that as you resize the browser horizontally, the panels float in the middle of the browser window. An improvement on this effect would be to resize the panels so they fit the width and height of the browser window at all times and reflow their contents as necessary.

Another HALO convention features the use of collapse and expand buttons in the upper right corner of the Details and Shopping Cart panels. Both work together to expand, collapse, or share the vertical space between the two panels, allowing you to view more details or more shopping cart items.

All HALO applications should respond instantly to user feedback whenever possible. For example, dragging the Price Range slider in the Catalog panel gives immediate and smooth feedback without requiring roundtrips to the server or a page refresh. Clicking the graphical View buttons in the lower right corner of the Catalog panel switches to a text list view without going to another page of the application, effectively reusing the existing, available space.

Forms

Forms in HALO applications contain certain built-in behaviors. The Form layout aligns fields in a certain way, respects tab order, and defines conventions for showing required fields and fields with errors.

Figure 5 shows a Form that is part of an Accordion control. In this example, the user entered an invalid value, causing the field to highlight in red and show a tooltip describing the problem. You can decide when to trigger an error: as the user enters text, when the user leaves a text field, or, in this case, when the user clicks the Complete Purchase button. Notice that required fields show an asterisk next to them. All this behavior is embedded in the <Form> and <FormItem> tags, which saves you work and ensures consistency across applications.

Form errors

Figure 5. Form errors

Here is the code for the Credit Card field:

<mx:FormItem label="Credit Card" required="true">
<mx:TextInput id="cardNumber" width="200"/>
</mx:FormItem>

Because the credit card validation code is associated with the data model mapped to this field, I do not show it here.

Cascading Style Sheets

If you do not like the default green of HALO components, the default gray gradient background, or the fonts, you can change them easily by modifying simple style sheet attributes.

Figure 6 shows the Autumn style sheet applied to the same Flex Store application shown in Figure 5. The style sheet changes the background, font, container shape, and color scheme. The only other styles added to the main style sheet file (flexstore.css) for this application are as follows:

Application {
   font-family: "Trebuchet MS";
   
   color: #000000;
   header-colors: #DEBD84,#F7DEB5;
   footer-colors: #F7DEB5,#DEBD84;
   corner-radius: 10;
   themeColor: #FE8A4B;
   backgroundImage: "backgrounds/autumn.swf";
   backgroundSize: "100%";
   backgroundColor: #854230;
   rollOverColor: #F9F2E7;
   selectionColor: #EFDEC2;
}

Autumn style sheet applied (image courtesy of ThinkGeek.com)

Figure 6. Autumn style sheet applied (image courtesy of ThinkGeek.com)

You can set style attributes at a number of different levels. The style sheet selector shown in the code above sets these styles for the entire application but some of these styles may also be appropriate to set at the level of a panel, form, or even an individual button. As a general rule of thumb, however, fonts and color schemes should be consistent throughout a given application.

Figure 7 shows a few of the professionally designed style sheets included with the sample applications in Flex. To use these in your application, copy the style attributes and associated background SWF (if any) from the samples folder into your application. Note that the background of the initialization screen is set by the background attribute of the <application> tag and not the style sheet because at the time the application initializes, the style sheets have not loaded yet.

Four style sheets available in the sample application folder

Figure 7. Four style sheets available in the sample application folder

Themes

A Theme consists of a completely new set of skins for the components and containers. Reskinning the default component set in Flex requires experience both in ActionScript and Flash. We anticipate that you will be able to meet most of your application needs by using the style sheet mechanism without having to reskin components.

Even so, Macromedia plans to create several professionally produced themes to choose from, and we anticipate third-party developers to do likewise. The beginnings of the "Candy" theme appear in the Contact Manager sample application that ships with Flex (see Figure 8). Note that the buttons, scroll bar, combo box, and panel look quite different from the HALO default theme, although their behavior is still consistent so that users won't be confused about their use.

The Contact Manager sample showing a potential "Candy" theme

Figure 8. The Contact Manager sample showing a potential "Candy" theme

Behaviors

The components and application model of Flex come with a number of default behaviors. One example of a behavior built into Flex is drag and drop, which defines a transparent overlay of dragged images, a clear visual feedback for drop targets, and an effect that conveys the drop action, as shown in Figures 9 and 10. This behavior is triggered by defining the dragEnter, dragExit, dragOver, and dragDrop properties of, for example, a DataGrid component and writing the ActionScript code to define the action that occurs when a user drops an item over the target.

A drag operation with a red "x" over the unavailable drop target

Figure 9. A drag operation with a red "x" over the unavailable drop target

A drop operation over a successful drop target in the Shopping Cart

Figure 10. A drop operation over a successful drop target in the Shopping Cart

The Accordion component shown earlier in Figure 5 defines behavior that acts as a sort of "wizard" to guide users through a multistep process by sliding panes open and closed as the user completes each pane. The default behavior intentionally allows users to skip ahead to forthcoming panes without completing the fields in the previous pane. This prevents the user from feeling "trapped" in the procedure.

Flex applications should support the browser's Back button whenever possible. Flex defines the History Manager to support this behavior. The History Manager is turned on by default for the Accordion and TabNavigator components but is turned off for ViewStack . You can register other components with the History Manager, and write some ActionScript to implement the loadState() and saveState() methods of the object. For example, you could write your saveState() method for a List to save the selected row in the list. Read more about the History Manager in the Flex documentation.

Animation and Effects

You can create lots of crazy animated things in Flex but does that mean you should? Although there is a time and a place for gratuitous animation and effects that contribute to the "wow factor" of any application, my general rule of thumb is that any use of such eye candy should contribute directly to improving the usability and continuity of the application, as defined in Design Goals of a HALO Application.

The simple rollover effect appearing on each image in the Flex Store catalog causes the product image to become slightly bigger. This "zoomTo" effect conveys a visual cue that the user can interact with the product image in some way—in this case, that users can click or drag it:

<mx:Effect>
   <mx:Zoom name="big" zoomTo="107" duration="100"/>
   <mx:Zoom name="small" zoomTo="100" duration="100"/>
</mx:Effect>
<mx:Image id="image" source="{dataObject.image}" 
   width="75" height="70" 
   mouseOverEffect="big" mouseOutEffect="small"/>

In this MXML snippet, two named effects, big and small, are defined to be a zoomTo effect of 107 percent size with a duration of 100 milliseconds. Then the mouseOverEffect attribute of the image is set to the big effect and mouseOutEffect is set to the small effect.

The Price Range slider in the Flex Store application also shows a subtle but useful effect: When you drag the slider, products that are excluded from the price range fade quickly to a transparent ghost image. This makes the application feel smooth and trustworthy because nothing jumps around or disappears. A visual continuity gives an immediate connection to the consequence of the user's action.

The code for this particular effect appears in ActionScript:

function hide() {
   if (!filteredOut) {
      filteredOut=true;
      var e = new mx.effects.Fade(image);
      e.alphaFrom = 100;
      e.alphaTo = 10;
      e.duration = 300;
      e.playEffect();
   }
}

In this hide() method, after a check to make sure that the product image is not already hidden, (!filteredOut), a new Fade effect object, is made with the image as its target and the alpha transparency is set to fade from 100 percent to 10 percent opaque over a duration of 300 milliseconds.

While these are very simple effects, you can create more complex effects and transitions by sequencing multiple effects together or executing them in parallel. I've shown a few of the built-in effects. You can explore more of them—such as Move, Wipe, Resize, and Sequence—in the Flex Explorer application and the documentation.

Where to Go from Here

The HALO application model provides a core set of components, layouts, themes, behaviors, and effects, as well as some guidelines and demo applications that will hopefully help you build better experiences. Of course, we hope and believe that all of you will develop many new and interesting components and patterns. This is where the power of Flex gets interesting—where you create highly evolved, effective interaction patterns that are reusable and solve problems better than ever. Think world-class blog readers, collaboration components, shopping carts, product configurators, data visualization techniques, and so on. Ultimately this is where we want to spend our energy, as the Internet presentation tier evolves well beyond the original Macintosh toolbox circa 1984.

Here are links to books and resources of interest in the area of experience:

About the author

Mike Sundermeyer is SVP of Product Design at Macromedia. Growing up surfing in Santa Cruz has given him a love of the experience. Growing up with traffic lights that deliver two-minute reds at 3 AM has given him an indignation for bad design. At Macromedia he used applied indignation as the lead UI designer for the first two versions of Dreamweaver and contributed to the conception and design of Contribute, Breeze, Flex, and other products. Prior to Macromedia Mike led various design and development projects at Gain Technology, a multimedia startup, and Sun Microsystems.