List
A list is a structured way of displaying multiple items, entries, or data points in a vertical arrangement. Lists can be as simple as plain text items or more advanced, including interactive elements like checkboxes, icons, or action buttons. They help users scan and compare items quickly, identify patterns, or make selections.
Usage
Grouping Related Items: Whether they’re tasks, products, or messages, items with similar traits or contexts often benefit from being displayed in a list.
Sequential/Ordered Presentation: Lists work well for content that follows a certain order (e.g., alphabetical, chronological).
Scanning & Reading: Vertical spacing and consistent formatting allow users to skim through items quickly.
Interactive Lists: Some lists include actions (e.g., “mark as completed,” “delete,” “edit”), requiring a clear pattern to handle user interactions.
Use cases
A list of tasks or to-dos
A list of products in an e-commerce app
Navigation menus (text or icon-based)
Chat messages or notifications
Not to be confused with
Table: Tables are used for more complex, tabular data where columns and rows are essential. Lists can display simpler or more flexible data, often in a single column.
Menu / Dropdown: While menus may look like simple lists, they usually appear in a controlled context (e.g., on click) for navigation or actions. A list is often displayed directly on a page or section.
Card Layout: Cards represent individual items in a visually distinct container. A list might be more straightforward, focusing on text or lightweight item layouts.
Best practices
Consistent Formatting
Keep each list item’s layout consistent (e.g., title font size, icon alignment, spacing).
This helps users quickly recognize patterns and locate information.
Use Proper Hierarchy
If list items have multiple levels of detail, consider adding subtitles or descriptions.
Highlight the most important information (e.g., item title or status) to guide scanning.
Interactive Elements
For lists with actions (like checkboxes, delete buttons), group actions in a consistent area (e.g., right-aligned) so users know where to find them.
Use clear affordances (like icons or text labels) to indicate clickable elements.
Visual Separation
Use spacing, dividers, or alternating backgrounds to distinguish individual items.
If a list is very long, introduce headers or grouping to break it into subsections.
Scrolling & Performance
In long or dynamically loaded lists, consider techniques like infinite scrolling or pagination.
Ensure performance remains smooth if the list updates frequently (e.g., real-time data).
Accessibility
Use semantic HTML tags (<ul>, <li>, <ol>) or appropriate ARIA roles if you need more specialized layouts.
Ensure keyboard navigation (Tab, arrow keys) functions correctly if items are interactive.
Provide sufficient text contrast and spacing to aid readability.
Responsive Design
On smaller screens, list items may need to stack elements differently (e.g., labels above content).
Maintain touch-friendly spacing around interactive elements to reduce accidental taps.
Empty & Loading States
Clearly indicate when a list is loading or contains no items (e.g., “No items found” or a skeleton loader).
Provide guidance (like an “Add new item” button) when no results exist.
Consider the nature of your data—if each item has multiple attributes or actions, you might opt for more structured “list items” with distinct sections (e.g., an avatar, title, description, and action buttons).
Summary
A list is a flexible layout tool for displaying multiple items in a structured, scannable way. By using clear formatting, consistent item structure, and thoughtful interactive elements, lists can handle everything from simple text entries to complex data displays. Proper attention to spacing, accessibility, and responsiveness ensures a cohesive user experience, allowing users to quickly find, compare, and act on the items they need.
