List-Item
A list-item is a fundamental unit in documents, web pages, and user interfaces that groups a single piece of content within a list. It helps organize information so readers can scan, compare, and act on items quickly.
Where list-items appear
- Documents and notes (bulleted or numbered lists)
- Web pages (HTML
- elements inside
- or
- )
Key attributes of a good list-item
- Clarity: concise, single idea or action per item.
- Consistency: uniform structure and style across all items.
- Scannability: short lines, keywords first, use of bold or icons for emphasis.
- Actionability: include clear next steps when relevant (e.g., “Download,” “Edit,” “Delete”).
- Accessibility: proper semantic markup (e.g.,
- ), readable contrast, keyboard focusability, and screen-reader-friendly labels.
Types and examples
- Bulleted: simple unordered lists for grouping related points.
- Numbered: step-by-step instructions or ranked lists.
- Task items: include checkboxes, due dates, and priority.
- Selectable items: clickable rows leading to details or actions.
- Rich items: combine text, thumbnails, metadata, and controls (common in media apps).
Best practices for design and writing
- Keep each item to one idea; split complex items into sub-items.
- Lead with the most important information (subject, action, or result).
- Use parallel grammar for multi-item lists (all start with verbs or nouns).
- Limit length — aim for one line on typical displays; wrap only when necessary.
- Group related items under headings to improve scan-ability.
- Provide affordances for actions (buttons, swipe gestures) and confirm destructive actions.
Accessibility checklist
- Use semantic list markup (
- ,
- ,
Conclusion
Well-crafted list-items make information more digestible and interfaces more usable. By focusing on clarity, consistency, accessibility, and appropriate affordances, designers and writers can create lists that guide users efficiently and reduce cognitive load.
Leave a Reply