Updated: September 28, 2017

List Report

Intro

The List Report floorplan is for displaying 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

Do’s

  • 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 is 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 mixing list of people profiles and tasks.
  • If users need to work and take certain actions on a small group or part of the large list, use work list floorplan.

Structure

A. Navigation Bar

Navigation Bar contains the list actions, including Filter (Combing 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’s any frequently used filters, those filters can be displayed on Filter Feedback Bar once the users land on this screen. 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 instruction in Filter.

D. Content Area

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’s any more list related actions rather than Filter, Add and Edit, use the Toolbar for these actions. In compact view, Toolbar is used when Nav bar cannot afford space for all 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 with two parts, name of the list and the counter in  parenthesis 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

Nav Bar contains controls for managing the Content Area, such as Filter, Edit and Add.  Normally, Edit, if there is one, sits on the right side of the nav bar with other buttons next to it on the left. If not, Filter should be on the right side of the nav bar.

In compact view, actions on the navigational bar should have a minimum of 1 icon, and maximum of 2 icons. If you require more actions, it must be placed on the toolbar.

In regular view, actions on the navigational bar should have a minimum of 1 icon, and maximum of 3 icons.

 

Search Bar

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

See more guidelines in “Search Bar”.

 

Filter Feedback Bar

Use Filter Feedback Bar in the default list report floorplan only when there are frequently used filters to help users quickly narrow down the list.

If there’s no frequently used filters to the list, use Filter Feedback Bar when users sort, group or filter the items on the list. Users can tap on the interactive buttons to remove the active filter.

See more guidelines in “Filter”.

 

Content Area

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 the key information is properly presented in the object cells. In regular view, make sure the information is balanced in the screen and avoid a large empty area. Tapping on one object cell will navigate to the object screen with detail information and actions to the object.

Table

To be defined till next update.

When there is no data in the content area, use a placeholder text of “No results found” to communicate to the users. Typical use case is fillers are applied, but there is no matching results.

 

Toolbar

Toolbar is used to provide relevant buttons for the content area when the Nav Bar is not able to hold all of the buttons.

Both buttons in Nav Bar and Toolbar are list actions, which impact the whole list instead of one single item.

Compact & Regular

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 actual screen size. In regular view, you may be able to provide detailed descriptions for each item.

In regular view, readable width can be applied to screen to make the content less spread out on the screen.

List Report floorpan in regular view with readable width
List Report floorpan in regular view with readable width

Actions

List Actions

Filter: Filter button is used to bring up the Filter modal and provide the sorting, grouping and filtering options to users to narrow down the list.

Edit: 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: 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 floor plan doesn’t provide other functions.

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

Other list actions: The app can have other list actions depends on the use cases. To keep it in mind, the actions should impact the whole list, not just one or more 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” an item 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 perform actions is always applicable. Only provide the valuable actions in the swipe gesture to give user quick access without drill down to the item detail screen. The maximum of quick action buttons under one way swiping is 3. If there are more than 3 buttons, use “More” button to bring up a action sheet for further selection. Use text or icon with label to communicate the purpose of the function. 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 has 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 current list and the count of items on original list. Users can tap on the buttons to remove the filter.

 

Group the list

Users can apply grouping mechanism to the list. The group title with a count of the group will appear after grouping. Grouping won’t affect the screen title when there’s no filters applied. However, the filter feedback bar should reflect there is a grouping applied to the list.

Navigation

The list report normally comes from an overview screen or an object screen.  In most cases, users can tap on each line item to view detail of the object. This is normally a drill down navigation. However, in some use cases when there is no more detail of each line item, and primary action is to edit the item, using a modal in edit mode when tap on the line item is appropriate.

Resources

Worklist

Filter

Search