Pattern Lists are perhaps the most basic and useful way to display information on mobile handsets. Information is easy to see, easy to understand, and if well coded, easy to access. Tables, are surprisingly-closely related, and sometimes are how lists are actually made. As the degree of complexity overlaps in the middle, and with few text encoding styles compared to HTML, there are significant crossovers between Lists and Tables.
Lists and Tables are not page templates, but components that can be used for part or all of a page. Multiple list types can be used within a page, such as a definition list that provides basic information to lead into a table.
Lists and tables should be organized as needed to make sense of the information. Include dividers, sections and subtitles. Lists used exclusively for selection, whether full-page or in pop-up dialogs, are discussed as Forms.
Infinite scrolling should be used whenever practical. The OSs robustly support this sort of information retrieval, and have supporting UI technologies like Fast User Scrolling to assist in browsing long lists. Only use pagination when remote retrieval of information presents issues.
► Be sure to see the variations per OS, and specifications for each platform, listed below.
Simple Lists
Simple lists have only text, or default UI features like reveal arrows, with the OS standard divider lines. Each row is a selectable item, not just the text in the row.
Definition Lists
Two column lists are very common ways to present information. A label is in the left column and a value is in the right. These are even used for many default features, such as Settings so are generally very easy to build, and work well to provide editable information or inputs in the right column.
There is no text formatting equivalent to the bullet list or definition list as in the Web. These must be built as Lists or (more often) Tables, but will never have divider lines.
Format of lists like this varies widely. They may have colored backgrounds to tie them to other elements, transparent backgrounds when used as the header, or "greenbar" alternating colors when it may be hard to differentiate lines in practice.
Lists with Icons, Counts or Controls
Normal lists can and usually should be enhanced by adding icons to the left column. Icons help differentiate or identify items in the list.
Other items that can be loaded into the left column are text labels or counts (number of items in a group, error codes, etc.), or simple functions such as Checkboxes or other selection indicators.
Even when a Table is used to construct such a list, there are no vertical lines to denote the columns. Alignment is sufficient for users to understand each column has different information, and to scan the page to find their information.
Complex Lists
Complex lists are simply list-like displays, almost always built as tables, which have multiple attributes. The above example has attributes of an Icon List, a Text List (with extra lines) but has additional formatting to make the key element more clear and provide room for the detailed information below. When required, any List or Table can be modified slightly to meet special needs, but should reflect the general format of Cummins applications and conventional Lists or Tables.
Despite being built as tables and possibly very complex, these are designed as lists so have no vertical lines to divide columns. Entire rows are selectable by the end user, not just text labels or actionable icons.
Tabular Data
Sufficiently-complex tabular data is loaded into explicit tables. Tables have:
* ... formatting tips... * Any conventional table organization should be used, such as row- or column-spanning.
Tables often still have list-like attributes. If selectable items are provided, the entire row is generally selectable, and a selection/next icon will be used.
In cases where controls must be placed on a row, so that selecting diffferent parts of the row have different effects, use a Table, so the divider lines denote the change, and try to make functions widely spaced (such as at the extreme left and right sides.
Android
Android differentiates between lists and tables. Tables are much like HTML tables, and are relatively complex items only used when needed. Lists automatically format to include several types of information as summarized in the illustration.
The reveal icon is the standard ic_menu_forward arrow icon. In cases where selection of a row will immediately present options or a selectable menu, ic_menu_more will be used.
Lists from developer.android Table from developer.android
iOS
A Table View is the iOS answer to a list, and does not differentiate between lists and more complex table items. All lists are tables, just of varying degrees of complexity.
Table View details are not fully defined for iOS due to the changeover from iOS6 ot iOS7. Apple's internal guidelines are not yet fully updated; the above image was retrieved from developer.apple several weeks after the official release of iOS7.
About Table Views in iOS Apps from developer.apple
Variations
Groups and accordions, although shown in some examples above, will be defined later.