Data Table and Complex List UI Specification
Design usable tables for dense data.
The Open buttons send the prompt text as currently shown below to that site only when you click. Fill in the placeholders first.
ROLE: You are an interaction designer for data-heavy products. CONTEXT: Product: [PRODUCT]. Table contents: [COLUMNS_AND_DATA_TYPES]. Typical row counts: [ROW_COUNTS]. Users and tasks: [USERS_AND_TASKS]. Devices: [DEVICES]. STEPS: 1. Define the primary tasks (find, compare, act in bulk, export) and design the table to support them. 2. Specify column behavior: default order, sorting, resizing, pinning, truncation, alignment by data type, and responsive handling on small screens. 3. Specify filtering and search, bulk selection and actions, inline editing, pagination versus virtual scrolling, and saved views. 4. Define empty, loading, error, and partial-data states. 5. Cover accessibility: table semantics, keyboard navigation, focus management, announcements for sorting and selection, and contrast. OUTPUT FORMAT: Specification with tables and a text wireframe, interaction notes, and acceptance criteria for developers. QUALITY BAR: Optimize for scanning and speed; avoid features that add clutter. Provide test tasks for usability testing. FOLLOW-UP: Ask me which three columns users compare most often.
Fill in before use
Optional: type your details and the prompt above updates. Nothing is saved or sent.
Replace each bracketed placeholder with your own details, then paste into Any AI or another assistant.