Table views can be found in almost every app. Essentially, table views are the name Apple calls lists with. These views present a collection of related items in a single vertical layout. Table views offer high customizability and practicality for mobile apps. Chat lists, contacts, tweets, and user preferences are some examples of table views.
Why table views?
The layout of the table view well uses small screen sizes to display data in rows. Furthermore, by providing a continuous scroll, it can hold additional data that exceeds what fits on the screen. Moreover, table views format is easy to scan following the natural reading pattern. Users are familiar with table views as they interact with them on a regular basis
Table views structure
Cells are the building blocks of table views. Each cell is a single row that can be customized to display different content and have a unique function.
Table views can be either static or dynamic. Static table views are used when the number of rows is fixed as in user preferences. Each cell is designed on its own.
Dynamic table views can be used when we have a repetitive design for cells with dynamic data, such as contacts list. A single prototype cell is designed for these tables and the same cell design is used for all the data.
iOS table views have two styles: plain and grouped. These styles are shown below.
Cells can be grouped into sections, where each section has its own header and footer. Usually, the header provides contextual data, while the footer displays additional information and details.
iOS provides accessories that can be set to each cell. These accessories include disclosure indicator, checkmark, detail, and detail disclosure.
Disclosure indicator is used when clicking a cell opens another table view in a separate screen that reveals further options. Checkmarks are used to choose an item from a list. Detail is used when you want to provide more details for the user, and detail disclosure is used when a separate screen shows these details.
It is important to keep these accessories in mind while designing your UI, as they provide useful functions with a native feel.
Customizing cells for different options
1. Open another table view
Even though you can divide table view into sections, occasionally you have an excessive number of items and your app’s hierarchy has additional levels. Clicking a cell can open another table view that shows the next level options.
A little disclosure indicator shows that another screen will be opened by clicking on this cell. Users are familiar with this design and it’s simple and painless to implement.
2. Choose item from a list
Table views are a good option to display a list of options and allow the user to choose from. A checkmark will distinguish the selected option. This design shows all the options available and minimizes the number of taps. If you have a large list of options use a separate table view for these options.
3. Enable and disable items with switches
If you want the user to enable or disable an option or a feature, use switches. They are native and often implemented in table views. You can also use a switch to enable/disable associated options.
4. Implement a date/time picker
The date/time picker is often used in a table view. Usually, the cell shows the selected date and when clicked it expands the hidden cell below revealing the date/time picker. After the user selects a date/time, the cell containing the picker is collapsed and hidden, while the main cell shows the date/time chosen.
5. Ask for text input
Usually, two solutions are implemented for text input. The first is to open a dialog asking for input when the user clicks on a cell. A better alternative is to place a text field directly inside the cell.
6. Other customizations
Options are unlimited when it comes to customization of table views. You can add your custom views and use them in any way that is appropriate for your app. Explore how other apps make advantage of table views and implement what suits you. Remember to keep it simple and effortless for the user.