Accessibility

Flex Article

 

Designing for Flex – Part 3: Structuring your application


Table of Contents

Comments

Three types of structure

Designers and developers create Flex applications for a variety of reasons, to serve many different types of users doing many different activities. However, if you examine a broad spectrum of applications you may notice that their structures can be decomposed into three basic types: information structures, process structures, and creation structures.

Examples of information structures include product browsers in online stores, executive dashboards, news readers, and media players. They are built around the application’s content and are primarily intended to communicate new information to their users. These structures help users draw new inferences and make informed decisions by displaying the application’s data in a form that assists the users in understanding the information in ways that further their goals. For most information structures, the goal is to get the appropriate information in front of the user with as little effort on her part as possible.

The Flex Store product browser, the Oakland Crimespotting map, and the Amgen Tour of California race tracking view are all examples of information structures.

Figure 1. The Flex Store product browser, the Oakland Crimespotting map, and the Amgen Tour of California race tracking view are all examples of information structures.

Examples of process structures include online banking bill-pay systems, store checkout processes, and product configurators. They are built around helping the user accomplish a specific task. They walk the user through the task, providing information as necessary to complete each step. They are more focused on receiving information from the user than information structures, although they must still remain focused on the user’s content and tasks. The goal of most process applications is to collect this information from the user as quickly and straightforwardly as possible.

An insurance claim wizard, the Flektor video editor, and the Adobe.com account information editor are all examples of process structures.

Figure 2. An insurance claim wizard, the Flektor video editor, and the Adobe.com account information editor are all examples of process structures.

Examples of creation structures include desktop publishing tools, video editors, and music sequencers. They enable their users to produce a new piece of content or make significant free-form modifications to an existing one. They visualize and edit content and provide a set of tools for making these edits. Creation structures are not as linear as process structures since the creation tasks they support combine available tools in ways that are difficult for application designers to predict.

The Flex rich text editor, Adobe Photoshop, and Adobe Premiere Express are all examples of creation structures.

Figure 3. The Flex rich text editor, Adobe Photoshop, and Adobe Premiere Express are all examples of creation structures.

Selecting among the aforementioned structures is not an either/or decision for typical Flex applications. Many make use of two of the structures or even all three depending on the need at hand. For example, most online stores use an information approach for their product browsing experience but switch to a process approach for their check out workflow. Likewise, a weblog authoring tool may use a process approach for creating a new entry to collect information such as the title and category, and then switch to a creation approach for authoring the actual article. The next section discusses how to choose among the structures wisely.

Most real applications make use of multiple structures. For example, Amazon.com uses an information structure for its product browsing experience, then switches to a process structure for its checkout experience.

Figure 4. Most real applications make use of multiple structures. For example, Amazon.com uses an information structure for its product browsing experience, then switches to a process structure for its checkout experience.