| UI or UX | UI + UX - Workflow-state board for cards moving through columns | UI + UX - Semantic row-and-column data comparison surface | UI + UX - Date and time grid for scheduled events, availability, and conflicts | UI + UX - Vertical object-summary browsing surface |
| UI guidance | Render workflow columns with visible names, status mapping, card counts, WIP limits, overloaded states, empty columns, and cards that show title, owner, priority, age, due date, blocked state, and enough metadata to understand the work. | Render a table with a specific caption or heading, visible column headers, optional row headers, aligned values, consistent row actions, and enough spacing for scanability. | Render a calendar view around a visible date range, mode switcher, today marker, weekday or time-axis labels, timezone, selected date, and event blocks with start, end, title, status, and all-day or timed placement. | Render a labelled vertical list where each row has a strong primary label, concise supporting text, metadata, status, optional leading media, and row-scoped actions with clear hit targets. |
| UX guidance | Use Kanban board when teams pull work through a shared workflow and need to see WIP pressure, bottlenecks, blocked items, stale cards, and status changes at a glance. | Use tables when aligned columns help users compare records, find exceptions, audit values, or triage work faster than opening each item. | Use calendar view when users need to understand or manage scheduled items by their position in time: date, weekday, duration, overlap, availability, recurrence, or resource assignment. | Use list view when scanning and opening object summaries is faster than comparing columns or inspecting large visual cards. |
| Good UI | A product board shows Backlog, Ready, In progress, Review, and Done columns with card counts, WIP limits, blocked badges, owners, due dates, and visible over-limit styling in Review. | A payment review table has the caption June vendor payments, headers Vendor, Status, Due date, Amount, and Action, right-aligned amounts, and row actions labelled by vendor. | A clinic schedule shows June 2026 week view, today marker, timezone, business hours, all-day staff training, timed appointments, room labels, overlap warning, and a More link for crowded days. | A ticket list row shows TCK-2048 Database backup failed, a one-line incident summary, Critical status, owner, updated time, selected state, and a labelled More actions menu. |
| Bad UI | WIP overload is hidden or only color-coded. | Mobile stacking removes headers and turns rows into unlabeled paragraphs. | Calendar navigation resets filters, selected calendars, selected date, or opened event unexpectedly. | Every row has five unlabeled icon buttons, and the whole row also navigates. |
| Good UX | A developer moves a card from In progress to Review, sees the status update, receives an over-limit warning, and can undo or help clear the bottleneck instead of pulling more work. | A user sorts by Amount descending, filters to Pending, moves to page 2, and the table keeps its caption, active sort, active filter, row count, and selected payment context. | A dispatcher switches from month to week, opens Wednesday, sees three overlapping room bookings, chooses an available slot, and receives conflict-aware feedback before saving. | A user filters tickets to Critical, selects two rows, opens the details panel for one ticket, then clears the filter and the selected count and active ticket remain understandable. |
| Bad UX | A user drags a card to Done but the underlying status remains In progress, so reports and automations disagree with the board. | Mobile stacking removes headers and turns rows into unlabeled paragraphs. | A user taps +3 more in a crowded date cell but the calendar navigates away instead of showing the hidden events for that day. | A user tries to preview a file but the row click opens navigation while the small trailing icon deletes the file. |
| Best fit | Work progresses through visible stages and the team uses the board to decide what to pull next. | Records share comparable attributes that users need to scan in aligned columns. | Users need to scan or manage scheduled events across dates, days, weeks, months, or resources. | Users need to scan and act on a collection of objects using compact summaries. |
| Avoid when | Users primarily compare records by fields or edit cell-like data. | The task depends on rich previews, imagery, or uneven metadata. | Users only need to select one date for a form field. | Users need to compare many records across shared attributes. |
| Required state | Default board state with columns, card counts, WIP limits, visible filters, selected board, and at least one card per active workflow stage. | Default table state with caption, visible headers, row values, and result count or context. | Default calendar state with visible range, view mode, timezone, today marker, selected date, and event count. | Default list state with label or heading, row count or context, visible row summaries, and primary row identity. |
| Accessibility burden | Expose board name, active filters, sorting, grouping, column count, column names, card counts, and WIP limits as text. | Use native table semantics for tabular data rather than div-only rows. | Expose date navigation, mode switch, visible range, selected date, today, timezone, and event count as text. | Use semantic list markup for ordinary object lists; use listbox only when rows are options in a single control. |
| Common misuse | Using Kanban columns as decorative categories rather than workflow states. | Using table markup to create page columns or layout spacing. | Using calendar view as a decorative month card for unscheduled content. | Putting too many independent controls in every row until the list becomes a keyboard trap. |