Lists & Tables

List views organize information in a scrollable format that makes text easy to scan and read. Their row-based layout creates a natural rhythm that helps users process even large amounts of information without feeling overwhelmed.

Key guidelines from Apple HIG:

• Text optimization: Keeps row content brief to avoid truncation and wrapping — longer content belongs in detail views
• Row styles: Matches built-in styles to content needs (images, labels, or both)
• Control placement: Uses info buttons only for revealing details, not for navigation
• Navigation patterns: Adds disclosure indicators (>) when rows lead to subviews
• Content hierarchy: Shows most relevant items first, with options to view more
• Length management: Balances comprehensive content with easy scanning^[1]

Tables show complex data in columns that users can sort and scan. While lists show one type of information per row, tables help users compare different aspects of items side by side, making it easy to spot patterns and relationships in data.

Key guidelines from Apple HIG:

• Column headers: Makes each column's purpose clear and enables sorting
• Content rules: Aligns different data types consistently — text starts from left, numbers align right
• Column order: Puts most important information in leftmost columns
• Size flexibility: Sets minimum column widths that keep text readable when resizing
• Scroll behavior: Supports both up-down and side-to-side scrolling for large datasets
• Fixed headers: Keeps column titles visible when scrolling through a long table

Every list or table row must organize content in a way that helps users quickly scan and understand the information. Whether it's a simple text label or a complex arrangement of images, text, and controls, row content follows specific patterns that maintain clarity and consistency.

Key guidelines from Apple HIG:

• Content hierarchy: Places primary information at the start, supporting details follow
• Image sizing: Maintains consistent dimensions for icons and thumbnails across rows
• Text balance: Uses prominent text for main content, lighter weight for secondary details
• White space: Adds breathing room between elements without creating gaps
• Action placement: Positions common actions at the trailing edge of rows
• Vertical rhythm: Keeps consistent spacing between elements across all rows

Collection views display items in flexible, grid-based layouts that adapt to different screen sizes and orientations. Unlike the rigid structure of lists and tables, collections work best for visual content like photos, app icons, or product cards where users benefit from seeing multiple items at once.

Core requirements for collections:

• Grid structure: Arranges items in consistent rows and columns with equal spacing
• Cell sizing: Maintains proportional dimensions as layouts adapt to different screens
• Layout flow: Orders content logically for left-to-right readers (left-to-right, top-to-bottom)
• Content types: Ideal for image-heavy interfaces, visual browsing, and side-by-side comparison
• Scroll behavior: Maintains smooth performance with large numbers of items
• Dynamic updates: Animates changes when items are added, removed, or reordered

In lists and tables, different data types require specific presentation styles to stay readable and meaningful. Text, numbers, dates, images, and status indicators each need consistent formatting that helps users quickly understand the information they're seeing.

Design requirements for data styles:

• Text content: Left-aligned with consistent line height and optional truncation
• Numerical data: Right-aligned with matching decimal places and proper grouping
• Dates and times: Adapts to user's region — showing as 12/31/23 in the US, 31/12/23 in Europe, or 2023年12月31日 in Japan
• Status values: Shows states like "active/inactive" or "in progress/completed" with consistent system colors and SF Symbols
• Mixed content: Maintains clear hierarchy when combining different data types
• Empty states: Shows meaningful placeholders when data is absent

Lists and tables must respond clearly to every user action. Each interaction, from a simple tap to more complex gestures, needs immediate visual feedback that helps users understand what's happening and what they can do next.

Design principles for interactions:

• Touch feedback: Highlights rows or cells briefly when tapped, using system-default gray
• Selection states: Changes background color and adds checkmarks for selected items
• Swipe actions: Reveals contextual actions with smooth animations and clear hit areas
• Scroll indicators: Shows and hides scrollbars automatically while scrolling
• Loading states: Reduces row opacity and shows a spinner when refreshing content or loading more items
• Error states: Presents clear visual cues when actions fail or content can't load

Lists and tables can operate in different modes — from simple viewing to complex selection and editing. Each mode needs specific interface elements and behaviors that help users understand their current context and available actions.

Design principles for modes:

• Edit mode: Reveals control buttons in the navigation bar, shows reorder handles when needed
• Organize mode: Enables drag and drop between sections or lists
• Batch editing: Groups actions that can affect multiple items at once
• Reordering: Shows grab handles and live preview when items can be rearranged
• Delete mode: Uses red delete buttons with clear confirmation steps
• Mode switching: Provides clear transitions between different modes

Lists and tables often need to handle dynamic content, whether loading initial data, updating existing items, or adding new ones. The interface must stay responsive and informative as content changes, helping users understand when and how updates occur.

Core guidelines for content updates:

• Initial state: Shows placeholder content or skeleton screens while data loads
• Refresh behavior: Pulls to refresh at the top, infinite scroll at the bottom
• Update signals: Animates changes smoothly when content updates or reorders
• Load batching: Brings in new content in chunks to maintain performance
• Error handling: Shows clear feedback when content fails to load
• Progress indication: Uses activity indicators for longer operations

In lists and tables, search helps users quickly find specific content within large data sets. Good search integration combines immediate results, clear visual feedback, and helpful suggestions to create an efficient finding experience.

Core guidelines for search:

• Search placement: Positions search bar prominently at the top of scrolling content
• Results display: Filters and highlights matching items in the list as each character is typed
• Empty states: Shows helpful suggestions when no results match
• Recent searches: Displays previous searches before users start typing
• Keyboard behavior: Shows search keyboard with appropriate return key action

Lists and tables must be fully accessible to all users, regardless of how they interact with their devices. Proper accessibility implementation ensures content is clear and navigable whether using VoiceOver, Switch Control, or other assistive technologies.

Core requirements for accessibility:

• Row labels: Provides clear spoken descriptions of each row's content and purpose
• Navigation order: Creates logical focus order when moving through items
• Action hints: Announces available actions like "double tap to open" or "swipe for more"
• State changes: Communicates updates when content is filtered, sorted, or modified
• Custom actions: Makes swipe and context menu actions available through VoiceOver
• Dynamic content: Announces new items when content updates automatically