When is a table the proper way to present data?

Question

UPDATE: added mockups

We are in the process of designing a web application interface for administering an online store. In such an interface there are pages for managing products, orders, customers, where each page has potentially a large number of items.

We are constantly going back-and-forth between the following two solutions:

a) Table pattern. Clicking on an item takes you to a new page showing the item. For example, while on /products page clicking on product 23 takes you to /products/23, showing you the product.

b) List pattern. Have a scrollable list of items on the left (~20% width) and on clicking an item, shows the item on the right (~80% width). In other words, the same pattern as email clients (Mac mail, Outlook, etc).

On one hand a table pattern makes it easier to view items at a glance, but harder to navigate to specific items. On the other hand, with a list pattern it becomes harder to view a specific column (for example, view prices of products), but much easier to navigate through items.

When is a table the "proper" pattern to use? Obviously the decision depends on the data being presented (how many columns, how many rows). What are the factors to consider when assessing the different solutions?

^{download bmml source – Wireframes created with Balsamiq Mockups}

^{download bmml source}

Answer 1

In this case I'd certainly use the table pattern. One of the most common things users will need to do is to find a particular product by SKU, title or category, all of which a table facilitates particularly if the columns are sortable by clicking on the column headings. In addition it makes things like looking for products that are low on stock easier. You could also add a filtering facility above the table if the collection of products is large enough to warrant it (over 1,000 say).

Ideally when the user clicks on the edit link and then saves their changes to the product details, you should take them back to the table in the same state as when they left - same sort order and same page if you're using pagination. This could be done by appending a query string to the edit links, or via cookies.

In addition, the table pattern (with a separate page for editing product details) is ideal for a web app since it gives each product editing page a unique URL. This will come in very handy when displaying things like order details, so you can just link the title of each product in the order to it's details page. When developing systems like this myself, I've also included "Edit this product" links on the front-end website when the user is logged in as an administrator, which is far simpler to do if you use the table pattern.

PS: You say that email clients use the list pattern - note that Gmail does not and is extemily quick and easy to use, more so than other web based email systems that try to use the list pattern to imitate desktop software.

Answer 2

The question asserts it is harder to navigate to specific items with a table, and easier to navigate through items with a list pattern.

On one hand a table pattern makes it easier to view items at a glance, but harder to navigate to specific items. On the other hand, with a list pattern it becomes harder to view a specific column (for example, view prices of products), but much easier to navigate through items.

I don't know the full circumstances of your scenario, but for what it's worth, I don't believe the assertion holds true if the table you use has sorting and filtering (whether selectbox or textbox) for every column and paging capabilities. (The example is not so pretty, but consider a table with these types of filters: http://www.datatables.net/examples/api/multi_filter_select.html).