Accessibility

Table of Contents

Designing for Flex – Part 4: Merging the web and the desktop

Living on the web, living on the desktop

Web applications used to share very few similarities with their desktop cousins. Web apps were much more limited in the richness of their interactivity, while desktop apps were generally more limited in their connectivity and access to content. However, for the past few years this has become less and less true. With RIA technologies such as Flex and AJAX, web applications gained much of the richness of interaction that desktop applications enjoy, as I discussed in part 1. Likewise, many desktop applications started to incorporate traditional web idioms. iTunes includes a miniature web experience as part of its iTunes Music Store feature. Windows XP provides web-like navigation for its file system explorer. Many desktop applications now use hyperlinks as user interface widgets.

Flex Store is a web application, yet it employs many desktop idioms such as drag-and-drop. Adobe Bridge is a desktop application, yet parts of the application, such as Adobe Stock Photos, mostly consist of embedded web content.

Figure 1. Flex Store is a web application, yet it employs many desktop idioms such as drag-and-drop. Adobe Bridge is a desktop application, yet parts of the application, such as Adobe Stock Photos, mostly consist of embedded web content.

What does this mean for you? Fortunately, it means that designing a modern Flex application for the web is not very different from designing a modern Flex application for the desktop. Just because you’re designing a Flex application for the desktop-based AIR doesn’t mean you should load it up with menus and toolbars and control panels just to make it look like Microsoft Office ’97. Likewise, just because you’re designing a Flex application destined for the web-based Flash Player doesn’t mean you should haphazardly add forms and navigation side bars just to make it “consistent” with traditional HTML web applications. All Flex applications should be content-focused, employ fluid navigation, use motion to guide users, and follow all the other principles articulated in the articles of this series. In general, web and desktop Flex applications should look and feel quite similar.

checkmark Design Flex applications as RIAs first, and desktop or web applications second.

Kuler, a web-based Flex application, and Digital Editions, a desktop Flex application, share many similarities in appearance and structure even though they are deployed into different environments.

Figure 2. Kuler, a web-based Flex application, and Digital Editions, a desktop Flex application, share many similarities in appearance and structure even though they are deployed into different environments.

Since both enivornments enable you to create rich application experiences, why create a web application versus a desktop application? Or should you do both, since most Flex code can run in both environments? The fact is there are still several inherent attributes of each environment that may make it well- or ill-suited to the particular goals of your application.

Web-based applications have two essential advantages over desktop-based ones: they are always available from any machine with a network connection with no installation and they are fully integrated with the web environment. If your users have multiple machines or machines that they do not fully control (such as public terminals in libraries), you should probably build a web application. Even more importantly, an installation process—even a lightweight one such as the Adobe AIR installation process—is a serious deterrent to many web users who are initially only casually interested in your application.

Offer a web experience when you expect your users won’t be motivated enough to install a desktop application.

checkmark

Offer a web experience when your application must be accessible from any machine and fully integrated with the web environment.

Users only undertake desktop application install procedures, such as the one pictured above, when they know they want the application and completely trust its source. Only deploy your application as a desktop app if your users know and trust your company and want the application badly enough to install it.

Figure 3. Users only undertake desktop application install procedures, such as the one pictured above, when they know they want the application and completely trust its source. Only deploy your application as a desktop app if your users know and trust your company and want the application badly enough to install it.

Unlike desktop applications, web applications are accessible to search engines and URLs. Other website owners can’t link to desktop applications, nor can search engines spider their content. Although your content may be accessible through a web service API, this doesn’t provide the same level of easy integration with other sites and search engines. Offer a web experience if this level of integration is important to you.

Web applications have unique URLs, allowing other websites, such as blogs to link to them and within them. Here, you can see the Amgen Tour of California application linked to directly from a blog that recommends it.

Figure 4. Web applications have unique URLs, allowing other websites, such as blogs to link to them and within them. Here, you can see the Amgen Tour of California application linked to directly from a blog that recommends it.

Desktop-based applications have their own set of advantages. Unlike web applications, they have a presence on the user’s computer. They integrate more closely with the host operating system. And they can allow offline usage by leveraging the user’s file system for storage.

checkmark

Offer a desktop experience when your application must have a presence on the user’s computer and integrate more seamlessly with the host operating system.

Desktop applications usually appear as an icon in the Start Menu on Windows or the Applications folder on Mac OS X. If users use your application often, this provides easier access since they don’t need to launch a web browser and go to a bookmark. Offer a desktop experience if your users will find this quick access useful and they are unlikely to feel that you are cluttering up their applications list with a rarely-used tool.

Desktop AIR applications, such as Adobe Media Player, are installed on the user’s local machine and appear in the Windows Start Menu and Macintosh Applications folder. This gives them more prominence on the user’s system than web-based Flex applications enjoy.

Figure 5. Desktop AIR applications, such as Adobe Media Player, are installed on the user’s local machine and appear in the Windows Start Menu and Macintosh Applications folder. This gives them more prominence on the user’s system than web-based Flex applications enjoy.

For security reasons, web browsers often place restrictions on web applications’ integration with the host operating system. Some common desktop idioms are impossible to implement on the web, such as creating and opening files, and copying and pasting certain types of content. Also, only desktop applications can directly access the users’ hard drive. Using the hard drive, the application can store a wealth of information on the user’s machine and still provide significant functionality when not connected to the Internet. Offer a desktop experience if the use of web-restricted idioms would help users accomplish their goals, especially if you expect users to need your application when no Internet connection is available.

Digital Editions, like most desktop applications, allows users to open files directly from their file system. Desktop Flex applications have all of the capabilities of native applications, including file system access and drag-and-drop/copy-and-paste functionality between the application and the host operating system.

Figure 6. Digital Editions, like most desktop applications, allows users to open files directly from their file system. Desktop Flex applications have all of the capabilities of native applications, including file system access and drag-and-drop/copy-and-paste functionality between the application and the host operating system.

As you’ve seen, Flex applications deployed to the web and the desktop are very similar but have some inherently different advantages and disadvantages. The remaining sections of this chapter will examine how these advantages and disadvantages might affect the design of your applications.