Information design

Designing content displays is not a new idea. The field of information design has tackled the problem for hundreds of years in pre-web mediums such as print and television. (The term "information design" has only existed since the 1970s, but the practice predates it. Some even claim the practice goes back to the beginnings of human communication with the earliest cave paintings.) Information designers create all sorts of communication artifacts, from street signs to subway maps to instructional diagrams. To effectively design content displays, you must think like an information designer.

Content can take many forms. For a personal digital assistant, the content might include appointments, dates, and tasks. A flight booking system might include flight data, travel itineraries, and tickets. A trip planner might include routes, maps, and directions.

To design content effectively, you must put it at the center of your design thinking. Start with real examples of the content you expect users to view and manipulate in your application and understand the tasks users want to perform with it. For information-centered application structures, you may wish to re-frame these tasks in terms of questions users might ask about their content: "What's the cheapest flight I can take to Beijing during the first weekend of August?" "What appointments do I have to make today? " or "What's the fastest way to get downtown during rush hour?".

Once you have sample content and key user questions, your goal is to design a content display that helps users understand the answers to these questions. If the questions are diverse enough that you must provide multiple views of the content, design each view separately while keeping in mind which view will answer which questions. Don't worry about navigation bars or other application chrome at this point; first ensure that you have the information design right, then consider how to add in any necessary interaction.

Figure 1a. Designing effective content displays should always start with samples of real content. This image shows the first step in the design process of the media center application: a set of sample content loosely organized into a "library" and "store."

Figure 1b. Once you have the sample content, organize the content display so that your users can accomplish their tasks and/or find answers to their questions. Don't worry about interaction yet; pretend you are designing a physical information display such as a poster or a sign, as if this were the only information your users need to see. For the media center, for instance, we've organized the albums into groups our users were interested in seeing: the top-rated albums, their personal favorite albums, and a full list of all albums.

Figure 1c. After you've designed the static display, add interactive elements so users can navigate their information dynamically. Keep controls to a minimum; don't provide more functionality than users need as this can distract them from the functionality they will actually use. (Original design credit: Ty Lettau)

Once you are satisfied with the design of your static content display, annotate it with the minimum set of navigation, filter, and manipulation controls you need to help your users answer their questions. Well-designed content should take center stage; avoid the temptation to cram controls onto the screen to surface all of the application's functionality at a glance.

Figure 2a. Many of Apple's Dashboard widgets avoid control clutter by moving the small number of configuration controls onto the flip side of the widget, leaving the main side wholly devoted to a content display of the weather, stocks, time, train schedules, and so forth.

Figure 2b. Yahoo Maps is a larger application and requires more controls to enable users to complete their tasks, but the designers gave the majority of the space to displaying the map itself. Controls are overlaid over the map in unobtrusive ways.

One important difference between designing content displays for Flex applications versus traditional web and desktop applications is that in Flex content displays should employ navigation sparingly if at all. Instead of providing many separate but similar detail views, Flex applications should strive to integrate the most relevant content details into the primary content display itself.

A common pattern in interface design is "master/detail" or "organizer/workspace," where content items are displayed in a list or tree with only some of their information showing. When the user selects one item, the application displays the full details for that item either by transitioning to another screen or by displaying it in another panel visible on the screen. This is a good pattern and can be applied quite effectively, but it often encourages designers to provide insufficient information in the list itself; users must click on several items in sequence to see the details that interest them. To make comparisons, the users must hold in their short-term memories the details of a previous item they wish to compare to the currently selected one. Gmail innovated in this area by displaying not just the sender's name and the subject of the e-mail in their main list, but a snippet displaying the first line of the message itself as well.

Figure 3a. Gmail helps reduce the constant switching back-and-forth between the message list and the individual message display typical of other email clients by integrating more information about each message into the message list itself. Users can view all participants in an e-mail thread as well as a snippet of the most recent message without ever leaving the message list view.

Figure 3b. Adobe Media Player employs master/detail while also displaying details in place where appropriate. To support a large number of videos, it uses a master-detail model when drilling down into subcategories. Since this prevents users from comparing information across categories, the main screen displays an initial set of videos directly in place underneath the category name, which helps users better understand the categories themselves.

Flex's mechanisms for displaying and interacting with lists of content are very flexible, and allow designers to bring rich information content into the list itself. Make use of this ability by considering what your users really need to see to answer their questions instead of shunting this information off to another screen out of habit.

Having all this content in one place necessitates careful and skillful communication design. Appropriate use of visual hierarchy among the elements of the content, as discussed in Designing for Flex – Part 3: Structuring your application, is critical to ensure the user understands this wealth of information. Many Flex applications could benefit from having a skilled information designer on the team to effectively apply visual information design principles to the application's interface.

Page 2 of 6

Previous Page

Next Page