- 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’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.
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.
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.
Use the title of the previous screen for the back button label with a chevron. Avoid using ambiguous word “Back”.
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.
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 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 consists of either a list of object cells or a table to display the items.
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.
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 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.
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.
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.
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.
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.
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.