Choosing layouts for list pages and detail pages

It's all "a bunch of data," but which layout it goes in depends on what the content looks like and what users need to do with it. Answer three questions first: How many fields does each item have? Do items need to be compared? Do people pick by text or by images?

List pages: pick the layout by content

• Data Table: items with the same structure, four or more fields each, that need sorting, filtering, and column-by-column comparison. Admin pages for orders, users, and products are almost always this, with a Filter Bar on top.
• List View: each item has only two or three fields, and users scan, spot what they want, and click in. For example, messages and notifications.
• Card Grid: each item has a cover image and three to five fields, and people pick by browsing. For example, products, courses, and templates.
• Masonry Layout: mostly images with different aspect ratios that you don't want to crop. Good for casual browsing.
• Gallery: almost nothing but images, where people want to see lots at once and click to view them large.
• Feed: each item is complete content you can read right there and like or comment on. For example, social posts.
• Kanban Board: each task is in some status and moves between a few statuses, like To do, In progress, and Done.
• Timeline: records of one thing happening over time, like approval history or package tracking.

The common mistakes are exactly the opposite: hundreds of records that need comparing turned into big cards, or image-first products squeezed into a table.

With lots of data, admin pages use Pagination, which makes it easy to find things and come back to them. Content people browse continuously, like posts and images, works better with Infinite Scroll. When a list is empty, show an Empty State that explains why and offers a next step.

Detail pages: pick by how people view them

• Description List: shows the properties of one record as "label + value" pairs. With lots of fields, group them by what they mean for the business.
• Tabs: the details split into a few equal-level blocks, like basic info, activity, and logs, which users switch between as needed.
• Drawer: slides in from the side over the list page. Close it when you're done, and the list is still where you left it.
• Master-Detail Layout: users handle records one after another, with the list on the left and the details on the right, switching in place without changing pages.

How to describe it to AI

Use a data table for the order list with these columns: order number, customer, amount (right-aligned, 2 decimal places), status (as tags), order time, actions. Put a filter bar above it and pagination below. Clicking an order number opens a drawer from the right that shows the details in description lists, grouped into "Basic info," "Shipping info," and "Payment info."

Change the support ticket page to a master-detail layout. The ticket list on the left shows only the title, customer, and status, and the right side shows the selected ticket's details and a reply box. The left list needs a selected state, and each column scrolls on its own.