Updated: June 10, 2019

Preview Table View

Intro

Preview Table Views are used to display a preview of a list and are populated with Table View Cells, which include Object Cells and Contact Cells. Multiple Preview Table Views can be stacked in a single-screen layout to provide quick access to different information. They are commonly found in the Overview and Object screens.

The lists displayed in a preview table view cannot be filtered. It is important to keep in mind that as the preview only displays a sub set off a larger list, list actions must be avoided.

Structure

A. Header

The header includes a group label to describe what the content represents. It is not mandatory to include the header.

B. Content Area

This is the area in which the Table View Cells are inserted.

C. Footer

The footer includes a “See All” label on the left with the number of items in the full list and a chevron icon on the right. The entire footer can be tapped to navigate to the full list. It is not mandatory to include the footer.

Behavior & Interaction

As the Preview Table Views serves to provide a snippet of a large data set, it is recommended that no more than 3 content cells be displayed. The table cells that are displayed in the preview will depend on the default sort and filter of the entire list.

Navigation

Tapping on a single table cell displayed in the Preview Table View will navigate to the detail screen of the object. The ‘See All’ cell will lead the user to the List Report that it is previewing.

Empty State

In cases where the content is generated by user interaction, the preview table view may have an ‘Empty State’ until the user starts selecting/creating content to display. A good example of this is creating tasks in a Project Management app.

You can either choose to hide the preview table view entirely or if it is important to guide the user to generate this content, use the empty state of the preview table view with a label clearly communicating that there is no content yet. A quick action button cell maybe used to guide the user to add to the list.