Flex Article

Designing for Flex – Part 5: Designing content displays

Navigating and manipulating content

Well-designed content shouldn't require much navigation, and unless you are building a creation application, your content shouldn't require much manipulation either. However, many content databases are vast enough that users must browse and search them to locate specific content, compare content, or simply explore what's available.

Traditional websites and applications often employ information hierarchies as a content organization strategy. Each piece of content is assigned to a category, and users must browse to the right category to locate the content they're interested in. Many companies spend lots of money designing and researching the right categorization system to match users' expectations.

Categories have their place in Flex application design, especially if you keep them shallow and lightweight, but in general you should avoid hierarchies. Adobe's LiveCycle Form Manager product takes such a hierarchical approach, which reduces its usability. All forms appear somewhere in a tree control, forcing users to perform a new task—find their form—before they can get on to their real task: filling out their request. Most hierarchical systems require users to perform a navigation task before they arrive at interesting content, and as mentioned in Designing for Flex - Part 3: Structuring your application, information-centered structures should seek to bring users to their content as quickly and effortlessly as possible. Moreover, hierarchies fail to satisfy an important aspect of good Flex application design: they make it difficult for the user to explore the content.

Figure 4. Adobe LiveCycle Form Manager is an example of an interface that should be less hierarchical. The hierarchy forces users to guess which category their form lies under before they may begin their real task. Categories can be confusing; for example, should the form for converting paid time-off hours to cash fall under the "Attendance and Leave" category or the "Payroll" category?

Typical content browsing on the web usually involves filling out a search form, then browsing results to locate the most interesting content. If the user wants to make tweaks to his search parameters, he usually needs to hit the back button, re-fill out the form, and browse a new set of results. This experience is optimized for locating a particular, predetermined piece of content, but not for effectively exploring the content space.

Sometimes, users don't come to applications with a precise idea of what they are looking for. Instead, they have a general sense of what they need and want to refine their decision based on what content is available. Even when users do know exactly what they want, they may also wish to explore similar content and make comparisons, such as between competing products in an online store. For these reasons, you should design content experiences that are easy to explore.

Aim to seamlessly integrate searching and filtering functionality with the content browsing experience. Instead of breaking your interface into separate search, navigation, and results pages, think of your interface as a unified view into your content where users can directly specify the attributes of the content they actually want to see. Ensure that users can modify search and filter parameters easily and see results instantly. The less time they spend jumping back and forth between a filter form and the results view, the more time they can focus on viewing and understanding their content.

Figure 5a. The INM Library site uses an attribute-based content navigation strategy. This allows users to locate documents based not only on their category (or "type") but also by keyword, year, or source.

Figure 5b. The Flex Support Forums employ a hierarchical navigation strategy. Users may only view content associated with one category at a time, making it more difficult to find posts that cross categories.

Figure 5c. Yahoo! Search employs a search/results navigation strategy; users may only locate web pages based on keyword.

There are several ways to navigate content. A textual or graphical results list is one of the most common, with filter controls accompanying the results display. However, some content, such as spatial data, is easier to view on a pannable, zoomable surface. This change in the interaction model doesn't change the need to support exploration; mapping applications became much more effective when Google Maps made dragging and exploring the map easy compared to earlier interfaces that employed clunky directional arrows and screen refreshes.

Most Flex applications don't need to provide extensive content manipulation features. Unless you are designing a creation application, avoid overloading your users with manipulation options. When users need to manipulate content, keep the operations as straightforward and discoverable as possible. Favor direct means of manipulating content over indirect ones; for example, instead of adding a button to move an item from one list to another, allow the user to drag and drop it. Drag and drop is a common interaction in Flex applications; always offer it as a means of reordering and moving pieces of content. Consider exposing other content manipulation operations using in-place controls, discussed in the later section, "Merging controls and content."

Figure 6. Netflix's interface for organizing a movie queue was originally based on indirect manipulation; to reorder a queue the user either had to change the numbers next to each movie or use the "move to top" button. Recognizing that users had difficulty achieving a precise ordering with this interface, Netflix added the ability to drag and drop movies from one position in the queue to another—a direct manipulation strategy.

Especially for information structures such as search results displays, map navigations, and charts and graphs that you can manipulate, focus your design efforts on the interactive content displays to ensure that they are straightforward and feel right in real use. If you only have time to prototype parts of your application, prototype the content displays. Whether or not these interactions feel right can make or break your entire Flex application.

Page 3 of 6

Previous Page

Next Page