List Pattern Version 2.0.0.0 Print this Page
 
 
Description
Return to Top

The List pattern is the primary method of presenting multiple records of enterprise data. The design of each row should include only key data that will help users decide whether or not to drill into a list item. Each row displays from one to four text fields. Icons should be used to communicate urgency or status when appropriate. Drilling into the list item provides additional details.

Note: Lists described in this pattern are not the same as the lists described in the List Navigation pattern.

 
Pattern Sample
Return to Top

Configure the list for a layout of 1, 2, 3, or 4 fields. If fields are long, consider using a horizontal stacked design (see figure 1). If there are several key fields to display, present up to four fields of data (see figure 2). Make sure that data is realistic and fits the layout.

List Pattern
Figure 1. Two-field horizontal layout (left) and four-field side-by-side layout (right)

When lists contain more than 20 records, provide options to sort and search in a subheader region. Dynamically download more records when the user scrolls down to the end of the list or provide a More Items link that downloads an additional set of records (depending on the mobile platform).

List Pattern
Figure 2. For long lists, provide options for search and sort.
List Pattern
Figure 3. Top of a list, displaying sort (left) and top of a list, displaying search (right)
Required Screen Elements
Component Type Required Components Customizable or Extendable Components
Page Header See Page Header pattern NA
Search and Sort Subheader (optional) Make the sort tab category button wider when there are fewer categories.
Pagination
  • 20 records per page
  • Users scroll to see additional rows
For platforms that do not support dynamic loading of additional items, provide a More Items link (see figure 3).
Records
  • Field 1
  • Fields 2 - 4
  • Icons (maximum 2)
Page Footer (optional, see figure 4)
  • X - Y of # records
NA
 
Key Considerations
Return to Top
Search and Sort
  • The optional search and sort region appears below the page header. The search is shown by default, but teams can decide to show the sort first instead.
  • Try to limit the size of the data set by providing only data relevant to mobile. Mobile tasks should be quick and straight forward. Users do not have time to page through multiple lists to locate data.
  • Performing a sort after performing a search does not overwrite the search results; it only reorders the results. Performing a search after a sort runs a new search without regard to previous sort ordering.
  • In some instances, search and sort are not applicable because there is no valid use case or because the data set is too small (see figures 6 and 7).
  • See the Keyword Search pattern for detailed information, examples, and screenshots.
 
Interaction Examples
Return to Top
Example 1: Sorting

Users can select one of the values to sort on. Only information that appears in the list will be sortable because lists cannot be ordered based on values that the user cannot see. For example, if lists need to be sorted by priority, the priority must appear in the list.

Sorting list interaction example
Figure 4. Sorting a list

When users sort on a list, the data is refreshed and reordered to the beginning of the list.

Sorting is optional. You can sort on these data types:

  • Numeric (highest first)
  • Alphabetical (A first)
  • Alphanumeric (highest first)
  • Icons (custom)

Icons may be used within the list to denote priority or alerts or other important information. These icons should be listed by their appropriate labels, using their value types. For instance, an icon that represents the highest priority would appear first, and the icon that represents the lowest priority would appear last.

Example 2: Switching Between Search and Sort
This example shows an interaction where a user swipes the sort region to bring a keyword search region into view. The user enters a term, runs the search, and receives four results.
List pagination example
Figure 5. Search and sort component interaction
On Device Examples
Return to Top
These examples are from Oracle Fusion Mobile Sales.
Calendar Screen shot
Figure 6. Oracle Fusion Mobile Sales calendar on iPhone
Figure 7. Oracle Fusion Mobile Sales calendar on Blackberry Bold
Here are some examples taken from Oracle Fusion Mobile Sales and Oracle Fusion Expenses.
iPhone Expenses Screen shot
Figure 8. Oracle Fusion Expenses on iPhone
Blackberry Bold Sales interactions
Figure 9. Oracle Fusion Mobile Sales interactions on Blackberry Bold
 
About Oracle | Legal Notices | Terms of Use | Your Privacy Rights