UX Patterns Guide
Back to compare picker

Map view vs List view vs Calendar view vs Table

Choose Map view when users need to understand where places, assets, events, incidents, or service areas are relative to each other, to the user, or to a viewport boundary.

Map view live exampleList view live exampleCalendar view live exampleTable live example

Decision dimensions

Dimension Map viewList viewCalendar viewTable
UI or UX UI + UX - Spatial viewport for location-based objects, layers, and routesUI + UX - Vertical object-summary browsing surfaceUI + UX - Date and time grid for scheduled events, availability, and conflictsUI + UX - Semantic row-and-column data comparison surface
UI guidance Render a real spatial viewport with visible map region, zoom state, scale or distance context, markers or shapes anchored to coordinates, selected-place detail, cluster counts, visible layer/filter controls, and a fallback list or table for the same results.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.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 table with a specific caption or heading, visible column headers, optional row headers, aligned values, consistent row actions, and enough spacing for scanability.
UX guidance Use Map view when the user's decision depends on where objects are, how far apart they are, what falls inside the current area, which route or coverage applies, or how dense nearby points are.Use list view when scanning and opening object summaries is faster than comparing columns or inspecting large visual cards.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 tables when aligned columns help users compare records, find exceptions, audit values, or triage work faster than opening each item.
Good UI A clinic finder map shows visible bounds, zoom level, selected clinic marker, appointment availability markers, a transit layer toggle, cluster counts, distance chips, and a synchronized results list.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.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 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.
Bad UI A decorative map background contains unlabeled pins with no coordinate meaning, no current region, no selected marker, no legend, and no list fallback.A list row shows columns of owner, amount, due date, and status but no headers or column sort state.A decorative month grid contains colored dots with no event titles, no timezone, no overflow count, and no selected-day detail.A div layout looks like columns but has no caption, table semantics, or header associations.
Good UX A dispatcher pans to the west district, the result count and list update to the current bounds, a cluster expands at closer zoom, and the selected incident popup remains tied to the marker.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.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 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.
Bad UX A user filters to open locations but the map markers update while the list still shows closed locations, causing the wrong branch to be selected.A user selects rows, changes sort order, and the bulk action count still includes hidden rows without saying which rows are affected.A user taps +3 more in a crowded date cell but the calendar navigates away instead of showing the hidden events for that day.Filtering the table removes selected rows without explaining why or offering a clear-filter path.
Best fit Users choose or inspect objects by where they are, how near they are, or what area they fall inside.Users need to scan and act on a collection of objects using compact summaries.Users need to scan or manage scheduled events across dates, days, weeks, months, or resources.Records share comparable attributes that users need to scan in aligned columns.
Avoid when Location is only a label or decorative backdrop.Users need to compare many records across shared attributes.Users only need to select one date for a form field.The content is layout, not data.
Required state Default map state with visible viewport, zoom level or distance context, markers, layer state, result count, and synchronized fallback list.Default list state with label or heading, row count or context, visible row summaries, and primary row identity.Default calendar state with visible range, view mode, timezone, today marker, selected date, and event count.Default table state with caption, visible headers, row values, and result count or context.
Accessibility burden Expose the map name, current area, result count, active filters, layers, selected place, and location permission state as text.Use semantic list markup for ordinary object lists; use listbox only when rows are options in a single control.Expose date navigation, mode switch, visible range, selected date, today, timezone, and event count as text.Use native table semantics for tabular data rather than div-only rows.
Common misuse Using a map as decoration when the positions do not affect the task.Using list view as a table without column headers or column-state feedback.Using calendar view as a decorative month card for unscheduled content.Using table markup to create page columns or layout spacing.

Map view

UI or UX
UI + UX - Spatial viewport for location-based objects, layers, and routes
UI guidance
Render a real spatial viewport with visible map region, zoom state, scale or distance context, markers or shapes anchored to coordinates, selected-place detail, cluster counts, visible layer/filter controls, and a fallback list or table for the same results.
UX guidance
Use Map view when the user's decision depends on where objects are, how far apart they are, what falls inside the current area, which route or coverage applies, or how dense nearby points are.
Good UI
A clinic finder map shows visible bounds, zoom level, selected clinic marker, appointment availability markers, a transit layer toggle, cluster counts, distance chips, and a synchronized results list.
Bad UI
A decorative map background contains unlabeled pins with no coordinate meaning, no current region, no selected marker, no legend, and no list fallback.
Good UX
A dispatcher pans to the west district, the result count and list update to the current bounds, a cluster expands at closer zoom, and the selected incident popup remains tied to the marker.
Bad UX
A user filters to open locations but the map markers update while the list still shows closed locations, causing the wrong branch to be selected.
Best fit
Users choose or inspect objects by where they are, how near they are, or what area they fall inside.
Avoid when
Location is only a label or decorative backdrop.
Required state
Default map state with visible viewport, zoom level or distance context, markers, layer state, result count, and synchronized fallback list.
Accessibility burden
Expose the map name, current area, result count, active filters, layers, selected place, and location permission state as text.
Common misuse
Using a map as decoration when the positions do not affect the task.

List view

UI or UX
UI + UX - Vertical object-summary browsing surface
UI guidance
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 list view when scanning and opening object summaries is faster than comparing columns or inspecting large visual cards.
Good UI
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
A list row shows columns of owner, amount, due date, and status but no headers or column sort state.
Good UX
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 selects rows, changes sort order, and the bulk action count still includes hidden rows without saying which rows are affected.
Best fit
Users need to scan and act on a collection of objects using compact summaries.
Avoid when
Users need to compare many records across shared attributes.
Required state
Default list state with label or heading, row count or context, visible row summaries, and primary row identity.
Accessibility burden
Use semantic list markup for ordinary object lists; use listbox only when rows are options in a single control.
Common misuse
Using list view as a table without column headers or column-state feedback.

Calendar view

UI or UX
UI + UX - Date and time grid for scheduled events, availability, and conflicts
UI guidance
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.
UX guidance
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.
Good UI
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.
Bad UI
A decorative month grid contains colored dots with no event titles, no timezone, no overflow count, and no selected-day detail.
Good UX
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.
Bad UX
A user taps +3 more in a crowded date cell but the calendar navigates away instead of showing the hidden events for that day.
Best fit
Users need to scan or manage scheduled events across dates, days, weeks, months, or resources.
Avoid when
Users only need to select one date for a form field.
Required state
Default calendar state with visible range, view mode, timezone, today marker, selected date, and event count.
Accessibility burden
Expose date navigation, mode switch, visible range, selected date, today, timezone, and event count as text.
Common misuse
Using calendar view as a decorative month card for unscheduled content.

Table

UI or UX
UI + UX - Semantic row-and-column data comparison surface
UI guidance
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.
UX guidance
Use tables when aligned columns help users compare records, find exceptions, audit values, or triage work faster than opening each item.
Good UI
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.
Bad UI
A div layout looks like columns but has no caption, table semantics, or header associations.
Good UX
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.
Bad UX
Filtering the table removes selected rows without explaining why or offering a clear-filter path.
Best fit
Records share comparable attributes that users need to scan in aligned columns.
Avoid when
The content is layout, not data.
Required state
Default table state with caption, visible headers, row values, and result count or context.
Accessibility burden
Use native table semantics for tabular data rather than div-only rows.
Common misuse
Using table markup to create page columns or layout spacing.
Decision rules
  • Choose Map view when users need to understand where places, assets, events, incidents, or service areas are relative to each other, to the user, or to a viewport boundary.
  • Choose list view when users mainly scan object summaries and location can be a secondary field or sort key.
  • Choose calendar view when date, duration, overlap, availability, or recurrence is the primary organizing axis.
  • Choose table when users need aligned field comparison, bulk review, export, or precise record values more than spatial position.
  • A Map view should expose map region, zoom, selected marker, clustered count, layer/filter state, location permission state, and a list or table fallback before users rely on it for decisions.
  • Cluster markers when density hides individual points, but provide a way to expand, zoom, or inspect the cluster contents without losing context.
  • Use a marker popup or side detail only when it preserves the selected place, distance or route context, and keyboard path back to the map or fallback list.
  • Use explicit legends and layer controls when color, shape, heat, route, or coverage overlays change the meaning of map objects.
  • Do not use Map view for arbitrary decorative pin boards, unsorted address lists, or analytics charts where geographic position does not change the decision.
  • When geolocation is optional or denied, keep the map usable with manual search, selected area, saved address, or list fallback rather than blocking the task.
Inspect live examples
Map viewList viewCalendar viewTable
Failure modes
  • Markers overlap without clustering or density disclosure, hiding available locations.
  • A popup opens offscreen or steals focus without a clear return path to the selected marker.
  • Layer color, route line, radius, or heat shading has no legend, so users cannot interpret the map.
  • Location permission denial blocks the entire workflow even though a typed location or fallback list would work.
  • Map filtering changes the visible markers but the result count and fallback list do not update.
  • Distances, routes, or service areas are shown as decoration without units, origin, travel mode, or stale-data indication.