Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

mockup

download bmml source

share|improve this question
    
Can you sketch up an example of the two patterns you're describing? A visual mockup would be easier to understand than just pure descriptions in this instance. There's a built-in wireframing tool in UX.StackExchange - use the Smiley Face icon in the edit to add a Balsamiq mockup to the question. –  JonW Mar 9 '12 at 9:28
    
will do ~~~.~~~ –  Zack Mar 9 '12 at 9:29
    
Couldn't you find a solution that is a combination of the two? Displaying a table to the left with the 3-4 most important variables and a specification are to the right that activates upon clicking an item in the list? –  AndroidHustle Mar 9 '12 at 9:39
    
@JonW included mockups. –  Zack Mar 9 '12 at 10:00
    
@AndroidHustle that's a nice alternative. However, it may be hard to show data from 3 columns in 250px. –  Zack Mar 9 '12 at 10:00
show 1 more comment

2 Answers

up vote 3 down vote accepted

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.

share|improve this answer
    
You are totally right about sorting. With a list it becomes harder (even with a sorting select-box on top of the list). That is exactly what is bothering us with a list: its hard to focus on a column. I guess we stick with a table for listing items. We could still put a scrollable list of products on the "View Product" page for easier navigation through products (without having to go back to the table to view another product). –  Zack Mar 9 '12 at 10:44
add comment

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).

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.