Designing for Flex – Part 3: Structuring your application

Applying the structures

Choice of structure can have a significant impact on your application. Often this choice is not straightforward, or (even worse) the structure that appears to be the obvious choice may not be the correct one. For example, you could design a photo editing application using a creation structure, similar to Adobe Photoshop. But many casual photographers wish to perform only a few simple tasks on their photos, such as removing red eye or correcting light balance. For these users, a process approach would be more appropriate. To help avoid this pitfall, I will take a look at each structure in turn, discuss its advantages and disadvantages, and then describe how to apply the structure in your designs.

Designing information structures

In general, employ information structures when your users’ primary goals involve browsing, comparing, or comprehending different pieces of information. Information structures excel at promoting learning and discovery. This structure emphasizes visual communication through rich graphical information displays and de-emphasizes navigation and other extraneous tasks that don’t serve these user goals.

Almost all information structures should start by displaying the application’s content. If the subset of content or the method of displaying it is not yet clear, the application should make its best guess from the context. Allow the user to make adjustments by supplying additional preferences through adding filters, selecting from multiple views, and so forth. Give the content display the maximum amount of screen real estate; display controls and other application chrome only when necessary, or relegated to the edges of the screen if this is not possible. Ancillary functions of the application should follow a “hub and spoke” model that integrates all of the information display and adjustment functionality into the central hub and pushes ancillary functionality off into separate spokes that the user only need explore for occasional necessary use cases. (Note: Hagan River’s report “The Designer’s Guide to Web Applications” provides an excellent detailed description of the hub and spoke structural model.) For example, a scheduling application that displays a calendar with appointments as its main hub should allow the user to create and remove appointments directly from the hub itself. The user might perform a less frequent operation, such as making an appointment recurring, a spoke reached by pressing a button on the appointment itself. More information about designing the content of your application appears in the next article in the series, Designing for Flex – Part 4: Designing Content.

Figure 5a. Yahoo! Maps uses a hub and spoke model, where the map and directions form the primary information-structured hub, while ancillary operations such as printing the map and sending it to a friend appear as spokes accessible by the top toolbar.

Figure 5b. The structural diagram for Yahoo! Maps clearly follows a hub and spoke model

Many large Flex applications will not fulfill all of their users’ needs with a single type of information display. For this reason, many designers choose to offer multiple views of the application’s content. For example, operating systems provide icon, list, and details views of files in a directory. When designing these views, consider the different goals and tasks the user must perform with each. Don’t make the user switch to a different view unless the goal he is trying to accomplish is markedly different! More information on how to handle navigation appears in the later section, Fluid navigation.

Page 3 of 8

Previous Page

Next Page