Users need to be presented with a list of items with one to a few attributes, and each item could be associated with one or more actions. In addition, the items to be presented do not need to be sorted or compared on any of the attributes.

Show users a simple list of items with associated actions (Figure 7.1).

Users’ familiarity with lists makes it a very effective design approach to present a set of items, especially when items are primarily text based and have basic actions associated with them. For example, lists are commonly used on dashboards and portals (see Chapter 4), where users are shown a list of items such as to-dos, top referrer web sites, most popular products, and so forth (Few, 2006). Users can then click on a list item to navigate to view its details.

Show simple lists as either numbered or nonnumbered lists. Numbered lists are especially useful when numbers represent the item's rank order, such as in the top 10 movies of the week or the top 10 news stories (Figure 7.2).

Consider using icons or other symbols with nonnumbered lists to improve the list's visual impact or to indicate the type of item. In addition, lists may use alternate shades of background color or a line separator to improve readability of closely spaced list items (Figure 7.3).

Although most simple lists show items with only one or two attributes, some lists may contain more. For example, search results often show page title, a brief description, web site address, and other information in a simple list format. When users do not need to sort the multiattribute list and compare items of those attributes, using a simple list is often a better alternative than a TABULAR LIST (see the next pattern). However, when showing simple lists with multiple attributes, facilitate quick scanning by making the most important attribute in the list salient and by placing it before other attributes (Figure 7.4).

Although a simple list may be acceptable for showing items with multiple attributes, consider a TABULAR LIST if the list needs to be sorted or list items compared based on one or more of the attributes and as a way to minimize the space required for multiattribute lists.

Users need to be presented a collection of items with several attributes so that they can clearly associate each item with its attributes as well as compare items to each other based on those attributes. In addition, they may want to sort the list based on one or more attributes.

Show users the list in a tabular format, where items are listed in rows and their attributes are shown in columns (Figure 7.6).

Multiattribute information is best presented in tables because it provides structure to data. For example, column headers can identify the attributes for items presented in rows. In addition, presenting information in a tabular format makes it easy for users to compare items and, when supported, sort them in the desired order. Most important, users’ familiarity with tabular arrangement of data into rows and columns makes it a useful approach to present multiattribute data.

Tabular data are generally read in rows with items in rows and attribute values in columns. Show attribute names in the table headers, unless they are implied by the data. For effective design, it's important that the table design match its intended use rather than relying on users to do additional analysis (Figure 7.7).

Most large lists need to be filtered; see the FILTERING pattern in Chapter 6 and the DYNAMIC QUERYING pattern in Chapter 8 for the choices available to designers for narrowing large lists. Large lists also typically cannot show all items on the same page, so PAGINATION is often an integral part of tabular lists; consider CONTINUOUS SCROLLING as an option as well (see Chapter 6).

Items in the list relate to each other in a hierarchical manner such that each list item may have one or more subitems with a parent–child type relationship (e.g., category–subcategory).

Show list items as a “tree” of items, which clearly illustrates the relationship between parent and child item(s) (Figure 7.18). List items at the parent level (i.e., a group node or a parent item) may contain other groups (i.e., parents) and/or individual items (i.e., a leaf node or a child item) and can be expanded and collapsed to view its contents.

For many lists, especially in emails and forums that have several participants and topics, it's important to show how items relate to each other. Showing items in a hierarchical list makes it easier for users to follow the thread of a discussion or conversation. In addition, it makes it easier to trace the discussion's history.

Make the list items’ hierarchy clear by depicting the relationship between items at the parent and child levels. In addition, include expand and collapse controls for items at the parent level in the first column (Figure 7.19).

Indentation is the preferred method to indicate parent–child relationships among items in a multilevel hierarchical list. However, for single-level hierarchies—mainly used for grouping of information—some form of visual indication that emphasizes the item at the parent level is usually sufficient to show the hierarchical relationship (Figure 7.20).

When sorted, hierarchical lists need to be presented as nonhierarchical lists, which may be either SIMPLE LISTS or TABULAR LISTS. In addition, users may want to sort hierarchical lists (SORTING; see Chapter 6).

Items to be shown to users involve date and time, or both—for example, schedules or planned events. Although users may want to see past events, their main focus is on upcoming or future events.

Use a calendar-like format to present items. In addition, consider showing items in a list view as well and allow users to switch between them (Figure 7.23).

Users generally know how to interact with calendars because of their familiarity with desktop applications such as Outlook, Entourage, iCal, and so forth. In addition, using a calendar view makes it easy for users to see scheduled events and helps them with planning because as they can clearly see available and busy time slots.

Show users a calendar with an appropriate default view—for example, calendars for personal or business use typically show a weekly view by default. However, allow them to change it to a different view per their preference (Figure 7.24).

When using a calendar control for navigation, highlight days with one or more scheduled events to prevent unnecessary navigation (Figure 7.25).

Users need to be presented with time-based historical information (hours/minutes in a day, days of the week, months, years, etc.) to enable them to see trends and/or the evolution of an event.

Show historical information as a timeline (Figure 7.29).

Timelines are appropriate for presenting time-based data because they allow users to see relationships between events and facilitate comparison. They can also help users see the historical context or rationale, if any, for the current state.

Show time along the horizontal axis and the data or event information along the vertical axis. When available screen real estate is limited, allow users to scroll or pan the timeline (Figure 7.30) or compress the timeline and allow them to zoom in and out as desired (Figure 7.31).

Large timelines that don't fit within the available screen space often incorporate the OVERVIEW-PLUS-DETAIL pattern (see Chapter 8) to allow users to zoom in and out to view details.

Items presented to users are visual in nature, and presenting them using only their textual description may make it difficult for users to recognize and locate desired items. In addition, users may be able to recognize an item by its image but may be unfamiliar with the item's name.

Show users items as image grids or image lists rather than a textual list. However, complement images with a textual description (Figure 7.33).

Humans are able to recognize and recall images better than words (Paivio et al., 1968). Therefore, when showing multimedia content, such as photos, movies, music, and so forth, it's easier for users to scan and find the desired item when all items are presented as images rather than just in a textual list. The advantage of images over textual information—commonly referred to as Picture Superiority Effect (Lidwell et al., 2003)—is particularly evident in situations where users may have been casually exposed to the image before or know what the “prototypical” image they are searching for looks like. For example, if users are looking for a photo, an artist, an album, or a video that they have seen before or remember one or more elements of, it'd be faster for them to find it using images rather than text. Because memory for images and text together is generally better than text or images by themselves, consider complementing images with textual description (Childers and Houston, 1984; Paivio et al., 1968).

In the early days of the Web, bandwidth was a limiting factor, and the focus was on sharing textual information. With broadband becoming commonplace, user interaction is changing, as users are not only viewing and uploading photos, music, and videos, but also sharing them. This has made the use of image lists quite commonplace.

Facilitate the quick scanning of items by showing item thumbnails in an image grid. Like other lists, consider providing users with necessary list pagination, sorting, and filtering options (Figure 7.34; see also the PAGINATION, SORTING, and FILTERING patterns in Chapter 6).

When space is limited, image lists may be implemented using the CAROUSEL pattern, where users are shown fewer items at a time, but they can use navigation controls to view images hidden from their view (Figure 7.35; see also the CAROUSEL pattern in Chapter 8).

Unlike lists, especially tabular lists, which can be quite compact, image lists/grids usually require more space. When screen space is limited, consider using the CAROUSEL pattern to accommodate more items (see Chapter 8).

Items to be presented to users contain spatial information that refers to either geographical (e.g., location of restaurants on a map) or physical locations (e.g., seating in an aircraft, a concert hall, or a stadium). In addition, for users, it's important to know the item's location in a geographical or physical space as well as its relation to other items in the same space.

Show items on either the map of a region or space in question (Figure 7.40).

Because users are presented with spatial information, showing them on a map of the physical space eliminates the need for users to visualize its location. It also makes information more meaningful and relevant to user goals, such as finding a location, navigating to and from a location, and relating data to the targeted region.

Maps are typically used as a background image on which geographical, physical, and statistical information are superimposed. Depending on users’ needs, maps may be represented as illustrations (using points, lines, and polygons), photographic or satellite images, text, or a combination (Figure 7.41).

Hover tips are typically used when details are not extensive, are purely informational in nature, and do not require users to take an action on the presented information, whereas, pop-ups are used when users can take actions such as find directions (Figure 7.42). Another alternative is to show the pop-up after a few seconds' delay to support relatively new users who may not know what actions are available on the map markers (e.g., Microsoft's Live Maps).

Some map overviews support zooming as well. However, using overviews for panning and zooming is generally not as efficient as panning and zooming on the main map (Hornbæk et al., 2002) (see also the OVERVIEW-PLUS-DETAIL pattern in Chapter 8).

Large maps typically don't fit within the available screen space and often use the OVERVIEW-PLUS-DETAIL pattern to allow users to maintain their context. In addition, maps use DRAG-AND-DROP for panning. See Chapter 8 for more information.

For items in lists, users may want to take one or more actions such as editing, deleting, comparing, and so forth. Desired actions may apply to an individual item or may require users to select two or more items.

For actions such as edit, delete, copy, and so forth that apply to individual items, clearly associate and show actions for each item. For actions that require selection of two or more items, show checkboxes for each item in the list and corresponding actions outside the list (Figure 7.50). Baxley (2003) referred to them as dedicated actions and shared actions, respectively.

By selecting a dedicated action for an item, users are implicitly choosing the item. Therefore, asking users to select the item before the action is an unnecessary step. In addition, long lists may require users to select an item and then scroll up or down to apply the action, further making the interaction inefficient.

For lists that support both dedicated and shared actions (see Figure 7.50), if not separated, clearly indicating which actions apply to individual items and which apply to multiple items would be a design challenge as well.

Place dedicated actions in the same row as the list item and repeat them for each item in the list and place shared actions outside the list. If users may select one or more items, like in many web-based email applications, placing both dedicated and shared actions outside the list is acceptable when it helps reduce visual clutter (Figure 7.51). However, to minimize errors, consider disabling dedicated actions when users have selected more than one item in the list.

In addition to list actions, users may need to be presented with utility functions that apply to the list as a whole (see the next section for the LIST UTILITY FUNCTIONS pattern).

Certain actions users might take do not require them to select specific items but rather apply to the list as a whole—for example, printing, downloading, emailing, and so forth.

Similar to dedicated functions, show utility functions, such as email, export, and so forth, outside the item list (Figure 7.61).

The list view as shown may not be sufficient for users’ needs. They may want to use information in their own analysis using their own tools. In addition, they may want to share information with others who may not have direct access to the data. Utility functions can help users in performing such analyses and facilitate sharing.

First, distinguish utility functions from shared list actions. Because utility functions apply to the list as a whole and not individual items, it's important they be shown outside the list and are presented separately from the shared list actions. The latter requires selecting items from the list, whereas the former does not.

The most common export/download formats include Adobe PDF, Excel, CSV (comma-separated values), TSV (tab-separated values), and XML (eXtensible Markup Language), because they allow users to import data to a preferred spreadsheet or database application and manipulate or view the data as necessary. The XML data format is also useful when data may be used as input to other applications and/or converted to other formats such as HTML (HyperText Markup Language) or SVG (Scalable Vector Graphics) for presentation purposes. Adobe PDF is useful when it's important to maintain the visual look of data being exported.

Another commonly used utility function is “Print.” This may be implemented as simply a “printer-friendly” version of the page that users can print on standard printers, by removing banners, advertisements, navigation, and other branding information and resizing it to fit. Resizing the page for printing is particularly important with FIXED-WIDTH LAYOUTS (see Chapter 12), which may cut off text on the right when pages are printed in a portrait layout mode (instead of landscape). When printing lists, it may help to ask users if they want to include details in the printed report (Figure 7.62).

List utility functions are similar to list actions and require users to be shown appropriate acknowledgment messages after successful task completion.