UX Patterns Guide
Back to compare picker

Map view vs List view vs Calendar view vs Table

Use Map view when location, distance, route, coverage, and spatial clustering drive the task; use list, calendar, or table when spatial placement is secondary.

Map view live exampleList view live exampleCalendar view live exampleTable live example
Learn the decision

Match the interaction to the person's task

Use Map view when location, distance, route, coverage, and spatial clustering drive the task; use list, calendar, or table when spatial placement is secondary.

Map view

Use it when: Users choose or inspect objects by where they are, how near they are, or what area they fall inside.

Make this state clear: Default map state with visible viewport, zoom level or distance context, markers, layer state, result count, and synchronized fallback list.

Observe the result: 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.

Study the full pattern →

List view

Use it when: Users need to scan and act on a collection of objects using compact summaries.

Make this state clear: Default list state with label or heading, row count or context, visible row summaries, and primary row identity.

Observe the result: 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.

Study the full pattern →

Calendar view

Use it when: Users need to scan or manage scheduled events across dates, days, weeks, months, or resources.

Make this state clear: Default calendar state with visible range, view mode, timezone, today marker, selected date, and event count.

Observe the result: 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.

Study the full pattern →

Table

Use it when: Records share comparable attributes that users need to scan in aligned columns.

Make this state clear: Default table state with caption, visible headers, row values, and result count or context.

Observe the result: 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.

Study the full pattern →

Practice the judgment: Imagine this situation: Location permission denial blocks the entire workflow even though a typed location or fallback list would work. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.

Review the underlying principle →

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 The selected popup is detached from the marker or opens outside the viewport.Every row has five unlabeled icon buttons, and the whole row also navigates.Calendar navigation resets filters, selected calendars, selected date, or opened event unexpectedly.Mobile stacking removes headers and turns rows into unlabeled paragraphs.
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 tries to preview a file but the row click opens navigation while the small trailing icon deletes the file.A user taps +3 more in a crowded date cell but the calendar navigates away instead of showing the hidden events for that day.Mobile stacking removes headers and turns rows into unlabeled paragraphs.
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 task depends on rich previews, imagery, or uneven metadata.
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 Treating geolocation denial as a dead end.Putting too many independent controls in every row until the list becomes a keyboard trap.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
The selected popup is detached from the marker or opens outside the viewport.
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
Treating geolocation denial as a dead end.

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
Every row has five unlabeled icon buttons, and the whole row also navigates.
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 tries to preview a file but the row click opens navigation while the small trailing icon deletes the file.
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
Putting too many independent controls in every row until the list becomes a keyboard trap.

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
Calendar navigation resets filters, selected calendars, selected date, or opened event unexpectedly.
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
Mobile stacking removes headers and turns rows into unlabeled paragraphs.
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
Mobile stacking removes headers and turns rows into unlabeled paragraphs.
Best fit
Records share comparable attributes that users need to scan in aligned columns.
Avoid when
The task depends on rich previews, imagery, or uneven metadata.
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.

Saved items