For iOS and Web2App onboarding processes, tailoring the list positions in table settings is crucial for an optimal user experience. This guide delves into the nuances of the 'List Position' option across various table types and their impact on the user interface.
Accessing Table Customization:
Screen Added on flow
Click on the screen you've added to the onboarding flow.
Press the Pencil button to enter the "Edit Screen" mode.
Customizing a Specific Screen in the Theme:
Customizing a Specific Screen in the Theme:
For New Onboarding: After selecting a theme, customize the screen by clicking on the Edit button.
For Existing Onboarding: Click on the Settings icon in the upper right corner of the onboarding flow.
Then edit the screen for the entire theme.
Table Types and Customization Options
Table Multiple Selection and Table Single Selection:
Offers vertical alignment and maximum cell height options.
2-Column Single/Multiple Selection, Image Title Subtitle Selection/List:
Limited to vertical alignment options.
Vertical Alignment: Enhancing Content Placement
Vertical alignment is an essential feature that dictates how the table content is situated within the screen area, taking into account elements like the header and footer.
It's applicable for both Web2App and iOS platforms.
Default Setting: The default OFF setting centers content between the header and footer.
Custom Settings: Enabling this option allows for top, center, or bottom alignment.
Alignment Types for Different Tables
Table Multiple/Single Selection:
Center/Off: Centers all elements between header and footer.
Removal of either header or footer centers content between the screen border and the remaining element.
Top: Aligns content towards the top. Removing the header shifts content to the top border with an indent.
Bottom: Shifts content towards the bottom. Without a footer, content moves to the bottom border with an indent.
Handling Multiple Selections: Titles and subtitles are positioned at the top; the table becomes scrollable. Vertical alignment's significance reduces as layout adjusts for scrolling.
2-Column Multiple/Single Selection:
Similar alignment settings as the regular table multiple/single selection, with the primary focus on vertical alignment.
Image Title Subtitle List/Selection:
Center/Off: Centers subtitle and table content between the image with title and footer.
Top: Positions subtitle and table content close to the image with title.
Bottom: Place subtitle and table content near the footer buttons.
Handling Multiple Selections: In scenarios with multiple items, the subtitle and table are positioned close to the image, becoming scrollable to fit various items. Vertical alignment becomes less critical as the list adjusts for scrolling.
Image Title Subtitle List
This screen type combines an image with a title, followed by a subtitle and list. Customizing its list position involves adjusting the vertical alignment of the subtitle and list content about the image with the title and the footer.
Center/Off: The subtitle and list content are centered between the image with the title and the footer.
Top: Positions the subtitle and list content closer to the image and title.
Bottom: Align the subtitle and list content closer to the footer buttons.
In cases of multiple items in the list, the subtitle and list content adjust to be closer to the image, maintaining a standard indent. The list becomes scrollable, accommodating multiple variations. Vertical alignment's role diminishes as the list layout adapts for scrolling.
Title Subtitle Selection
This screen type primarily focuses on the Image, followed by a title, subtitle, and selection list (like table multiple selection but with additional image).
Center/Off: Center the title, subtitle, and table content between the image of the screen and the footer
Top: Moves the title, subtitle, and table content closer to the image having s standard indent.
Bottom: Align the title, subtitle, and table content near the footer buttons with a standard indent.
Similar to the Image Title Subtitle List, handling multiple items in the selection list results in the content being positioned closer to the image, with the list becoming scrollable. This ensures that all options are accessible to the user, regardless of the number of items.
Max Cell Height customization
In the customization of onboarding screens, particularly for iOS and Web2App platforms, the 'Max Cell Height' setting plays a crucial role in determining the appearance and user experience of tables in single and multiple selection screens. This setting helps to standardize the height of the cells in a table, ensuring consistency and visual balance.
Default Setting: Off/False
When the Max Cell Height option is disabled (or set to 'false'), each cell in the table adapts its height according to the amount of text it contains. This means cells can have varying heights based on the text length and content.
This default setting allows for flexibility but might lead to a non-uniform look if the text length varies significantly between items.
Activating Max Cell Height: True
Enabling the Max Cell Height option (setting it to 'true') changes the behavior of the table cells. Instead of varying in height, each cell adjusts to match the height of the tallest cell in the list.
It is particularly useful when one item in the list contains substantially more text than the others, drawing more attention (a primary effect). By setting a uniform height, you ensure that no single item disproportionately dominates the visual space, maintaining balance and focus across all options.
Example Scenario:
Suppose you have a table with four items, where one item includes a significantly longer description than the others. By default, this item's cell will be taller, potentially drawing more attention. However, if you enable the Max Cell Height and set it to 'true', all cells in the table, including the one with more text, will have the same height. This equalizes the visual impact of each item, ensuring a cohesive and balanced presentation.