Adobe AIR and the experience brand

User experiences on the Web have become increasingly better. Now, instead of abrupt page refreshes, it's possible for users to input and access data and content without interruption of the experience. RIA design practices and methodologies appear to have hit the main-stream, and technologies such as Flex and Ajax make it easier for designers and developers to work together towards pixel-perfect, flowing, user-centered interactive experiences.

In this article, I describe the basic qualities of rich Internet applications (RIAs) that have a great look and feel. I will also describe how you can augment these qualities and close the gap between users and your brand with applications built on Adobe AIR.

The look

The visual design and layout of your RIA are key cornerstones of your online brand. When new users arrive at your RIA, they immediately judge it based on its look. Seemingly unconsciously, they assess its logo, color scheme, the typography used, and its overall layout. When conceptualizing and designing your RIA, put together the pieces, and begin to understand your application's purpose. And if your RIA follows sound design principles and has a clear call to action, your users should have no problem getting started.

The feel

An RIA's feel is perhaps more important than its look. The feel encompasses how your RIA moves in response to user interaction, and how its motion helps users access and manipulate content. The feel is what differentiates your RIA from static web experiences of the past that required continual page refreshes. At its most basic level, a successful feel simply helps your users maintain their focus as your RIA adjusts itself around them. But at a deeper level, the patterns of motion and transition employed, taken as a whole, form a system of interaction that provides your RIA with a unique identity.

For example, the Adobe Media Player utilizes a motion pattern called the Glide UI that helps users understand the location of their media as they move up and down the hierarchy of content (play the demo below). Because this motion pattern crucially reinforces the flow of the Adobe Media Player experience, it is one of the application's primary defining characteristics. Thus the Glide UI, along with other motions experienced when users interact its content, comprise the feel of Adobe Media Player.

The experience brand

Taken together, your RIA's look and feel, combined with its voice—that is, the actual words used on your site that communicate to users—combine to create an experience brand. The best RIA experiences attract and maintain users because they are useful, usable, and have a strong experience brand. And now, with Adobe AIR, it is easy to bring an experience brand to the desktop.

Note: For more information on branding and experience, see the following them following entries on Wikipedia: attention economy, brand, and experience economy.

Enter Adobe AIR

With the introduction of Adobe AIR, the look and feel of RIAs comes to the desktop. From the perspective of experience design this is quite revolutionary. It means that the best of the RIA design patterns can now ripple down into the experience of desktop software, which sorely needs an injection of design innovation. Furthermore, it means that desktop applications can now be built using popular web technologies such as Ajax, Flex, and Flash, which make it easier for developers to build experiences created by designers. In addition, these technologies make it easier to implement novel and innovative experiences that are nearly unattainable using standard system frameworks.

In Adobe AIR, your experience brand doesn't face the same competition as RIAs that are contained within a browser. That is, an AIR experience is neither contained within the chrome of another application, nor is it reached after a process of navigating through other websites. And because AIR applications aren't contained within the browser, it's easier to find them amongst the many other items in the Windows task bar or Mac OS X dock (see Figure 1).

In addition, Adobe AIR applications have a greater brand presence on your users' systems via the desktop icon and customized window chrome.

Desktop icon

The first and most important additional design consideration that supports your experience brand is your AIR application's required desktop icon. It is important to make sure it is of quality because your users will engage with the icon on a regular basis. Even if they aren't using your application, whenever they view the dock in Mac OS X, or the start menu in Windows XP/Vista, they will see your icon. If your icon communicates the appropriate message in a beautiful way, it will leave a good impression on your users.

If your company has a logo, consider using it as the basis for your icon. Also, keep in mind that the best icons communicate the application's use. Apple's iCal application, for example, uses a small graphic calendar as its icon. Make sure your application icon scales in size gracefully and looks as proportional at 128×128 pixels as it does at 16×16 pixels. Finally, If you don't have resources within your company to design a quality application icon, contract a graphic designer to create one for you. It's worth it.

Custom window chrome

The second design consideration that supports your experience brand is your AIR application’s window chrome. Adobe AIR provides you with the flexibility to use default system window chrome, or your own custom window chrome. The window chrome visually wraps the AIR application and manifests itself primarily in the title bar. By using custom chrome, you can ensure that the look and feel of your application doesn't end at the title bar, but instead extends gracefully throughout all visual aspects of your AIR application. And, using Flex, Flash, or Ajax, you can easily customize text and user interface controls to further complete the look. The combination of custom window chrome and skinned controls provides your RIAs with a seamless experience that is far cleaner than that attainable by an RIA in the browser (see Figure 2).

Where to go from here

To recap, with Adobe AIR it is easy to bring compelling, innovative experience brands to the desktop, and then extend the brand using a quality application icon and custom window chrome. Because AIR works with your favorite RIA technologies such as Flex, Flash, and Ajax, the look and feel of the best RIAs on the Web today are attainable on the desktop.