UI Patterns for Displaying Collections
This catalog of UI patterns provides a comprehensive overview of different ways to display collections of items in a user interface. Each pattern has its own strengths and is suited to different types of content and user needs. The implementation choice should be based on considerations like the nature of the content being displayed, the volume of data, user interaction requirements, performance considerations and target devices and screen sizes (a more comprehensive review of these considerations is provided in section titled “Key Considerations for Each Pattern” at the bottom of the catalog).
1. List-Based Displays
1.1 Simple List
A vertical arrangement of uniform-height rows, each representing an item. Best for text-dominant content where scanning and quick comprehension are priorities.
Example: Email inbox.
1.2 Tree View
A hierarchical list showing parent-child relationships through indentation. Users can expand/collapse sections to explore nested content.
Example: File system explorer.
1.3 Infinite Scroll List
A list that automatically loads more content as the user scrolls, maintaining performance by loading only what's needed.
Example: Social media feeds
2. Grid-Based Displays
2.1 Table/Data Grid
A structured display of data in rows and columns, supporting sorting, filtering, and fixed or resizable columns. Ideal for structured data requiring comparison, and finding/locating specific records/instances.
Example: Spreadsheet view
2.2 Card Grid
A uniform grid of cards with equal spacing between items, each containing mixed content (text, images, actions) and a responsive layout for visual browsing of content.
Example: Google Drive files view
2.3 Masonry Grid
A grid layout accommodating items of varying heights, optimizing space use while maintaining a structured feel. Best for visual content of different dimensions as seen in Pinterest.
Example: Image galleries
3. Visual Displays
3.1 Carousel/Slider
A horizontally scrolling fixed-width display showing a subset of items at once, with navigation controls. Good for showcasing featured items.
Example: Product showcases
3.2 Cover Flow
A 3D rotating display emphasizing one item while showing adjacent items partially. Creates an engaging browsing experience.
Example: Album browser
3.3 Gallery View
A full-screen optimized (large image focus) display for visual content, typically with thumbnail navigation and zoom capabilities.
Example: Photo albums
4. Map-Based Displays
4.1 Geographical Map
Plots items on a map interface, using markers, clusters, or heat maps to show location-based data (e.g., dense areas).
Example: Store locators
4.2 Tree Map
A space-filling visualization where rectangles represent items, with size indicating value. Good for hierarchical data display with quantitative aspects.
Example: Disk space usage
5. Timeline Displays
5.1 Chronological Timeline
Arranges items along a time axis, either horizontally (linear) or vertically (branched), showing temporal relationships.
Example: Project milestones
5.2 Calendar View
Displays items in familiar calendar formats (day/week/month), ideal for event plotting (scheduling) and time-slot visualization.
Example: Schedule display
6. Specialized Displays
6.1 Kanban Board
Organizes items into columns representing states or categories, with drag-drop capability and status-based grouping.
Example: Task management
6.2 Network Graph
Visualizes items as nodes with connecting lines showing interactive navigable relationships. Good for relationship-heavy data.
Example: Social networks
6.3 Matrix View
Cross-tabulation display of relationships between items in a grid where intersections show connection strength (relationship intensity) or type (may use color-coded cells).
Example: Correlation matrices
7. Hybrid Displays
7.1 List-Grid Hybrid
Offers switchable views between list and grid formats with consistent data presentation that lets users choose their preferred visualization.
Example: File explorers
7.2 Card-Timeline Hybrid
Combines scrollable rich card content with chronological (time-based) organization, good for time-based stories or updates.
Example: News feeds
8. Virtual Displays
8.1 Virtual Scrolling
A performance-optimized display that renders only visible items, handling large datasets efficiently and maintaining optimal performance.
Example: Long data lists
8.2 Windowed Pagination
Breaks large collections into manageable (fixed-size) content chunks with navigation controls, maintaining performance while providing context.
Example: Search results.
Key Considerations for Each Pattern
Data Volume and Loading
Initial load performance
Progressive loading strategy
Cache management
Memory usage
User Interaction
Selection mechanisms
Sorting capabilities
Filter controls
Search functionality
Responsive Design
Mobile adaptation
Screen size handling
Touch interaction
Accessibility
Visual Feedback
Loading states
Empty states
Error states
Selection indicators
Performance
Rendering efficiency
Scroll performance
Animation smoothness
Memory management