iOS Table View Design Guide
Table Views are one of the most essential elements when it comes to building iOS apps architecture. Using a Table View is the easiest way to organize a certain amount of information in lists, that can be used as a means of navigation, or to display contents such as text, images, icons, and/or controls.
These information are organized in Cells (or rows). Once a Cell is coded, that code can be reused multiple times to display different contents. In this way, the developing process can speed up significantly.
Although Table View and Collection View may look very similar for structure and purpose, they present some substantial difference that is good to know to avoid conflict between the code and design.
Collection Views can contain elements aligned both vertically and horizontally, differing from the Table View that can contain only vertical disposed Cells. Plus, the latter can’t display more than one column.
While Collection Views might look more versatile in terms of user experience, keep in mind that Table Views are easier and faster to implement for developers.
There are 3 different styles for Table Views: Plain, Grouped and Inset grouped.
Plain
Usually only one section is used in this style but the cells can be separated into labeled sections.
While scrolling, the Section Header sticks to the Navigation Bar, overlaying the Cells scrolling underneath. When reaching a new Section, the new Header replaces the old one. Apple’s Contacts app is the best example for this style.
Grouped
Cells are divided into groups and each group can have its own Header or Footer.
Inset grouped
This style is the most used for iOS13 and above but is not available for older versions. It works both with Plain and Grouped style, but Sections have a corner radius and margins on both sides. When using this style remember to pay extra attention to the content’s length, especially for localized text. The margins reduce the available space for content and might cause text wrapping.
TableView Header
Each section can have a Header preceding it, containing images and text.
The header’s height can vary.
Footer
Just like the Header, a Footer can be added after a section as a custom Cell. Differing from the Header, The footer can’t be fixed, and it can scroll behind the header.
Section Header
It is usually the title assigned to a section contained in a tableView. It is useful to display an overview of the content of the section itself and can make the interface look organized and easier to scan.
Section
As stated above, a section consists of a variable amount of Cells (minimum 1). Each cell is divided by a Separator: a horizontal line that goes from the right edge to around 14pt from the left edge of the section.
Accessory view
It is displayed on the right side of a cell and it’s meant to contain Controls. It has a set of pre-coded options ready to use:
None: no accessory view is displayed.
Checkmark: this control can be used to mark a selection (or more) in a list of different options. For instance a language in a translator app, or a currency in a currency converter app.
Disclosure Indicator: this control indicates that there’s more to disclose. Tapping on a cell that has this indicator always leads to a Detail View through push and pop navigation.
Detail button: by tapping on this button, the user can get more instructions about the content.
Detail disclosure indicator: this control brings together the Detail button and Disclosure indicator. They both keep their original function.
Disclosure Indicator and Number: the disclosure indicator can be combined with a label containing quantitative information about the Cell content.
Delete control
These Controls are displayed on the left side of a Cell. They are usually displayed only after the user accesses the edit mode and they can be used to modify the organization of a Table View, to delete Cells, or to add new ones.
The pre-coded options, ready to use without any effort from developers are:
Delete: a round red button with a minus sign in the middle. This button can be used to remove the content of a cell or the cell itself.
Add: a green round button with a white plus sign in the middle. This button can be used to add content inside of a cell or to create a new one.
Select: a grey circle. This button indicates that a cell can be selected. If the user interacts with this control, a round button with a checkmark in the middle is displayed.
Swipe
Hidden options can be displayed by swiping the cell to the right or left. Up to 3 different options can be displayed for each side. Performing a full swipe will automatically trigger the last option.
Long press
Performing a long press on a Cell will trigger a Contextual Menu. The Contextual Menu displays a preview of the view that is inside the cell that was pressed. It also displays a set of actions that will act upon the view inside this cell. The preview cannot display a Navigation or a Tool Bar. Tapping this preview will open the view.
Tap
Each cell should be highlighted when the user taps on it to give visual feedback of the interaction. The pre-coded selection styles are Grey, blue, and light grey. The latter is the standard one.
Scroll down
Scrolling down a table view can trigger an update of the content. While this happens, an activity control should be displayed to reassure the user that the app is still running.
In conclusion, Table Views are an essential element in most apps’ architecture and navigations, which allow developers to create reusable time-saving code, and designers to create cool and easy-to-use interfaces.
Although it might visually look like a very simple element, it comes with several hidden cool interactions that may go unnoticed for the not-so-digital-savvy users, but make your product really enjoyable for “power” users.
This article is part of a series about iOS architecture powered by the Air Apps Design Team.
You can download our Table View Figma Library here
Or visit our first article about Navigation Bars here.
Huge thanks to Rita Tavares who contributed to the Figma Library and Yugi Aragao who created the assets for this article 🌮
Thank you!
Carmine Acierno
UX/UI Designer at Air Apps
