Updated: September 26, 2018

List Report

Intro

The List Report floorplan displays a large list of items of the same object type and allows users to take actions on them. This floorplan provides the functions of searching, sorting, filtering, and grouping the data in the large list.

List report in compact and regular views
List report in compact and regular views

Usage

Dos

  • Use the list report floorplan when there is a large list of items and the data is of the same object type.
  • The main functions of the floorplan are for users to search, group, or filter the list to narrow down the list.

Don’ts

  • Don’t use the list report floorplan when the list contains different object types – for example, a mixed list of people profiles and tasks.
  • If users need to take certain actions on a small group or part of the large list, use the work list floorplan instead.

Structure

A. Navigation Bar

The Navigation Bar contains the list actions, including Filter (which combines sorting, grouping, and filtering functions), Add New Item, and Edit for group actions like Delete.

B. Search Bar

The Search Bar can be always visible to the users or can be hidden until the users pull the list down.

C. Filter Feedback Bar (Optional)

If there are any frequently used filters, those filters can be displayed on the Filter Feedback Bar. The more common usage of the Filter Feedback Bar is to show the users what filters have been applied when the list is filtered. See the instructions in Filter.

D. Content Area

The Content Area displays the large list of items of the same type. It can either be a list of object cells or a table.

E. Toolbar (Optional)

If there are any more list-related actions besides Filter, Add, and Edit, use the Toolbar for these actions. In compact view, the Toolbar is used when the Navigation Bar doesn’t have enough space for all of the actions.

Guidelines

Nav Bar

Back Button

Use the title of the previous screen for the back button label with a chevron. Avoid using ambiguous word “Back”.

Screen Title

The screen title of the list report is composed of two parts: the name of the list and the counter in parentheses to reflect the number of items in the list. For example, “Tasks (100)” can be the screen title for a task list when using the list report floorplan.

Buttons

The Navigation Bar contains controls for managing the Content Area, such as Filter, Edit and Add. Normally, the Edit action, if there is one, sits on the right side of the Navigation Bar with any other buttons beside it to the left. If there is no Edit action, the Filter button should be on the right side of the Navigation Bar.

In compact width, actions on the Navigation Bar should have a minimum of 1 icon and a maximum of 2 icons. If you require more actions, they must be placed on the Toolbar.

In regular width, actions on the Navigation Bar should have a minimum of 1 icon and a maximum of 3 icons.

 

Search Bar

The Search Bar sits between the Navigation Bar and Content Area. It allows users to search for specific items. The Search Bar can be always visible to the users or can be hidden under the Navigation Bar until the users pull the list down.

See more guidelines in “Search Bar”.

 

Filter Feedback Bar

In the default list report floorplan, use the Filter Feedback Bar only when there are frequently-used filters to help users quickly narrow down the list.

If there are no frequently-used filters, the Filter Feedback Bar can be displayed after users sort, group, or filter the items on the list. Users can tap the interactive buttons to remove the active filter.

See more guidelines in “Filter”.

 

Content Area

The Content Area consists of either a list of object cells or a table to display the items.

Object cells

When using object cells in a list, make sure all key information is properly presented in the object cells. In regular width, make sure the information is balanced on the screen and avoid creating large empty areas. Tapping on one object cell will navigate to its related object screen, which includes detailed information and actions for that object.

Table

To be defined in the next update.

When there is no data in the content area, let the users know with the placeholder text “No results found”. The typical use case is that filters are applied, but there are no matching results.

 

Toolbar

The Toolbar contains relevant actions buttons for the content area, and can be used when there is not enough space for all of the buttons to fit in the Navigation Bar.

Buttons in the Navigation Bar and buttons in the Toolbar are both list actions, which impact the whole list instead of one single item.

Compact & Regular

The list report floorplan supports both regular and compact widths. Sections in the content area maintain the same vertical structure across compact and regular widths. Individual cells expand horizontally to fit the screen size. In regular width, you may be able to provide detailed descriptions for each item.

In addition, readable margins can be applied to screens that use regular width in order to make content appear less spread out.

List Report floorpan in regular width with standard margins
List Report floorpan in regular width with standard margins

Actions

List Actions

Filter: The Filter button provides the sorting, grouping, and filtering options for users to narrow down the list.

Edit: The Edit button activates the multi-selection mode of the list. Users can select one or more items on the list and perform group actions, such as Delete and other line item actions.

Add: The Add button allows users to add a new line item of the same object type to the list. Normally the Add button on the list report floorplan doesn’t provide other functions.

Share: Users can use the share button to share the list through email and other supported channels in the app.

Other list actions: The app can have other list actions depends on the use cases. Keep in mind that these actions should impact the whole list, not just specific line items.

List report in edit mode
List report in edit mode

 

Line Item Actions

The line item actions are actions that directly impact the item instead of the list. For example, “Approve” can be a line item action. Currently, the object cell doesn’t provide in-cell buttons for taking action on the item. However, swiping the cell to reveal actions is always applicable. This approach provides users quick access to those actions, without having to first drill down to the item’s details screen. The maximum number of quick action buttons available via swipe is 3. If there are more than 3 actions, include a “More” button that, when tapped, will bring up an action sheet allowing users to make further selections. Use text or an icon with a label to communicate the purpose of each button, and be sure to use consistent color coding for the buttons.

Swipe to take actions on an item
Swipe to take actions on an item

Behavior & Interaction

Filter the list

When any filters or new sorting have been applied to the list, show the Filter Feedback Bar on top of the list to indicate that this is a filtered list. The screen title will change to reflect the count of items on the current list and the count of items on the original list. Users can tap the buttons to remove the filters.

 

Group the list

Users can apply grouping to the list, at which point the group title and a count of the grouped items will appear. Grouping won’t affect the screen title when no filters are applied. Please note that the Filter Feedback Bar should reflect that grouping has been applied to the list.

Navigation

The user normally navigates to a list report from an overview screen or an object screen. In most cases, users can tap on each line item to view details of the object. This is normally a drill-down navigation. However, in some use cases when there are no more details for each line item, and the primary action is to edit the item, it’s appropriate to use a modal in edit mode when the user taps on the line item.