Lists and tables

Use lists and tables to display items that users can highlight and open. If the list is long, items are fetched and displayed in batches. When users reach the last item in the list, the next batch of items displays at the end of the list.

Use a simple list to easily display text in rows.


This screen shows a simple list.

Use a rich list to easily display rows of text and icons. If you want to present items in columns and rows, use a table.


This screen shows a rich list.

You can group items under headers to help users navigate through long lists. For example, you can create headers that collapse, making it easier for users to find items in the list. You can group items under headers that always appear at the top of the list. For example, you can add a date as a header and group messages received on that date under the header. Users can highlight a header to perform an action on the group of items or they can use shortcut keys to move through the list.


This screen shows a list with a header that always appears at the top of the list.

Users can perform the following actions in lists and tables:

User goal

Action using the navigation keys

Action using a touch screen

Action using a physical keyboard

Scroll through items in the list.

Move a finger vertically on the trackpad.

  • Drag a finger vertically on the screen.
  • Swipe up or down on the screen.

Highlight an item in the list.

Move a finger vertically on the trackpad.

Touch the item lightly.

Open an item in the list.

Click the trackpad.

Tap the item.

Press the Enter key.

Best practice: Implementing lists and tables

  • If the list is long and you want to display the items on separate screens, include Next and Previous buttons at the bottom of the screen. Alternatively, if the list is very long (for example, thousands of items), provide screen numbers instead.
  • If you expect users to move through the items in the list (for example, in a message list or a feed), assign shortcut keys for moving to the next or previous item in the list. Where possible, in English, allow users to press "N" to move to the next item in the list and "P" to move to the previous item in the list.


Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus